@ssa-ui-kit/core 2.30.0 → 2.32.0-canary-b64be64-20251219

package/dist/components/Charts/BarLineComplexChart/BarLineComplexChartView.d.ts

@@ -1,8 +1,8 @@
-import { MutableRefObject } from 'react';
+import { RefObject } from 'react';
 import { BarLineComplexInternalProps } from './types';
 export declare const BarLineComplexChartView: ({ width, height, isFullscreenMode, transformedChartData, tooltipContentRef, extraModeBarButtons, systemModeBarButtons, onChange, ...props }: BarLineComplexInternalProps & {
     isFullscreenMode: boolean;
     transformedChartData: Plotly.Data[];
-    tooltipContentRef: MutableRefObject<HTMLDivElement | null>;
+    tooltipContentRef: RefObject<HTMLDivElement | null>;
     extraModeBarButtons: Array<Plotly.ModeBarButtonAny>;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { MutableRefObject } from 'react';
+import { RefObject } from 'react';
 import { PlotParams } from 'react-plotly.js';
 import { PieChartProps } from '../PieChart';
 export type BarLineChartItem = Plotly.Data & {
@@ -52,7 +52,7 @@ export interface BarLineComplexChartContextProviderProps extends Pick<BarLineCom
 export interface UseChartInfo {
     (): {
         transformedChartData: Plotly.Data[];
-        tooltipContentRef: MutableRefObject<HTMLDivElement | null>;
+        tooltipContentRef: RefObject<HTMLDivElement | null>;
         modeBarButtonsByKey: Record<string, Plotly.ModeBarButtonAny>;
     };
 }

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

@@ -1,15 +1,17 @@
-import { Datum } from '@nivo/line';
+import { DefaultSeries } from '@nivo/line';
 import { WidgetCardProps } from '../../index';
 import { TrendLineProps } from './components';
 export type BigNumberChartFeatures = 'header' | 'fullscreenMode';
+type Datum = DefaultSeries['data'][number];
 export interface BigNumberChartProps {
     data: Datum[];
     interactive?: boolean;
     title?: string;
     widgetCardProps?: WidgetCardProps;
-    trendLineProps?: Omit<TrendLineProps, 'data'>;
+    trendLineProps?: Omit<TrendLineProps, 'data' | 'height' | 'width'>;
     features?: BigNumberChartFeatures[];
     valueFormat?: (value: Datum) => React.ReactNode;
 }
 export declare const BigNumberChartComponent: ({ data, title, widgetCardProps, trendLineProps, interactive, features, valueFormat, }: BigNumberChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const BigNumberChart: typeof BigNumberChartComponent;
+export {};

package/dist/components/Charts/BigNumberChart/components/TrendLine.d.ts

@@ -1,8 +1,13 @@
-import { LineProps, Datum } from '@nivo/line';
+import { LineSvgProps, DefaultSeries } from '@nivo/line';
 import { TrendLineTooltipProps } from './TrendLineTooltip';
-export interface TrendLineProps extends LineProps {
+type Datum = DefaultSeries['data'][number];
+export interface TrendLineProps extends Omit<LineSvgProps<DefaultSeries>, 'data' | 'height' | 'width'> {
     color?: string;
-    tooltipValueFormat?: TrendLineTooltipProps['valueFormat'];
+    tooltipValueFormat?: TrendLineTooltipProps<DefaultSeries>['valueFormat'];
     lastActivePoint?: Datum;
+    data: LineSvgProps<DefaultSeries>['data'];
+    height: number;
+    width: number;
 }
 export declare const TrendLine: ({ color, tooltipValueFormat, ...props }: TrendLineProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Charts/BigNumberChart/components/TrendLineTooltip.d.ts

@@ -1,5 +1,8 @@
-import { Point, PointTooltipProps } from '@nivo/line';
-export type TrendLineTooltipProps = PointTooltipProps & {
-    valueFormat?: (data: Point['data']) => React.ReactNode;
-};
-export declare const TrendLineTooltip: ({ point, valueFormat, }: TrendLineTooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+import { Theme } from '@emotion/react';
+import { Interpolation } from '@emotion/styled';
+import { LineSeries, Point, PointTooltipProps } from '@nivo/line';
+export interface TrendLineTooltipProps<Series extends LineSeries> extends PointTooltipProps<Series> {
+    valueFormat?: (data: Point<Series>['data']) => React.ReactNode;
+    css?: Interpolation<Theme>;
+}
+export declare const TrendLineTooltip: <Series extends LineSeries>({ point, css, valueFormat, }: TrendLineTooltipProps<Series>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Charts/GaugeChart/components/GaugeChartBase.d.ts

@@ -1,7 +1,9 @@
-import { MayHaveLabel, ResponsivePie } from '@nivo/pie';
+import { MayHaveLabel } from '@nivo/pie';
+declare const ResponsivePie: <RawDatum extends MayHaveLabel>(props: import("@nivo/core").WithChartRef<import("@nivo/core").ResponsiveProps<import("@nivo/pie").PieSvgProps<RawDatum>>, SVGSVGElement>) => import("react").ReactElement;
 export type GaugeChartData = {
     color?: string;
     value?: number;
 } & MayHaveLabel;
 export type GaugeChartBaseProps = React.ComponentProps<typeof ResponsivePie<GaugeChartData>>;
 export declare const GaugeChartBase: ({ ...props }: GaugeChartBaseProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

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

@@ -49,7 +49,7 @@ export type PieChartLegendProps = {
 export type PieChartTooltipViewProps = {
     isOpen: boolean;
     point?: PieTooltipProps<MayHaveLabel & {
-        percentage?: number;
+        percentage?: number | string;
         dimension?: string;
     }> | null;
     outputType: PieChartTooltipProps['outputType'];

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

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
-import { ResponsiveRadar } from '@nivo/radar';
 import { WidgetCardProps } from '../../WidgetCard';
+declare const ResponsiveRadar: <D extends Record<string, unknown>>(props: import("@nivo/core").WithChartRef<import("@nivo/core").ResponsiveProps<import("@nivo/radar").RadarSvgProps<D>>, SVGSVGElement>) => import("react").ReactElement;
 export type RadarChartFeatures = 'header' | 'fullscreenMode';
 type ResponsiveRadarProps<D extends Record<string, unknown>> = ComponentProps<typeof ResponsiveRadar<D>>;
 export interface RadarChartProps<D extends Record<string, unknown>> extends Omit<ResponsiveRadarProps<D>, 'legends'> {

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

@@ -1,5 +1,5 @@
-import { ResponsiveTreeMap } from '@nivo/treemap';
 import { WidgetCardProps } from '../../WidgetCard';
+declare const ResponsiveTreeMap: <Datum extends object = import("@nivo/treemap").DefaultTreeMapDatum>(props: import("@nivo/core").WithChartRef<import("@nivo/core").ResponsiveProps<import("@nivo/treemap").TreeMapSvgProps<Datum>>, SVGSVGElement>) => import("react").ReactElement;
 export type TreeNode = {
     name: string;
     value?: number;

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

@@ -8,3 +8,4 @@ export * from './GaugeChart';
 export * from './BarGaugeChart';
 export * from './BigNumberChart';
 export * from './CandlestickChart';
+export * from './utils/nivoReact19Compat';

package/dist/components/Charts/utils/nivoReact19Compat.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+/**
+ * React 19 compatibility wrapper for Nivo responsive components.
+ *
+ * @nivo/core's ResponsiveWrapper returns an object in React 19, which causes
+ * type checking issues. This utility wraps any Nivo responsive component
+ * with forwardRef to ensure it's recognized as a proper React component.
+ *
+ * @param Component - The Nivo responsive component to wrap (e.g., ResponsiveLine, ResponsivePie)
+ * @param displayName - The display name for the wrapped component
+ * @returns A React 19 compatible version of the component
+ */
+export declare function wrapNivoResponsiveComponent<T extends React.ComponentType<any>>(Component: T, displayName: string): T;

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

@@ -1,4 +1,4 @@
-import { MutableRefObject, ReactNode } from 'react';
+import { RefObject, ReactNode } from 'react';
 import { Control, FieldPath, FieldValues, UseFormReturn } from 'react-hook-form';
 export interface CheckboxProps extends Partial<Pick<UseFormReturn, 'register'>> {
     text?: ReactNode;
@@ -10,7 +10,7 @@ export interface CheckboxProps extends Partial<Pick<UseFormReturn, 'register'>>
     isIndeterminate?: boolean;
     name?: string;
     isRequired?: boolean;
-    ref?: MutableRefObject<HTMLInputElement>;
+    ref?: RefObject<HTMLInputElement>;
     color?: 'green' | 'blue' | 'custom';
     as?: React.ElementType;
     className?: string;

package/dist/components/Chip/Chip.d.ts

@@ -0,0 +1,2 @@
+import { ChipProps } from './types';
+export declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Chip/constants.d.ts

@@ -0,0 +1,22 @@
+export declare const VARIANTS: {
+    readonly OUTLINED: "outlined";
+    readonly FILLED: "filled";
+};
+export declare const COLORS: {
+    readonly DEFAULT: "default";
+    readonly PRIMARY: "primary";
+    readonly SUCCESS: "success";
+    readonly ERROR: "error";
+    readonly INFO: "info";
+    readonly WARNING: "warning";
+};
+export declare const mapSizes: {
+    small: import("@emotion/react").SerializedStyles;
+    medium: import("@emotion/react").SerializedStyles;
+    large: import("@emotion/react").SerializedStyles;
+};
+export declare const ICON_SIZES: {
+    readonly small: 12;
+    readonly medium: 14;
+    readonly large: 16;
+};

package/dist/components/Chip/helpers.d.ts

@@ -0,0 +1,13 @@
+import { Theme } from '@emotion/react';
+import { ChipProps } from './types';
+type SemanticColor = Exclude<ChipProps['color'], 'default' | undefined>;
+type ColorConfig = {
+    main: string;
+    bg: string;
+};
+export declare const colorMap: (theme: Theme) => Record<SemanticColor, ColorConfig>;
+export declare const getVariantColors: (theme: Theme, variant: ChipProps["variant"], color: ChipProps["color"], disabled: boolean) => {
+    chipStyles: import("@emotion/react").SerializedStyles;
+    iconColor: string | undefined;
+};
+export {};

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

@@ -0,0 +1,2 @@
+export * from './Chip';
+export type { ChipProps, ChipVariant, ChipColor, ChipSize } from './types';

package/dist/components/Chip/styles.d.ts

@@ -0,0 +1,35 @@
+import { Theme } from '@emotion/react';
+import { CommonProps } from '../../types/emotion';
+export declare const ChipBase: import("@emotion/styled").StyledComponent<{
+    theme?: Theme;
+    as?: React.ElementType;
+} & CommonProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const small: import("@emotion/react").SerializedStyles;
+export declare const medium: import("@emotion/react").SerializedStyles;
+export declare const large: import("@emotion/react").SerializedStyles;
+export declare const filled: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const filledDisabled: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const outlined: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const outlinedDisabled: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const clickable: import("@emotion/react").SerializedStyles;
+export declare const clickableDisabled: import("@emotion/react").SerializedStyles;
+export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const AvatarWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const TitleWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const LabelWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const DeleteIconButton: import("@emotion/styled").StyledComponent<{
+    theme?: Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;

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

@@ -0,0 +1,23 @@
+import { CommonProps } from '../../types/emotion';
+import { Interpolation, Theme } from '@emotion/react';
+import { ReactNode, MouseEventHandler } from 'react';
+import { IconProps } from '../Icon/types';
+export type ChipVariant = 'filled' | 'outlined';
+export type ChipColor = 'default' | 'primary' | 'success' | 'error' | 'info' | 'warning';
+export type ChipSize = 'small' | 'medium' | 'large';
+export interface ChipProps extends CommonProps {
+    label: ReactNode;
+    title?: ReactNode;
+    variant?: ChipVariant;
+    color?: ChipColor;
+    size?: ChipSize;
+    disabled?: boolean;
+    icon?: IconProps['name'];
+    avatar?: ReactNode;
+    onDelete?: MouseEventHandler<HTMLButtonElement>;
+    deleteIcon?: IconProps['name'];
+    showIcon?: boolean;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    clickable?: boolean;
+    css?: Interpolation<Theme>;
+}

package/dist/components/CollapsibleNavBar/components/TriggerIcon.d.ts

@@ -1,9 +1,11 @@
+import { CSSObject } from '@emotion/react';
 import type { MapIconsType, SVGProps } from '../../Icon/types';
-export declare const TriggerIcon: ({ iconName, iconSize, className, CustomIcon, }: {
+export declare const TriggerIcon: ({ iconName, iconSize, className, CustomIcon, css: cssProp, }: {
     iconName: keyof MapIconsType;
     iconSize?: number;
     className?: string;
     CustomIcon?: (props: Omit<SVGProps, "fill"> & {
         showIconTooltip?: boolean;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
+    css?: CSSObject;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/DatePicker/styles.d.ts

@@ -2,7 +2,6 @@ export declare const DaysViewCell: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
-    avatarSize?: number;
     direction?: string;
     alignItems?: string;
     fade?: boolean;

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

@@ -1,2 +1,2 @@
 import { DateRangePickerProps } from './types';
-export declare const DateRangePicker: ({ format, openCalendarMode, showCalendarIcon, showStatusArea, rangePickerType, ...rest }: DateRangePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DateRangePicker: ({ format, showCalendarIcon, showStatusArea, rangePickerType, ...rest }: DateRangePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,6 @@ export declare const DatesListWrapper: import("@emotion/styled").StyledComponent
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
-    avatarSize?: number;
     direction?: string;
     alignItems?: string;
     fade?: boolean;

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

@@ -1,7 +1,4 @@
-import { MouseEventHandler } from 'react';
-export declare const TriggerInput: ({ datepickerType, withPopover, className, onClick, }: {
+export declare const TriggerInput: ({ datepickerType, className, }: {
     datepickerType: "from" | "to";
-    withPopover?: boolean;
     className?: string;
-    onClick: MouseEventHandler<HTMLInputElement>;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/DateRangePicker/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export * from './useDateRangePicker';
 export * from './useDatePickerMask';
 export * from './useRangeHighlighting';
+export * from './useRangeSelection';

package/dist/components/DateRangePicker/hooks/useDatePickerMask.d.ts

@@ -1,10 +1,4 @@
-import { DateRangePickerProps } from '../types';
-export declare const useDatePickerMask: ({ maskOptions, formatIndexes, dateMinParts, dateMaxParts, }: Pick<DateRangePickerProps, "maskOptions"> & {
-    formatIndexes: {
-        day: number;
-        month: number;
-        year: number;
-    };
-    dateMinParts: number[];
-    dateMaxParts: number[];
+import { type MaskOptions } from '@react-input/mask';
+export declare const useDatePickerMask: ({ maskOptions, }: {
+    maskOptions?: MaskOptions;
 }) => import("react").MutableRefObject<HTMLInputElement>;

package/dist/components/DateRangePicker/hooks/useDateRangePicker.d.ts

@@ -1,4 +1,6 @@
+import React from 'react';
 import { DateTime } from 'luxon';
+import { useMergeRefs } from '@floating-ui/react';
 import { CalendarType, DateRangePickerProps, DateTimeTuple } from '../types';
 export declare const useDateRangePicker: ({ dateMin, dateMax, name: _name, format: propFormat, maskOptions, isOpenState, defaultValue, rangePickerType, onOpen, onClose, onError, onChange, ...rest }: DateRangePickerProps & {
     isOpenState?: boolean;
@@ -10,31 +12,32 @@ export declare const useDateRangePicker: ({ dateMin, dateMax, name: _name, forma
     };
     dateMinParts: number[];
     dateMaxParts: number[];
-    dateMinDT: DateTime<true> | DateTime<false>;
-    dateMaxDT: DateTime<true> | DateTime<false>;
+    dateMinDT: DateTime;
+    dateMaxDT: DateTime;
     dateTime: DateTimeTuple;
-    inputValueFrom: any;
-    inputValueTo: any;
-    calendarViewDateTime: [DateTime<boolean> | undefined, DateTime<boolean> | undefined];
-    maskInputRef: import("react").MutableRefObject<HTMLInputElement>;
+    inputValueFrom?: string;
+    inputValueTo?: string;
+    calendarViewDateTime: DateTimeTuple;
     calendarType: CalendarType;
-    lastChangedDate: [Date | undefined, Date | undefined];
+    lastChangedDate?: [Date | undefined, Date | undefined];
     luxonFormat: string;
     lastFocusedElement: "from" | "to";
     nameFrom: string;
     nameTo: string;
     currentIndex: number;
-    currentCalendarViewDT: DateTime<boolean>;
+    currentCalendarViewDT: DateTime;
     isOpen: boolean;
-    status: "error" | "success" | "basic" | undefined;
-    inputFromRef: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null;
-    inputToRef: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null;
-    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    handleSetIsOpen: (open: boolean) => void;
-    setLastFocusedElement: import("react").Dispatch<import("react").SetStateAction<"from" | "to">>;
+    status?: "error" | "success" | "basic";
+    inputFromRef: ReturnType<typeof useMergeRefs<HTMLInputElement | null>>;
+    inputToRef: ReturnType<typeof useMergeRefs<HTMLInputElement | null>>;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setLastFocusedElement: React.Dispatch<React.SetStateAction<"from" | "to">>;
     safeOnChange: (newDateTime?: DateTime) => void;
-    setCalendarType: import("react").Dispatch<import("react").SetStateAction<CalendarType>>;
-    setCalendarViewDateTime: import("react").Dispatch<import("react").SetStateAction<[DateTime<boolean> | undefined, DateTime<boolean> | undefined]>>;
-    setDateTime: import("react").Dispatch<import("react").SetStateAction<DateTimeTuple>>;
-    handleBlur: import("react").FocusEventHandler<HTMLInputElement>;
+    setCalendarType: React.Dispatch<React.SetStateAction<CalendarType>>;
+    setCalendarViewDateTime: React.Dispatch<React.SetStateAction<DateTimeTuple>>;
+    setDateTime: React.Dispatch<React.SetStateAction<DateTimeTuple>>;
+    handleBlur: React.FocusEventHandler<HTMLInputElement>;
+    rangeSelectionStep: "start" | "end" | null;
+    setRangeSelectionStep: React.Dispatch<React.SetStateAction<"start" | "end" | null>>;
+    clearInputValue: (field: "from" | "to") => void;
 };

package/dist/components/DateRangePicker/hooks/useRangeSelection.d.ts

@@ -0,0 +1,20 @@
+import { DateTime } from 'luxon';
+type UseRangeSelectionOptions = {
+    /**
+     * Function to create the new DateTime from the selected value
+     */
+    createNewDate: (selectedValue: number | string) => DateTime | undefined;
+    /**
+     * Function to format the date for comparison (e.g., 'D' for days, 'yyyy-MM' for months, 'yyyy' for years)
+     */
+    getComparisonFormat: () => string;
+};
+export declare const useRangeSelection: ({ createNewDate, getComparisonFormat, }: UseRangeSelectionOptions) => {
+    handleRangeSelect: (selectedValue: number | string) => void;
+    getDateSelectionState: (currentDT: DateTime) => {
+        isCalendarFirstDateSelected: boolean;
+        isCalendarSecondDateSelected: boolean;
+        isCalendarDateSelected: boolean;
+    };
+};
+export {};

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

@@ -2,7 +2,6 @@ export declare const DaysViewCell: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
-    avatarSize?: number;
     direction?: string;
     alignItems?: string;
     fade?: boolean;
@@ -38,7 +37,6 @@ export declare const TriggerWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
-    avatarSize?: number;
     direction?: string;
     alignItems?: string;
     fade?: boolean;

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

@@ -1,4 +1,4 @@
-import { Dispatch, MouseEventHandler, SetStateAction } from 'react';
+import { Dispatch, MouseEventHandler, SetStateAction, FocusEventHandler } from 'react';
 import { DateTime } from 'luxon';
 import { useMask } from '@react-input/mask';
 import { FieldContextValue } from '../Field/FieldProvider';
@@ -14,7 +14,6 @@ export type DateRangePickerProps = {
     value?: [string | undefined, string | undefined];
     defaultValue?: [string, string];
     maskOptions?: Parameters<typeof useMask>[0];
-    openCalendarMode?: 'icon' | 'input' | 'both';
     inputProps?: Partial<InputProps>;
     status?: FieldContextValue['status'];
     showStatusArea?: boolean;
@@ -46,7 +45,8 @@ export type DateRangePickerProps = {
     onError?: (date: unknown, error?: string | null) => void;
     onMonthChange?: (date: Date) => void;
     onYearChange?: (date: Date) => void;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    allowReverseSelection?: boolean;
 };
 export type DateTimeTuple = [DateTime | undefined, DateTime | undefined];
 export type DateRangePickerContextProps = Omit<DateRangePickerProps, 'dateMin' | 'dateMax'> & {
@@ -76,10 +76,12 @@ export type DateRangePickerContextProps = Omit<DateRangePickerProps, 'dateMin' |
     safeOnChange?: (date?: DateTime) => void;
     setLastFocusedElement: Dispatch<SetStateAction<LastFocusedElement>>;
     handleToggleOpen: MouseEventHandler<HTMLButtonElement | HTMLInputElement>;
-    handleSetIsOpen: (open: boolean) => void;
     setCalendarViewDateTime: Dispatch<SetStateAction<DateTimeTuple>>;
     setDateTime: Dispatch<SetStateAction<DateTimeTuple>>;
     setIsOpen: Dispatch<SetStateAction<boolean>>;
     setCalendarType: Dispatch<SetStateAction<CalendarType>>;
+    rangeSelectionStep: 'start' | 'end' | null;
+    setRangeSelectionStep: Dispatch<SetStateAction<'start' | 'end' | null>>;
+    clearInputValue: (field: 'from' | 'to') => void;
 };
 export type CalendarType = 'days' | 'months' | 'years';

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

@@ -1 +1,2 @@
-export declare const useDateRangePickerContext: () => import("./types").DateRangePickerContextProps;
+import { DateRangePickerContextProps } from './types';
+export declare const useDateRangePickerContext: () => DateRangePickerContextProps;

package/dist/components/Field/FieldControl.d.ts

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from 'react';
 import { FieldContextValue } from './FieldProvider';
 export interface FieldControlProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-    controlRef?: React.RefObject<HTMLElement>;
+    controlRef?: React.RefObject<HTMLElement | null>;
     children: React.ReactNode | ((props: FieldContextValue) => React.ReactNode);
 }
 export declare const FieldControl: React.ForwardRefExoticComponent<FieldControlProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Filters/FilterBlockWrapper.d.ts

@@ -2,7 +2,6 @@ export declare const FilterBlockWrapper: import("@emotion/styled").StyledCompone
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
-    avatarSize?: number;
     direction?: string;
     alignItems?: string;
     fade?: boolean;

package/dist/components/Filters/FiltersContext.d.ts

@@ -2,8 +2,8 @@ import { UseTableDataResult } from '../TableFilters/hooks/useTableData';
 import { BaseSyntheticEvent } from 'react';
 export declare const FiltersContext: import("react").Context<{
     checkboxData: import("../TableFilters/types").TableFilterConfig;
-    wrapperRef: import("react").RefObject<HTMLElement> | undefined;
-    refsList: import("react").MutableRefObject<HTMLElement | null>[];
+    wrapperRef: import("react").RefObject<HTMLElement | null> | undefined;
+    refsList: import("react").RefObject<HTMLElement | null>[];
     setElementRef: (groupName: string, element: HTMLElement | null) => void;
     onCheckboxToggle: (groupName: string, name: string | number) => void;
     onDropdownChange: (groupName: string, name: string | number) => void;
@@ -13,8 +13,8 @@ export declare const FiltersContext: import("react").Context<{
 }>;
 export declare const useFiltersContext: () => {
     checkboxData: import("../TableFilters/types").TableFilterConfig;
-    wrapperRef: import("react").RefObject<HTMLElement> | undefined;
-    refsList: import("react").MutableRefObject<HTMLElement | null>[];
+    wrapperRef: import("react").RefObject<HTMLElement | null> | undefined;
+    refsList: import("react").RefObject<HTMLElement | null>[];
     setElementRef: (groupName: string, element: HTMLElement | null) => void;
     onCheckboxToggle: (groupName: string, name: string | number) => void;
     onDropdownChange: (groupName: string, name: string | number) => void;

package/dist/components/Filters/hooks/useVisibility.d.ts

@@ -3,8 +3,8 @@ import { ElementInfo } from '../types';
 export type RefsByKey = Record<string, ElementInfo>;
 type UseVisibilityParams = {
     checkboxData: TableFilterConfig;
-    refsList: Array<React.MutableRefObject<HTMLElement | null>>;
-    wrapperRef?: React.RefObject<HTMLElement>;
+    refsList: Array<React.RefObject<HTMLElement | null>>;
+    wrapperRef?: React.RefObject<HTMLElement | null>;
     onVisibilityProcessed?: () => void;
 };
 export declare const useVisibility: ({ checkboxData, wrapperRef, refsList, onVisibilityProcessed, }: UseVisibilityParams) => {

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

@@ -1,8 +1,10 @@
 export interface IndicatorProps {
     isVisible: boolean;
-    children: React.ReactElement;
+    children: React.ReactElement<{
+        ref: React.Ref<HTMLDivElement | null>;
+    }>;
     position?: 'right' | 'left';
     background?: string;
-    text?: string | number | JSX.Element;
+    text?: string | number | React.JSX.Element;
 }
 export type ChildrenDataProps = Record<string, number>;

package/dist/components/JsonSchemaForm/constants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_AVATAR_SIZE = 24;

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

@@ -11,3 +11,5 @@ declare const Form: import("@emotion/styled").StyledComponent<FormProps<unknown,
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export { Form, Templates, Theme, Widgets, Fields, generateTemplates, generateWidgets, generateFields, };
+export * from './constants';
+export type * from './types';

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

@@ -0,0 +1,6 @@
+export type SelectOptionSchemaExtension = {
+    avatar?: string;
+};
+export type SelectWidgetUiOptions = {
+    typeaheadAvatarSize?: number;
+};

package/dist/components/ModalDismissButton/ModalDismissButton.d.ts

@@ -1,4 +1,4 @@
-declare function ModalDismissButton({ children: child }: {
-    children: JSX.Element;
+declare function ModalDismissButton({ children: child, }: {
+    children: React.JSX.Element;
 }): import("react").FunctionComponentElement<any>;
 export default ModalDismissButton;

package/dist/components/ModalOpenButton/ModalOpenButton.d.ts

@@ -1,4 +1,4 @@
 declare function ModalOpenButton({ children: child }: {
-    children: JSX.Element;
+    children: React.JSX.Element;
 }): import("react").FunctionComponentElement<any>;
 export default ModalOpenButton;

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

@@ -8,7 +8,7 @@ export interface NavBarProps {
 export type CustomIconProps = (props: {
     className?: string;
     showIconTooltip?: boolean;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export type NavBarExtendedItem = {
     CustomIcon?: CustomIconProps;
     path: string;

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

@@ -1,10 +1,10 @@
 import { NotificationCardProps } from '../NotificationCard';
 export interface NotificationMenuProps {
-    trigger: string | JSX.Element;
+    trigger: string | React.JSX.Element;
     notifications: Array<NotificationCardProps>;
     children: React.ReactNode;
     onClick?: () => void;
     isLoading: boolean;
-    leftButton?: string | JSX.Element | null;
-    rightButton?: string | JSX.Element;
+    leftButton?: string | React.JSX.Element | null;
+    rightButton?: string | React.JSX.Element;
 }

package/dist/components/Pagination/WithPagination.d.ts

@@ -1,4 +1,2 @@
-export declare const WithPagination: <T extends object>(Component: React.ComponentType<T>) => {
-    (props: T): import("@emotion/react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+import React from 'react';
+export declare const WithPagination: <T extends object>(Component: React.ComponentType<T>) => React.ComponentType<T>;

package/dist/components/PersonInfo/PersonInfo.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PersonInfoProps } from './types';
+export declare const PersonInfo: React.ForwardRefExoticComponent<PersonInfoProps & React.RefAttributes<HTMLDivElement>>;