@undefine-ui/design-system 3.2.0 → 3.3.0

package/dist/index.d.cts

@@ -2094,6 +2094,41 @@ declare function paper({ theme, color, dropdown }: {
  */
 declare const menuItem: (theme: Theme$1) => SxProps$1<Theme$1>;
 
+/**
+ * ApexCharts style utilities for MUI theming integration.
+ * Use these in your consuming app to style ApexCharts with Define theme.
+ *
+ * @example
+ * // In your app, create a styled wrapper:
+ * import { styled } from '@mui/material/styles';
+ * import { apexChartsStyles } from '@undefine-ui/design-system';
+ *
+ * export const ChartWrapper = styled('div')(({ theme }) => ({
+ *   ...apexChartsStyles(theme),
+ * }));
+ *
+ * // Then wrap your chart:
+ * <ChartWrapper>
+ *   <ReactApexChart {...chartProps} />
+ * </ChartWrapper>
+ */
+declare const apexChartsStyles: (theme: Theme) => SxProps<Theme>;
+/**
+ * Default chart options for ApexCharts with Define theme integration.
+ * Use these as a base and extend with your chart-specific options.
+ *
+ * @example
+ * import { useTheme } from '@mui/material/styles';
+ * import { getDefaultChartOptions } from '@undefine-ui/design-system';
+ *
+ * const theme = useTheme();
+ * const options = {
+ *   ...getDefaultChartOptions(theme),
+ *   // Your chart-specific options
+ * };
+ */
+declare const getDefaultChartOptions: (theme: Theme) => Record<string, any>;
+
 declare const createTheme: (settings: SettingsValueProps) => Theme;
 
 declare const schemeConfig: {
@@ -2113,4 +2148,4 @@ type ThemeProviderProps = {
 };
 declare const ThemeProvider: ({ children }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
 
-export { AnimatedLogo, Attachment, Bank, BellNotification, Building, Calendar, CheckCircleSolid, CheckboxDefault, CheckboxIndeterminate, CheckboxSelect, Circle, ClipboardCheck, Clock, CloudUpload, type ColorSchema, Copy, CopyButton, type CustomShadowOptions, type CustomSpacingOptions, type DatePickerProps, type DateTimePickerProps, Download, EmptyContent, type EmptyContentProps, ErrorToast, Eye, EyeClosed, Field, Form, HelpCircle, Icon, type IconProps, type IconType, Image, type ImageProps, type ImageStatus, InfoCircle, InfoCircleSolid, InfoToast, KeyCommand, Loader, LoadingScreen, LocalStorageAvailable, LocalStorageGetItem, Logo, LongArrowUpLeftSolid, NavArrowDown, NavArrowDownSolid, NavArrowLeft, NavArrowRight, OTPInput, type OTPInputProps, Plus, PlusSquare, RHFAutocomplete, type RHFAutocompleteProps, RHFCheckbox, type RHFCheckboxProps, RHFDatePicker, type RHFDatePickerProps, RHFDateTimePicker, type RHFDateTimePickerProps, RHFMultiCheckbox, type RHFMultiCheckboxOption, type RHFMultiCheckboxProps, RHFMultiSwitch, RHFOTPInput, type RHFOTPInputProps, RHFRadioGroup, type RHFRadioGroupProps, RHFSwitch, RHFTextField, RHFTimePicker, type RHFTimePickerProps, RHFUpload, type RHFUploadProps, RadioDefault, RadioSelect, type RadiusOptions, STORAGE_KEY, Search, Settings, SettingsConsumer, SettingsContext, type SettingsContextProps, SettingsProvider, type SettingsValueProps, SortDown, SortUp, SplashScreen, StatDown, StatUp, SuccessToast, Table, TablePagination, ThemeProvider, type TimePickerProps, Toast, Trash, Upload, type UploadProps, type UseBooleanReturnType, type UseSetStateReturnType, User, UserSolid, WarningToast, XMark, XMarkSolid, action, background, baseAction, basePalette, bgBlur, bgGradient, border, borderGradient, breakpoints, colorSchemes, common, components, createPaletteChannel, createShadowColor, createTheme, customShadows, customSpacing, darkPalette, defaultSettings, error, fCurrency, fData, fNumber, fPercent, fShortenNumber, formatFullname, getCurrencySymbol, getInitials, getStorage, grey, hexToRgbChannel, hideScrollX, hideScrollY, icon, iconClasses, info, isEqual, lightPalette, maxLine, mediaQueries, menuItem, neutral, orderBy, paper, paramCase, primary, primaryFont, pxToRem, radius, remToPx, removeStorage, responsiveFontSizes, schemeConfig, secondary, secondaryFont, sentenceCase, setFont, setStorage, shadows, snakeCase, splitFullname, stylesMode, success, surface, tertiaryFont, text, textGradient, typography, updateComponentsWithSettings, updateCoreWithSettings, useBoolean, useCopyToClipboard, useCountdownDate, useCountdownSeconds, useEventListener, useLocalStorage, usePopover, useResponsive, useScrollOffSetTop, useSetState, useSettings, useWidth, varAlpha, warning };
+export { AnimatedLogo, Attachment, Bank, BellNotification, Building, Calendar, CheckCircleSolid, CheckboxDefault, CheckboxIndeterminate, CheckboxSelect, Circle, ClipboardCheck, Clock, CloudUpload, type ColorSchema, Copy, CopyButton, type CustomShadowOptions, type CustomSpacingOptions, type DatePickerProps, type DateTimePickerProps, Download, EmptyContent, type EmptyContentProps, ErrorToast, Eye, EyeClosed, Field, Form, HelpCircle, Icon, type IconProps, type IconType, Image, type ImageProps, type ImageStatus, InfoCircle, InfoCircleSolid, InfoToast, KeyCommand, Loader, LoadingScreen, LocalStorageAvailable, LocalStorageGetItem, Logo, LongArrowUpLeftSolid, NavArrowDown, NavArrowDownSolid, NavArrowLeft, NavArrowRight, OTPInput, type OTPInputProps, Plus, PlusSquare, RHFAutocomplete, type RHFAutocompleteProps, RHFCheckbox, type RHFCheckboxProps, RHFDatePicker, type RHFDatePickerProps, RHFDateTimePicker, type RHFDateTimePickerProps, RHFMultiCheckbox, type RHFMultiCheckboxOption, type RHFMultiCheckboxProps, RHFMultiSwitch, RHFOTPInput, type RHFOTPInputProps, RHFRadioGroup, type RHFRadioGroupProps, RHFSwitch, RHFTextField, RHFTimePicker, type RHFTimePickerProps, RHFUpload, type RHFUploadProps, RadioDefault, RadioSelect, type RadiusOptions, STORAGE_KEY, Search, Settings, SettingsConsumer, SettingsContext, type SettingsContextProps, SettingsProvider, type SettingsValueProps, SortDown, SortUp, SplashScreen, StatDown, StatUp, SuccessToast, Table, TablePagination, ThemeProvider, type TimePickerProps, Toast, Trash, Upload, type UploadProps, type UseBooleanReturnType, type UseSetStateReturnType, User, UserSolid, WarningToast, XMark, XMarkSolid, action, apexChartsStyles, background, baseAction, basePalette, bgBlur, bgGradient, border, borderGradient, breakpoints, colorSchemes, common, components, createPaletteChannel, createShadowColor, createTheme, customShadows, customSpacing, darkPalette, defaultSettings, error, fCurrency, fData, fNumber, fPercent, fShortenNumber, formatFullname, getCurrencySymbol, getDefaultChartOptions, getInitials, getStorage, grey, hexToRgbChannel, hideScrollX, hideScrollY, icon, iconClasses, info, isEqual, lightPalette, maxLine, mediaQueries, menuItem, neutral, orderBy, paper, paramCase, primary, primaryFont, pxToRem, radius, remToPx, removeStorage, responsiveFontSizes, schemeConfig, secondary, secondaryFont, sentenceCase, setFont, setStorage, shadows, snakeCase, splitFullname, stylesMode, success, surface, tertiaryFont, text, textGradient, typography, updateComponentsWithSettings, updateCoreWithSettings, useBoolean, useCopyToClipboard, useCountdownDate, useCountdownSeconds, useEventListener, useLocalStorage, usePopover, useResponsive, useScrollOffSetTop, useSetState, useSettings, useWidth, varAlpha, warning };

package/dist/index.d.ts

@@ -2094,6 +2094,41 @@ declare function paper({ theme, color, dropdown }: {
  */
 declare const menuItem: (theme: Theme$1) => SxProps$1<Theme$1>;
 
+/**
+ * ApexCharts style utilities for MUI theming integration.
+ * Use these in your consuming app to style ApexCharts with Define theme.
+ *
+ * @example
+ * // In your app, create a styled wrapper:
+ * import { styled } from '@mui/material/styles';
+ * import { apexChartsStyles } from '@undefine-ui/design-system';
+ *
+ * export const ChartWrapper = styled('div')(({ theme }) => ({
+ *   ...apexChartsStyles(theme),
+ * }));
+ *
+ * // Then wrap your chart:
+ * <ChartWrapper>
+ *   <ReactApexChart {...chartProps} />
+ * </ChartWrapper>
+ */
+declare const apexChartsStyles: (theme: Theme) => SxProps<Theme>;
+/**
+ * Default chart options for ApexCharts with Define theme integration.
+ * Use these as a base and extend with your chart-specific options.
+ *
+ * @example
+ * import { useTheme } from '@mui/material/styles';
+ * import { getDefaultChartOptions } from '@undefine-ui/design-system';
+ *
+ * const theme = useTheme();
+ * const options = {
+ *   ...getDefaultChartOptions(theme),
+ *   // Your chart-specific options
+ * };
+ */
+declare const getDefaultChartOptions: (theme: Theme) => Record<string, any>;
+
 declare const createTheme: (settings: SettingsValueProps) => Theme;
 
 declare const schemeConfig: {
@@ -2113,4 +2148,4 @@ type ThemeProviderProps = {
 };
 declare const ThemeProvider: ({ children }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
 
-export { AnimatedLogo, Attachment, Bank, BellNotification, Building, Calendar, CheckCircleSolid, CheckboxDefault, CheckboxIndeterminate, CheckboxSelect, Circle, ClipboardCheck, Clock, CloudUpload, type ColorSchema, Copy, CopyButton, type CustomShadowOptions, type CustomSpacingOptions, type DatePickerProps, type DateTimePickerProps, Download, EmptyContent, type EmptyContentProps, ErrorToast, Eye, EyeClosed, Field, Form, HelpCircle, Icon, type IconProps, type IconType, Image, type ImageProps, type ImageStatus, InfoCircle, InfoCircleSolid, InfoToast, KeyCommand, Loader, LoadingScreen, LocalStorageAvailable, LocalStorageGetItem, Logo, LongArrowUpLeftSolid, NavArrowDown, NavArrowDownSolid, NavArrowLeft, NavArrowRight, OTPInput, type OTPInputProps, Plus, PlusSquare, RHFAutocomplete, type RHFAutocompleteProps, RHFCheckbox, type RHFCheckboxProps, RHFDatePicker, type RHFDatePickerProps, RHFDateTimePicker, type RHFDateTimePickerProps, RHFMultiCheckbox, type RHFMultiCheckboxOption, type RHFMultiCheckboxProps, RHFMultiSwitch, RHFOTPInput, type RHFOTPInputProps, RHFRadioGroup, type RHFRadioGroupProps, RHFSwitch, RHFTextField, RHFTimePicker, type RHFTimePickerProps, RHFUpload, type RHFUploadProps, RadioDefault, RadioSelect, type RadiusOptions, STORAGE_KEY, Search, Settings, SettingsConsumer, SettingsContext, type SettingsContextProps, SettingsProvider, type SettingsValueProps, SortDown, SortUp, SplashScreen, StatDown, StatUp, SuccessToast, Table, TablePagination, ThemeProvider, type TimePickerProps, Toast, Trash, Upload, type UploadProps, type UseBooleanReturnType, type UseSetStateReturnType, User, UserSolid, WarningToast, XMark, XMarkSolid, action, background, baseAction, basePalette, bgBlur, bgGradient, border, borderGradient, breakpoints, colorSchemes, common, components, createPaletteChannel, createShadowColor, createTheme, customShadows, customSpacing, darkPalette, defaultSettings, error, fCurrency, fData, fNumber, fPercent, fShortenNumber, formatFullname, getCurrencySymbol, getInitials, getStorage, grey, hexToRgbChannel, hideScrollX, hideScrollY, icon, iconClasses, info, isEqual, lightPalette, maxLine, mediaQueries, menuItem, neutral, orderBy, paper, paramCase, primary, primaryFont, pxToRem, radius, remToPx, removeStorage, responsiveFontSizes, schemeConfig, secondary, secondaryFont, sentenceCase, setFont, setStorage, shadows, snakeCase, splitFullname, stylesMode, success, surface, tertiaryFont, text, textGradient, typography, updateComponentsWithSettings, updateCoreWithSettings, useBoolean, useCopyToClipboard, useCountdownDate, useCountdownSeconds, useEventListener, useLocalStorage, usePopover, useResponsive, useScrollOffSetTop, useSetState, useSettings, useWidth, varAlpha, warning };
+export { AnimatedLogo, Attachment, Bank, BellNotification, Building, Calendar, CheckCircleSolid, CheckboxDefault, CheckboxIndeterminate, CheckboxSelect, Circle, ClipboardCheck, Clock, CloudUpload, type ColorSchema, Copy, CopyButton, type CustomShadowOptions, type CustomSpacingOptions, type DatePickerProps, type DateTimePickerProps, Download, EmptyContent, type EmptyContentProps, ErrorToast, Eye, EyeClosed, Field, Form, HelpCircle, Icon, type IconProps, type IconType, Image, type ImageProps, type ImageStatus, InfoCircle, InfoCircleSolid, InfoToast, KeyCommand, Loader, LoadingScreen, LocalStorageAvailable, LocalStorageGetItem, Logo, LongArrowUpLeftSolid, NavArrowDown, NavArrowDownSolid, NavArrowLeft, NavArrowRight, OTPInput, type OTPInputProps, Plus, PlusSquare, RHFAutocomplete, type RHFAutocompleteProps, RHFCheckbox, type RHFCheckboxProps, RHFDatePicker, type RHFDatePickerProps, RHFDateTimePicker, type RHFDateTimePickerProps, RHFMultiCheckbox, type RHFMultiCheckboxOption, type RHFMultiCheckboxProps, RHFMultiSwitch, RHFOTPInput, type RHFOTPInputProps, RHFRadioGroup, type RHFRadioGroupProps, RHFSwitch, RHFTextField, RHFTimePicker, type RHFTimePickerProps, RHFUpload, type RHFUploadProps, RadioDefault, RadioSelect, type RadiusOptions, STORAGE_KEY, Search, Settings, SettingsConsumer, SettingsContext, type SettingsContextProps, SettingsProvider, type SettingsValueProps, SortDown, SortUp, SplashScreen, StatDown, StatUp, SuccessToast, Table, TablePagination, ThemeProvider, type TimePickerProps, Toast, Trash, Upload, type UploadProps, type UseBooleanReturnType, type UseSetStateReturnType, User, UserSolid, WarningToast, XMark, XMarkSolid, action, apexChartsStyles, background, baseAction, basePalette, bgBlur, bgGradient, border, borderGradient, breakpoints, colorSchemes, common, components, createPaletteChannel, createShadowColor, createTheme, customShadows, customSpacing, darkPalette, defaultSettings, error, fCurrency, fData, fNumber, fPercent, fShortenNumber, formatFullname, getCurrencySymbol, getDefaultChartOptions, getInitials, getStorage, grey, hexToRgbChannel, hideScrollX, hideScrollY, icon, iconClasses, info, isEqual, lightPalette, maxLine, mediaQueries, menuItem, neutral, orderBy, paper, paramCase, primary, primaryFont, pxToRem, radius, remToPx, removeStorage, responsiveFontSizes, schemeConfig, secondary, secondaryFont, sentenceCase, setFont, setStorage, shadows, snakeCase, splitFullname, stylesMode, success, surface, tertiaryFont, text, textGradient, typography, updateComponentsWithSettings, updateCoreWithSettings, useBoolean, useCopyToClipboard, useCountdownDate, useCountdownSeconds, useEventListener, useLocalStorage, usePopover, useResponsive, useScrollOffSetTop, useSetState, useSettings, useWidth, varAlpha, warning };

package/dist/index.js

@@ -100,6 +100,7 @@ __export(index_exports, {
   XMark: () => XMark,
   XMarkSolid: () => XMarkSolid,
   action: () => action,
+  apexChartsStyles: () => apexChartsStyles,
   background: () => background,
   baseAction: () => baseAction,
   basePalette: () => basePalette,
@@ -126,6 +127,7 @@ __export(index_exports, {
   fShortenNumber: () => fShortenNumber,
   formatFullname: () => formatFullname,
   getCurrencySymbol: () => getCurrencySymbol,
+  getDefaultChartOptions: () => getDefaultChartOptions,
   getInitials: () => getInitials,
   getStorage: () => getStorage,
   grey: () => grey,
@@ -1216,6 +1218,292 @@ var menuItem = (theme) => {
   };
 };
 
+// src/theme/styles/apex-charts.ts
+var apexChartsStyles = (theme) => ({
+  // Chart container
+  "& .apexcharts-canvas": {
+    // Tooltip
+    "& .apexcharts-tooltip": {
+      border: "none",
+      boxShadow: theme.customShadows["shadow-md"],
+      borderRadius: theme.radius["radius-md"],
+      backgroundColor: theme.vars.palette.background.paper,
+      color: theme.vars.palette.text.primary,
+      "&.apexcharts-theme-light": {
+        border: `1px solid ${theme.vars.palette.border.subtle}`,
+        backgroundColor: theme.vars.palette.background.paper
+      },
+      "& .apexcharts-tooltip-title": {
+        fontWeight: theme.typography.fontWeightBold,
+        backgroundColor: varAlpha(theme.vars.palette.grey["500Channel"], 0.08),
+        borderColor: theme.vars.palette.border.subtle,
+        color: theme.vars.palette.text.header
+      },
+      "& .apexcharts-tooltip-series-group": {
+        backgroundColor: "transparent"
+      }
+    },
+    // Xaxis & Yaxis labels
+    "& .apexcharts-xaxis-label, & .apexcharts-yaxis-label": {
+      fill: theme.vars.palette.text.secondary
+    },
+    // Xaxis tick
+    "& .apexcharts-xaxis-tick": {
+      stroke: theme.vars.palette.border.subtle
+    },
+    // Grid
+    "& .apexcharts-gridline": {
+      stroke: theme.vars.palette.border.subtle
+    },
+    "& .apexcharts-grid-borders line": {
+      stroke: theme.vars.palette.border.subtle
+    },
+    // Data labels
+    "& .apexcharts-datalabels-group": {
+      "& .apexcharts-data-labels": {
+        textAnchor: "middle"
+      }
+    },
+    "& .apexcharts-datalabel": {
+      fill: theme.vars.palette.text.primary
+    },
+    "& .apexcharts-datalabel-label": {
+      fill: theme.vars.palette.text.secondary,
+      fontSize: theme.typography.body2.fontSize,
+      fontFamily: theme.typography.fontFamily
+    },
+    "& .apexcharts-datalabel-value": {
+      fill: theme.vars.palette.text.primary,
+      fontWeight: theme.typography.fontWeightSemiBold,
+      fontFamily: theme.typography.fontFamily
+    },
+    // Radar
+    "& .apexcharts-radar-series polygon": {
+      fill: "transparent",
+      stroke: theme.vars.palette.border.subtle
+    },
+    "& .apexcharts-radar-series line": {
+      stroke: theme.vars.palette.border.subtle
+    },
+    // Legend
+    "& .apexcharts-legend": {
+      padding: 0,
+      "& .apexcharts-legend-series": {
+        alignItems: "center",
+        display: "inline-flex !important"
+      },
+      "& .apexcharts-legend-marker": {
+        marginRight: 8
+      },
+      "& .apexcharts-legend-text": {
+        color: `${theme.vars.palette.text.primary} !important`,
+        fontSize: `${theme.typography.body2.fontSize} !important`,
+        fontWeight: `${theme.typography.fontWeightMedium} !important`,
+        fontFamily: theme.typography.fontFamily,
+        lineHeight: "18px",
+        textTransform: "capitalize"
+      }
+    },
+    // Annotations
+    "& .apexcharts-xaxis-annotation-label, & .apexcharts-yaxis-annotation-label": {
+      fill: theme.vars.palette.text.primary
+    },
+    "& .apexcharts-annotation-rect": {
+      fill: varAlpha(theme.vars.palette.grey["500Channel"], 0.08)
+    },
+    // Point annotation
+    "& .apexcharts-point-annotation-label": {
+      fill: theme.vars.palette.text.primary,
+      fontFamily: theme.typography.fontFamily
+    },
+    "& .apexcharts-point-annotation-marker": {
+      stroke: theme.vars.palette.primary.main
+    },
+    // Toolbar icons (hidden by default, enable as needed)
+    "& .apexcharts-toolbar": {
+      "& .apexcharts-reset-icon, & .apexcharts-zoom-icon, & .apexcharts-zoomin-icon, & .apexcharts-zoomout-icon, & .apexcharts-pan-icon, & .apexcharts-selection-icon": {
+        display: "none"
+      }
+    },
+    // Treemap
+    "& .apexcharts-treemap-rect": {
+      stroke: theme.vars.palette.background.paper
+    }
+  }
+});
+var getDefaultChartOptions = (theme) => ({
+  chart: {
+    toolbar: { show: false },
+    zoom: { enabled: false },
+    fontFamily: theme.typography.fontFamily,
+    foreColor: theme.vars.palette.text.secondary
+  },
+  colors: [
+    theme.vars.palette.primary.main,
+    theme.vars.palette.info.main,
+    theme.vars.palette.success.main,
+    theme.vars.palette.warning.main,
+    theme.vars.palette.error.main,
+    theme.vars.palette.secondary.main
+  ],
+  stroke: {
+    width: 2.5,
+    curve: "smooth",
+    lineCap: "round"
+  },
+  grid: {
+    strokeDashArray: 3,
+    borderColor: theme.vars.palette.border.subtle,
+    padding: { top: 0, right: 0, bottom: 0, left: 0 },
+    xaxis: { lines: { show: false } },
+    yaxis: { lines: { show: true } }
+  },
+  xaxis: {
+    axisBorder: { show: false },
+    axisTicks: { show: false },
+    crosshairs: {
+      show: true,
+      stroke: {
+        color: theme.vars.palette.primary.main,
+        width: 2,
+        dashArray: 5
+      }
+    },
+    labels: {
+      style: {
+        colors: theme.vars.palette.text.secondary,
+        fontSize: "12px",
+        fontFamily: theme.typography.fontFamily
+      }
+    }
+  },
+  yaxis: {
+    crosshairs: {
+      show: false
+    },
+    labels: {
+      style: {
+        colors: theme.vars.palette.text.secondary,
+        fontSize: "12px",
+        fontFamily: theme.typography.fontFamily
+      }
+    }
+  },
+  tooltip: {
+    theme: "light",
+    fillSeriesColor: false,
+    x: { show: true },
+    y: {
+      formatter: (value) => value !== void 0 ? `${value}` : value,
+      title: { formatter: (seriesName) => `${seriesName}: ` }
+    },
+    marker: { show: false }
+  },
+  legend: {
+    show: true,
+    position: "top",
+    horizontalAlign: "right",
+    fontSize: "13px",
+    fontFamily: theme.typography.fontFamily,
+    fontWeight: 500,
+    markers: {
+      size: 7,
+      strokeWidth: 0
+    },
+    labels: {
+      colors: theme.vars.palette.text.primary
+    },
+    itemMargin: {
+      horizontal: 12,
+      vertical: 0
+    }
+  },
+  plotOptions: {
+    bar: {
+      borderRadius: 4,
+      columnWidth: "40%",
+      borderRadiusApplication: "end"
+    },
+    pie: {
+      donut: {
+        labels: {
+          show: true,
+          value: {
+            fontWeight: 600,
+            fontFamily: theme.typography.fontFamily
+          },
+          total: {
+            show: true,
+            fontFamily: theme.typography.fontFamily,
+            label: "Total"
+          }
+        }
+      }
+    },
+    radialBar: {
+      track: {
+        background: varAlpha(theme.vars.palette.grey["500Channel"], 0.16)
+      },
+      dataLabels: {
+        value: {
+          fontWeight: 600,
+          fontFamily: theme.typography.fontFamily
+        },
+        total: {
+          fontFamily: theme.typography.fontFamily
+        }
+      }
+    },
+    radar: {
+      polygons: {
+        fill: { colors: ["transparent"] },
+        strokeColors: theme.vars.palette.border.subtle
+      }
+    },
+    polarArea: {
+      rings: {
+        strokeColor: theme.vars.palette.border.subtle
+      },
+      spokes: {
+        connectorColors: theme.vars.palette.border.subtle
+      }
+    }
+  },
+  dataLabels: {
+    enabled: false,
+    dropShadow: { enabled: false },
+    style: {
+      fontFamily: theme.typography.fontFamily
+    }
+  },
+  markers: {
+    size: 4,
+    strokeWidth: 0,
+    hover: {
+      size: 6,
+      sizeOffset: 3,
+      strokeWidth: 7
+    }
+  },
+  fill: {
+    opacity: 1
+  },
+  states: {
+    hover: { filter: { type: "lighten", value: 0.04 } },
+    active: { filter: { type: "darken", value: 0.88 } }
+  },
+  responsive: [
+    {
+      breakpoint: theme.breakpoints.values.sm,
+      options: {
+        plotOptions: {
+          bar: { columnWidth: "60%" }
+        }
+      }
+    }
+  ]
+});
+
 // src/theme/core/colors.json
 var colors_default = {
   primary: {
@@ -9526,6 +9814,7 @@ export {
   XMark,
   XMarkSolid,
   action,
+  apexChartsStyles,
   background,
   baseAction,
   basePalette,
@@ -9552,6 +9841,7 @@ export {
   fShortenNumber,
   formatFullname,
   getCurrencySymbol,
+  getDefaultChartOptions,
   getInitials,
   getStorage,
   grey,