@keboola/design 15.1.0 → 16.0.0

package/dist/charts.js.map

@@ -1 +1 @@
-{"version":3,"file":"charts.js","names":["RechartsTooltip","RechartsLineChart","RechartsBarChart","RechartsAreaChart","RechartsPieChart"],"sources":["../src/blocks/Charts/ChartContainer.tsx","../src/blocks/Charts/ChartTooltip.tsx","../src/blocks/Charts/format.ts","../src/blocks/Charts/cartesian.tsx","../src/blocks/Charts/theme.ts","../src/blocks/Charts/LineChart.tsx","../src/blocks/Charts/BarChart.tsx","../src/blocks/Charts/AreaChart.tsx","../src/blocks/Charts/PieChart.tsx"],"sourcesContent":["import { type ComponentProps, type ReactElement } from 'react';\nimport { ResponsiveContainer } from 'recharts';\n\nimport { cn } from '../../utils';\n\n/** A length that recharts' `<ResponsiveContainer>` accepts: px number or `\"NN%\"`. */\nexport type ChartDimension = number | `${number}%`;\n\nexport type ChartContainerProps = Omit<ComponentProps<'div'>, 'children'> & {\n  /** Px number or percentage; charts have no intrinsic height. Defaults to 300. */\n  height?: ChartDimension;\n  /** Px number or percentage. Defaults to `\"100%\"`. */\n  width?: ChartDimension;\n  /** A single recharts chart element. */\n  children: ReactElement;\n};\n\n/** Responsive frame that themes the chart's axis, grid and cursor with semantic tokens via CSS. */\nexport const ChartContainer = ({\n  height = 300,\n  width = '100%',\n  className,\n  children,\n  ...props\n}: ChartContainerProps) => (\n  <div\n    className={cn(\n      'tw:text-xs',\n      'tw:[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground',\n      'tw:[&_.recharts-polar-angle-axis-tick_text]:fill-muted-foreground',\n      'tw:[&_.recharts-label]:fill-muted-foreground',\n      'tw:[&_.recharts-legend-item-text]:!text-muted-foreground',\n      'tw:[&_.recharts-cartesian-grid_line]:stroke-border/60',\n      'tw:[&_.recharts-cartesian-axis-line]:stroke-border',\n      'tw:[&_.recharts-cartesian-axis-tick-line]:stroke-border',\n      'tw:[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border',\n      'tw:[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted/60',\n      'tw:[&_.recharts-surface]:outline-hidden',\n      className,\n    )}\n    {...props}\n  >\n    <ResponsiveContainer width={width} height={height}>\n      {children}\n    </ResponsiveContainer>\n  </div>\n);\n","import { type ComponentProps } from 'react';\nimport { Tooltip as RechartsTooltip } from 'recharts';\n\nimport { cn } from '../../utils';\n\ntype TooltipPayloadEntry = {\n  name?: string | number;\n  value?: string | number;\n  color?: string;\n  dataKey?: string | number;\n};\n\ntype ChartTooltipContentProps = {\n  active?: boolean;\n  label?: string | number;\n  payload?: TooltipPayloadEntry[];\n  /** Format a value for display (e.g. currency, percentage). */\n  valueFormatter?: (value: string | number, name: string) => string;\n  className?: string;\n};\n\n/**\n * Brand-themed tooltip body. Surfaces (background, border, text) resolve from\n * semantic tokens, and each series swatch reuses the recharts-provided series\n * `color` (already a `--chart-*` token from this package's charts).\n */\nexport const ChartTooltipContent = ({\n  active,\n  label,\n  payload,\n  valueFormatter,\n  className,\n}: ChartTooltipContentProps) => {\n  if (!active || !payload?.length) return null;\n\n  return (\n    <div\n      className={cn(\n        'tw:min-w-32 tw:rounded-md tw:border tw:border-border tw:bg-popover tw:px-2.5 tw:py-1.5 tw:text-xs tw:text-popover-foreground tw:shadow-md',\n        className,\n      )}\n    >\n      {label != null && <div className=\"tw:mb-1 tw:font-medium\">{label}</div>}\n      <div className=\"tw:flex tw:flex-col tw:gap-1\">\n        {payload.map((entry) => {\n          const name = String(entry.name ?? entry.dataKey ?? '');\n          const value = entry.value;\n          // Missing / non-numeric values render blank rather than \"NaN\"/\"0\";\n          // only well-formed numbers reach the formatter.\n          const hasNumber = value != null && value !== '' && Number.isFinite(Number(value));\n          const display = hasNumber\n            ? valueFormatter\n              ? valueFormatter(Number(value), name)\n              : String(Number(value))\n            : (value ?? '');\n          return (\n            <div\n              key={String(entry.dataKey ?? name)}\n              className=\"tw:flex tw:items-center tw:justify-between tw:gap-3\"\n            >\n              <span className=\"tw:flex tw:items-center tw:gap-1.5\">\n                <span\n                  className=\"tw:size-2 tw:shrink-0 tw:rounded-[2px]\"\n                  style={{ backgroundColor: entry.color }}\n                />\n                <span className=\"tw:text-muted-foreground\">{name}</span>\n              </span>\n              <span className=\"tw:font-medium tw:tabular-nums\">{display}</span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport type ChartTooltipProps = ComponentProps<typeof RechartsTooltip> & {\n  valueFormatter?: (value: string | number, name: string) => string;\n};\n\n/**\n * Drop-in recharts `<Tooltip>` pre-wired to render {@link ChartTooltipContent}.\n * Each chart mounts one by default; pass `showTooltip={false}` on the chart to omit.\n */\nexport const ChartTooltip = ({ valueFormatter, ...props }: ChartTooltipProps) => (\n  <RechartsTooltip\n    cursor={{ strokeWidth: 1 }}\n    content={<ChartTooltipContent valueFormatter={valueFormatter} />}\n    {...props}\n  />\n);\n","/**\n * Apply a numeric `valueFormatter` safely. recharts hands axis ticks and\n * tooltip payload values as `string | number | null | undefined`, and partial\n * or streaming data can carry gaps. Coercing those straight through\n * `Number(value)` would render `$0` (empty string → 0) or `$NaN` (non-numeric),\n * so a missing / non-finite value is rendered as an empty string instead of\n * being fed to the formatter.\n */\nexport const formatValue = (\n  value: string | number | null | undefined,\n  valueFormatter?: (value: number) => string,\n): string => {\n  if (value == null || value === '') return '';\n  const num = Number(value);\n  if (!Number.isFinite(num)) return '';\n  return valueFormatter ? valueFormatter(num) : String(num);\n};\n","import { CartesianGrid, Legend, XAxis, YAxis } from 'recharts';\n\nimport { ChartTooltip } from './ChartTooltip';\nimport { formatValue } from './format';\nimport { type CartesianChartProps, type ChartAxisDomain } from './types';\n\nconst AXIS_PROPS = {\n  tickLine: false,\n  axisLine: false,\n  tick: { fontSize: 11 },\n} as const;\n\n/**\n * The grid + axes + tooltip + legend shared by the line, bar, and area charts.\n * Colors are applied via `ChartContainer`'s CSS chrome, not inline props, so\n * these stay brand-safe.\n */\nexport const cartesianChrome = ({\n  xKey,\n  showGrid = true,\n  showYAxis = true,\n  showLegend = false,\n  showTooltip = true,\n  valueFormatter,\n  yDomain,\n}: Pick<\n  CartesianChartProps,\n  'xKey' | 'showGrid' | 'showYAxis' | 'showLegend' | 'showTooltip' | 'valueFormatter'\n> & { yDomain?: ChartAxisDomain }) => (\n  <>\n    {showGrid && <CartesianGrid strokeDasharray=\"3 3\" vertical={false} />}\n    <XAxis dataKey={xKey} {...AXIS_PROPS} />\n    {/* A domain has to reach recharts through a mounted <YAxis>, so a chart that\n        hides its axis but sets one still gets the element — hidden, and taking\n        no layout width. Without a domain the hidden case renders nothing, as\n        before, and recharts falls back to its implicit axis. */}\n    {(showYAxis || yDomain !== undefined) && (\n      <YAxis\n        hide={!showYAxis}\n        domain={yDomain}\n        width={48}\n        {...AXIS_PROPS}\n        tickFormatter={\n          valueFormatter\n            ? (value: string | number) => formatValue(value, valueFormatter)\n            : undefined\n        }\n      />\n    )}\n    {showTooltip && (\n      <ChartTooltip\n        valueFormatter={valueFormatter ? (value) => formatValue(value, valueFormatter) : undefined}\n      />\n    )}\n    {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}\n  </>\n);\n","/**\n * Chart series colors, from the `--chart-1` … `--chart-5` CSS variables only.\n *\n * - Never inline hex: the variables follow color scheme and brand (`colors.chart` in\n *   `@keboola/brand-registry`, emitted by `ThemeProvider`).\n * - The variables hold raw `R G B` channels, so they are wrapped in `rgb(...)` for recharts.\n */\nconst CHART_TOKEN_COUNT = 5;\n\n/** Number of the semantic chart token (`1`–`5`) a series maps to. */\nexport type ChartColorToken = 1 | 2 | 3 | 4 | 5;\n\n/** The CSS color for a 0-based series `index`, wrapping around the palette. */\nexport const chartTokenColor = (index: number): string => {\n  // Euclidean modulo: negative indices still land in 1..CHART_TOKEN_COUNT.\n  const slot = (((index % CHART_TOKEN_COUNT) + CHART_TOKEN_COUNT) % CHART_TOKEN_COUNT) + 1;\n  return `rgb(var(--chart-${slot}))`;\n};\n\n/** Resolve an explicit token (1–5) or fall back to the series position. */\nexport const resolveSeriesColor = (index: number, token?: ChartColorToken): string =>\n  chartTokenColor(token ? token - 1 : index);\n","import { Line, LineChart as RechartsLineChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps, type ChartAxisDomain } from './types';\n\nexport type LineChartProps = CartesianChartProps & {\n  /**\n   * Y-axis `[min, max]`; defaults to a zero baseline. Line-only: a truncated baseline misstates\n   * bar/area lengths. For comparing close series far from zero, not judging one magnitude.\n   */\n  yDomain?: ChartAxisDomain;\n};\n\n/**\n * A themed multi-series line chart.\n *\n * - Series colors come from the `--chart-*` palette (by order, or `series[].color`).\n * - Mounts its own {@link ChartContainer}.\n */\nexport const LineChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  ...chrome\n}: LineChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsLineChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => {\n        const color = resolveSeriesColor(index, s.color);\n        return (\n          <Line\n            key={s.dataKey}\n            type=\"monotone\"\n            dataKey={s.dataKey}\n            name={s.name ?? s.dataKey}\n            stroke={color}\n            strokeWidth={2}\n            dot={{ r: 3, fill: color, stroke: color }}\n            activeDot={{ r: 4 }}\n            isAnimationActive={false}\n          />\n        );\n      })}\n    </RechartsLineChart>\n  </ChartContainer>\n);\n","import { Bar, BarChart as RechartsBarChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\nexport type BarChartProps = CartesianChartProps & {\n  /** Stack the series into a single bar per category. Defaults to grouped. */\n  stacked?: boolean;\n};\n\n/**\n * A themed multi-series bar chart. Series colors come from the semantic\n * `--chart-*` palette (by order, or pinned via `series[].color`), which\n * follows the active color scheme and the active brand's `colors.chart` when it\n * defines one. Pass `stacked` to stack the series instead of grouping them.\n *\n * @example\n * <BarChart data={data} xKey=\"month\" series={[{ dataKey: 'revenue' }]} />\n */\nexport const BarChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  stacked = false,\n  ...chrome\n}: BarChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsBarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => (\n        <Bar\n          key={s.dataKey}\n          dataKey={s.dataKey}\n          name={s.name ?? s.dataKey}\n          fill={resolveSeriesColor(index, s.color)}\n          radius={stacked ? 0 : [4, 4, 0, 0]}\n          stackId={stacked ? 'stack' : undefined}\n          isAnimationActive={false}\n        />\n      ))}\n    </RechartsBarChart>\n  </ChartContainer>\n);\n","import { Area, AreaChart as RechartsAreaChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\nexport type AreaChartProps = CartesianChartProps & {\n  /** Stack the series into a cumulative area. Defaults to overlaid. */\n  stacked?: boolean;\n};\n\n/**\n * Themed multi-series area chart.\n *\n * - Colors come from `--chart-*` by series order, or `series[].color`.\n * - The palette follows the color scheme and the brand's `colors.chart`.\n *\n * @example\n * <AreaChart data={data} xKey=\"month\" series={[{ dataKey: 'revenue' }]} />\n */\nexport const AreaChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  stacked = false,\n  ...chrome\n}: AreaChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsAreaChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => {\n        const color = resolveSeriesColor(index, s.color);\n        return (\n          <Area\n            key={s.dataKey}\n            type=\"monotone\"\n            dataKey={s.dataKey}\n            name={s.name ?? s.dataKey}\n            stroke={color}\n            fill={color}\n            fillOpacity={0.15}\n            strokeWidth={2}\n            stackId={stacked ? 'stack' : undefined}\n            isAnimationActive={false}\n          />\n        );\n      })}\n    </RechartsAreaChart>\n  </ChartContainer>\n);\n","import { Cell, Legend, Pie, PieChart as RechartsPieChart } from 'recharts';\n\nimport { ChartContainer, type ChartDimension } from './ChartContainer';\nimport { ChartTooltip } from './ChartTooltip';\nimport { formatValue } from './format';\nimport { chartTokenColor } from './theme';\nimport { type ChartDatum } from './types';\n\nexport type PieChartProps = {\n  /** The rows to plot — one sector per row. */\n  data: ChartDatum[];\n  /** Key into each datum for the sector label. */\n  nameKey: string;\n  /** Key into each datum for the sector value. */\n  dataKey: string;\n  /** Render as a donut with a hole of this inner radius (px or %). */\n  innerRadius?: ChartDimension;\n  /** Height as a px number or percentage. Defaults to 300. */\n  height?: ChartDimension;\n  /** Width as a px number or percentage. Defaults to `\"100%\"`. */\n  width?: ChartDimension;\n  /** Show a legend below the chart. Defaults to `true`. */\n  showLegend?: boolean;\n  /** Show the hover tooltip. Defaults to `true`. */\n  showTooltip?: boolean;\n  /** Format a sector value for the tooltip. */\n  valueFormatter?: (value: number) => string;\n  className?: string;\n};\n\n/**\n * A themed pie / donut chart. Each sector cycles through the semantic\n * `--chart-*` palette, which follows the active color scheme and the\n * active brand's `colors.chart` when it defines one. Pass `innerRadius` to make\n * a donut.\n *\n * @example\n * <PieChart data={data} nameKey=\"engine\" dataKey=\"rows\" innerRadius=\"60%\" />\n */\nexport const PieChart = ({\n  data,\n  nameKey,\n  dataKey,\n  innerRadius = 0,\n  height,\n  width,\n  className,\n  showLegend = true,\n  showTooltip = true,\n  valueFormatter,\n}: PieChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsPieChart>\n      {showTooltip && (\n        <ChartTooltip\n          valueFormatter={\n            valueFormatter ? (value) => formatValue(value, valueFormatter) : undefined\n          }\n        />\n      )}\n      {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}\n      <Pie\n        data={data}\n        nameKey={nameKey}\n        dataKey={dataKey}\n        innerRadius={innerRadius}\n        // Separate sectors with the brand surface color rather than recharts'\n        // hardcoded white default.\n        stroke=\"rgb(var(--background))\"\n        isAnimationActive={false}\n      >\n        {data.map((datum, index) => (\n          <Cell key={String(datum[nameKey] ?? index)} fill={chartTokenColor(index)} />\n        ))}\n      </Pie>\n    </RechartsPieChart>\n  </ChartContainer>\n);\n"],"mappings":"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"}
+{"version":3,"file":"charts.js","names":["RechartsTooltip","RechartsLineChart","RechartsBarChart","RechartsAreaChart","RechartsPieChart"],"sources":["../src/blocks/Charts/ChartContainer.tsx","../src/blocks/Charts/ChartTooltip.tsx","../src/blocks/Charts/format.ts","../src/blocks/Charts/cartesian.tsx","../src/blocks/Charts/theme.ts","../src/blocks/Charts/LineChart.tsx","../src/blocks/Charts/BarChart.tsx","../src/blocks/Charts/AreaChart.tsx","../src/blocks/Charts/PieChart.tsx"],"sourcesContent":["import { type ComponentProps, type ReactElement } from 'react';\nimport { ResponsiveContainer } from 'recharts';\n\nimport { cn } from '../../utils';\n\n/** A length that recharts' `<ResponsiveContainer>` accepts: px number or `\"NN%\"`. */\nexport type ChartDimension = number | `${number}%`;\n\nexport type ChartContainerProps = Omit<ComponentProps<'div'>, 'children'> & {\n  /** Px number or percentage; charts have no intrinsic height. Defaults to 300. */\n  height?: ChartDimension;\n  /** Px number or percentage. Defaults to `\"100%\"`. */\n  width?: ChartDimension;\n  /** A single recharts chart element. */\n  children: ReactElement;\n};\n\n/** Responsive frame that themes the chart's axis, grid and cursor with semantic tokens via CSS. */\nexport const ChartContainer = ({\n  height = 300,\n  width = '100%',\n  className,\n  children,\n  ...props\n}: ChartContainerProps) => (\n  <div\n    className={cn(\n      'tw:text-xs',\n      'tw:[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground',\n      'tw:[&_.recharts-polar-angle-axis-tick_text]:fill-muted-foreground',\n      'tw:[&_.recharts-label]:fill-muted-foreground',\n      'tw:[&_.recharts-legend-item-text]:!text-muted-foreground',\n      'tw:[&_.recharts-cartesian-grid_line]:stroke-border/60',\n      'tw:[&_.recharts-cartesian-axis-line]:stroke-border',\n      'tw:[&_.recharts-cartesian-axis-tick-line]:stroke-border',\n      'tw:[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border',\n      'tw:[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted/60',\n      'tw:[&_.recharts-surface]:outline-hidden',\n      className,\n    )}\n    {...props}\n  >\n    <ResponsiveContainer width={width} height={height}>\n      {children}\n    </ResponsiveContainer>\n  </div>\n);\n","import { type ComponentProps } from 'react';\nimport { Tooltip as RechartsTooltip } from 'recharts';\n\nimport { cn } from '../../utils';\n\ntype TooltipPayloadEntry = {\n  name?: string | number;\n  value?: string | number;\n  color?: string;\n  dataKey?: string | number;\n};\n\ntype ChartTooltipContentProps = {\n  active?: boolean;\n  label?: string | number;\n  payload?: TooltipPayloadEntry[];\n  /** Format a value for display (e.g. currency, percentage). */\n  valueFormatter?: (value: string | number, name: string) => string;\n  className?: string;\n};\n\n/**\n * Brand-themed tooltip body. Surfaces (background, border, text) resolve from\n * semantic tokens, and each series swatch reuses the recharts-provided series\n * `color` (already a `--chart-*` token from this package's charts).\n */\nexport const ChartTooltipContent = ({\n  active,\n  label,\n  payload,\n  valueFormatter,\n  className,\n}: ChartTooltipContentProps) => {\n  if (!active || !payload?.length) return null;\n\n  return (\n    <div\n      className={cn(\n        'tw:min-w-32 tw:rounded-md tw:border tw:border-border tw:bg-popover tw:px-2.5 tw:py-1.5 tw:text-xs tw:text-popover-foreground tw:shadow-md',\n        className,\n      )}\n    >\n      {label != null && <div className=\"tw:mb-1 tw:font-medium\">{label}</div>}\n      <div className=\"tw:flex tw:flex-col tw:gap-1\">\n        {payload.map((entry) => {\n          const name = String(entry.name ?? entry.dataKey ?? '');\n          const value = entry.value;\n          // Missing / non-numeric values render blank rather than \"NaN\"/\"0\";\n          // only well-formed numbers reach the formatter.\n          const hasNumber = value != null && value !== '' && Number.isFinite(Number(value));\n          const display = hasNumber\n            ? valueFormatter\n              ? valueFormatter(Number(value), name)\n              : String(Number(value))\n            : (value ?? '');\n          return (\n            <div\n              key={String(entry.dataKey ?? name)}\n              className=\"tw:flex tw:items-center tw:justify-between tw:gap-3\"\n            >\n              <span className=\"tw:flex tw:items-center tw:gap-1.5\">\n                <span\n                  className=\"tw:size-2 tw:shrink-0 tw:rounded-[2px]\"\n                  style={{ backgroundColor: entry.color }}\n                />\n                <span className=\"tw:text-muted-foreground\">{name}</span>\n              </span>\n              <span className=\"tw:font-medium tw:tabular-nums\">{display}</span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport type ChartTooltipProps = ComponentProps<typeof RechartsTooltip> & {\n  valueFormatter?: (value: string | number, name: string) => string;\n};\n\n/**\n * Drop-in recharts `<Tooltip>` pre-wired to render {@link ChartTooltipContent}.\n * Each chart mounts one by default; pass `showTooltip={false}` on the chart to omit.\n */\nexport const ChartTooltip = ({ valueFormatter, ...props }: ChartTooltipProps) => (\n  <RechartsTooltip\n    cursor={{ strokeWidth: 1 }}\n    content={<ChartTooltipContent valueFormatter={valueFormatter} />}\n    {...props}\n  />\n);\n","/**\n * Apply a numeric `valueFormatter` safely. recharts hands axis ticks and\n * tooltip payload values as `string | number | null | undefined`, and partial\n * or streaming data can carry gaps. Coercing those straight through\n * `Number(value)` would render `$0` (empty string → 0) or `$NaN` (non-numeric),\n * so a missing / non-finite value is rendered as an empty string instead of\n * being fed to the formatter.\n */\nexport const formatValue = (\n  value: string | number | null | undefined,\n  valueFormatter?: (value: number) => string,\n): string => {\n  if (value == null || value === '') return '';\n  const num = Number(value);\n  if (!Number.isFinite(num)) return '';\n  return valueFormatter ? valueFormatter(num) : String(num);\n};\n","import { CartesianGrid, Legend, XAxis, YAxis } from 'recharts';\n\nimport { ChartTooltip } from './ChartTooltip';\nimport { formatValue } from './format';\nimport { type CartesianChartProps, type ChartAxisDomain } from './types';\n\nconst AXIS_PROPS = {\n  tickLine: false,\n  axisLine: false,\n  tick: { fontSize: 11 },\n} as const;\n\n/**\n * The grid + axes + tooltip + legend shared by the line, bar, and area charts.\n * Colors are applied via `ChartContainer`'s CSS chrome, not inline props, so\n * these stay brand-safe.\n */\nexport const cartesianChrome = ({\n  xKey,\n  showGrid = true,\n  showYAxis = true,\n  showLegend = false,\n  showTooltip = true,\n  valueFormatter,\n  yDomain,\n}: Pick<\n  CartesianChartProps,\n  'xKey' | 'showGrid' | 'showYAxis' | 'showLegend' | 'showTooltip' | 'valueFormatter'\n> & { yDomain?: ChartAxisDomain }) => (\n  <>\n    {showGrid && <CartesianGrid strokeDasharray=\"3 3\" vertical={false} />}\n    <XAxis dataKey={xKey} {...AXIS_PROPS} />\n    {/* A domain has to reach recharts through a mounted <YAxis>, so a chart that\n        hides its axis but sets one still gets the element — hidden, and taking\n        no layout width. Without a domain the hidden case renders nothing, as\n        before, and recharts falls back to its implicit axis. */}\n    {(showYAxis || yDomain !== undefined) && (\n      <YAxis\n        hide={!showYAxis}\n        domain={yDomain}\n        width={48}\n        {...AXIS_PROPS}\n        tickFormatter={\n          valueFormatter\n            ? (value: string | number) => formatValue(value, valueFormatter)\n            : undefined\n        }\n      />\n    )}\n    {showTooltip && (\n      <ChartTooltip\n        valueFormatter={valueFormatter ? (value) => formatValue(value, valueFormatter) : undefined}\n      />\n    )}\n    {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}\n  </>\n);\n","/**\n * Chart series colors, from the `--chart-1` … `--chart-5` CSS variables only.\n *\n * - Never inline hex: the variables follow color scheme and brand (`colors.chart` in\n *   `@keboola/brand-registry`, emitted by `ThemeProvider`).\n * - The variables hold raw `R G B` channels, so they are wrapped in `rgb(...)` for recharts.\n */\nconst CHART_TOKEN_COUNT = 5;\n\n/** Number of the semantic chart token (`1`–`5`) a series maps to. */\nexport type ChartColorToken = 1 | 2 | 3 | 4 | 5;\n\n/** The CSS color for a 0-based series `index`, wrapping around the palette. */\nexport const chartTokenColor = (index: number): string => {\n  // Euclidean modulo: negative indices still land in 1..CHART_TOKEN_COUNT.\n  const slot = (((index % CHART_TOKEN_COUNT) + CHART_TOKEN_COUNT) % CHART_TOKEN_COUNT) + 1;\n  return `rgb(var(--chart-${slot}))`;\n};\n\n/** Resolve an explicit token (1–5) or fall back to the series position. */\nexport const resolveSeriesColor = (index: number, token?: ChartColorToken): string =>\n  chartTokenColor(token ? token - 1 : index);\n","import { Line, LineChart as RechartsLineChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps, type ChartAxisDomain } from './types';\n\nexport type LineChartProps = CartesianChartProps & {\n  /**\n   * Y-axis `[min, max]`; defaults to a zero baseline. Line-only: a truncated baseline misstates\n   * bar/area lengths. For comparing close series far from zero, not judging one magnitude.\n   */\n  yDomain?: ChartAxisDomain;\n};\n\n/**\n * A themed multi-series line chart.\n *\n * - Series colors come from the `--chart-*` palette (by order, or `series[].color`).\n * - Mounts its own {@link ChartContainer}.\n */\nexport const LineChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  ...chrome\n}: LineChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsLineChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => {\n        const color = resolveSeriesColor(index, s.color);\n        return (\n          <Line\n            key={s.dataKey}\n            type=\"monotone\"\n            dataKey={s.dataKey}\n            name={s.name ?? s.dataKey}\n            stroke={color}\n            strokeWidth={2}\n            dot={{ r: 3, fill: color, stroke: color }}\n            activeDot={{ r: 4 }}\n            isAnimationActive={false}\n          />\n        );\n      })}\n    </RechartsLineChart>\n  </ChartContainer>\n);\n","import { Bar, BarChart as RechartsBarChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\nexport type BarChartProps = CartesianChartProps & {\n  /** Stack the series into a single bar per category. Defaults to grouped. */\n  stacked?: boolean;\n};\n\n/**\n * A themed multi-series bar chart. Series colors come from the semantic\n * `--chart-*` palette (by order, or pinned via `series[].color`), which\n * follows the active color scheme and the active brand's `colors.chart` when it\n * defines one. Pass `stacked` to stack the series instead of grouping them.\n *\n * @example\n * <BarChart data={data} xKey=\"month\" series={[{ dataKey: 'revenue' }]} />\n */\nexport const BarChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  stacked = false,\n  ...chrome\n}: BarChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsBarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => (\n        <Bar\n          key={s.dataKey}\n          dataKey={s.dataKey}\n          name={s.name ?? s.dataKey}\n          fill={resolveSeriesColor(index, s.color)}\n          radius={stacked ? 0 : [4, 4, 0, 0]}\n          stackId={stacked ? 'stack' : undefined}\n          isAnimationActive={false}\n        />\n      ))}\n    </RechartsBarChart>\n  </ChartContainer>\n);\n","import { Area, AreaChart as RechartsAreaChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\nexport type AreaChartProps = CartesianChartProps & {\n  /** Stack the series into a cumulative area. Defaults to overlaid. */\n  stacked?: boolean;\n};\n\n/**\n * Themed multi-series area chart.\n *\n * - Colors come from `--chart-*` by series order, or `series[].color`.\n * - The palette follows the color scheme and the brand's `colors.chart`.\n *\n * @example\n * <AreaChart data={data} xKey=\"month\" series={[{ dataKey: 'revenue' }]} />\n */\nexport const AreaChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  stacked = false,\n  ...chrome\n}: AreaChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsAreaChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => {\n        const color = resolveSeriesColor(index, s.color);\n        return (\n          <Area\n            key={s.dataKey}\n            type=\"monotone\"\n            dataKey={s.dataKey}\n            name={s.name ?? s.dataKey}\n            stroke={color}\n            fill={color}\n            fillOpacity={0.15}\n            strokeWidth={2}\n            stackId={stacked ? 'stack' : undefined}\n            isAnimationActive={false}\n          />\n        );\n      })}\n    </RechartsAreaChart>\n  </ChartContainer>\n);\n","import { Cell, Legend, Pie, PieChart as RechartsPieChart } from 'recharts';\n\nimport { ChartContainer, type ChartDimension } from './ChartContainer';\nimport { ChartTooltip } from './ChartTooltip';\nimport { formatValue } from './format';\nimport { chartTokenColor } from './theme';\nimport { type ChartDatum } from './types';\n\nexport type PieChartProps = {\n  /** The rows to plot — one sector per row. */\n  data: ChartDatum[];\n  /** Key into each datum for the sector label. */\n  nameKey: string;\n  /** Key into each datum for the sector value. */\n  dataKey: string;\n  /** Render as a donut with a hole of this inner radius (px or %). */\n  innerRadius?: ChartDimension;\n  /** Height as a px number or percentage. Defaults to 300. */\n  height?: ChartDimension;\n  /** Width as a px number or percentage. Defaults to `\"100%\"`. */\n  width?: ChartDimension;\n  /** Show a legend below the chart. Defaults to `true`. */\n  showLegend?: boolean;\n  /** Show the hover tooltip. Defaults to `true`. */\n  showTooltip?: boolean;\n  /** Format a sector value for the tooltip. */\n  valueFormatter?: (value: number) => string;\n  className?: string;\n};\n\n/**\n * A themed pie / donut chart. Each sector cycles through the semantic\n * `--chart-*` palette, which follows the active color scheme and the\n * active brand's `colors.chart` when it defines one. Pass `innerRadius` to make\n * a donut.\n *\n * @example\n * <PieChart data={data} nameKey=\"engine\" dataKey=\"rows\" innerRadius=\"60%\" />\n */\nexport const PieChart = ({\n  data,\n  nameKey,\n  dataKey,\n  innerRadius = 0,\n  height,\n  width,\n  className,\n  showLegend = true,\n  showTooltip = true,\n  valueFormatter,\n}: PieChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsPieChart>\n      {showTooltip && (\n        <ChartTooltip\n          valueFormatter={\n            valueFormatter ? (value) => formatValue(value, valueFormatter) : undefined\n          }\n        />\n      )}\n      {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}\n      <Pie\n        data={data}\n        nameKey={nameKey}\n        dataKey={dataKey}\n        innerRadius={innerRadius}\n        // Separate sectors with the brand surface color rather than recharts'\n        // hardcoded white default.\n        stroke=\"rgb(var(--background))\"\n        isAnimationActive={false}\n      >\n        {data.map((datum, index) => (\n          <Cell key={String(datum[nameKey] ?? index)} fill={chartTokenColor(index)} />\n        ))}\n      </Pie>\n    </RechartsPieChart>\n  </ChartContainer>\n);\n"],"mappings":"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"}

package/dist/{classNames-DcGnTh2N.js → classNames-DkX30VJU.js}

@@ -1,6 +1,6 @@
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
-//#region src/utils/classNames.ts
+// src/utils/classNames.ts
 const twMerge = extendTailwindMerge({
 	prefix: "tw",
 	extend: {
@@ -15,7 +15,6 @@ const twMerge = extendTailwindMerge({
 	}
 });
 const cn = (...classes) => twMerge(clsx(...classes));
-//#endregion
 export { cn };
 
-//# sourceMappingURL=classNames-DcGnTh2N.js.map
+//# sourceMappingURL=classNames-DkX30VJU.js.map

package/dist/{classNames-DcGnTh2N.js.map → classNames-DkX30VJU.js.map}

@@ -1 +1 @@
-{"version":3,"file":"classNames-DcGnTh2N.js","names":[],"sources":["../src/utils/classNames.ts"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n// tailwind-merge v3 (Tailwind v4): the prefix drops the trailing separator —\n// `tw:` → `tw` (the `:` separator is implied).\n// `extend` registers the package's own scale names, so a caller's `className` replaces them.\nconst twMerge = extendTailwindMerge({\n  prefix: 'tw',\n  extend: {\n    theme: { radius: ['card', 'popover', 'modal', 'sheet', 'toast'] },\n    classGroups: { opacity: [{ opacity: ['disabled'] }] },\n  },\n});\n\nexport const cn = (...classes: ClassValue[]) => twMerge(clsx(...classes));\n"],"mappings":";;;AAMA,MAAM,UAAU,oBAAoB;CAClC,QAAQ;CACR,QAAQ;EACN,OAAO,EAAE,QAAQ;GAAC;GAAQ;GAAW;GAAS;GAAS;EAAO,EAAE;EAChE,aAAa,EAAE,SAAS,CAAC,EAAE,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE;CACtD;AACF,CAAC;AAED,MAAa,MAAM,GAAG,YAA0B,QAAQ,KAAK,GAAG,OAAO,CAAC"}
+{"version":3,"file":"classNames-DkX30VJU.js","names":[],"sources":["../src/utils/classNames.ts"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n// tailwind-merge v3 (Tailwind v4): the prefix drops the trailing separator —\n// `tw:` → `tw` (the `:` separator is implied).\n// `extend` registers the package's own scale names, so a caller's `className` replaces them.\nconst twMerge = extendTailwindMerge({\n  prefix: 'tw',\n  extend: {\n    theme: { radius: ['card', 'popover', 'modal', 'sheet', 'toast'] },\n    classGroups: { opacity: [{ opacity: ['disabled'] }] },\n  },\n});\n\nexport const cn = (...classes: ClassValue[]) => twMerge(clsx(...classes));\n"],"mappings":";;;AAMA,MAAM,UAAU,oBAAoB;CAClC,QAAQ;CACR,QAAQ;EACN,OAAO,EAAE,QAAQ;GAAC;GAAQ;GAAW;GAAS;GAAS;EAAO,EAAE;EAChE,aAAa,EAAE,SAAS,CAAC,EAAE,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE;CACtD;AACF,CAAC;AAED,MAAa,MAAM,GAAG,YAA0B,QAAQ,KAAK,GAAG,OAAO,CAAC"}

package/dist/editors.d.ts

@@ -1,5 +1,5 @@
-import "./types-BPcAjMG0.js";
-import { ChangeClassification, FieldItemProps, MergeConflict } from "./FieldItem-CPN1xjN5.js";
+import "./types-CsZuwfxc.js";
+import { ChangeClassification, FieldItemProps, MergeConflict } from "./FieldItem-fqm3CNR8.js";
 import { ComponentProps, ReactNode } from "react";
 import { CompletionSource } from "@codemirror/autocomplete";
 import { EditorView } from "@codemirror/view";
@@ -9,18 +9,13 @@ import { StreamLanguage } from "@codemirror/language";
 import "@codemirror/lint";
 import { SqlDialectName, SqlDialectName as SqlDialectName$1 } from "@keboola/codemirror-lang-sql";
 import "@codemirror/state";
-//#region src/components/CodeEditor/helpers.d.ts
 declare const LANGUAGE_MODES: readonly ['application/json', 'text/plain', 'text/x-python', 'text/x-sql', 'text/x-mysql', 'text/x-pgsql', 'text/x-mssql', 'text/x-sfsql', 'text/x-bqsql', 'text/x-plsql', 'text/x-rsrc', 'text/x-sh', 'text/x-toml', 'text/jsonnet', 'text/x-dbt', 'text/javascript', 'text/typescript'];
 type LANGUAGE_MODE = (typeof LANGUAGE_MODES)[number];
 declare const isLanguageMode: (mode: string) => mode is LANGUAGE_MODE;
-//#endregion
-//#region src/components/CodeEditor/variableCompletion.d.ts
 type EditorVariable = {
   name: string;
   value?: string;
 };
-//#endregion
-//#region src/components/CodeEditor/CodeEditor.d.ts
 type Props$3 = {
   value: string;
   previousValue?: string;
@@ -75,8 +70,6 @@ type Props$3 = {
   onChange: (value: string) => void;
 });
 declare const CodeEditor: ({ value, previousValue, onChange, variant, mode, placeholder, ariaLabel, ariaLabelledBy, ariaDescribedBy, ariaInvalid, ariaRequired, allowBlankDocument, onBlur, searchQuery, searchMatchIndex, readOnly, inputLocked, autocompletions, completionSource, variables, withCompletions, extraKeys, withToggleCommentHint, withAutofocus, withLineNumbers, withLineWrapping, withCollapseUnchanged, withCopyButton, completeAny, help, helpPostfix, renderAdditionalButtons, className }: Props$3) => import("react").JSX.Element;
-//#endregion
-//#region src/components/CodeEditor/highlighting.d.ts
 type HighlightedLines = {
   from: number;
   to: number;
@@ -89,8 +82,6 @@ type HighlightedLines = {
     to: number;
   };
 } | null;
-//#endregion
-//#region src/components/CodeEditor/SqlEditor.d.ts
 type Props$2 = {
   value: string;
   onChange?: (value: string) => void;
@@ -121,8 +112,6 @@ type Props$2 = {
   dialect?: SqlDialectName$1;
 };
 declare const SqlEditor: ({ value, onChange, onSelectionChange, onCreateEditor, onDestroyEditor, onBlurEditor, onFocusEditor, placeholder, searchQuery, searchMatchIndex, readOnly, queryParser, autoFocus, lineNumbers, className, schema, completionSource, variables, defaultDatabase, defaultSchema, highlightLines, dialect }: Props$2) => import("react").JSX.Element;
-//#endregion
-//#region src/components/MergeEditor/MergeEditor.d.ts
 type Props$1 = {
   mergeValue: string;
   handleMergeChange: (value: string) => void;
@@ -151,8 +140,6 @@ type Props$1 = {
   rightDeleted?: boolean;
 };
 declare const MergeEditor: ({ mergeValue, handleMergeChange, leftText, rightText, leftConflicts, rightConflicts, leftHighlightedLines, rightHighlightedLines, leftClassification, rightClassification, mergeHighlightedLines, mergeClassification, acceptLeft, acceptRight, dismissLeft, dismissRight, leftHeader, middleHeader, middleHeaderClassName, middleClassName, rightHeader, className, leftDeleted, rightDeleted }: Props$1) => import("react").JSX.Element;
-//#endregion
-//#region src/components/CodeEditor/CodeEditorField.d.ts
 type Props = FieldItemProps & Omit<ComponentProps<typeof CodeEditor>, 'value' | 'onChange' | 'onBlur' | 'ariaLabel' | 'ariaLabelledBy' | 'ariaDescribedBy' | 'ariaInvalid' | 'ariaRequired' | 'readOnly' | 'className' | 'allowBlankDocument'> & {
   /** Styles the editor box; `className` styles the field frame. */
   editorClassName?: string;
@@ -166,6 +153,5 @@ type Props = FieldItemProps & Omit<ComponentProps<typeof CodeEditor>, 'value' |
  * - Labelled via `aria-labelledby`: CodeMirror's `div[role="textbox"]` is not labelable.
  */
 declare const CodeEditorField: ({ label, action, required, requiredMark, help, tooltip, className, 'aria-describedby': ariaDescribedBy, editorClassName, variant, ...editorProps }: Props) => import("react").JSX.Element;
-//#endregion
 export { CodeEditor, CodeEditorField, type EditorVariable, type LANGUAGE_MODE, LANGUAGE_MODES, MergeEditor, type SqlDialectName, SqlEditor, isLanguageMode };
 //# sourceMappingURL=editors.d.ts.map

package/dist/editors.js

@@ -1,11 +1,11 @@
-import { cn } from "./classNames-DcGnTh2N.js";
-import { ChevronsLeft, ChevronsRight, X } from "./icons-ZIeZXXS7.js";
-import { Button } from "./Button-BNkyYU8u.js";
+import { cn } from "./classNames-DkX30VJU.js";
+import { ChevronsLeft, ChevronsRight, X } from "./icons-DDR9dFSr.js";
+import { Button } from "./Button-DbvGzEDb.js";
 import { useStableCallback } from "./internal/hooks/useStableCallback.js";
-import { FieldItem, useFieldContext } from "./FieldItem-BHUqgSO1.js";
+import { FieldItem, useFieldContext } from "./FieldItem-D7eCMfMB.js";
 import { CHANGE_CLASS } from "./internal/components/MergeEditor/constants.js";
-import { resolveToken } from "./themeTokens-DCeb62ap.js";
-import { CodeEditor, LANGUAGE_MODES, buildBaseThemeStyles, buildBasicSetup, buildCanvasChrome, buildChromeStyles, buildCustomTheme, buildDiffWash, isLanguageMode, searchExtension, updateSearch, useThemedExtension, useTooltipsExtension, useVariableCompletion } from "./CodeEditor-DVSPdfdo.js";
+import { resolveToken } from "./themeTokens-B60cQtAY.js";
+import { CodeEditor, LANGUAGE_MODES, buildBaseThemeStyles, buildBasicSetup, buildCanvasChrome, buildChromeStyles, buildCustomTheme, buildDiffWash, isLanguageMode, searchExtension, updateSearch, useThemedExtension, useTooltipsExtension, useVariableCompletion } from "./CodeEditor-D_b-ZCng.js";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Decoration, EditorView, GutterMarker, ViewPlugin, gutter, gutterLineClass } from "@codemirror/view";
@@ -14,7 +14,7 @@ import { installExtensions } from "@keboola/codemirror-lang-sql";
 import colors from "@keboola/tailwind-config/colors";
 import { RangeSet, RangeSetBuilder, StateEffect, StateField } from "@codemirror/state";
 import { defaultKeymap } from "@codemirror/commands";
-//#region src/components/CodeEditor/activeQueryHighlight.ts
+// src/components/CodeEditor/activeQueryHighlight.ts
 const activeQueryFirstLine = Decoration.line({ class: "cm-active-query cm-active-query-first" });
 const activeQueryMiddleLine = Decoration.line({ class: "cm-active-query" });
 const activeQueryLastLine = Decoration.line({ class: "cm-active-query cm-active-query-last" });
@@ -187,8 +187,7 @@ const activeQueryHighlight = (splitQueries) => {
 		}
 	})];
 };
-//#endregion
-//#region src/components/CodeEditor/highlighting.ts
+// src/components/CodeEditor/highlighting.ts
 var HighlightMarker = class extends GutterMarker {
 	toDOM() {
 		const marker = document.createElement("div");
@@ -294,8 +293,7 @@ function highlightingExtension() {
 function updateHighlighting(view, lines) {
 	view.dispatch({ effects: setHighlightedLinesEffect.of(lines ?? null) });
 }
-//#endregion
-//#region src/components/CodeEditor/SqlEditor.tsx
+// src/components/CodeEditor/SqlEditor.tsx
 const OWN_KEYMAPS = {
 	defaultKeymap: false,
 	completionKeymap: false,
@@ -403,8 +401,7 @@ const SqlEditor = ({ value, onChange, onSelectionChange, onCreateEditor, onDestr
 		basicSetup: defaultSetup
 	});
 };
-//#endregion
-//#region src/components/MergeEditor/AcceptControls/AcceptButton.tsx
+// src/components/MergeEditor/AcceptControls/AcceptButton.tsx
 const AcceptButton = ({ side, onAccept }) => {
 	const label = `Accept ${side === "left" ? "production" : "branch"} version`;
 	return /* @__PURE__ */ jsx(Button, {
@@ -416,8 +413,7 @@ const AcceptButton = ({ side, onAccept }) => {
 		children: /* @__PURE__ */ jsx(side === "left" ? ChevronsRight : ChevronsLeft, { className: "tw:size-5" })
 	});
 };
-//#endregion
-//#region src/components/MergeEditor/AcceptControls/AcceptControls.tsx
+// src/components/MergeEditor/AcceptControls/AcceptControls.tsx
 const AcceptControls = ({ conflicts, side, onAccept, onDismiss, contentRef }) => /* @__PURE__ */ jsx("div", {
 	className: cn("tw:z-10 tw:flex tw:shrink-0 tw:flex-col tw:items-center", conflicts.length > 0 ? "tw:w-7" : "tw:w-0"),
 	children: conflicts.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
@@ -449,8 +445,7 @@ const AcceptControls = ({ conflicts, side, onAccept, onDismiss, contentRef }) =>
 		})
 	})] })
 });
-//#endregion
-//#region src/components/MergeEditor/decorations.ts
+// src/components/MergeEditor/decorations.ts
 const setHighlightedLines = StateEffect.define();
 const safeDecoration = Decoration.line({ class: "cm-merge-safe-line" });
 const conflictDecoration = Decoration.line({ class: "cm-merge-conflict-line" });
@@ -531,8 +526,7 @@ const updateHighlightedLines = (view, lines, classification) => {
 		classification
 	}) });
 };
-//#endregion
-//#region src/components/MergeEditor/MergePane.tsx
+// src/components/MergeEditor/MergePane.tsx
 const EMPTY_LINES$1 = /* @__PURE__ */ new Set();
 const EMPTY_CLASSIFICATION$1 = /* @__PURE__ */ new Map();
 const MergePane = ({ value, highlightedLines, lineClassification, readOnly = false, onChange, header, headerClassName, className, onScrollDOMReady, deleted = false }) => {
@@ -625,8 +619,7 @@ const MergePane = ({ value, highlightedLines, lineClassification, readOnly = fal
 		})]
 	});
 };
-//#endregion
-//#region src/components/MergeEditor/useScrollSync.ts
+// src/components/MergeEditor/useScrollSync.ts
 const useScrollSync = () => {
 	const scrollersRef = useRef([]);
 	const followersRef = useRef(/* @__PURE__ */ new Map());
@@ -681,8 +674,7 @@ const useScrollSync = () => {
 		}, [])
 	};
 };
-//#endregion
-//#region src/components/MergeEditor/MergeEditor.tsx
+// src/components/MergeEditor/MergeEditor.tsx
 const EMPTY_LINES = /* @__PURE__ */ new Set();
 const EMPTY_CLASSIFICATION = /* @__PURE__ */ new Map();
 const MergeEditor = ({ mergeValue, handleMergeChange, leftText, rightText, leftConflicts, rightConflicts, leftHighlightedLines, rightHighlightedLines, leftClassification, rightClassification, mergeHighlightedLines, mergeClassification, acceptLeft, acceptRight, dismissLeft, dismissRight, leftHeader, middleHeader, middleHeaderClassName, middleClassName, rightHeader, className, leftDeleted = false, rightDeleted = false }) => {
@@ -738,8 +730,7 @@ const MergeEditor = ({ mergeValue, handleMergeChange, leftText, rightText, leftC
 		]
 	});
 };
-//#endregion
-//#region src/components/CodeEditor/CodeEditorField.tsx
+// src/components/CodeEditor/CodeEditorField.tsx
 /**
 * Code / JSON editor field; state is the raw editor text, never a parsed value.
 *
@@ -775,7 +766,6 @@ const CodeEditorField = ({ label, action, required, requiredMark, help, tooltip,
 		})
 	});
 };
-//#endregion
 export { CodeEditor, CodeEditorField, LANGUAGE_MODES, MergeEditor, SqlEditor, isLanguageMode };
 
 //# sourceMappingURL=editors.js.map