@sisense/sdk-ui 1.7.2 → 1.9.0

package/dist/query-execution/use-execute-pivot-query.d.ts

@@ -3,35 +3,17 @@ import { ExecutePivotQueryParams, PivotQueryState } from './types';
  * React hook that executes a data query for a pivot table.
  * This approach is similar to React Query's `useQuery` hook.
  *
- * @example
- * ```tsx
- *   const { data, isLoading, isError } = useExecutePivotQuery({
- *     dataSource: DM.DataSource,
- *     rows: [
- *       { attribute: DM.Category.Category, includeSubTotals: true },
- *       { attribute: DM.Brand.Brand, includeSubTotals: true },
- *       DM.Commerce.Condition,
- *     ],
- *     columns: [DM.Commerce.Gender],
- *     values: [
- *       { measure: measures.sum(DM.Commerce.Revenue, 'Total Revenue'), totalsCalculation: 'sum' },
- *       { measure: measures.sum(DM.Commerce.Quantity, 'Total Quantity'), totalsCalculation: 'min' },
- *     ],
- *     grandTotals: {title: 'Grand Totals', rows: true, columns: true},
- *     filters: [filters.members(DM.Commerce.Gender, ['Female', 'Male'])],
- *   });
- *   if (isLoading) {
- *     return <div>Loading...</div>;
- *   }
- *   if (isError) {
- *     return <div>Error</div>;
- *   }
- *   if (data) {
- *     return <div>[Render pivot table with returned data]</div>;
- *   }
- *   return null;
- *  ```
- * See also hook {@link useExecuteQuery}, which execute a generic data query.
+ * ## Example
+ *
+ * Execute a pivot query on the Sample ECommerce data model and display the results in a table.
+ *
+ * <iframe
+ *  src='https://csdk-playground.sisense.com/?example=queries%2Fuse-execute-pivot-query&mode=docs'
+ *  width=800
+ *  height=870
+ *  style='border:none;'
+ * />
+ *
  * @param params - Parameters of the query
  * @returns Query state that contains the status of the query execution, the result data, or the error if any occurred
  * @group Queries

package/dist/query-execution/use-execute-query.d.ts

@@ -1,32 +1,25 @@
 import { ExecuteQueryParams, ExecuteQueryResult } from './types';
 /**
  * React hook that executes a data query.
- * This approach, which offers an alternative to {@link ExecuteQuery} component, is similar to React Query's `useQuery` hook.
- *
- * @example
- ```tsx
-  const { data, isLoading, isError } = useExecuteQuery({
-    dataSource: DM.DataSource,
-    dimensions: [DM.Commerce.AgeRange],
-    measures: [measureFactory.sum(DM.Commerce.Revenue)],
-    filters: [filterFactory.greaterThan(DM.Commerce.Revenue, 1000)],
-  });
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
-  if (isError) {
-    return <div>Error</div>;
-  }
-  if (data) {
-    return <div>{`Total Rows: ${data.rows.length}`}</div>;
-  }
-  return null;
- ```
-
- * See also hook {@link useExecuteQueryByWidgetId}, which extracts data from an existing widget in the Sisense instance.
- *
- * See [this blog post]( https://www.sisense.com/blog/take-control-of-your-data-visualizations/) for examples
- * of using the hook to fetch data from Sisense for third-party charts.
+ *
+ * This approach, which offers an alternative to the {@link ExecuteQuery} component, is similar to React Query's `useQuery` hook.
+ *
+ * ## Example
+ *
+ * Execute a query to retrieve revenue per country per year from the Sample ECommerce data model. Then display the data in a table and column chart.
+ *
+ * <iframe
+ *  src='https://csdk-playground.sisense.com/?example=queries%2Fuse-execute-query-sorting&mode=docs'
+ *  width=800
+ *  height=870
+ *  style='border:none;'
+ * />
+ *
+ * Additional `useExecuteQuery()` examples:
+ *
+ * - [Query with Sorting](https://www.sisense.com/platform/compose-sdk/playground/?example=queries%2Fuse-execute-query-sorting)
+ * - [Take Control of Your Data Visualizations]( https://www.sisense.com/blog/take-control-of-your-data-visualizations/) blog post with examples of using the hook to fetch data to display in third-party charts.
+ *
  * @param params - Parameters of the query
  * @returns Query state that contains the status of the query execution, the result data, or the error if any occurred
  * @group Queries

package/dist/scatter-chart.d.ts

@@ -9,59 +9,21 @@ import { ScatterChartProps } from './props';
  * **Size**: An optional field represented by the size of the circles.
  * If omitted, all scatter points are equal in size. If used, the circle sizes are relative to their values.
  *
- * See [Scatter Chart](https://docs.sisense.com/main/SisenseLinux/scatter-chart.htm) for more information.
+ * ## Example
  *
- * @example
- * An example of using the component to visualize the `Sample ECommerce` data source.
+ * Scatter chart displaying total revenue per category, broken down by gender, from the Sample ECommerce data model.
  *
- * The chart shows top Categories by Total Revenue on the x-axis, and Total Quantity on the y-axis in logarithmic scale
- * with Gender breakdown by color and Total Cost encoded by the size of the bubbles.
- * ```tsx
- * <ScatterChart
- *   dataSet={DM.DataSource}
- *   filters={[filterFactory.greaterThan(DM.Commerce.Revenue, 10)]}
- *   dataOptions={{
- *     x: measureFactory.sum(DM.Commerce.Revenue),
- *     y: measureFactory.sum(DM.Commerce.Quantity),
- *     breakByPoint: DM.Category.Category,
- *     breakByColor: DM.Commerce.Gender,
- *     size: measureFactory.sum(DM.Commerce.Cost),
- *   }}
- *   styleOptions={{
- *     xAxis: {
- *       enabled: true,
- *       gridLines: true,
- *       isIntervalEnabled: false,
- *       labels: {
- *         enabled: true,
- *       },
- *       logarithmic: true,
- *       title: {
- *         enabled: true,
- *         text: 'Total Revenue',
- *       },
- *     },
- *     yAxis: {
- *       enabled: true,
- *       gridLines: true,
- *       isIntervalEnabled: false,
- *       labels: {
- *         enabled: true,
- *       },
- *       logarithmic: true,
- *       title: {
- *         enabled: true,
- *         text: 'Total Quantity',
- *       },
- *     },
- *   }}
- *   onDataPointClick={(point, nativeEvent) => {
- *     console.log('clicked', point, nativeEvent);
- *   }}
+ * <iframe
+ *  src='https://csdk-playground.sisense.com/?example=charts%2Fscatter-chart&mode=docs'
+ *  width=800
+ *  height=870
+ *  style='border:none;'
  * />
- * ```
  *
- * <img src="media://scatter-chart-example-1.png" width="800px" />
+ * Additional Scatter Chart examples:
+ *
+ * - [Bubble Scatter Chart](https://www.sisense.com/platform/compose-sdk/playground/?example=charts/scatter-chart-bubble)
+ *
  * @param props - Scatter chart properties
  * @returns Scatter Chart component
  * @group Charts

package/dist/scattermap-chart.d.ts

@@ -2,31 +2,18 @@
 import { ScattermapChartProps } from './props';
 /**
  * A React component that allows to visualize geographical data as data points on a map.
- * See [Scattermap Chart](https://docs.sisense.com/main/SisenseLinux/scatter-map.htm) for more information.
  *
- * @example
- * An example of using the component to visualize the `Sample ECommerce` data source:
- * ```tsx
- * <ScattermapChart
- *   dataSet={DM.DataSource}
- *   dataOptions={{
- *     locations: [DM.Country.Country],
- *     size: measureFactory.sum(DM.Commerce.Cost, 'Size by Cost'),
- *     colorBy: {
- *       column: measureFactory.sum(DM.Commerce.Revenue, 'Color by Revenue'),
- *       color: 'green'
- *     },
- *     details: DM.Category.Category,
- *   }}
- *   styleOptions={{
- *     markers: {
- *       fill: 'hollow-bold'
- *     }
- *   }}
+ * ## Example
+ *
+ * Scatter map chart displaying cost and revenue rank from the Sample ECommerce data model. The cost is indicated by size of each point and the revenue rank is indicated by the point's size.
+ *
+ * <iframe
+ *  src='https://csdk-playground.sisense.com/?example=charts%2Fmap-scatter&mode=docs'
+ *  width=1000
+ *  height=900
+ *  style='border:none;'
  * />
- * ```
  *
- * <img src="media://scattermap-chart-example-1.png" width="600px" />
  * @param props - Scattermap chart properties
  * @returns Scattermap Chart component
  * @group Charts

package/dist/sunburst-chart.d.ts

@@ -2,25 +2,20 @@
 import { SunburstChartProps } from './props';
 /**
  * A React component displaying hierarchical data in the form of nested circle slices.
+ *
  * This type of chart can be used in different scenarios, for example, to compare both categories and sub-categories.
- * See [Sunburst Chart](https://docs.sisense.com/main/SisenseLinux/sunburst-widget.htm) for more information.
  *
- * @example
- * An example of using the component to visualize the `Sample ECommerce` data source:
- * ```tsx
- * <SunburstChart
- *   dataSet={DM.DataSource}
- *   dataOptions={{
- *     category: [
- *        DM.Commerce.Сondition,
- *        DM.Commerce.Date.Years
- *      ],
- *     value: [measureFactory.sum(DM.Commerce.Quantity)],
- *   }}
+ * ## Example
+ *
+ * Sunburst chart displaying total revenue, categorized by condition and age range, from the Sample ECommerce data model.
+ *
+ * <iframe
+ *  src='https://csdk-playground.sisense.com/?example=charts%2Fsunburst-chart&mode=docs'
+ *  width=800
+ *  height=870
+ *  style='border:none;'
  * />
- * ```
  *
- * <img src="media://sunburst-chart-example-1.png" width="600px" />
  * @param props - Sunburst chart properties
  * @returns Sunburst Chart component
  * @group Charts

package/dist/table/table.d.ts

@@ -3,47 +3,17 @@ import { TableProps } from '../props';
 /**
  * Table with aggregation and pagination.
  *
- * @example
- * (1) Example of Table of raw data from the `Sample ECommerce` data model:
+ * ## Example
  *
- * ```tsx
- * <Table
- *   dataSet={DM.DataSource}
- *   dataOptions={{
- *     columns: [
- *       DM.Commerce.AgeRange,
- *       DM.Commerce.Revenue,
- *       DM.Commerce.Cost,
- *       DM.Commerce.Quantity,
- *     ],
- *   }}
- *   styleOptions={{ width: 600, height: 750 }}
- * />
- * ```
- *
- * <img src="media://table-example-1.png" width="800px" />
- *
- * (2) Example of Table of aggregated data from the same data model:
+ * Table displaying year, condition, and total revenue from the Sample ECommerce data model.
  *
- * ```tsx
- * <Table
- *   dataSet={DM.DataSource}
- *   dataOptions={{
- *     columns: [
- *       DM.Commerce.AgeRange,
- *       measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue'),
- *       measureFactory.sum(DM.Commerce.Cost, 'Total Cost'),
- *     ],
- *   }}
- *   styleOptions={{
- *     headersColor: true,
- *     alternatingColumnsColor: false,
- *     alternatingRowsColor: true,
- *   }}
+ * <iframe
+ *  src='https://csdk-playground.sisense.com/?example=tables%2Faggregated-table&mode=docs'
+ *  width=800
+ *  height=870
+ *  style='border:none;'
  * />
- * ```
  *
- * <img src="media://table-example-2.png" width="800px" />
  * @param props - Table properties
  * @returns Table component
  * @group Data Grids

package/dist/theme-provider/default-theme-settings.d.ts

@@ -0,0 +1,9 @@
+import { CompleteThemeSettings } from '../types';
+/**
+ * Returns default theme settings, which can be used as base for custom theme options.
+ *
+ * @param isDarkMode - Boolean value whether to get theme settings for dark mode
+ * @returns Theme settings object
+ * @internal
+ */
+export declare const getDefaultThemeSettings: (isDarkMode?: boolean) => CompleteThemeSettings;

package/dist/theme-provider/types.d.ts

@@ -0,0 +1,7 @@
+import { CompleteThemeSettings } from '../types';
+/**
+ * Themable interface for styled components that require theme settings.
+ */
+export type Themable = {
+    theme: CompleteThemeSettings;
+};

package/dist/translation/resources/en.d.ts

@@ -29,9 +29,12 @@ export declare const translation: {
         };
         widgetModel: {
             tabularWidgetNotSupported: string;
-            onlyTabularWidgetsSupported: string;
+            pivotWidgetNotSupported: string;
+            onlyTableWidgetSupported: string;
+            onlyPivotWidgetSupported: string;
         };
         unknownFilterInFilterRelations: string;
+        filterRelationsNotSupported: string;
     };
     errorBoxText: string;
     chartNoData: string;

package/dist/translation/resources/index.d.ts

@@ -33,9 +33,12 @@ export declare const resources: {
             };
             widgetModel: {
                 tabularWidgetNotSupported: string;
-                onlyTabularWidgetsSupported: string;
+                pivotWidgetNotSupported: string;
+                onlyTableWidgetSupported: string;
+                onlyPivotWidgetSupported: string;
             };
             unknownFilterInFilterRelations: string;
+            filterRelationsNotSupported: string;
         };
         errorBoxText: string;
         chartNoData: string;
@@ -118,9 +121,12 @@ export declare const resources: {
             };
             widgetModel: {
                 tabularWidgetNotSupported: string;
-                onlyTabularWidgetsSupported: string;
+                pivotWidgetNotSupported: string;
+                onlyTableWidgetSupported: string;
+                onlyPivotWidgetSupported: string;
             };
             unknownFilterInFilterRelations: string;
+            filterRelationsNotSupported: string;
         };
         errorBoxText: string;
         chartNoData: string;

package/dist/treemap-chart.d.ts

@@ -2,31 +2,20 @@
 import { TreemapChartProps } from './props';
 /**
  * A React component displaying hierarchical data in the form of nested rectangles.
+ *
  * This type of chart can be used instead of a column chart for comparing a large number of categories and sub-categories.
- * See [Treemap Chart](https://docs.sisense.com/main/SisenseLinux/treemap.htm) for more information.
  *
- * @example
- * An example of using the component to visualize the `Sample ECommerce` data source:
- * ```tsx
- * <TreemapChart
- *   dataSet={DM.DataSource}
- *   dataOptions={{
- *     category: [
- *        {
- *          column: DM.Commerce.Condition,
- *          isColored: true,
- *        },
- *        DM.Commerce.Date.Years
- *      ],
- *     value: [measureFactory.sum(DM.Commerce.Quantity)],
- *   }}
- *   onDataPointClick= {(point, nativeEvent) => {
- *     console.log('clicked', point, nativeEvent);
- *   }}
+ * ## Example
+ *
+ * Tree map chart displaying total revenue, categorized by condition and age range, from the Sample ECommerce data model.
+ *
+ * <iframe
+ *  src='https://csdk-playground.sisense.com/?example=charts%2Ftreemap-chart&mode=docs'
+ *  width=800
+ *  height=870
+ *  style='border:none;'
  * />
- * ```
  *
- * <img src="media://treemap-chart-example-1.png" width="600px" />
  * @param props - Treemap chart properties
  * @returns Treemap Chart component
  * @group Charts

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Attribute, MembersFilter } from '@sisense/sdk-data';
+import type { Attribute, MembersFilter } from '@sisense/sdk-data';
 import { DeepRequired } from 'ts-essentials';
 import { AreaSubtype, BoxplotSubtype, LineSubtype, PieSubtype, PolarSubtype, StackableSubtype } from './chart-options-processor/subtype-to-design-options';
 import { IndicatorComponents } from './chart-options-processor/translations/design-options';
@@ -10,6 +10,7 @@ import { DataPointsEventHandler } from './props';
 import { LegendPosition } from './chart-options-processor/translations/legend-section';
 import { GeoDataElement, RawGeoDataElement } from './chart-data/types';
 import { Coordinates } from './charts/map-charts/scattermap/types';
+export type { SortDirection, PivotRowsSort } from '@sisense/sdk-data';
 export type { AppConfig } from './app/client-application';
 export type { DateConfig } from './query/date-formats';
 export type { CartesianChartDataOptions, CategoricalChartDataOptions, ChartDataOptions, ScatterChartDataOptions, IndicatorChartDataOptions, StyledColumn, StyledMeasureColumn, } from './chart-data-options/types';
@@ -327,6 +328,14 @@ export interface PivotTableStyleOptions {
      * Boolean flag whether to apply background color to alternate columns
      */
     alternatingColumnsColor?: boolean;
+    /**
+     * Boolean flag whether to fill row members cells with background color
+     */
+    membersColor?: boolean;
+    /**
+     * Boolean flag whether to fill totals and subtotals cells with background color
+     */
+    totalsColor?: boolean;
     /**
      * Number of rows per page
      *
@@ -355,6 +364,10 @@ export interface PivotTableStyleOptions {
      * Boolean flag whether the height of the component should be automatically adjusted to fit the content
      */
     isAutoHeight?: boolean;
+    /**
+     * Manual height of each row (default is 25px)
+     */
+    rowHeight?: number;
 }
 /**
  * Common part of IndicatorStyleOptions for all types of indicator
@@ -482,8 +495,6 @@ export type ChartType = CartesianChartType | CategoricalChartType | ScatterChart
 export type SeriesChartType = 'auto' | 'line' | 'spline' | 'areaspline' | 'bar' | 'area' | 'column' | 'scatter';
 /** The number of decimal places */
 export type DecimalScale = number | 'auto';
-/** Sorting direction, either by Ascending order, Descending order, or None */
-export type SortDirection = 'sortAsc' | 'sortDesc' | 'sortNone';
 /**
  * Configuration for number formatting.
  */
@@ -562,7 +573,9 @@ export interface ThemeSettings {
     typography?: {
         /** Font family name to style component text */
         fontFamily?: string;
+        /** Primary text color */
         primaryTextColor?: string;
+        /** Secondary text color */
         secondaryTextColor?: string;
     };
     /** General theme settings */
@@ -576,6 +589,155 @@ export interface ThemeSettings {
         /** Hover color for primary buttons */
         primaryButtonHoverColor?: string;
     };
+    /**
+     * Theme settings specific to the AI Chatbot component
+     *
+     * @internal
+     */
+    aiChat?: {
+        /** Background color of the chatbot */
+        backgroundColor?: string;
+        /** Text color of the chatbot */
+        primaryTextColor?: string;
+        /** Secondary text color of the chatbot */
+        secondaryTextColor?: string;
+        /** Primary font size for text in the chatbot */
+        primaryFontSize?: [fontSize: string, lineHeight: string];
+        /** Border of the chatbot */
+        border?: false | string;
+        /** Border radius of the chatbot */
+        borderRadius?: false | string;
+        /** Settings for the main chat body */
+        body?: {
+            /** Left padding of the chat body */
+            paddingLeft?: string;
+            /** Right padding of the chat body */
+            paddingRight?: string;
+            /** Top padding of the chat body */
+            paddingTop?: string;
+            /** Bottom padding of the chat body */
+            paddingBottom?: string;
+            /** Gap size between each message in the chat body */
+            gapBetweenMessages?: string;
+        };
+        /** Settings for the chat footer */
+        footer?: {
+            /** Left padding of the chat footer */
+            paddingLeft?: string;
+            /** Right padding of the chat footer */
+            paddingRight?: string;
+            /** Top padding of the chat footer */
+            paddingTop?: string;
+            /** Bottom padding of the chat footer */
+            paddingBottom?: string;
+        };
+        /** Settings for user chat messages */
+        userMessages?: {
+            /** Background color of user chat messages */
+            backgroundColor?: string;
+        };
+        /** Settings for system chat messages */
+        systemMessages?: {
+            /** Background color of system chat messages */
+            backgroundColor?: string;
+        };
+        /** Settings for the chatbot input */
+        input?: {
+            /** Background color of the input */
+            backgroundColor?: string;
+            /** Settings to be applied on input focus */
+            focus?: {
+                /** Outline color of the input */
+                outlineColor?: string;
+            };
+        };
+        /** Settings for the chatbot header */
+        header?: {
+            /** Background color of the chatbot header */
+            backgroundColor?: string;
+            /** Text color of the chatbot header */
+            textColor?: string;
+        };
+        /** Settings for chatbot dropup */
+        dropup?: {
+            /** Background color of the dropup */
+            backgroundColor?: string;
+            /** Box shadow of the dropup */
+            boxShadow?: string;
+            /** Border radius of the dropup */
+            borderRadius?: string;
+            /** Settings for the section headers of the dropup */
+            headers?: {
+                /** Text color of headers */
+                textColor?: string;
+                /** Settings to be applied on hover of the headers */
+                hover?: {
+                    /** Background color of headers on hover */
+                    backgroundColor?: string;
+                };
+            };
+            /** Settings for the dropup items */
+            items?: {
+                /** Text color of the dropup items */
+                textColor?: string;
+                /** Settings to be applied on hover of dropup items */
+                hover?: {
+                    /** Background color of dropup items on hover */
+                    backgroundColor?: string;
+                };
+            };
+        };
+        /** Settings for the chatbot suggestions */
+        suggestions?: {
+            /** Text color of the chatbot suggestions */
+            textColor?: string;
+            /** Background color of the chatbot suggestions */
+            backgroundColor?: string;
+            /** Border of the chatbot suggestions */
+            border?: string;
+            /** 2-color gradient to be applied on the border */
+            borderGradient?: [string, string] | null;
+            /** Border radius of the chatbot suggestions */
+            borderRadius?: string;
+            /** Setting to be applied on hover */
+            hover?: {
+                /** Background color of the chatbot suggestions on hover */
+                backgroundColor?: string;
+                /** Text color of the chatbot suggestions on hover */
+                textColor?: string;
+            };
+            /** 2-color gradient to be applied on suggestions loading animation */
+            loadingGradient?: [string, string];
+            /** Gap size between each suggestion item */
+            gap?: string;
+        };
+        /** Settings for the chatbot clickable messages */
+        clickableMessages?: {
+            /** Background color of the chatbot clickable messages */
+            backgroundColor?: string;
+            /** Text color of the chatbot clickable messages */
+            textColor?: string;
+            /** Border of the chatbot clickable messages */
+            border?: false | string;
+            /** Setting to be applied on hover */
+            hover?: {
+                /** Text color of the chatbot clickable messages on hover */
+                textColor?: string;
+                /** Background color of the chatbot clickable messages on hover */
+                backgroundColor?: string;
+            };
+        };
+        /** Settings for the chatbot icons */
+        icons?: {
+            /** Color of the chatbot icons */
+            color?: string;
+            /** Setting to be applied on hover */
+            hover?: {
+                /** Color of the chatbot icons on hover */
+                color?: string;
+            };
+        };
+    };
 }
 /**
  * Complete set of theme settings defining the look and feel of components.
@@ -650,11 +812,17 @@ export interface DashboardWidgetStyleOptions extends WidgetStyleOptions {
 /** Style settings defining the look and feel of ChartWidget */
 export type ChartWidgetStyleOptions = ChartStyleOptions & WidgetStyleOptions;
 /**
- * Style settings defining the look and feel of TableWidget}
+ * Style settings defining the look and feel of TableWidget
  *
  * @internal
  */
 export type TableWidgetStyleOptions = TableStyleOptions & WidgetStyleOptions;
+/**
+ * Style settings defining the look and feel of TableWidget
+ *
+ * @internal
+ */
+export type PivotTableWidgetStyleOptions = PivotTableStyleOptions & WidgetStyleOptions;
 /**
  * Runs type guard check for ThemeOid.
  *

package/dist/widgets/common/drilldown-breadcrumbs/styled-buttons.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 export declare const StyledPrevButton: import("@emotion/styled").StyledComponent<import("@mui/material/IconButton").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "children" | "disabled" | "size" | "className" | "tabIndex" | "color" | "action" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
+}, "style" | "children" | "disabled" | "size" | "className" | "tabIndex" | "color" | "action" | "classes" | "sx" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const StyledNextButton: import("@emotion/styled").StyledComponent<import("@mui/material/IconButton").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "children" | "disabled" | "size" | "className" | "tabIndex" | "color" | "action" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
+}, "style" | "children" | "disabled" | "size" | "className" | "tabIndex" | "color" | "action" | "classes" | "sx" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;