@12-apps/ui 6.33.1 → 6.34.0

package/dist/chunk-B76QCDCE.js

@@ -0,0 +1,226 @@
+import {
+  onMedia,
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/feedback/TutorialOverlay/TutorialStepBody.tsx
+import CompleteIcon from "@mui/icons-material/CheckCircle";
+import CloseIcon from "@mui/icons-material/Close";
+import PrevIcon from "@mui/icons-material/NavigateBefore";
+import NextIcon from "@mui/icons-material/NavigateNext";
+import RestartIcon from "@mui/icons-material/Refresh";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StepIndicator = styled(Box)(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing(1),
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(2)
+}));
+var StepDot = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "active" && prop !== "completed"
+})(({ theme, active, completed }) => ({
+  width: 8,
+  height: 8,
+  borderRadius: "50%",
+  background: completed ? theme.palette.success.main : active ? theme.palette.primary.main : alpha(theme.palette.text.primary, 0.3),
+  transition: "all 0.3s ease",
+  ...active && {
+    transform: "scale(1.5)"
+  }
+}));
+var TutorialStepNav = ({
+  copy,
+  currentStep,
+  stepCount,
+  isLastStep,
+  allowSkip,
+  requiresActionBeforeNext,
+  onNext,
+  onPrev,
+  onSkip,
+  onRestart
+}) => /* @__PURE__ */ jsxs(
+  Stack,
+  {
+    direction: "row",
+    spacing: 1,
+    justifyContent: "space-between",
+    "data-testid": "tutorial-navigation",
+    children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+        allowSkip && /* @__PURE__ */ jsx(Button, { size: "small", onClick: onSkip, variant: "text", children: copy.skip }),
+        stepCount > 1 && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            onClick: onRestart,
+            disabled: currentStep === 0,
+            title: copy.restart,
+            children: /* @__PURE__ */ jsx(RestartIcon, { fontSize: "small" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+        stepCount > 1 && currentStep > 0 && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            startIcon: /* @__PURE__ */ jsx(PrevIcon, {}),
+            onClick: onPrev,
+            disabled: currentStep === 0,
+            "data-testid": "tutorial-prev-button",
+            children: copy.previous
+          }
+        ),
+        !isLastStep ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "contained",
+            size: "small",
+            endIcon: /* @__PURE__ */ jsx(NextIcon, {}),
+            onClick: onNext,
+            disabled: requiresActionBeforeNext,
+            title: requiresActionBeforeNext ? "Complete the required action first" : "",
+            "data-testid": "tutorial-next-button",
+            children: copy.next
+          }
+        ) : /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "contained",
+            size: "small",
+            endIcon: /* @__PURE__ */ jsx(CompleteIcon, {}),
+            onClick: onNext,
+            sx: (theme) => {
+              const [from, to] = uiInk(theme).celebration.mint;
+              return { background: `linear-gradient(135deg, ${from} 0%, ${to} 100%)` };
+            },
+            "data-testid": "tutorial-finish-button",
+            children: stepCount === 1 ? "Complete" : "Finish"
+          }
+        )
+      ] })
+    ]
+  }
+);
+var StepDots = ({
+  currentStep,
+  stepCount
+}) => /* @__PURE__ */ jsx(StepIndicator, { "data-testid": "tutorial-step-indicators", children: Array.from({ length: stepCount }).map((_, index) => /* @__PURE__ */ jsx(
+  StepDot,
+  {
+    active: index === currentStep,
+    completed: index < currentStep,
+    "data-testid": `tutorial-indicator-${index}`
+  },
+  index
+)) });
+var TutorialStepHeader = ({ title, currentStep, allowSkip, onSkip }) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    sx: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" },
+    children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          id: `tutorial-title-${currentStep}`,
+          variant: "h6",
+          fontWeight: "bold",
+          sx: { flex: 1 },
+          "data-testid": "tutorial-step-title",
+          children: title
+        }
+      ),
+      allowSkip && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "small",
+          onClick: onSkip,
+          sx: { ml: 1, mt: -1, mr: -1 },
+          "data-testid": "tutorial-close-button",
+          children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
+        }
+      )
+    ]
+  }
+);
+var TutorialStepBody = ({
+  copy,
+  step,
+  currentStep,
+  stepCount,
+  progress: _progress,
+  isLastStep,
+  allowSkip,
+  showProgress,
+  requiresActionBeforeNext,
+  onNext,
+  onPrev,
+  onSkip,
+  onRestart
+}) => /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+  /* @__PURE__ */ jsx(
+    TutorialStepHeader,
+    {
+      title: step.title,
+      currentStep,
+      allowSkip,
+      onSkip
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    Typography,
+    {
+      id: `tutorial-content-${currentStep}`,
+      variant: "body2",
+      color: "text.secondary",
+      "data-testid": "tutorial-step-content",
+      children: step.content
+    }
+  ),
+  showProgress && /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", align: "center", children: [
+    currentStep + 1,
+    " of ",
+    stepCount
+  ] }),
+  step.action && /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "contained",
+      size: "small",
+      onClick: step.action.onClick,
+      sx: (theme) => {
+        const [from, to] = uiInk(theme).celebration.violet;
+        return { background: `linear-gradient(135deg, ${from} 0%, ${to} 100%)`, color: onMedia(theme) };
+      },
+      children: step.action.label
+    }
+  ),
+  /* @__PURE__ */ jsx(StepDots, { currentStep, stepCount }),
+  /* @__PURE__ */ jsx(
+    TutorialStepNav,
+    {
+      copy,
+      currentStep,
+      stepCount,
+      isLastStep,
+      allowSkip,
+      requiresActionBeforeNext,
+      onNext,
+      onPrev,
+      onSkip,
+      onRestart
+    }
+  )
+] });
+
+export {
+  TutorialStepBody
+};
+//# sourceMappingURL=chunk-B76QCDCE.js.map

package/dist/chunk-B76QCDCE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/TutorialOverlay/TutorialStepBody.tsx"],"sourcesContent":["import CompleteIcon from '@mui/icons-material/CheckCircle';\nimport CloseIcon from '@mui/icons-material/Close';\nimport PrevIcon from '@mui/icons-material/NavigateBefore';\nimport NextIcon from '@mui/icons-material/NavigateNext';\nimport RestartIcon from '@mui/icons-material/Refresh';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport React, {  } from 'react';\n\nimport { onMedia, uiInk } from '../../../tokens/ink';\n\nimport type { TutorialOverlayProps } from './TutorialOverlay.types';\nimport type { TutorialCopy } from '../../../copy';\n\n// Animation keyframes\n\nconst StepIndicator = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  gap: theme.spacing(1),\n  marginTop: theme.spacing(2),\n  marginBottom: theme.spacing(2) }));\n\n\nconst StepDot = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'active' && prop !== 'completed' })<{ active?: boolean; completed?: boolean }>(({ theme, active, completed }) => ({\n  width: 8,\n  height: 8,\n  borderRadius: '50%',\n  background: completed\n    ? theme.palette.success.main\n    : active\n      ? theme.palette.primary.main\n      : alpha(theme.palette.text.primary, 0.3),\n  transition: 'all 0.3s ease',\n  ...(active && {\n    transform: 'scale(1.5)' }) }));\n\n// Title, body copy, the step dots and the navigation row.\n\n// The step's controls: skip/restart on the left, previous/next on the right.\nconst TutorialStepNav: React.FC<{\n  copy: TutorialCopy;\n  currentStep: number;\n  stepCount: number;\n  isLastStep: boolean;\n  allowSkip: boolean;\n  requiresActionBeforeNext?: boolean;\n  onNext: () => void;\n  onPrev: () => void;\n  onSkip: () => void;\n  onRestart: () => void;\n}> = ({\n  copy,\n  currentStep,\n  stepCount,\n  isLastStep,\n  allowSkip,\n  requiresActionBeforeNext,\n  onNext,\n  onPrev,\n  onSkip,\n  onRestart }) => (\n        <Stack\n          direction=\"row\"\n          spacing={1}\n          justifyContent=\"space-between\"\n          data-testid=\"tutorial-navigation\"\n        >\n          <Stack direction=\"row\" spacing={1}>\n            {allowSkip && (\n              <Button size=\"small\" onClick={onSkip} variant=\"text\">\n                {copy.skip}\n              </Button>\n            )}\n            {stepCount > 1 && (\n              <IconButton\n                size=\"small\"\n                onClick={onRestart}\n                disabled={currentStep === 0}\n                title={copy.restart}\n              >\n                <RestartIcon fontSize=\"small\" />\n              </IconButton>\n            )}\n          </Stack>\n\n          <Stack direction=\"row\" spacing={1}>\n            {stepCount > 1 && currentStep > 0 && (\n              <Button\n                size=\"small\"\n                startIcon={<PrevIcon />}\n                onClick={onPrev}\n                disabled={currentStep === 0}\n                data-testid=\"tutorial-prev-button\"\n              >\n                {copy.previous}\n              </Button>\n            )}\n\n            {!isLastStep ? (\n              <Button\n                variant=\"contained\"\n                size=\"small\"\n                endIcon={<NextIcon />}\n                onClick={onNext}\n                disabled={requiresActionBeforeNext}\n                title={requiresActionBeforeNext ? 'Complete the required action first' : ''}\n                data-testid=\"tutorial-next-button\"\n              >\n                {copy.next}\n              </Button>\n            ) : (\n              <Button\n                variant=\"contained\"\n                size=\"small\"\n                endIcon={<CompleteIcon />}\n                onClick={onNext}\n                sx={(theme) => {\n                  const [from, to] = uiInk(theme).celebration.mint;\n                  return { background: `linear-gradient(135deg, ${from} 0%, ${to} 100%)` };\n                }}\n                data-testid=\"tutorial-finish-button\"\n              >\n                {stepCount === 1 ? 'Complete' : 'Finish'}\n              </Button>\n            )}\n          </Stack>\n        </Stack>\n);\n\nconst StepDots: React.FC<{ currentStep: number; stepCount: number }> = ({\n  currentStep,\n  stepCount }) => (\n  <StepIndicator data-testid=\"tutorial-step-indicators\">\n    {Array.from({ length: stepCount }).map((_, index) => (\n      <StepDot\n        key={index}\n        active={index === currentStep}\n        completed={index < currentStep}\n        data-testid={`tutorial-indicator-${index}`}\n      />\n    ))}\n  </StepIndicator>\n);\n\n// Title, and the close button when skipping is allowed.\nconst TutorialStepHeader: React.FC<{\n  title: React.ReactNode;\n  currentStep: number;\n  allowSkip: boolean;\n  onSkip: () => void;\n}> = ({ title, currentStep, allowSkip, onSkip }) => (\n        <Box\n          sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}\n        >\n          <Typography\n            id={`tutorial-title-${currentStep}`}\n            variant=\"h6\"\n            fontWeight=\"bold\"\n            sx={{ flex: 1 }}\n            data-testid=\"tutorial-step-title\"\n          >\n            {title}\n          </Typography>\n          {allowSkip && (\n            <IconButton\n              size=\"small\"\n              onClick={onSkip}\n              sx={{ ml: 1, mt: -1, mr: -1 }}\n              data-testid=\"tutorial-close-button\"\n            >\n              <CloseIcon fontSize=\"small\" />\n            </IconButton>\n          )}\n        </Box>\n);\n\nexport const TutorialStepBody: React.FC<{\n  copy: TutorialCopy;\n  step: TutorialOverlayProps['steps'][number];\n  currentStep: number;\n  stepCount: number;\n  progress: number;\n  isLastStep: boolean;\n  allowSkip: boolean;\n  showProgress: boolean;\n  requiresActionBeforeNext?: boolean;\n  onNext: () => void;\n  onPrev: () => void;\n  onSkip: () => void;\n  onRestart: () => void;\n}> = ({\n  copy,\n  step,\n  currentStep,\n  stepCount,\n  progress: _progress,\n  isLastStep,\n  allowSkip,\n  showProgress,\n  requiresActionBeforeNext,\n  onNext,\n  onPrev,\n  onSkip,\n  onRestart }) => (\n      <Stack spacing={2}>\n        <TutorialStepHeader\n          title={step.title}\n          currentStep={currentStep}\n          allowSkip={allowSkip}\n          onSkip={onSkip}\n        />\n\n        <Typography\n          id={`tutorial-content-${currentStep}`}\n          variant=\"body2\"\n          color=\"text.secondary\"\n          data-testid=\"tutorial-step-content\"\n        >\n          {step.content}\n        </Typography>\n\n        {showProgress && (\n          <Typography variant=\"caption\" color=\"text.secondary\" align=\"center\">\n            {currentStep + 1} of {stepCount}\n          </Typography>\n        )}\n\n        {step.action && (\n          <Button\n            variant=\"contained\"\n            size=\"small\"\n            onClick={step.action.onClick}\n            sx={(theme) => {\n              const [from, to] = uiInk(theme).celebration.violet;\n              return { background: `linear-gradient(135deg, ${from} 0%, ${to} 100%)`, color: onMedia(theme) };\n            }}\n          >\n            {step.action.label}\n          </Button>\n        )}\n\n        <StepDots currentStep={currentStep} stepCount={stepCount} />\n\n        <TutorialStepNav\n          copy={copy}\n          currentStep={currentStep}\n          stepCount={stepCount}\n          isLastStep={isLastStep}\n          allowSkip={allowSkip}\n          requiresActionBeforeNext={requiresActionBeforeNext}\n          onNext={onNext}\n          onPrev={onPrev}\n          onSkip={onSkip}\n          onRestart={onRestart}\n        />\n      </Stack>\n);\n\n// Main component\n"],"mappings":"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","names":[]}

package/dist/chunk-BGYLL467.js

@@ -0,0 +1,108 @@
+import {
+  detectCountryFromNumber,
+  formatPhoneNumber,
+  validatePhoneNumber
+} from "./chunk-5P6OV64V.js";
+import {
+  countries
+} from "./chunk-3JDP5OUR.js";
+
+// src/components/form/PhoneInput/PhoneInput.hooks.ts
+import { useEffect, useRef, useState } from "react";
+var usePhoneInput = ({
+  defaultValue,
+  initialCountryCode,
+  onChange
+}) => {
+  const [value, setValue] = useState(defaultValue);
+  const [selectedCountry, setSelectedCountry] = useState(
+    countries.find((c) => c.code === initialCountryCode) || countries[0]
+  );
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [isValid, setIsValid] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const onChangeRef = useRef(onChange);
+  const isInitialMountRef = useRef(true);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  useEffect(() => {
+    if (!selectedCountry) return;
+    const valid = validatePhoneNumber(value, selectedCountry.code);
+    setIsValid(valid);
+    if (isInitialMountRef.current) {
+      isInitialMountRef.current = false;
+      return;
+    }
+    if (onChangeRef.current) {
+      onChangeRef.current(value, valid, selectedCountry.code);
+    }
+  }, [value, selectedCountry]);
+  const handlers = usePhoneHandlers({
+    value,
+    setValue,
+    selectedCountry,
+    setSelectedCountry,
+    setAnchorEl,
+    setIsFocused
+  });
+  return {
+    value,
+    selectedCountry,
+    anchorEl,
+    isValid,
+    isFocused,
+    setIsFocused,
+    setAnchorEl,
+    ...handlers
+  };
+};
+var usePhoneHandlers = ({
+  value,
+  setValue,
+  selectedCountry,
+  setSelectedCountry,
+  setAnchorEl,
+  setIsFocused
+}) => {
+  const handleCountryClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleCountryClose = () => {
+    setAnchorEl(null);
+  };
+  const handleCountrySelect = (country) => {
+    setSelectedCountry(country);
+    handleCountryClose();
+    if (value) {
+      const formatted = formatPhoneNumber(value, country.code);
+      setValue(formatted);
+    }
+  };
+  const handleChange = (event) => {
+    const newValue = event.target.value;
+    setValue(newValue);
+    if (newValue.startsWith("+")) {
+      const detectedCountry = detectCountryFromNumber(newValue);
+      if (detectedCountry) {
+        const detectedCountryData = countries.find((c) => c.code === detectedCountry);
+        if (detectedCountryData && detectedCountryData.code !== selectedCountry?.code) {
+          setSelectedCountry(detectedCountryData);
+        }
+      }
+    }
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+    if (value && selectedCountry) {
+      const formatted = formatPhoneNumber(value, selectedCountry.code);
+      setValue(formatted);
+    }
+  };
+  return { handleCountryClick, handleCountryClose, handleCountrySelect, handleChange, handleBlur };
+};
+
+export {
+  usePhoneInput
+};
+//# sourceMappingURL=chunk-BGYLL467.js.map

package/dist/chunk-BHLGZLXQ.js

@@ -0,0 +1,318 @@
+import {
+  buildChartContext
+} from "./chunk-GJF3CVIE.js";
+import {
+  ChartLegendContent,
+  ChartTooltipContent
+} from "./chunk-M5T3COS2.js";
+import {
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/data-display/Chart/chart-renderers.tsx
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  ComposedChart,
+  Legend,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart,
+  Scatter,
+  ScatterChart,
+  Tooltip,
+  XAxis,
+  YAxis
+} from "recharts";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function chartExtras(ctx) {
+  const { props } = ctx;
+  const nodes = [];
+  if (props.showTooltip !== false) {
+    nodes.push(
+      /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, { valueFormatter: props.valueFormatter }) }, "tooltip")
+    );
+  }
+  if (props.showLegend !== false) {
+    nodes.push(/* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }, "legend"));
+  }
+  return nodes;
+}
+function chartGrid(ctx) {
+  return /* @__PURE__ */ jsx(CartesianGrid, { stroke: ctx.gridStroke, strokeOpacity: ctx.gridOpacity }, "grid");
+}
+function cartesianAxes(ctx) {
+  const { props, axisConfig } = ctx;
+  const nodes = [];
+  if (props.showCartesianGrid !== false) nodes.push(chartGrid(ctx));
+  nodes.push(
+    /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        dataKey: props.xAxisKey ?? "name",
+        style: ctx.axisStyle,
+        label: props.xAxisLabel,
+        tickMargin: axisConfig.tickMargin,
+        ticks: axisConfig.categoryTicks,
+        tickFormatter: axisConfig.tickFormatter
+      },
+      "x"
+    ),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        style: ctx.axisStyle,
+        label: props.yAxisLabel,
+        width: "auto",
+        tickMargin: axisConfig.tickMargin,
+        tickFormatter: props.valueFormatter,
+        allowDecimals: props.allowDecimalTicks !== false
+      },
+      "y"
+    )
+  );
+  return nodes;
+}
+function renderLine(ctx) {
+  return /* @__PURE__ */ jsxs(LineChart, { ...ctx.commonProps, children: [
+    cartesianAxes(ctx),
+    chartExtras(ctx),
+    ctx.chartSeries.map((s, index) => /* @__PURE__ */ jsx(
+      Line,
+      {
+        type: ctx.strokeType,
+        dataKey: s.dataKey,
+        name: s.name,
+        stroke: s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        strokeWidth: s.strokeWidth ?? 2,
+        dot: s.dot !== false,
+        activeDot: s.activeDot !== false ? { r: 8 } : false,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    ))
+  ] });
+}
+function renderBar(ctx) {
+  return /* @__PURE__ */ jsxs(BarChart, { ...ctx.commonProps, children: [
+    cartesianAxes(ctx),
+    chartExtras(ctx),
+    ctx.chartSeries.map((s, index) => /* @__PURE__ */ jsx(
+      Bar,
+      {
+        dataKey: s.dataKey,
+        name: s.name,
+        fill: s.fill ?? s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        stackId: ctx.props.stacked ? "stack" : void 0,
+        radius: ctx.barGeometry.radius,
+        maxBarSize: ctx.barGeometry.maxBarSize,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    ))
+  ] });
+}
+function renderArea(ctx) {
+  return /* @__PURE__ */ jsxs(AreaChart, { ...ctx.commonProps, children: [
+    cartesianAxes(ctx),
+    chartExtras(ctx),
+    ctx.chartSeries.map((s, index) => /* @__PURE__ */ jsx(
+      Area,
+      {
+        type: ctx.strokeType,
+        dataKey: s.dataKey,
+        name: s.name,
+        stroke: s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        fill: s.fill ?? s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        fillOpacity: s.fillOpacity ?? 0.6,
+        stackId: ctx.props.stacked ? "stack" : void 0,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    ))
+  ] });
+}
+function pieCenterLabel(ctx) {
+  const { centerLabel } = ctx.props;
+  const innerRadius = ctx.props.innerRadius ?? 0;
+  if (!centerLabel || innerRadius <= 0) return null;
+  const fill = ctx.props.variant === "neon" ? uiInk(ctx.theme).dataVizNeon.accent : ctx.theme.palette.text.primary;
+  return /* @__PURE__ */ jsx(
+    "text",
+    {
+      x: "50%",
+      y: "50%",
+      textAnchor: "middle",
+      dominantBaseline: "middle",
+      style: { fontSize: ctx.sizeStyles.fontSize, fill, fontWeight: 600 },
+      children: typeof centerLabel === "string" ? centerLabel : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "tspan",
+          {
+            x: "50%",
+            dy: "-0.6em",
+            style: { fontSize: "0.875em", fontWeight: 500, fill: ctx.theme.palette.text.secondary },
+            children: centerLabel.label
+          }
+        ),
+        /* @__PURE__ */ jsx("tspan", { x: "50%", dy: "1.4em", style: { fontSize: "1.5em", fontWeight: 700 }, children: centerLabel.value })
+      ] })
+    }
+  );
+}
+function renderPie(ctx) {
+  const { props } = ctx;
+  return /* @__PURE__ */ jsxs(PieChart, { children: [
+    chartExtras(ctx),
+    /* @__PURE__ */ jsx(
+      Pie,
+      {
+        data: props.data,
+        dataKey: ctx.chartSeries[0]?.dataKey ?? "value",
+        nameKey: props.xAxisKey ?? "name",
+        cx: "50%",
+        cy: "50%",
+        outerRadius: ctx.sizeStyles.height / 3,
+        innerRadius: props.innerRadius ?? 0,
+        fill: ctx.chartColors[0],
+        label: props.showValues ?? false,
+        animationDuration: ctx.animationDuration,
+        children: props.data.map((entry, index) => /* @__PURE__ */ jsx(Cell, { fill: ctx.chartColors[index % ctx.chartColors.length] }, `cell-${index}`))
+      }
+    ),
+    pieCenterLabel(ctx)
+  ] });
+}
+function renderRadar(ctx) {
+  return /* @__PURE__ */ jsxs(RadarChart, { ...ctx.commonProps, children: [
+    /* @__PURE__ */ jsx(PolarGrid, { stroke: ctx.gridStroke }),
+    /* @__PURE__ */ jsx(PolarAngleAxis, { dataKey: ctx.props.xAxisKey ?? "name", style: ctx.axisStyle }),
+    /* @__PURE__ */ jsx(PolarRadiusAxis, { style: ctx.axisStyle }),
+    chartExtras(ctx),
+    ctx.chartSeries.map((s, index) => /* @__PURE__ */ jsx(
+      Radar,
+      {
+        dataKey: s.dataKey,
+        name: s.name,
+        stroke: s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        fill: s.fill ?? s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        fillOpacity: s.fillOpacity ?? 0.6,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    ))
+  ] });
+}
+function renderScatter(ctx) {
+  const { props } = ctx;
+  return /* @__PURE__ */ jsxs(ScatterChart, { ...ctx.commonProps, children: [
+    props.showCartesianGrid !== false && chartGrid(ctx),
+    /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        dataKey: props.xAxisKey ?? "name",
+        style: ctx.axisStyle,
+        label: props.xAxisLabel,
+        tickMargin: ctx.axisConfig.tickMargin
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        dataKey: ctx.chartSeries[0]?.dataKey,
+        style: ctx.axisStyle,
+        label: props.yAxisLabel,
+        tickMargin: ctx.axisConfig.tickMargin
+      }
+    ),
+    chartExtras(ctx),
+    /* @__PURE__ */ jsx(
+      Scatter,
+      {
+        name: ctx.chartSeries[0]?.name ?? "Data",
+        data: props.data,
+        fill: ctx.chartColors[0],
+        animationDuration: ctx.animationDuration
+      }
+    )
+  ] });
+}
+function composedSeries(ctx, s, index) {
+  const color = s.color ?? ctx.chartColors[index % ctx.chartColors.length];
+  if (s.type === "bar") {
+    return /* @__PURE__ */ jsx(
+      Bar,
+      {
+        dataKey: s.dataKey,
+        name: s.name,
+        fill: color,
+        radius: ctx.barGeometry.radius,
+        maxBarSize: ctx.barGeometry.maxBarSize,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    );
+  }
+  if (s.type === "area") {
+    return /* @__PURE__ */ jsx(
+      Area,
+      {
+        type: ctx.strokeType,
+        dataKey: s.dataKey,
+        name: s.name,
+        stroke: color,
+        fill: color,
+        fillOpacity: 0.6,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Line,
+    {
+      type: ctx.strokeType,
+      dataKey: s.dataKey,
+      name: s.name,
+      stroke: color,
+      animationDuration: ctx.animationDuration
+    },
+    s.dataKey
+  );
+}
+function renderComposed(ctx) {
+  return /* @__PURE__ */ jsxs(ComposedChart, { ...ctx.commonProps, children: [
+    cartesianAxes(ctx),
+    chartExtras(ctx),
+    ctx.chartSeries.map((s, index) => composedSeries(ctx, s, index))
+  ] });
+}
+var RENDERERS = {
+  line: renderLine,
+  bar: renderBar,
+  area: renderArea,
+  pie: renderPie,
+  radar: renderRadar,
+  scatter: renderScatter,
+  composed: renderComposed
+};
+function renderChartByType(props, theme) {
+  const renderer = RENDERERS[props.type ?? "line"];
+  const ctx = buildChartContext(props, theme);
+  return renderer ? renderer(ctx) : /* @__PURE__ */ jsx(Fragment, {});
+}
+
+export {
+  renderChartByType
+};
+//# sourceMappingURL=chunk-BHLGZLXQ.js.map