@digital-ai/dot-components 2.18.7 → 2.19.1

package/lib/components/carousel/Carousel.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { CommonProps } from '../CommonProps';
+export declare type CarouselAnimationVariant = 'fade' | 'slide';
+export declare type CarouselNavigationButtonDisplayOption = 'none' | 'top' | 'bottom' | 'center';
+export interface CarouselProps extends CommonProps {
+    /** The animation shown when the carousel pages are changing. Default is `fade`. */
+    animation?: CarouselAnimationVariant;
+    /** If true, the pages of the carousel are changed automatically. */
+    autoPlay?: boolean;
+    /** Background color for the carousel. */
+    backgroundColor?: string;
+    /** The index of currently selected page. Use in controlled mode. */
+    currentPage?: number;
+    /** The option for displaying the arrow buttons. Default is `center`. */
+    displayNavigationButtons?: CarouselNavigationButtonDisplayOption;
+    /** Used with `autoPlay`. Duration in seconds for auto changing the carousel pages. Default is 3 s. */
+    duration?: number;
+    /** The index of initial selected page. Default is 0 (the first page). */
+    initialPage?: number;
+    /** Callback fired when the carousel page changes. Use in controlled mode (see `currentPage`). */
+    onPageChange?: (page: number) => void;
+    /** The array of pages to display in carousel. */
+    pagesContent: Array<ReactNode>;
+    /** Used with `autoPlay`. If true, the auto changing pages is paused when mouse is hovering the component. */
+    pauseAutoPlayOnHover?: boolean;
+    /** Used with `autoPlay`. If true, the linear progress bar is displayed on the bottom of carousel. */
+    progressIndicator?: boolean;
+    /** Determines whether you can see the pages buttons on bottom. True by default. */
+    showPagesButtons?: boolean;
+}
+export declare const DotCarousel: ({ animation, ariaLabel, autoPlay, backgroundColor, className, currentPage, "data-testid": dataTestId, displayNavigationButtons, duration, initialPage, onPageChange, pagesContent, pauseAutoPlayOnHover, progressIndicator, showPagesButtons, }: CarouselProps) => JSX.Element;

package/lib/components/carousel/Carousel.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const rootClassName = "dot-carousel";
+interface StyledCarouselProps {
+    backgroundColor?: string;
+}
+export declare const StyledCarousel: import("styled-components").StyledComponent<"div", any, StyledCarouselProps, never>;
+export {};

package/lib/components/index.d.ts

@@ -19,7 +19,8 @@ export type { RadioButtonProps } from './radio/RadioButton';
 export type { RadioGroupProps } from './radio/RadioGroup';
 export type { BackItemProps, SidebarProps } from './sidebar/Sidebar';
 export type { SwitchProps, SwitchColor, SwitchSize, SwitchLabelPlacement, } from './switch';
-export type { CollapsibleTableOptions, DotColumnHeader, MultiSelect, Order, RowSelectionChangeHandler, RowsPerPageOption, TableActionProps, TableActionsProps, TableDataWithPagination, TableRowProps, TableRowSelectChangeHandler, TextAlignment, SortDirection, } from './table';
+export type { CollapsibleTableOptions } from './table/collapsible-table';
+export type { DotColumnHeader, MultiSelect, Order, RowSelectionChangeHandler, RowsPerPageOption, TableActionProps, TableActionsProps, TableDataWithPagination, TableRowProps, TableRowSelectChangeHandler, TextAlignment, SortDirection, } from './table';
 export type { TabProps } from './tabs/Tabs';
 export type { TypographyVariant } from './typography/Typography';
 export type { ProgressButtonProps } from './progress-button/ProgressButton';
@@ -36,6 +37,8 @@ export type { LinearProgressColor, LinearProgressProps, LinearProgressVariant, }
 export type { DatePickerLocale, DatePickerProps, FieldChangeHandlerContext, } from './date-picker';
 export type { TimePickerProps } from './time-picker';
 export type { ClickAwayListenerProps } from './click-away-listener';
+export type { StepProps } from './stepper/Stepper';
+export type { CarouselAnimationVariant, CarouselNavigationButtonDisplayOption, CarouselProps, } from './carousel/Carousel';
 export { DotAccordion } from './accordion/Accordion';
 export { DotActionToolbar } from './action-toolbar/ActionToolbar';
 export { DotAlertBanner } from './alert-banner/AlertBanner';
@@ -83,7 +86,7 @@ export { DotSidebar } from './sidebar/Sidebar';
 export { DotSkeleton } from './skeleton/Skeleton';
 export { DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, useDotSnackbarContext, } from './snackbar';
 export { DotSplitButton } from './split-button/SplitButton';
-export { DotStepper, StepProps } from './stepper/Stepper';
+export { DotStepper } from './stepper/Stepper';
 export { DotProgressButton } from './progress-button/ProgressButton';
 export { DotSwitch } from './switch';
 export { DotHeaderRow, DotTable, DotTablePagination, DotTableActions, DotTableAction, } from './table';
@@ -99,4 +102,5 @@ export { DotLinearProgress } from './linear-progress';
 export { DatePickerKeydownContext, DotDatePicker, checkIfValidDate, } from './date-picker';
 export { Daytime, DotTimePicker, mockScrollIntoView } from './time-picker';
 export { DotClickAwayListener } from './click-away-listener';
+export { DotCarousel } from './carousel/Carousel';
 export { CreateUUID } from './createUUID';

package/lib/components/list/utils/models.d.ts

@@ -36,6 +36,7 @@ export interface ListItemProps extends CommonProps {
     endIcon?: ReactNode;
     /** If provided, the list item will be rendered as a link */
     href?: string;
+    id?: string;
     isOpened?: boolean;
     /** If provided, the menu item will display a nested list */
     items?: Array<ListItemProps>;

package/lib/components/table/Table.d.ts

@@ -1,71 +1,5 @@
-import { MouseEvent, ReactNode } from 'react';
-import { CommonProps } from '../CommonProps';
-import { DotColumnHeader, Order } from './TableHeader';
-import { RowsPerPageOption } from './TablePagination';
-import { TypographyVariant } from '../typography/Typography';
-import { CollapsibleTableOptions, MultiSelect } from './utils/models';
-import { PopperPlacement } from '../menu/Menu';
-export declare const TABLE_TYPOGRAPHY_VARIANT = "body1";
-export interface TableRowProps extends CommonProps {
-    /** row identifier that will be passed to onRowClick callback */
-    id?: string;
-    /** row data where keys map to column ids and values to cell values */
-    rowData: any;
-    /** if the row is selected */
-    selected?: boolean;
-}
-export interface TableProps extends CommonProps {
-    /** The popper placement for the actions menu **/
-    actionsMenuPlacement?: PopperPlacement;
-    /** Typography variant which will be used for table body cell values **/
-    bodyTypography?: TypographyVariant;
-    /** Optional collapsible-table object **/
-    collapsibleTableOptions?: CollapsibleTableOptions;
-    /** The table header columns */
-    columns: Array<DotColumnHeader>;
-    /** Total number of items for paginated table.
-        Prop is ignored for non-paginated tables (no rowsPerPage)
-        and for tables with internally managed sorting (no onUpdateData). */
-    count?: number;
-    /** The table body row data.
-        If paging/sorting are managed by consumer (onUpdateData callback provided) this is the data for the current page.
-        If paging/sorting are managed internally (no onUpdateData callback) this is all the data. */
-    data: Array<TableRowProps>;
-    /** Message that is shown if data is empty */
-    emptyMessage?: string;
-    /** Typography variant which will be used for table pagination **/
-    footerTypography?: TypographyVariant;
-    /** Typography variant which will be used for table header cell values **/
-    headerTypography?: TypographyVariant;
-    /** Customize the rows per page label. Default is 'Rows per page:' */
-    labelRowsPerPage?: ReactNode;
-    /** Table is loading */
-    loading?: boolean;
-    /** Maximum height of table container */
-    maxHeight?: string;
-    /** Optional multi-select checkbox object **/
-    multiSelect?: MultiSelect;
-    /** Row click event callback */
-    onRowClick?: (event: MouseEvent, id: string) => void;
-    /** Update data callback if data is managed by consumer */
-    onUpdateData?: (order: Order, orderBy: string, page: number, rowsPerPage: number) => void;
-    /** The sort order of table data 'asc', 'desc' */
-    order?: Order;
-    /** The ID of the column that you are sorting by */
-    orderBy?: string;
-    /** The zero-based index of the current page  for paginated table */
-    page?: number;
-    /** Rows per page for paginated table */
-    rowsPerPage?: RowsPerPageOption;
-    /** Customizes the options of the rows per page select field. Default: [10, 25, 50, 100, 150, 200] */
-    rowsPerPageOptions?: number[];
-    /** Table is sortable */
-    sortable?: boolean;
-    /** Table header is sticky */
-    stickyHeader?: boolean;
-    /** Toolbar displayed above column headers */
-    toolbar?: ReactNode;
-}
+import { Order } from './utils/models';
+import { TableProps, TableRowProps } from './utils/interfaces';
 export declare const sortComparator: (a: TableRowProps, b: TableRowProps, orderBy: string) => 0 | 1 | -1;
 export declare const getComparator: (order: Order, orderBy: string) => (a: TableRowProps, b: TableRowProps) => number;
 export declare function stableSort<T>(array: T[], comparator: (order: T, orderBy: T) => number): T[];

package/lib/components/table/TableBody.d.ts

@@ -1,14 +1,14 @@
 import { MouseEvent } from 'react';
-import { DotColumnHeader } from './TableHeader';
-import { TableRowProps } from './Table';
 import { CommonProps } from '../CommonProps';
 import { TypographyVariant } from '../typography/Typography';
-import { CollapsibleTableBody, MultiSelectBody } from './utils/models';
 import { PopperPlacement } from '../menu/Menu';
+import { CollapsibleTableBodyProps } from './collapsible-table';
+import { DotColumnHeader, TableRowProps } from './utils/interfaces';
+import { MultiSelectBody } from './utils/models';
 export interface TableBodyProps extends CommonProps {
     /** The popper placement for the actions menu **/
     actionsMenuPlacement?: PopperPlacement;
-    collapsibleTableBody?: CollapsibleTableBody;
+    collapsibleTableBody?: CollapsibleTableBodyProps;
     /** The table column headers **/
     columns: Array<DotColumnHeader>;
     /** The table body row data **/

package/lib/components/table/TableHeader.d.ts

@@ -1,26 +1,4 @@
-import { TextAlignment } from './TableCell';
-import { TypographyVariant } from '../typography/Typography';
-import { CollapsibleTableOptions, MultiSelectHeader } from './utils/models';
-export interface DotColumnHeader {
-    align?: TextAlignment;
-    id: string;
-    label?: string;
-    sortable?: boolean;
-    truncate?: boolean;
-    width?: string;
-}
-export declare type Order = 'asc' | 'desc';
-export interface HeaderProps {
-    collapsibleTableOptions?: CollapsibleTableOptions;
-    columns: Array<DotColumnHeader>;
-    multiSelectHeader?: MultiSelectHeader;
-    onRequestSort: (property: string) => void;
-    order?: Order;
-    /** The ID of the column that you are sorting by */
-    orderBy?: string;
-    sortable: boolean;
-    typography: TypographyVariant;
-}
+import { HeaderProps } from './utils/interfaces';
 /**
  * A wrapper component around the TableHead component from @material-ui. This component can be used
  * to determine the functionality of the table header.

package/lib/components/table/TableHeaderCell.d.ts

@@ -1,7 +1,7 @@
 import { MouseEvent, ReactNode } from 'react';
 import { TextAlignment } from './TableCell';
-import { Order } from './TableHeader';
 import { TypographyVariant } from '../typography/Typography';
+import { Order } from './utils/models';
 export declare type SortDirection = 'asc' | 'desc';
 export interface HeaderCellProps {
     /** Allows cell text alignment: left, right, center  */

package/lib/components/table/TableRow.d.ts

@@ -1,16 +1,11 @@
 import { MouseEvent, ReactNode } from 'react';
-import { DotColumnHeader } from './TableHeader';
 import { CommonProps } from '../CommonProps';
-import { TableRowProps } from './Table';
 import { TypographyVariant } from '../typography/Typography';
-import { CollapsibleTableBody, MultiSelectBody } from './utils/models';
-export interface EmptyRowProps {
-    cols: number;
-    message?: string;
-    typography: TypographyVariant;
-}
+import { CollapsibleTableBodyProps } from './collapsible-table';
+import { DotColumnHeader, TableRowProps } from './utils/interfaces';
+import { MultiSelectBody } from './utils/models';
 export interface RowProps extends CommonProps {
-    collapsibleTableBody: CollapsibleTableBody;
+    collapsibleTableBody: CollapsibleTableBodyProps;
     /** The table column headers */
     columns: Array<DotColumnHeader>;
     /** The table body row data */
@@ -33,4 +28,3 @@ export interface RowProps extends CommonProps {
  * for manipulating data prior to displaying the data inside the table
  */
 export declare const DotTableRow: ({ collapsibleTableBody, columns, className, data, multiSelectBody, onActionMenuTrigger, onClick, rowKey, selected, typography, }: RowProps) => JSX.Element;
-export declare const EmptyDotRow: ({ cols, message, typography, }: EmptyRowProps) => JSX.Element;

package/lib/components/table/TableRowEmpty.d.ts

@@ -0,0 +1,7 @@
+import { TypographyVariant } from '../typography/Typography';
+export interface EmptyRowProps {
+    cols: number;
+    message?: string;
+    typography: TypographyVariant;
+}
+export declare const EmptyDotRow: ({ cols, message, typography, }: EmptyRowProps) => JSX.Element;

package/lib/components/table/collapsible-table/CollapsibleTable.d.ts

@@ -0,0 +1,2 @@
+import { CollapsibleTableProps } from './interfaces';
+export declare const DotCollapsibleTable: ({ collapsibleTableBody, loading, parentRowKey, rowData, }: CollapsibleTableProps) => JSX.Element;

package/lib/components/table/{TableBodyCollapsibleTable.styles.d.ts → collapsible-table/CollapsibleTable.styles.d.ts}

@@ -1,2 +1,2 @@
-export declare const rootClassName = "dot-collapsible-container";
+export declare const CollapsibleTableClassName = "dot-collapsible-table-container";
 export declare const StyledCollapsibleTableWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/table/collapsible-table/CollapsibleTableBody.d.ts

@@ -0,0 +1,2 @@
+import { AnotherCollapsibleTableBodyProps } from './interfaces';
+export declare const CollapsibleTableBody: ({ nestedTableBodyTypography, nestedTableColumns, nestedTableEmptyMessage, nestedTableRowData, parentRowKey, }: AnotherCollapsibleTableBodyProps) => JSX.Element;

package/lib/components/table/collapsible-table/ExpandCollapseCell.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { ExpandCollapseCellProps } from './index';
+export declare const ExpandCollapseCell: ({ ariaLabel, className, "data-testid": dataTestId, isExpanded, onRowExpandCollapse, rowId, }: ExpandCollapseCellProps) => ReactElement;

package/lib/components/table/{TableBodyExpandCollapseCell.styles.d.ts → collapsible-table/ExpandCollapseCell.styles.d.ts}

@@ -1,3 +1,3 @@
 import { TableCell } from '@mui/material';
-export declare const rootClassName = "dot-td-expand-collapse";
+export declare const ExpandCollapseCellClassName = "dot-td-expand-collapse";
 export declare const StyledTableBodyExpandCollapseCell: import("styled-components").StyledComponent<typeof TableCell, any, {}, never>;

package/lib/components/table/collapsible-table/index.d.ts

@@ -0,0 +1,4 @@
+export { DotCollapsibleTable } from './CollapsibleTable';
+export { CollapsibleTableBody } from './CollapsibleTableBody';
+export { ExpandCollapseCell } from './ExpandCollapseCell';
+export type { AnotherCollapsibleTableBodyProps, CollapsibleTableBodyProps, CollapsibleTableOptions, ExpandCollapseCellProps, } from './interfaces';

package/lib/components/table/collapsible-table/interfaces.d.ts

@@ -0,0 +1,43 @@
+import { DotColumnHeader } from '../utils/interfaces';
+import { CommonProps } from '../../CommonProps';
+import { TypographyVariant } from '../../typography/Typography';
+interface CollapsibleTableBaseProps {
+    /** Typography variant which will be used for nested-table body cell values **/
+    nestedTableBodyTypography?: TypographyVariant;
+    /** The nested-table header columns */
+    nestedTableColumns: Array<DotColumnHeader>;
+    /** Optional, message that is shown if nested-table data is empty */
+    nestedTableEmptyMessage?: string;
+    /** Typography variant which will be used for nested-table header cell values **/
+    nestedTableHeaderTypography?: TypographyVariant;
+    /** Optional, title for nested-table */
+    nestedTableTitle?: string;
+}
+export interface CollapsibleTableOptions extends CollapsibleTableBaseProps {
+    /** Name of the property which will have the nested-table data in rowData object  */
+    nestedTableDataPropName: string;
+    /** Row click (expand) event callback for async loading of nested-table data */
+    onRowExpand?: (rowId: string, setLoading: (loading: boolean) => void) => void;
+}
+export interface ExpandCollapseCellProps extends CommonProps {
+    isExpanded: boolean;
+    onRowExpandCollapse: (isExpanded: boolean, rowId: string) => void;
+    rowId: string;
+}
+export interface AnotherCollapsibleTableBodyProps extends CollapsibleTableBaseProps {
+    nestedTableRowData: Array<unknown>;
+    parentRowKey: string;
+}
+export interface CollapsibleTableProps {
+    collapsibleTableBody: CollapsibleTableBodyProps;
+    loading?: boolean;
+    parentRowKey: string;
+    rowData: unknown;
+}
+export interface CollapsibleTableBodyProps extends CollapsibleTableBaseProps {
+    expandedTableRowIds: string[];
+    /** Name of the property which will have the nested-table data in rowData object  */
+    nestedTableDataPropName: string;
+    onRowExpandCollapseTable?: (isExpanded: boolean, rowId: string, setLoading: (loading: boolean) => void) => void;
+}
+export {};

package/lib/components/table/index.d.ts

@@ -1,12 +1,11 @@
-export type { TableRowProps } from './Table';
+export type { DotColumnHeader, TableRowProps } from './utils/interfaces';
 export type { TableActionProps } from './TableAction';
 export type { TableActionsProps } from './TableActions';
 export type { TextAlignment } from './TableCell';
 export type { TableDataWithPagination } from './TableDataWithPagination';
-export type { DotColumnHeader, Order } from './TableHeader';
 export type { SortDirection } from './TableHeaderCell';
 export type { RowsPerPageOption } from './TablePagination';
-export type { CollapsibleTableOptions, MultiSelect, TableRowSelectChangeHandler, RowSelectionChangeHandler, } from './utils/models';
+export type { MultiSelect, TableRowSelectChangeHandler, RowSelectionChangeHandler, Order, } from './utils/models';
 export { DotTablePagination } from './TablePagination';
 export { DotTable } from './Table';
 export { DotHeaderRow } from './TableHeader';

package/lib/components/table/utils/helpers.d.ts

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
 import { TypographyVariant } from '../../typography/Typography';
-import { TableRowProps } from '../Table';
+import { TableRowProps } from './interfaces';
 export declare const getFormattedTableCellValue: (value: any, typographyVariant: TypographyVariant) => ReactNode;
 export declare const getContainerMaxHeightStyle: (stickyHeader?: boolean, maxHeight?: string) => string;
 export declare const getSelectedRowIds: (id: string, isChecked: boolean, selectedIds: string[]) => string[];
 export declare const getBulkSelectedRowIds: (isChecked: boolean, selectedIds: string[], pageData: TableRowProps[]) => string[];
 export declare const getExpandedRowIds: (expandedIds: string[], id: string, isExpand: boolean) => string[];
+export declare const parseCellMaxWidth: (width: string) => string;

package/lib/components/table/utils/interfaces.d.ts

@@ -0,0 +1,87 @@
+import { MouseEvent, ReactNode } from 'react';
+import { CommonProps } from '../../CommonProps';
+import { TypographyVariant } from '../../typography/Typography';
+import { PopperPlacement } from '../../menu/Menu';
+import { CollapsibleTableOptions } from '../collapsible-table/interfaces';
+import { MultiSelect, MultiSelectHeader, Order } from './models';
+import { TextAlignment } from '../TableCell';
+import { RowsPerPageOption } from '../TablePagination';
+export interface TableRowProps extends CommonProps {
+    /** row identifier that will be passed to onRowClick callback */
+    id?: string;
+    /** row data where keys map to column ids and values to cell values */
+    rowData: any;
+    /** if the row is selected */
+    selected?: boolean;
+}
+export interface TableProps extends CommonProps {
+    /** The popper placement for the actions menu **/
+    actionsMenuPlacement?: PopperPlacement;
+    /** Typography variant which will be used for table body cell values **/
+    bodyTypography?: TypographyVariant;
+    /** Optional collapsible-table object **/
+    collapsibleTableOptions?: CollapsibleTableOptions;
+    /** The table header columns */
+    columns: Array<DotColumnHeader>;
+    /** Total number of items for paginated table.
+        Prop is ignored for non-paginated tables (no rowsPerPage)
+        and for tables with internally managed sorting (no onUpdateData). */
+    count?: number;
+    /** The table body row data.
+        If paging/sorting are managed by consumer (onUpdateData callback provided) this is the data for the current page.
+        If paging/sorting are managed internally (no onUpdateData callback) this is all the data. */
+    data: Array<TableRowProps>;
+    /** Message that is shown if data is empty */
+    emptyMessage?: string;
+    /** Typography variant which will be used for table pagination **/
+    footerTypography?: TypographyVariant;
+    /** Typography variant which will be used for table header cell values **/
+    headerTypography?: TypographyVariant;
+    /** Customize the rows per page label. Default is 'Rows per page:' */
+    labelRowsPerPage?: ReactNode;
+    /** Table is loading */
+    loading?: boolean;
+    /** Maximum height of table container */
+    maxHeight?: string;
+    /** Optional multi-select checkbox object **/
+    multiSelect?: MultiSelect;
+    /** Row click event callback */
+    onRowClick?: (event: MouseEvent, id: string) => void;
+    /** Update data callback if data is managed by consumer */
+    onUpdateData?: (order: Order, orderBy: string, page: number, rowsPerPage: number) => void;
+    /** The sort order of table data 'asc', 'desc' */
+    order?: Order;
+    /** The ID of the column that you are sorting by */
+    orderBy?: string;
+    /** The zero-based index of the current page  for paginated table */
+    page?: number;
+    /** Rows per page for paginated table */
+    rowsPerPage?: RowsPerPageOption;
+    /** Customizes the options of the rows per page select field. Default: [10, 25, 50, 100, 150, 200] */
+    rowsPerPageOptions?: number[];
+    /** Table is sortable */
+    sortable?: boolean;
+    /** Table header is sticky */
+    stickyHeader?: boolean;
+    /** Toolbar displayed above column headers */
+    toolbar?: ReactNode;
+}
+export interface DotColumnHeader {
+    align?: TextAlignment;
+    id: string;
+    label?: string;
+    sortable?: boolean;
+    truncate?: boolean;
+    width?: string;
+}
+export interface HeaderProps {
+    collapsibleTableOptions?: CollapsibleTableOptions;
+    columns: Array<DotColumnHeader>;
+    multiSelectHeader?: MultiSelectHeader;
+    onRequestSort: (property: string) => void;
+    order?: Order;
+    /** The ID of the column that you are sorting by */
+    orderBy?: string;
+    sortable: boolean;
+    typography: TypographyVariant;
+}

package/lib/components/table/utils/models.d.ts

@@ -1,8 +1,10 @@
 import { ReactNode } from 'react';
-import { TableRowProps } from '../Table';
-import { DotColumnHeader } from '../TableHeader';
-export declare type RowSelectionChangeHandler = (isChecked: boolean, rowId: string) => void;
+import { TableRowProps } from './interfaces';
+export declare const TABLE_TYPOGRAPHY_VARIANT = "body1";
+export declare const TABLE_DEFAULT_SKELETON_ROWS = 4;
+export declare type Order = 'asc' | 'desc';
 export declare type MultiSelectState = 'unchecked' | 'checked' | 'indeterminate';
+export declare type RowSelectionChangeHandler = (isChecked: boolean, rowId: string) => void;
 export declare type TableRowSelectChangeHandler = (isChecked: boolean, selectedTableRowIds: string[]) => void;
 export interface MultiSelect {
     bulkActions?: ReactNode;
@@ -20,22 +22,4 @@ export interface MultiSelectHeader extends MultiSelectTableBase {
 export interface MultiSelectBody extends MultiSelectTableBase {
     onCheckIndividualChange?: RowSelectionChangeHandler;
 }
-interface CollapsibleTableBase {
-    /** The nested-table header columns */
-    nestedTableColumns: Array<DotColumnHeader>;
-    /** Name of the property which has nested table data in rowData object  */
-    nestedTableDataPropName: string;
-    /** Optional message that is shown if nested-table data is empty */
-    nestedTableEmptyMessage?: string;
-    /** Optional heading for nested-table */
-    nestedTableTitle?: string;
-}
-export interface CollapsibleTableOptions extends CollapsibleTableBase {
-    /** Row click (expand) event callback for async loading of nested-table data */
-    onRowExpand?: (rowId: string, setLoading: (loading: boolean) => void) => void;
-}
-export interface CollapsibleTableBody extends CollapsibleTableBase {
-    expandedTableRowIds: string[];
-    onRowExpandCollapseTable?: (isExpanded: boolean, rowId: string, setLoading: (loading: boolean) => void) => void;
-}
 export {};

package/lib/theme-provider/ThemeProvider.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { Theme } from '@mui/material';
 import { TypographyOptions } from '@mui/material/styles/createTypography';
-import { AvatarPaletteColorOptions, IconPaletteColorOptions, LayerPaletteColorOptions } from './interfaces';
+import { AvatarPaletteColorOptions, FigmaTheme, IconPaletteColorOptions, LayerPaletteColorOptions } from './interfaces';
 declare module '@mui/material/styles/createPalette' {
     interface Palette {
         layer: LayerPaletteColorOptions;
@@ -9,6 +9,7 @@ declare module '@mui/material/styles/createPalette' {
     }
     interface PaletteOptions {
         avatarColors: AvatarPaletteColorOptions;
+        figma: FigmaTheme;
         icon: IconPaletteColorOptions;
         layer: LayerPaletteColorOptions;
         purple?: PaletteColorOptions;

package/lib/theme-provider/colors/figma-colors.d.ts

@@ -0,0 +1,3 @@
+import { FigmaTheme } from '../interfaces';
+export declare const lightFigmaColors: FigmaTheme;
+export declare const darkFigmaColors: FigmaTheme;

package/lib/theme-provider/interfaces.d.ts

@@ -25,6 +25,148 @@ export interface BreakpointOptions {
         xs: number;
     };
 }
+export interface FigmaTheme {
+    background: {
+        level0: {
+            bckgGray: string;
+            bckgWhite: string;
+            bckgWhiteBlack: string;
+            componentsBackground: string;
+        };
+        level1: {
+            deep: string;
+            gray: string;
+            white: string;
+        };
+    };
+    border: {
+        avatar: string;
+        darker: string;
+        default: string;
+        defaultButton: string;
+        inputActive: string;
+    };
+    destructive: {
+        active: string;
+        elevated: string;
+        light: string;
+        normal: string;
+        ripple: string;
+        rippleLight: string;
+    };
+    disabled: {
+        normal: string;
+    };
+    graph: {
+        alert: {
+            error: string;
+            success: string;
+            warning: string;
+        };
+        token: {
+            blue: string;
+            darkPurple: string;
+            error: string;
+            neutral: string;
+            orange: string;
+            pink: string;
+            violet: string;
+            yellow: string;
+        };
+    };
+    icon: {
+        black: string;
+        disabled: string;
+        white: string;
+    };
+    illustrations: {
+        bckgBloob: string;
+        bckgColor: string;
+        bckgElements: string;
+        shadows: string;
+    };
+    inProgress: {
+        error: string;
+        light: string;
+        normal: string;
+        purple: string;
+        secondary: string;
+        warning: string;
+    };
+    neutral: {
+        active: string;
+        darkGray: string;
+        darkerGrayFocus: string;
+        elevated: string;
+        light: string;
+        lightGray: string;
+        normal: string;
+        ripple: string;
+    };
+    overlay: {
+        alerts: {
+            custom: {
+                background: string;
+                icon: string;
+            };
+            error: {
+                background: string;
+                icon: string;
+            };
+            info: {
+                background: string;
+                icon: string;
+            };
+            success: {
+                background: string;
+                icon: string;
+            };
+            text: {
+                black: string;
+                white: string;
+            };
+            warning: {
+                background: string;
+                icon: string;
+            };
+        };
+        default: string;
+        table: {
+            highlights: string;
+            hoverRow: string;
+            row: string;
+            text: string;
+        };
+    };
+    primary: {
+        active: string;
+        elevated: string;
+        light: string;
+        normal: string;
+        ripple: string;
+        rippleLight: string;
+    };
+    success: {
+        light: string;
+        normal: string;
+    };
+    toggleTabs: {
+        bckg: string;
+        ripple: string;
+        text: string;
+    };
+    typography: {
+        black: string;
+        disabled: string;
+        gray: string;
+        link: string;
+        white: string;
+    };
+    warning: {
+        light: string;
+        normal: string;
+    };
+}
 export interface AvatarPaletteColorOption {
     backgroundColor: string;
     color: string;