@devtron-labs/devtron-fe-common-lib 1.21.0-beta-1 → 1.21.0-beta-3

package/dist/Shared/Components/Charts/types.d.ts

@@ -0,0 +1,135 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { TooltipOptions, TooltipPositionerFunction } from 'chart.js';
+import { TooltipProps } from '../../../Common/Tooltip';
+import { AppThemeType } from '../../Providers';
+import { Never } from '../../types';
+export type ChartType = 'area' | 'pie' | 'semiPie' | 'stackedBar' | 'stackedBarHorizontal' | 'line';
+export type ColorTokensType = 'DeepPlum' | 'Magenta' | 'Slate' | 'Lavender' | 'SkyBlue' | 'AquaTeal' | 'LimeGreen' | 'CoralRed' | 'GoldenYellow' | 'CharcoalGray' | 'Gray' | 'SunsetOrange';
+export type VariantsType = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
+export type ChartColorKey = `${ColorTokensType}${VariantsType}`;
+export type ChartTypeWithoutPie = Exclude<ChartType, 'pie' | 'semiPie'>;
+interface BaseSimpleDataset {
+    datasetName: string;
+    yAxisValues: number[];
+}
+export interface SimpleDataset extends BaseSimpleDataset {
+    color: ChartColorKey;
+    isClickable?: boolean;
+}
+export interface SimpleDatasetForLineAndArea extends Omit<SimpleDataset, 'isClickable'> {
+    isDashed?: boolean;
+}
+export interface SimpleDatasetForPie extends BaseSimpleDataset {
+    colors: Array<ChartColorKey>;
+    isClickable?: boolean[];
+}
+export interface ReferenceLineConfigType {
+    strokeWidth?: number;
+    color?: ChartColorKey;
+    value: number;
+}
+export interface CenterTextConfig {
+    text: string;
+    fontSize?: number;
+    fontWeight?: string | number;
+    color?: string;
+    fontFamily?: string;
+}
+type XYAxisMax = {
+    xAxisMax?: number;
+    yAxisMax?: number;
+    /**
+     * Optional reference lines to draw across the chart
+     */
+    referenceLines?: ReferenceLineConfigType[];
+};
+type OnChartClickHandler = (datasetName: string, value: number) => void;
+type ScaleTickFormatCallbacks = Partial<{
+    xScaleTickFormat: (label: string, index: number) => string | string[] | number | number[];
+    yScaleTickFormat: (value: number, index: number) => string | string[] | number | number[];
+}>;
+export type TypeAndDatasetsType = ({
+    type: 'pie' | 'semiPie';
+    /**
+     * Needs to be memoized
+     */
+    datasets: SimpleDatasetForPie;
+    onChartClick?: OnChartClickHandler;
+    /** Configuration for center text (only for doughnut/pie charts) */
+    centerText?: CenterTextConfig;
+} & Never<XYAxisMax> & Never<ScaleTickFormatCallbacks>) | ({
+    type: 'line';
+    datasets: SimpleDatasetForLineAndArea[];
+    onChartClick?: never;
+    centerText?: never;
+} & XYAxisMax & ScaleTickFormatCallbacks) | ({
+    type: 'area';
+    datasets: SimpleDatasetForLineAndArea;
+    onChartClick?: never;
+    centerText?: never;
+} & XYAxisMax & ScaleTickFormatCallbacks) | ({
+    type: Exclude<ChartType, 'pie' | 'semiPie' | 'line' | 'area'>;
+    datasets: SimpleDataset[];
+    onChartClick?: OnChartClickHandler;
+    centerText?: never;
+} & XYAxisMax & ScaleTickFormatCallbacks);
+export type ChartProps = {
+    id: string;
+    /**
+     * The x-axis labels. Needs to be memoized
+     */
+    xAxisLabels: string[];
+    /**
+     * Hide the x and y axis and grid lines
+     * @default false
+     */
+    hideAxis?: boolean;
+    hideXAxisLabels?: boolean;
+    tooltipConfig?: {
+        getTooltipContent?: (args: Parameters<TooltipOptions['external']>[0]) => ReactNode;
+        /**
+         * @default 'top'
+         */
+        placement?: TooltipProps['placement'];
+        datasetValueFormatter?: (value: number) => string | number;
+    };
+    /** A title for x axis */
+    xScaleTitle?: string;
+    /** A title for y axis */
+    yScaleTitle?: string;
+} & TypeAndDatasetsType;
+export type TransformDatasetProps = {
+    appTheme: AppThemeType;
+} & ({
+    type: 'pie' | 'semiPie';
+    dataset: SimpleDatasetForPie;
+} | {
+    type: 'line' | 'area';
+    dataset: SimpleDatasetForLineAndArea;
+} | {
+    type: Exclude<ChartType, 'pie' | 'semiPie' | 'line' | 'area'>;
+    dataset: SimpleDataset;
+});
+export type GetBackgroundAndBorderColorProps = TransformDatasetProps;
+export type TransformDataForChartProps = {
+    appTheme: AppThemeType;
+} & TypeAndDatasetsType;
+export interface GetDefaultOptionsParams {
+    chartProps: ChartProps;
+    appTheme: AppThemeType;
+    externalTooltipHandler: TooltipOptions['external'];
+    setTooltipVisible: Dispatch<SetStateAction<boolean>>;
+}
+declare module 'chart.js' {
+    interface TooltipPositionerMap {
+        barElementCenterPositioner: TooltipPositionerFunction<'bar'>;
+    }
+}
+export interface HTMLLegendProps {
+    backgroundColor: string;
+    label: string;
+    onClick: () => void;
+    strikeThrough: boolean;
+    variant: 'line' | 'square';
+}
+export {};

package/dist/Shared/Components/Charts/utils.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { ChartDataset, ChartOptions, ChartType as ChartJSChartType, Point, TooltipOptions } from 'chart.js';
+import { ChartType, GetDefaultOptionsParams, TransformDataForChartProps } from './types';
+export declare const getChartJSType: (type: ChartType) => ChartJSChartType;
+export declare const getDefaultOptions: ({ chartProps, appTheme, externalTooltipHandler, setTooltipVisible, }: GetDefaultOptionsParams) => ChartOptions;
+export declare const transformDataForChart: (props: TransformDataForChartProps) => (ChartDataset<"line"> | {
+    backgroundColor?: string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern> | ((ctx: import('chart.js').ScriptableContext<"line">, options: import('chart.js/dist/types/basic').AnyObject) => import('chart.js').Color) | readonly (string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern>)[];
+    borderColor?: string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern> | ((ctx: import('chart.js').ScriptableContext<"line">, options: import('chart.js/dist/types/basic').AnyObject) => import('chart.js').Color) | readonly (string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern>)[];
+    pointBackgroundColor?: string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern> | ((ctx: import('chart.js').ScriptableContext<"line">, options: import('chart.js/dist/types/basic').AnyObject) => import('chart.js').Color) | readonly (string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern>)[];
+    pointBorderColor?: string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern> | ((ctx: import('chart.js').ScriptableContext<"line">, options: import('chart.js/dist/types/basic').AnyObject) => import('chart.js').Color) | readonly (string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern>)[];
+    label: string;
+    data: number[];
+} | {
+    backgroundColor: string[];
+    hoverBackgroundColor: string[];
+    borderColor: string;
+    borderWidth: number;
+    label: string;
+    data: number[];
+} | {
+    backgroundColor: string;
+    hoverBackgroundColor: string;
+    borderColor: string;
+    borderWidth?: undefined;
+    label: string;
+    data: number[];
+})[];
+export declare function chartColorGenerator(): Generator<"DeepPlum500" | "DeepPlum300" | "DeepPlum100" | "DeepPlum50" | "DeepPlum600" | "DeepPlum400" | "DeepPlum200" | "DeepPlum700" | "DeepPlum800" | "DeepPlum900" | "DeepPlum950" | "Magenta500" | "Magenta300" | "Magenta100" | "Magenta50" | "Magenta600" | "Magenta400" | "Magenta200" | "Magenta700" | "Magenta800" | "Magenta900" | "Magenta950" | "Slate500" | "Slate300" | "Slate100" | "Slate50" | "Slate600" | "Slate400" | "Slate200" | "Slate700" | "Slate800" | "Slate900" | "Slate950" | "Lavender500" | "Lavender300" | "Lavender100" | "Lavender50" | "Lavender600" | "Lavender400" | "Lavender200" | "Lavender700" | "Lavender800" | "Lavender900" | "Lavender950" | "SkyBlue500" | "SkyBlue300" | "SkyBlue100" | "SkyBlue50" | "SkyBlue600" | "SkyBlue400" | "SkyBlue200" | "SkyBlue700" | "SkyBlue800" | "SkyBlue900" | "SkyBlue950" | "AquaTeal500" | "AquaTeal300" | "AquaTeal100" | "AquaTeal50" | "AquaTeal600" | "AquaTeal400" | "AquaTeal200" | "AquaTeal700" | "AquaTeal800" | "AquaTeal900" | "AquaTeal950" | "LimeGreen500" | "LimeGreen300" | "LimeGreen100" | "LimeGreen50" | "LimeGreen600" | "LimeGreen400" | "LimeGreen200" | "LimeGreen700" | "LimeGreen800" | "LimeGreen900" | "LimeGreen950" | "CoralRed500" | "CoralRed300" | "CoralRed100" | "CoralRed50" | "CoralRed600" | "CoralRed400" | "CoralRed200" | "CoralRed700" | "CoralRed800" | "CoralRed900" | "CoralRed950" | "GoldenYellow500" | "GoldenYellow300" | "GoldenYellow100" | "GoldenYellow50" | "GoldenYellow600" | "GoldenYellow400" | "GoldenYellow200" | "GoldenYellow700" | "GoldenYellow800" | "GoldenYellow900" | "GoldenYellow950" | "CharcoalGray500" | "CharcoalGray300" | "CharcoalGray100" | "CharcoalGray50" | "CharcoalGray600" | "CharcoalGray400" | "CharcoalGray200" | "CharcoalGray700" | "CharcoalGray800" | "CharcoalGray900" | "CharcoalGray950" | "Gray500" | "Gray300" | "Gray100" | "Gray50" | "Gray600" | "Gray400" | "Gray200" | "Gray700" | "Gray800" | "Gray900" | "Gray950" | "SunsetOrange500" | "SunsetOrange300" | "SunsetOrange100" | "SunsetOrange50" | "SunsetOrange600" | "SunsetOrange400" | "SunsetOrange200" | "SunsetOrange700" | "SunsetOrange800" | "SunsetOrange900" | "SunsetOrange950", void, unknown>;
+export declare const buildChartTooltipFromContext: ({ title, body, labelColors: labelColorsProp, }: Pick<Parameters<TooltipOptions["external"]>[0]["tooltip"], "title" | "body" | "labelColors">) => ReactNode;
+export declare const distanceBetweenPoints: (pt1: Point, pt2: Point) => number;

package/dist/Shared/Components/ClusterStatusIcon/ClusterStatusIcon.d.ts

@@ -0,0 +1,3 @@
+import { ClusterStatusIconProps } from './types';
+declare const ClusterStatusIcon: ({ clusterStatus, isVirtualCluster }: ClusterStatusIconProps) => JSX.Element;
+export default ClusterStatusIcon;

package/dist/Shared/Components/ClusterStatusIcon/index.d.ts

@@ -0,0 +1 @@
+export { default as ClusterStatusIcon } from './ClusterStatusIcon';

package/dist/Shared/Components/ClusterStatusIcon/types.d.ts

@@ -0,0 +1,5 @@
+import { ClusterStatusType } from '../../../Pages/ResourceBrowser';
+export interface ClusterStatusIconProps {
+    clusterStatus: ClusterStatusType;
+    isVirtualCluster: boolean;
+}

package/dist/Shared/Components/ClusterStatusIcon/utils.d.ts

@@ -0,0 +1,2 @@
+import { ClusterStatusType } from '../../../Pages/ResourceBrowser';
+export declare const getBulletColorAccToStatus: (status: ClusterStatusType) => "bcg-5" | "bcr-5" | "bcy-5";

package/dist/Shared/Components/DTFocusTrap/DTFocusTrap.d.ts

@@ -4,5 +4,5 @@ export declare const useFocusTrapControl: () => {
     disableFocusTrap: typeof noop;
     resumeFocusTrap: typeof noop;
 };
-declare const DTFocusTrap: ({ onEscape, deactivateFocusOnEscape, children, initialFocus, }: DTFocusTrapType) => JSX.Element;
+declare const DTFocusTrap: ({ onEscape, deactivateFocusOnEscape, children, initialFocus, returnFocusOnDeactivate, }: DTFocusTrapType) => JSX.Element;
 export default DTFocusTrap;

package/dist/Shared/Components/DTFocusTrap/types.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { Props as FocusTrapProps } from 'focus-trap-react';
 type FocusTargetValue = HTMLElement | SVGElement | string;
 type FocusTargetValueOrFalse = FocusTargetValue | false;
 /**
@@ -7,7 +8,7 @@ type FocusTargetValueOrFalse = FocusTargetValue | false;
  * an opt-out, or a function that returns a DOM node or `false`.
  */
 type FocusTargetOrFalse = FocusTargetValueOrFalse | (() => FocusTargetValueOrFalse);
-export interface DTFocusTrapType {
+export interface DTFocusTrapType extends Pick<FocusTrapProps['focusTrapOptions'], 'returnFocusOnDeactivate'> {
     /**
      * Callback function that gets triggered when the Escape key is pressed. \
      * Should be wrapped in useCallback to prevent unnecessary re-renders.

package/dist/Shared/Components/DatePicker/DateTimePicker.d.ts

@@ -1,3 +1,3 @@
 import { DateTimePickerProps } from './types';
-declare const DateTimePicker: ({ date: dateObject, onChange, timePickerProps, disabled, id, label, required, hideTimeSelect, readOnly, isTodayBlocked, dataTestIdForTime, dataTestidForDate, openDirection, error, }: DateTimePickerProps) => JSX.Element;
+declare const DateTimePicker: ({ date: dateObject, dateRange, onChange, timePickerProps, disabled, id, label, required, hideTimeSelect, readOnly, dataTestIdForTime, error, isRangePicker, isTodayBlocked, blockPreviousDates, isOutsideRange, rangeShortcutOptions, }: DateTimePickerProps) => JSX.Element;
 export default DateTimePicker;

package/dist/Shared/Components/DatePicker/constants.d.ts

@@ -1,63 +1,4 @@
-import { default as moment } from 'moment';
-export declare const selectedStyles: {
-    background: string;
-    color: string;
-    hover: {
-        background: string;
-        color: string;
-    };
-};
-export declare const selectedSpanStyles: {
-    background: string;
-    color: string;
-    hover: {
-        background: string;
-        color: string;
-    };
-};
-export declare const hoveredSpanStyles: {
-    background: string;
-    color: string;
-};
-export declare const customDayStyles: {
-    selectedStartStyles: {
-        background: string;
-        color: string;
-        hover: {
-            background: string;
-            color: string;
-        };
-    };
-    selectedEndStyles: {
-        background: string;
-        color: string;
-        hover: {
-            background: string;
-            color: string;
-        };
-    };
-    hoveredSpanStyles: {
-        background: string;
-        color: string;
-    };
-    selectedSpanStyles: {
-        background: string;
-        color: string;
-        hover: {
-            background: string;
-            color: string;
-        };
-    };
-    selectedStyles: {
-        background: string;
-        color: string;
-        hover: {
-            background: string;
-            color: string;
-        };
-    };
-    border: string;
-};
+import { CustomComponents } from 'react-day-picker';
 export declare const MONTHLY_DATES_CONFIG: {
     'Day 1': string;
     'Day 2': string;
@@ -153,44 +94,4 @@ export declare const DATE_PICKER_IDS: {
     MONTH: string;
     TIME: string;
 };
-export declare const styles: {
-    PresetDateRangePicker_panel: {
-        padding: string;
-        width: string;
-        height: string;
-    };
-    PresetDateRangePicker_button: {
-        width: string;
-        background: string;
-        border: string;
-        color: string;
-        padding: string;
-        font: string;
-        fontWeight: number;
-        lineHeight: string;
-        overflow: string;
-        cursor: string;
-        ':active': {
-            outline: number;
-        };
-    };
-    DayPicker__horizontal: {
-        borderRadius: string;
-    };
-    PresetDateRangePicker_button__selected: {
-        color: string;
-        fontWeight: number;
-        background: string;
-        outline: string;
-    };
-};
-export declare const DayPickerCalendarInfoHorizontal: {
-    width: string;
-    boxShadow: string;
-};
-export declare const DayPickerRangeControllerPresets: {
-    text: string;
-    endDate: moment.Moment;
-    startDate: moment.Moment;
-    endStr: string;
-}[];
+export declare const DATE_PICKER_CUSTOM_COMPONENTS: Partial<CustomComponents>;

package/dist/Shared/Components/DatePicker/index.d.ts

@@ -1,8 +1,6 @@
 export * from './constants';
 export { default as DateTimePicker } from './DateTimePicker';
-export { DatePickerRangeController } from './DayPickerRangeController';
 export * from './MonthlySelect';
-export { default as SingleDatePickerComponent } from './SingleDatePickerComponent';
 export * from './TimeSelect';
 export * from './types';
 export * from './utils';

package/dist/Shared/Components/DatePicker/types.d.ts

@@ -1,4 +1,3 @@
-import { SingleDatePickerShape } from 'react-dates';
 import { SelectInstance } from 'react-select';
 import { Moment } from 'moment';
 import { SelectPickerOptionType } from '../SelectPicker';
@@ -81,11 +80,13 @@ export interface TimeSelectProps {
      */
     selectedTimeOption: DateSelectPickerType;
 }
-export interface DateTimePickerProps extends Pick<TimeSelectProps, 'date' | 'timePickerProps' | 'error' | 'disabled' | 'dataTestIdForTime'>, Pick<SingleDatePickerShape, 'openDirection'> {
-    /**
-     * Props for the date picker
-     */
-    datePickerProps?: any;
+interface DateRangeType {
+    from: Date;
+    to?: Date;
+}
+export type UpdateDateRangeType = (dateRange: DateRangeType) => void;
+export type UpdateSingleDateType = (date: Date) => void;
+export type DateTimePickerProps = Pick<TimeSelectProps, 'timePickerProps' | 'error' | 'disabled' | 'dataTestIdForTime'> & {
     /**
      * Id for the component
      */
@@ -98,10 +99,6 @@ export interface DateTimePickerProps extends Pick<TimeSelectProps, 'date' | 'tim
      * If true, the field is required and asterisk is shown
      */
     required?: boolean;
-    /**
-     * To hide time selector
-     */
-    hideTimeSelect?: boolean;
     /**
      * To make the field read only
      */
@@ -110,25 +107,32 @@ export interface DateTimePickerProps extends Pick<TimeSelectProps, 'date' | 'tim
      * To block today's date
      */
     isTodayBlocked?: boolean;
+    blockPreviousDates?: boolean;
+    isOutsideRange?: (day: Date) => boolean;
+} & ({
+    isRangePicker: true;
+    hideTimeSelect: true;
+    dateRange: DateRangeType;
+    onChange: UpdateDateRangeType;
+    rangeShortcutOptions?: ({
+        label: string;
+        onClick: () => void;
+        value?: never;
+    } | {
+        label: string;
+        onClick?: never;
+        value: DateRangeType;
+    })[];
+    date?: never;
+} | {
+    isRangePicker?: false;
+    date: TimeSelectProps['date'];
+    onChange: UpdateSingleDateType;
     /**
-     * Data test id for date picker
-     */
-    dataTestidForDate?: string;
-    /**
-     * Function to handle date change
+     * To hide time selector
      */
-    onChange: (date: Date) => void;
-}
-export type CalendarFocusInputType = 'startDate' | 'endDate';
-export interface DatePickerRangeControllerProps {
-    calendar: any;
-    calendarInputs: any;
-    focusedInput: any;
-    handleFocusChange: any;
-    handleDatesChange: any;
-    handleCalendarInputs?: any;
-    calendarValue: string;
-    handlePredefinedRange: (start: Moment, end: Moment, endStr: string) => void;
-    handleDateInput: (key: 'startDate' | 'endDate', value: string) => void;
-    handleApply: (...args: any[]) => void;
-}
+    hideTimeSelect?: boolean;
+    dateRange?: never;
+    rangeShortcutOptions?: never;
+});
+export {};

package/dist/Shared/Components/DatePicker/utils.d.ts

@@ -10,7 +10,7 @@ export declare const MONTHLY_DATE_OPTIONS: {
  * Return the options for the time in label and value format
  * @type {SelectPickerOptionType[]}
  */
-export declare const DEFAULT_TIME_OPTIONS: SelectPickerOptionType[];
+export declare const DEFAULT_TIME_OPTIONS: SelectPickerOptionType<string>[];
 /**
  * Get the time value from the date object in the format: `hh:mm:ss`
  */
@@ -32,15 +32,3 @@ export declare const updateDate: (currentDateObj: Date, newDate: Date) => Date;
  * @returns
  */
 export declare const getDefaultDateFromTimeToLive: (timeToLive: string, isTomorrow?: boolean) => Date;
-/**
- * Returns a string representing the range of dates
- * given by the start and end dates. If the end date
- * is 'now' and the start date includes 'now',
- * it will return the corresponding range from the
- * DayPickerRangeControllerPresets array.
- * @param startDateStr - the start date string
- * @param endDateStr - the end date string
- * @returns - a string representing the range of dates
- */
-export declare const getCalendarValue: (startDateStr: string, endDateStr: string) => string;
-export declare const getTimestampFromDateIfAvailable: (dateString: string) => string;

package/dist/Shared/Components/DocLink/constants.d.ts

@@ -93,6 +93,9 @@ export declare const DOCUMENTATION: {
     readonly SOFTWARE_DISTRIBUTION_HUB: "usage/software-distribution-hub";
     readonly RELEASE_TRACKS: "usage/software-distribution-hub/release-hub#creating-release-tracks-and-versions";
     readonly RELEASES: "usage/software-distribution-hub/release-hub#creating-release-tracks-and-versions";
+    readonly RELEASE_HUB: "usage/software-distribution-hub/release-hub";
     readonly TENANTS: "usage/software-distribution-hub/tenants#adding-installation";
     readonly TENANTS_INSTALLATION: "usage/software-distribution-hub/tenants";
+    readonly AUTOSCALER_DETECTION: "user-guide/infra-management/infrastructure-overview#troubleshooting-autoscaler-detection";
+    readonly COST_CALCULATION: "user-guide/finops/overview-cost-visibility#how-is-the-cost-calculated";
 };

package/dist/Shared/Components/FeatureDescription/types.d.ts

@@ -31,7 +31,7 @@ type FeatureDescriptionModalWithTabsConfig = {
     imageStyles?: never;
 };
 export type FeatureDescriptionModalProps = {
-    title: string;
+    title: React.ReactNode;
     closeModalText?: string;
     closeModal?: () => void;
 } & ((BaseFeatureDescriptionModalProps & {

package/dist/Shared/Components/FramerComponents/index.d.ts

@@ -1,2 +1,2 @@
-import { animate, AnimatePresence, motion, useAnimationControls, useMotionTemplate, useMotionValue } from 'framer-motion';
-export { animate, AnimatePresence, motion, useAnimationControls, useMotionTemplate, useMotionValue };
+import { animate, AnimatePresence, motion, useAnimation, useAnimationControls, useMotionTemplate, useMotionValue } from 'framer-motion';
+export { animate, AnimatePresence, motion, useAnimation, useAnimationControls, useMotionTemplate, useMotionValue };

package/dist/Shared/Components/GenericSectionErrorState/GenericSectionErrorState.component.d.ts

@@ -1,3 +1,4 @@
+import { ButtonComponentType } from '../Button';
 import { GenericSectionErrorStateProps } from './types';
-declare const GenericSectionErrorState: ({ reload, withBorder, title, subTitle, description, buttonText, rootClassName, useInfoIcon, progressingProps, }: GenericSectionErrorStateProps) => JSX.Element;
+declare const GenericSectionErrorState: <T extends ButtonComponentType = ButtonComponentType.button>({ reload, buttonProps, customIcon, withBorder, title, subTitle, description, buttonText, rootClassName, useInfoIcon, progressingProps, }: GenericSectionErrorStateProps<T>) => JSX.Element;
 export default GenericSectionErrorState;

package/dist/Shared/Components/GenericSectionErrorState/types.d.ts

@@ -1,10 +1,7 @@
 import { ReactNode } from 'react';
+import { ButtonComponentType, ButtonProps } from '../Button';
 import { IconsProps } from '../Icon';
-export type GenericSectionErrorStateProps = {
-    /**
-     * Handler for reloading the section
-     */
-    reload?: () => void;
+export type GenericSectionErrorStateProps<ButtonType extends ButtonComponentType = ButtonComponentType.button> = {
     /**
      * If true, border is added to the section
      *
@@ -37,6 +34,7 @@ export type GenericSectionErrorStateProps = {
      */
     progressingProps: Omit<IconsProps, 'name'>;
     useInfoIcon?: false;
+    customIcon?: never;
 } | {
     progressingProps?: never;
     /**
@@ -45,7 +43,25 @@ export type GenericSectionErrorStateProps = {
      * @default false
      */
     useInfoIcon: true;
+    customIcon?: never;
+} | {
+    progressingProps?: never;
+    useInfoIcon?: never;
+    customIcon?: never;
 } | {
+    customIcon: JSX.Element;
     progressingProps?: never;
     useInfoIcon?: never;
+}) & ({
+    /**
+     * Handler for reloading the section
+     */
+    reload: () => void;
+    buttonProps?: never;
+} | {
+    reload?: never;
+    buttonProps: ButtonProps<ButtonType>;
+} | {
+    reload?: never;
+    buttonProps?: never;
 });

package/dist/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButon.d.ts

@@ -1,3 +1,3 @@
 import { HeaderWithCreateButtonProps } from './types';
-export declare const HeaderWithCreateButton: ({ headerName, additionalHeaderInfo }: HeaderWithCreateButtonProps) => JSX.Element;
+export declare const HeaderWithCreateButton: ({ viewType }: HeaderWithCreateButtonProps) => JSX.Element;
 export default HeaderWithCreateButton;

package/dist/Shared/Components/Header/HeaderWithCreateButton/types.d.ts

@@ -1,8 +1,6 @@
 import { ActionMenuProps } from '../../ActionMenu';
-import { PageHeaderType } from '../types';
 export interface HeaderWithCreateButtonProps {
-    headerName: string;
-    additionalHeaderInfo: PageHeaderType['additionalHeaderInfo'];
+    viewType?: 'jobs' | 'apps' | 'infra-apps';
 }
 export declare enum CreateActionMenuItems {
     CUSTOM_APP = "create-custom-app",

package/dist/Shared/Components/Header/PageHeader.d.ts

@@ -1,3 +1,3 @@
 import { PageHeaderType } from './types';
-declare const PageHeader: ({ headerName, headerImage, additionalHeaderInfo, showTabs, renderHeaderTabs, isBreadcrumbs, breadCrumbs, renderActionButtons, onClose, tippyProps, }: PageHeaderType) => JSX.Element;
+declare const PageHeader: ({ headerName, headerImage, additionalHeaderInfo, showTabs, renderHeaderTabs, isBreadcrumbs, breadCrumbs, renderActionButtons, onClose, tippyProps, closeIcon, }: PageHeaderType) => JSX.Element;
 export default PageHeader;

package/dist/Shared/Components/Header/types.d.ts

@@ -17,8 +17,10 @@ export interface PageHeaderType {
         TippyIcon?: React.FunctionComponent<any>;
         tippyMessage?: string;
         onClickTippyButton?: () => void;
+        tippyHeader?: string;
     };
     onClose?: () => void;
+    closeIcon?: JSX.Element;
 }
 export interface ServerInfo {
     currentVersion: string;