@juspay/blend-design-system 0.0.35 → 0.0.36-beta.1

package/README.md

@@ -134,9 +134,9 @@ function App() {
 
 ## 📖 Documentation
 
-- **[Component Documentation](https://juspay.design/)** - Complete component API and examples
-- **[Storybook](https://storybook.juspay.design/)** - Interactive component playground
-- **[Design Guidelines](https://juspay.design/guidelines)** - Design principles and usage guidelines
+- **[Component Documentation](https://blend.juspay.design/)** - Complete component API and examples
+- **[Storybook](https://blend.juspay.design/storybook/)** - Interactive component playground
+- **[Design Guidelines](https://blend.juspay.design/guidelines)** - Design principles and usage guidelines
 
 ## 🛠️ Development
 
@@ -167,10 +167,10 @@ MIT © [Juspay Technologies](https://juspay.in)
 
 ## 🔗 Links
 
-- **Homepage**: [https://juspay.design/](https://juspay.design/)
+- **Homepage**: [https://blend.juspay.design/](https://blend.juspay.design/)
 - **Repository**: [https://github.com/juspay/blend-design-system](https://github.com/juspay/blend-design-system)
 - **Issues**: [https://github.com/juspay/blend-design-system/issues](https://github.com/juspay/blend-design-system/issues)
-- **Storybook**: [https://storybook.juspay.design/](https://storybook.juspay.design/)
+- **Storybook**: [https://blend.juspay.design/storybook/](https://blend.juspay.design/storybook/)
 
 ---
 

package/dist/components/Charts/chart.tokens.d.ts

@@ -1,7 +1,7 @@
 import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { BreakpointType } from '../../breakpoints/breakPoints';
-export type ChartState = 'default' | 'hover' | 'active';
+export type ChartState = 'default' | 'hover' | 'active' | 'total';
 export type ChartHeight = 'default' | 'fullscreen' | 'small';
 export type ChartTokensType = {
     border: CSSObject['border'];

package/dist/components/Charts/renderChart.d.ts

@@ -1,2 +1,2 @@
 import { RenderChartProps } from './types';
-export declare const renderChart: ({ chartName, flattenedData, chartType, hoveredKey, lineKeys, colors, setHoveredKey, data: originalData, selectedKeys, isSmallScreen, barsize, xAxis, yAxis, tooltip, noData, height, CustomizedDot, }: RenderChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const renderChart: ({ chartName, flattenedData, chartType, hoveredKey, lineKeys, colors, setHoveredKey, data: originalData, selectedKeys, isSmallScreen, barsize, xAxis, yAxis, tooltip, noData, height, CustomizedDot, lineSeriesKeys, onKeyClick, }: RenderChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/types.d.ts

@@ -32,6 +32,7 @@ export declare enum ChartLegendPosition {
 export declare enum ChartType {
     LINE = "line",
     BAR = "bar",
+    LINE_BAR = "lineBar",
     PIE = "pie",
     SCATTER = "scatter",
     AREA = "area",
@@ -138,6 +139,8 @@ export type RenderChartProps = {
     noData?: NoDataProps;
     height?: number | string;
     CustomizedDot?: (props: DotItemDotProps) => React.ReactElement<SVGElement>;
+    lineSeriesKeys?: string[];
+    onKeyClick?: (key: string) => void;
 };
 export type CoreChartProps = {
     chartType?: ChartType;
@@ -156,6 +159,7 @@ export type CoreChartProps = {
     hoveredKey?: string | null;
     onHoveredKeyChange?: (key: string | null) => void;
     selectedKeys?: string[];
+    lineSeriesKeys?: string[];
     enableHover?: boolean;
 };
 export type ChartsSkeletonProps = {
@@ -193,6 +197,7 @@ export type ChartsProps = {
         total?: string;
     }[];
     CustomizedDot?: (props: DotItemDotProps) => React.ReactElement<SVGElement>;
+    lineSeriesKeys?: string[];
 };
 export type FlattenedDataPoint = {
     name: string;

package/dist/components/ChartsV2/ChartContainerV2.d.ts

@@ -0,0 +1,6 @@
+import { ChartV2ContainerProps } from './chartV2.types';
+declare const ChartContainerV2: {
+    ({ children }: ChartV2ContainerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ChartContainerV2;

package/dist/components/ChartsV2/ChartHeaderV2.d.ts

@@ -0,0 +1,6 @@
+import { ChartV2HeaderProps } from './chartV2.types';
+declare const ChartHeaderV2: {
+    ({ children }: ChartV2HeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ChartHeaderV2;

package/dist/components/ChartsV2/ChartV2.d.ts

@@ -0,0 +1,3 @@
+import { ChartV2Props } from './chartV2.types';
+declare const ChartV2: import('react').ForwardRefExoticComponent<Omit<ChartV2Props, "ref"> & import('react').RefAttributes<import('highcharts-react-official').HighchartsReactRefObject>>;
+export default ChartV2;

package/dist/components/ChartsV2/ChartV2Fullscreen.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+type ChartV2FullscreenControls = {
+    isFullscreen: boolean;
+    enterFullscreen: () => void;
+    exitFullscreen: () => void;
+};
+export interface ChartV2FullscreenProps {
+    children: (controls: ChartV2FullscreenControls) => ReactNode;
+}
+declare const ChartV2Fullscreen: {
+    ({ children }: ChartV2FullscreenProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ChartV2Fullscreen;

package/dist/components/ChartsV2/ChartV2Legend.d.ts

@@ -0,0 +1,6 @@
+import { ChartV2LegendProps } from './chartV2.types';
+declare const ChartV2Legend: {
+    ({ chartRef, chartRefs, customLegendItems, renderItem, layout, }: ChartV2LegendProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export default ChartV2Legend;

package/dist/components/ChartsV2/ChartV2NoData.d.ts

@@ -0,0 +1,6 @@
+import { ChartV2NoDataProps } from './chartV2.types';
+declare const ChartV2NoData: {
+    ({ title, subtitle, slot, button, }: ChartV2NoDataProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ChartV2NoData;

package/dist/components/ChartsV2/ChartV2Skeleton.d.ts

@@ -0,0 +1,10 @@
+import { SkeletonVariant } from '../Skeleton';
+declare const ChartV2Skeleton: {
+    ({ skeletonVariant, height, isExpanded, }: {
+        skeletonVariant?: SkeletonVariant;
+        height?: number;
+        isExpanded?: boolean;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ChartV2Skeleton;

package/dist/components/ChartsV2/chartV2.dark.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsiveChartV2Tokens } from './chartV2.tokens';
+export declare const getChartV2DarkTokens: (foundationToken: FoundationTokenType) => ResponsiveChartV2Tokens;

package/dist/components/ChartsV2/chartV2.light.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsiveChartV2Tokens } from './chartV2.tokens';
+export declare const getChartV2LightTokens: (foundationToken: FoundationTokenType) => ResponsiveChartV2Tokens;

package/dist/components/ChartsV2/chartV2.sankey.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ChartsV2/chartV2.tokens.d.ts

@@ -0,0 +1,102 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { Theme } from '../../context/theme.enum';
+export type ChartV2TokensType = {
+    border: CSSObject['border'];
+    borderRadius: CSSObject['borderRadius'];
+    boxShadow: CSSObject['boxShadow'];
+    backgroundColor: CSSObject['backgroundColor'];
+    header: {
+        padding: {
+            top: CSSObject['padding'];
+            right: CSSObject['padding'];
+            bottom: CSSObject['padding'];
+            left: CSSObject['padding'];
+        };
+        backgroundColor: CSSObject['backgroundColor'];
+        borderBottom: CSSObject['borderBottom'];
+    };
+    legends: {
+        gap: CSSObject['gap'];
+        legendItem: {
+            gap: CSSObject['gap'];
+            shape: {
+                width: CSSObject['width'];
+                height: CSSObject['height'];
+                borderRadius: CSSObject['borderRadius'];
+            };
+            text: {
+                gap: CSSObject['gap'];
+                name: {
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                    lineHeight: CSSObject['lineHeight'];
+                    color: CSSObject['color'];
+                };
+                value: {
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                    lineHeight: CSSObject['lineHeight'];
+                    color: CSSObject['color'];
+                };
+                separator: {
+                    color: CSSObject['color'];
+                    width: CSSObject['width'];
+                    height: CSSObject['height'];
+                };
+            };
+        };
+    };
+    chart: {
+        backgroundColor: CSSObject['backgroundColor'];
+        xAxis: {
+            title: {
+                fontSize: CSSObject['fontSize'];
+                color: CSSObject['color'];
+                fontWeight: CSSObject['fontWeight'];
+                lineHeight: CSSObject['lineHeight'];
+            };
+            labels: {
+                fontSize: CSSObject['fontSize'];
+                color: CSSObject['color'];
+                fontWeight: CSSObject['fontWeight'];
+                lineHeight: CSSObject['lineHeight'];
+            };
+            line: {
+                width: CSSObject['width'];
+                color: CSSObject['color'];
+            };
+            gridLine: {
+                width: CSSObject['width'];
+                color: CSSObject['color'];
+            };
+        };
+        yAxis: {
+            title: {
+                fontSize: CSSObject['fontSize'];
+                color: CSSObject['color'];
+                fontWeight: CSSObject['fontWeight'];
+                lineHeight: CSSObject['lineHeight'];
+            };
+            labels: {
+                fontSize: CSSObject['fontSize'];
+                color: CSSObject['color'];
+                fontWeight: CSSObject['fontWeight'];
+                lineHeight: CSSObject['lineHeight'];
+            };
+            line: {
+                width: CSSObject['width'];
+                color: CSSObject['color'];
+            };
+            gridLine: {
+                width: CSSObject['width'];
+                color: CSSObject['color'];
+            };
+        };
+    };
+};
+export type ResponsiveChartV2Tokens = {
+    [key in keyof BreakpointType]: ChartV2TokensType;
+};
+export declare const getChartV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveChartV2Tokens;

package/dist/components/ChartsV2/chartV2.types.d.ts

@@ -0,0 +1,72 @@
+import { RefObject, ReactNode } from 'react';
+import { HighchartsReactProps, HighchartsReactRefObject } from 'highcharts-react-official';
+import { default as Highcharts } from 'highcharts';
+import { ButtonProps } from '../Button';
+import { SkeletonVariant } from '../Skeleton';
+export declare const ChartV2BaseInstance: typeof Highcharts;
+export type ChartV2Type = typeof Highcharts;
+export type ChartV2ReactProps = HighchartsReactProps;
+export type ChartV2SkeletonProps = {
+    show: boolean;
+    variant?: SkeletonVariant;
+    height?: number;
+};
+export type ChartV2NoDataProps = {
+    title?: string;
+    subtitle?: string;
+    slot?: ReactNode;
+    button?: ButtonProps;
+};
+export type ChartV2Props = Omit<ChartV2ReactProps, 'className' | 'style'> & {
+    highcharts?: ChartV2Type;
+    skeleton?: ChartV2SkeletonProps;
+    noData?: ChartV2NoDataProps;
+};
+export type ChartV2Options = Highcharts.Options;
+export type ChartV2SeriesOptionsType = Highcharts.SeriesOptionsType;
+export type ChartV2SeriesLineOptions = Highcharts.SeriesLineOptions;
+export type ChartV2SeriesColumnOptions = Highcharts.SeriesColumnOptions;
+export type ChartV2SeriesBarOptions = Highcharts.SeriesBarOptions;
+export type ChartV2SeriesPieOptions = Highcharts.SeriesPieOptions;
+export type ChartV2SeriesScatterOptions = Highcharts.SeriesScatterOptions;
+export type ChartV2SeriesSankeyOptions = Highcharts.SeriesSankeyOptions;
+export type ChartV2SeriesAreaOptions = Highcharts.SeriesAreaOptions;
+export type ChartV2SeriesXrangeOptions = Highcharts.SeriesXrangeOptions;
+export type ChartV2Point = Highcharts.Point;
+export type ChartV2PointMarkerOptionsObject = Highcharts.PointMarkerOptionsObject;
+export type ChartV2XAxisOptions = Highcharts.XAxisOptions;
+export type ChartV2YAxisOptions = Highcharts.YAxisOptions;
+export type ChartV2 = Highcharts.Chart;
+export type ChartV2Axis = Highcharts.Axis;
+export type ChartV2Series = Highcharts.Series;
+export type ChartV2SeriesZonesOptionsObject = Highcharts.SeriesZonesOptionsObject;
+export type ChartV2ReactRefObject = HighchartsReactRefObject;
+export interface ChartV2ContainerProps {
+    children: ReactNode;
+}
+export interface ChartV2HeaderProps {
+    children: ReactNode;
+}
+export type ChartV2LegendItem = Highcharts.Series | Highcharts.Point;
+export interface ChartV2CustomLegendItem {
+    key: string;
+    name: string;
+    color?: string;
+    value?: string | number;
+}
+export interface ChartV2LegendProps {
+    /** Single chart ref (use when legend controls one chart). */
+    chartRef?: RefObject<ChartV2ReactRefObject | null>;
+    /** Multiple chart refs (use for shared legend; visibility and hover sync across all). */
+    chartRefs?: ReadonlyArray<RefObject<ChartV2ReactRefObject | null>>;
+    customLegendItems?: ChartV2CustomLegendItem[];
+    renderItem?: (params: {
+        item: ChartV2LegendItem;
+        name: string;
+        visible: boolean;
+        color: string;
+        value?: string | number;
+        onClick: () => void;
+    }) => ReactNode;
+    layout?: 'horizontal' | 'vertical';
+}

package/dist/components/ChartsV2/index.d.ts

@@ -0,0 +1,9 @@
+export { default as ChartV2 } from './ChartV2';
+export { default as ChartV2Legend } from './ChartV2Legend';
+export { default as ChartContainerV2 } from './ChartContainerV2';
+export { default as ChartHeaderV2 } from './ChartHeaderV2';
+export { default as ChartV2Fullscreen } from './ChartV2Fullscreen';
+export { default as ChartV2Skeleton } from './ChartV2Skeleton';
+export { default as ChartV2NoData } from './ChartV2NoData';
+export * from './chartV2.tokens';
+export * from './chartV2.types';

package/dist/components/ChartsV2/useChartLegend.d.ts

@@ -0,0 +1,9 @@
+import { ChartV2LegendProps } from './chartV2.types';
+export declare function useChartLegend(chartRef: ChartV2LegendProps['chartRef'], chartRefs: ChartV2LegendProps['chartRefs']): {
+    hoveredItem: import('./chartV2.types').ChartV2LegendItem | null;
+    setHoveredItem: import('react').Dispatch<import('react').SetStateAction<import('./chartV2.types').ChartV2LegendItem | null>>;
+    allItems: import('./chartV2.types').ChartV2LegendItem[];
+    handleClick: (item: import('./chartV2.types').ChartV2LegendItem, itemIndex: number) => void;
+    chart: import('highcharts').Chart;
+    charts: import('highcharts').Chart[];
+};

package/dist/components/ChartsV2/useChartLegendHover.d.ts

@@ -0,0 +1,7 @@
+import { ChartV2, ChartV2LegendItem } from './chartV2.types';
+export declare const useChartLegendHover: (chart: ChartV2 | null, charts: ChartV2[]) => {
+    hoveredItem: ChartV2LegendItem | null;
+    setHoveredItem: import('react').Dispatch<import('react').SetStateAction<ChartV2LegendItem | null>>;
+    allItems: ChartV2LegendItem[];
+    handleClick: (item: ChartV2LegendItem, itemIndex: number) => void;
+};

package/dist/components/ChartsV2/useChartRefs.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from 'react';
+import { ChartV2 } from './chartV2.types';
+declare const useChartRefs: (refs: ReadonlyArray<RefObject<{
+    chart?: ChartV2;
+} | null>>) => ChartV2[];
+export default useChartRefs;

package/dist/components/ChartsV2/utils.d.ts

@@ -0,0 +1,3 @@
+import { ChartV2, ChartV2LegendItem } from './chartV2.types';
+export declare const getLegendItems: (chart: ChartV2 | null) => ChartV2LegendItem[];
+export declare const applyHoverState: (items: ChartV2LegendItem[], hovered: ChartV2LegendItem | null) => void;

package/dist/components/ChatInput/ChatInput.d.ts

@@ -4,6 +4,7 @@ export declare const getDocIcon: (fileType: AttachedFile["type"]) => React.React
 declare const ChatInput: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange"> & {
     value?: string;
     slot1?: React.ReactNode;
+    slot2?: React.ReactNode;
     onChange?: (value: string) => void;
     onSend?: (message: string, files: AttachedFile[]) => void;
     onAttachFiles?: (files: File[]) => void;

package/dist/components/ChatInput/MobileChatInput.d.ts

@@ -3,6 +3,7 @@ type MobileChatInputProps = {
     value: string;
     onChange?: (value: string) => void;
     slot1?: React.ReactNode;
+    slot2?: React.ReactNode;
     placeholder?: string;
     attachedFiles?: AttachedFile[];
     handleAttachClick?: () => void;

package/dist/components/ChatInput/chatInput.tokens.d.ts

@@ -70,10 +70,7 @@ export type ChatInputTokensType = Readonly<{
             focus: CSSObject['border'];
         };
         borderRadius: CSSObject['borderRadius'];
-        paddingTop: CSSObject['paddingTop'];
-        paddingRight: CSSObject['paddingRight'];
-        paddingBottom: CSSObject['paddingBottom'];
-        paddingLeft: CSSObject['paddingLeft'];
+        padding: CSSObject['padding'];
         gap: CSSObject['gap'];
         minHeight: CSSObject['minHeight'];
         transition: CSSObject['transition'];
@@ -93,8 +90,10 @@ export type ChatInputTokensType = Readonly<{
         color: CSSObject['color'];
         fontSize: CSSObject['fontSize'];
         lineHeight: CSSObject['lineHeight'];
-        paddingX: CSSObject['padding'];
-        paddingY: CSSObject['padding'];
+        paddingTop: CSSObject['paddingTop'];
+        paddingRight: CSSObject['paddingRight'];
+        paddingBottom: CSSObject['paddingBottom'];
+        paddingLeft: CSSObject['paddingLeft'];
         border: CSSObject['border'];
         borderRadius: CSSObject['borderRadius'];
         placeholder: {
@@ -112,6 +111,7 @@ export type ChatInputTokensType = Readonly<{
         paddingY: CSSObject['padding'];
         maxHeight: CSSObject['maxHeight'];
         overflowY: CSSObject['overflowY'];
+        margin: CSSObject['margin'];
     };
     bottomActions: {
         paddingX: CSSObject['padding'];
@@ -158,6 +158,8 @@ export type ChatInputTokensType = Readonly<{
         scrollContainer: {
             overflowY: CSSObject['overflowY'];
             maxHeightOffset: number;
+            backgroundColor: CSSObject['backgroundColor'];
+            scrollbarColor: string;
         };
         item: {
             backgroundColor: {

package/dist/components/ChatInput/types.d.ts

@@ -15,6 +15,7 @@ export type TopQuery = {
 export type ChatInputProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'value'> & {
     value?: string;
     slot1?: ReactNode;
+    slot2?: ReactNode;
     onChange?: (value: string) => void;
     onSend?: (message: string, files: AttachedFile[]) => void;
     onAttachFiles?: (files: File[]) => void;

package/dist/components/DataTable/TableBody/types.d.ts

@@ -16,6 +16,8 @@ export type TableBodyProps<T extends Record<string, unknown>> = {
     enableRowSelection?: boolean;
     rowActions?: RowActionsConfig<T>;
     columnFreeze?: number;
+    /** Measured pixel widths of frozen columns (from header ResizeObserver). Used for sticky left offset. */
+    measuredFrozenWidths?: number[];
     mobileConfig?: MobileDataTableConfig;
     mobileOverflowColumns?: ColumnDefinition<T>[];
     onMobileOverflowClick?: (row: T) => void;

package/dist/components/DataTable/TableHeader/types.d.ts

@@ -55,4 +55,8 @@ export type TableHeaderProps<T extends Record<string, unknown>> = {
     }>;
     onHeaderChange?: (field: keyof T, newHeader: string) => void;
     getColumnWidth: (column: ColumnDefinition<T>, index: number) => React.CSSProperties;
+    /** Measured pixel widths of frozen columns (from ResizeObserver). Used for sticky left offset. */
+    measuredFrozenWidths?: number[];
+    /** Called when frozen column header cells are measured so left offsets can use content-based widths. */
+    onFrozenWidthsMeasured?: (widths: number[]) => void;
 };

package/dist/components/DataTable/TableHeader/utils.d.ts

@@ -17,7 +17,8 @@ export declare const filterItemsBySearch: (items: Array<{
     value: string;
 }>;
 export declare const getPopoverAlignment: (index: number, totalColumns: number) => "start" | "center" | "end";
-export declare const getFrozenColumnStyles: (index: number, columnFreeze: number, enableRowExpansion: boolean, enableRowSelection: boolean, visibleColumns: ColumnDefinition<Record<string, unknown>>[], getColumnWidth: (column: ColumnDefinition<Record<string, unknown>>, index: number) => React.CSSProperties, backgroundColor: string) => {
+export declare function getFrozenLeftOffset(index: number, _columnFreeze: number, enableRowExpansion: boolean, enableRowSelection: boolean, visibleColumns: ColumnDefinition<Record<string, unknown>>[], getColumnWidth: (column: ColumnDefinition<Record<string, unknown>>, i: number) => React.CSSProperties, measuredFrozenWidths?: number[]): number;
+export declare const getFrozenColumnStyles: (index: number, columnFreeze: number, enableRowExpansion: boolean, enableRowSelection: boolean, visibleColumns: ColumnDefinition<Record<string, unknown>>[], getColumnWidth: (column: ColumnDefinition<Record<string, unknown>>, index: number) => React.CSSProperties, backgroundColor: string, measuredFrozenWidths?: number[]) => {
     padding: string;
 } | {
     borderRight?: string | undefined;
@@ -26,8 +27,9 @@ export declare const getFrozenColumnStyles: (index: number, columnFreeze: number
     zIndex: number;
     backgroundColor: string;
     padding: string;
-    width: string;
     minWidth: string;
     maxWidth: string;
+    width: string;
     boxSizing: "border-box";
+    overflow: string;
 };

package/dist/components/DateRangePicker/CalendarGrid.d.ts

@@ -14,6 +14,7 @@ type CalendarGridProps = {
     resetScrollPosition?: number;
     timezone?: string;
     isSingleDatePicker?: boolean;
+    maxYearOffset?: number;
 };
 declare const CalendarGrid: import('react').ForwardRefExoticComponent<CalendarGridProps & import('react').RefAttributes<HTMLDivElement>>;
 export default CalendarGrid;

package/dist/components/DateRangePicker/types.d.ts

@@ -282,6 +282,7 @@ export type DateRangePickerProps = {
      * @see https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
      */
     timezone?: string;
+    maxYearOffset?: number;
 };
 export type PresetItemProps = {
     preset: DateRangePreset;
@@ -320,6 +321,7 @@ export type DatePickerComponentProps = {
     isDisabled?: boolean;
     disableFutureDates?: boolean;
     disablePastDates?: boolean;
+    maxYearOffset?: number;
 };
 export type MobileDrawerPresetsProps = {
     drawerOpen: boolean;
@@ -346,4 +348,5 @@ export type MobileDrawerPresetsProps = {
     applyDisabledMessage?: string;
     disableFutureDates?: boolean;
     disablePastDates?: boolean;
+    maxYearOffset?: number;
 };

package/dist/components/DateRangePicker/utils.d.ts

@@ -537,7 +537,7 @@ export declare const calculateDayCellProps: (date: Date, selectedRange: DateRang
  * @param endTime Current end time
  * @returns Object with picker data for all columns
  */
-export declare const generatePickerData: (tabType: "start" | "end", selectedRange?: DateRange, startTime?: string, endTime?: string) => {
+export declare const generatePickerData: (tabType: "start" | "end", selectedRange?: DateRange, startTime?: string, endTime?: string, maxYearOffset?: number) => {
     years: {
         items: number[];
         selectedIndex: number;
@@ -568,7 +568,7 @@ export declare const generatePickerData: (tabType: "start" | "end", selectedRang
  * @param setEndDate End date setter function
  * @returns Selection handler function
  */
-export declare const createSelectionHandler: (tabType: "start" | "end", type: "year" | "month" | "date" | "time", dateFormat: string, handleStartTimeChange: (time: string) => void, handleEndTimeChange: (time: string) => void, setSelectedRange: (range: DateRange) => void, setStartDate: (date: string) => void, setEndDate: (date: string) => void, selectedRange?: DateRange) => (index: number) => void;
+export declare const createSelectionHandler: (tabType: "start" | "end", type: "year" | "month" | "date" | "time", dateFormat: string, handleStartTimeChange: (time: string) => void, handleEndTimeChange: (time: string) => void, setSelectedRange: (range: DateRange) => void, setStartDate: (date: string) => void, setEndDate: (date: string) => void, selectedRange?: DateRange, maxYearOffset?: number) => (index: number) => void;
 /**
  * Gets preset display label with custom mappings
  * @param preset The preset to get label for

package/dist/components/MultiSelect/types.d.ts

@@ -141,7 +141,7 @@ export type MultiSelectMenuProps = {
     searchPlaceholder?: string;
     enableSelectAll?: boolean;
     selectAllText?: string;
-    onSelectAll?: (selectAll: boolean) => void;
+    onSelectAll?: (selectAll: boolean, filteredItems: MultiSelectMenuGroupType[]) => void;
     maxSelections?: number;
     alignment?: MultiSelectMenuAlignment;
     side?: MultiSelectMenuSide;

package/dist/components/SelectorV2/CheckboxV2/CheckboxV2.d.ts

@@ -0,0 +1,19 @@
+import { SelectorV2Size } from '../../SelectorV2/selectorV2.types';
+declare const CheckboxV2: import('react').ForwardRefExoticComponent<{
+    checked?: boolean | "indeterminate";
+    onCheckedChange?: (checked: boolean | "indeterminate") => void;
+    required?: boolean;
+    error?: boolean;
+    label?: string;
+    subLabel?: string;
+    size?: SelectorV2Size;
+    slot?: {
+        slot: import('react').ReactElement;
+        maxHeight?: import('styled-components').CSSObject["maxHeight"];
+    };
+    maxLength?: {
+        label?: number;
+        subLabel?: number;
+    };
+} & Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "style" | "className" | "slot" | "onChange"> & import('react').RefAttributes<HTMLButtonElement>>;
+export default CheckboxV2;

package/dist/components/SelectorV2/CheckboxV2/StyledCheckboxV2.d.ts

@@ -0,0 +1,11 @@
+import { SelectorV2Size } from '../../SelectorV2/selectorV2.types';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+export declare const StyledCheckboxRoot: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<CheckboxPrimitive.CheckboxProps & import('react').RefAttributes<HTMLButtonElement>, {
+    size: SelectorV2Size;
+    $isDisabled: boolean;
+    $checked: boolean | "indeterminate";
+    $error?: boolean;
+}>> & string & Omit<import('react').ForwardRefExoticComponent<CheckboxPrimitive.CheckboxProps & import('react').RefAttributes<HTMLButtonElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledCheckboxIndicator: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<CheckboxPrimitive.CheckboxIndicatorProps & import('react').RefAttributes<HTMLSpanElement>, {
+    size: SelectorV2Size;
+}>> & string & Omit<import('react').ForwardRefExoticComponent<CheckboxPrimitive.CheckboxIndicatorProps & import('react').RefAttributes<HTMLSpanElement>>, keyof import('react').Component<any, {}, any>>;

package/dist/components/SelectorV2/CheckboxV2/checkboxV2.animations.d.ts

@@ -0,0 +1,2 @@
+export declare const checkboxRootAnimations: import('styled-components').RuleSet<object>;
+export declare const checkboxIndicatorAnimations: import('styled-components').RuleSet<object>;

package/dist/components/SelectorV2/CheckboxV2/checkboxV2.dark.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { ResponsiveCheckboxV2Tokens } from './checkboxV2.tokens';
+export declare const getCheckboxV2DarkTokens: (foundationToken: FoundationTokenType) => ResponsiveCheckboxV2Tokens;

package/dist/components/SelectorV2/CheckboxV2/checkboxV2.light.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { ResponsiveCheckboxV2Tokens } from './checkboxV2.tokens';
+export declare const getCheckboxV2LightTokens: (foundationToken: FoundationTokenType) => ResponsiveCheckboxV2Tokens;