@kwantis-id3/frontend-library 1.0.0-rc.8 → 1.0.0

package/dist/esm/types/components/Accordion/AccordionStyled.d.ts

@@ -1,6 +1,8 @@
 export declare const AccordionGroup: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
+} & {
+    $variant: "default" | "light";
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledAccordion: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

package/dist/esm/types/components/Accordion/index.d.ts

@@ -1,2 +1,4 @@
+import { AccordionGroup } from "./AccordionStyled";
 export * from "./Accordion";
 export * from "./AccordionInterfaces";
+export { AccordionGroup };

package/dist/esm/types/components/Button/ButtonInterfaces.d.ts

@@ -1,5 +1,4 @@
-import { Interpolation } from "@emotion/react";
-import { Theme } from "@emotion/react/dist/declarations/src";
+import { Interpolation, Theme } from "@emotion/react";
 export type TButtonVariants = "contained" | "outlined" | "text";
 export type TButtonProps = {
     /** Color of the button */

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

@@ -0,0 +1,3 @@
+/** @jsxImportSource @emotion/react */
+import { TCheckboxProps } from "./CheckboxInterfaces";
+export declare const Checkbox: ({ label, htmlId, checked, defaultChecked, onChange, indeterminate, disabled, className, sx, name, size, }: TCheckboxProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,23 @@
+import { Interpolation, Theme } from "@emotion/react";
+export type TCheckboxProps = {
+    /** Lable of the checkbox */
+    label?: string;
+    /** HTML id */
+    htmlId?: string;
+    name?: string;
+    /** Controlled checked state */
+    checked?: boolean;
+    /** Uncontrolled default checked state */
+    defaultChecked?: boolean;
+    /** onChange handler */
+    onChange?: (checked: boolean) => void;
+    /** Mixed state in its children checkboxes */
+    indeterminate?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    className?: string;
+    /** Custom styles */
+    sx?: Interpolation<Theme>;
+    /** Checkbox sizes */
+    size?: "small" | "medium" | "large";
+};

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

@@ -0,0 +1,32 @@
+export declare const StyledLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $disabled?: boolean;
+}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+export declare const StyledCheckboxInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const StyledCheckboxBox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $checked: boolean;
+    $indeterminate: boolean;
+    $disabled?: boolean;
+    $backgroundColor?: string;
+    $checkmarkColor?: string;
+    $borderColor?: string;
+    $size?: "small" | "medium" | "large";
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledIconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledLabelText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $disabled?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

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

@@ -0,0 +1,2 @@
+export * from "./Checkbox";
+export * from "./CheckboxInterfaces";

package/dist/esm/types/components/DataGrid/DataGrid.d.ts

@@ -0,0 +1,3 @@
+import { TCellValues } from "../Table";
+import { TDataGridProps, TDataGridRow } from "./DataGridInterfaces";
+export declare const DataGrid: <Cell extends TCellValues, Row extends TDataGridRow<Cell>>(props: TDataGridProps<Cell, Row>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/DataGrid/DataGridInterfaces.d.ts

@@ -0,0 +1,9 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { TCellValues } from "../Table";
+export type TDataGridProps<Cell extends TCellValues, Row extends TDataGridRow<Cell>> = {
+    columns: ColumnDef<TDataGridRow<Cell>, Cell>[];
+    data: Row[] | undefined;
+};
+export type TDataGridRow<Cell extends TCellValues> = {
+    [key: string]: Cell;
+};

package/dist/esm/types/components/DataGrid/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./DataGrid";
+export * from "./DataGridInterfaces";

package/dist/esm/types/components/Drawer/Drawer.d.ts

@@ -1,3 +1,3 @@
 /** @jsxImportSource @emotion/react */
 import { TDrawerProps } from "./DrawerInterfaces";
-export declare const Drawer: ({ anchor, openContent, closedContent, openTrigger, closedTrigger, minOpen, maxOpen, bgColor, triggerHoverColor, }: TDrawerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Drawer: ({ anchor, isOpen: isOpenProp, openContent, closedContent, openTrigger, closedTrigger, minOpen, maxOpen, bgColor, triggerColor, triggerHoverColor, onOpen, onClose, zIndex, hideTrigger, keepMounted, sx, }: TDrawerProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/Drawer/DrawerInterfaces.d.ts

@@ -1,7 +1,10 @@
+import { Interpolation, Theme } from "@emotion/react";
 import { ReactNode } from "react";
 export type TDrawerProps = {
     /** Position of the drawer */
     anchor: "top" | "right" | "bottom" | "left";
+    /** Optional state value to control the component */
+    isOpen?: boolean;
     /** Trigger showed when drawer is closed */
     closedTrigger?: ReactNode;
     /** Trigger showed when drawer is open */
@@ -16,6 +19,17 @@ export type TDrawerProps = {
     maxOpen?: number;
     /** Background color */
     bgColor?: string;
+    /** Trigger Color */
+    triggerColor?: string;
     /** Trigger hover color */
     triggerHoverColor?: string;
+    /** Hide the default thumb trigger */
+    hideTrigger?: boolean;
+    /** Keep rendered when closed to preserve state */
+    keepMounted?: boolean;
+    /** Set a custom z-index */
+    zIndex?: number;
+    sx?: Interpolation<Theme>;
+    onOpen?: () => void;
+    onClose?: () => void;
 };

package/dist/esm/types/components/Drawer/DrawerStyled.d.ts

@@ -7,6 +7,7 @@ export declare const DrawerBody: import("@emotion/styled").StyledComponent<{
     $minOpen?: string;
     $maxOpen?: string;
     $bgColor?: string;
+    $zIndex?: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const DrawerContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
@@ -21,5 +22,7 @@ export declare const Trigger: import("@emotion/styled").StyledComponent<{
 } & {
     $anchor: "top" | "right" | "bottom" | "left";
     $bgColor?: string;
+    $triggerColor?: string;
     $triggerHoverColor?: string;
+    $hideTrigger: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/types/components/Dropdown/DropdownInterfaces.d.ts

@@ -32,8 +32,17 @@ export type TDropdownProps = {
     bgColor?: string;
     /** The hover color of the dropdown */
     hoverColor?: string;
+    /** The border color */
+    borderColor?: string;
+    /** The border width */
+    borderWidth?: string;
     /** Controls wether the dropdown should extend towards the left or the right */
     direction?: "left" | "right";
+    /** Controls whether the dropdown body should have absolute or fixed position
+     * By default, it is set to absolute, which means the dropdown will be positioned relative to its parent element.
+     * Use fixed if you want the body to be above the entire page, regardless of the parent element.
+     */
+    menuPosition?: "absolute" | "fixed";
     /** The mobile breakpoint, by default it's 768px */
     mobileBreakpoint?: number;
 };

package/dist/esm/types/components/Dropdown/DropdownStyled.d.ts

@@ -13,6 +13,7 @@ export declare const DropdownBody: import("@emotion/styled").StyledComponent<{
     $direction: string;
     $isOpen: boolean;
     $bgColor: string;
+    $position: "absolute" | "fixed";
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const DropdownItemInnerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

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

@@ -8,4 +8,4 @@ export type TIndicatorInstanceProps = {
 export type TIndicatorProps = {
     variant: TIndicatorVariants;
 } & TIndicatorInstanceProps;
-export type TIndicatorVariants = "live" | "success" | "warning" | "error";
+export type TIndicatorVariants = "live" | "success" | "warning" | "error" | "neutral";

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

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { TIndicatorInstanceProps } from "./IndicatorInterfaces";
+export declare const NeutralIndicator: FC<TIndicatorInstanceProps>;

package/dist/esm/types/components/InputField/InputField.d.ts

@@ -1,5 +1,5 @@
 export declare const InputField: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & {
     containerClassName?: string;
     color?: string;
-    sx?: React.CSSProperties;
+    sx?: import("@emotion/react").Interpolation<import("@emotion/react").Theme>;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/types/components/InputField/InputFieldInterfaces.d.ts

@@ -1,8 +1,9 @@
+import { Interpolation, Theme } from "@emotion/react";
 export type TTextFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
     /** Classname given to the container div */
     containerClassName?: string;
     /** The color of the input */
     color?: string;
     /** Change the styles of the input field */
-    sx?: React.CSSProperties;
+    sx?: Interpolation<Theme>;
 };

package/dist/esm/types/components/MultiViewList/MultiViewGrid.d.ts

@@ -0,0 +1,5 @@
+/** @jsxImportSource @emotion/react */
+import { TMultiViewGridProps } from "./MultiViewListInterfaces";
+import { TCellValues } from "../Table";
+import { TDataGridRow } from "../DataGrid";
+export declare const MultiViewGrid: <Cell extends TCellValues, Row extends TDataGridRow<Cell>>(props: TMultiViewGridProps<Cell, Row>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/MultiViewList/MultiViewList.d.ts

@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import { TMultiViewListProps } from "./MultiViewListInterfaces";
 import { TCellValues, TTableRow } from "../Table";
 export declare const MultiViewList: <Cell extends TCellValues, Row extends TTableRow<Cell>>(props: TMultiViewListProps<Cell, Row>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/MultiViewList/MultiViewListInterfaces.d.ts

@@ -1,5 +1,17 @@
 import { TCellValues, TTableProps, TTableRow } from "../Table";
+import { TDataGridProps, TDataGridRow } from "../DataGrid/DataGridInterfaces";
+import { Interpolation, Theme } from "@emotion/react";
 export type TMultiViewListProps<Cell extends TCellValues, Row extends TTableRow<Cell>> = TTableProps<Cell, Row> & {
     mode: "table" | "cards";
-    cardComponent: (item: Row) => React.ReactNode;
+    cardComponent: (item: Row, index: number) => React.ReactNode;
+    cardsWidth?: string;
+    cardsHeight?: string;
+    sx?: Interpolation<Theme>;
+};
+export type TMultiViewGridProps<Cell extends TCellValues, Row extends TDataGridRow<Cell>> = TDataGridProps<Cell, Row> & {
+    mode: "table" | "cards";
+    cardComponent: (item: Row, index: number) => React.ReactNode;
+    cardsWidth?: string;
+    cardsHeight?: string;
+    sx?: Interpolation<Theme>;
 };

package/dist/esm/types/components/MultiViewList/MultiViewListStyled.d.ts

@@ -1,4 +1,7 @@
 export declare const StyledCardsContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
+} & {
+    $cardsWidth: string;
+    $cardsHeight: string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/types/components/MultiViewList/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./MultiViewListInterfaces";
 export * from "./MultiViewList";
+export * from "./MultiViewGrid";

package/dist/esm/types/components/Slider/Thumb.d.ts

@@ -0,0 +1,7 @@
+import { Range } from "react-range";
+export declare const ThumbLabel: ({ rangeRef, values, index, step, }: {
+    rangeRef: Range | null;
+    values: number[];
+    index: number;
+    step?: number;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/Switch/Switch.d.ts

@@ -0,0 +1,2 @@
+import { TSwitchProps } from "./SwitchInterfaces";
+export declare const Switch: (props: TSwitchProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/Switch/SwitchInterfaces.d.ts

@@ -0,0 +1,17 @@
+export type TSwitchProps = {
+    /** Whether the switch is checked (controlled) */
+    checked?: boolean;
+    /** Default checked state (uncontrolled) */
+    defaultChecked?: boolean;
+    /** Callback function when the switch state changes */
+    onChange?: (checked: boolean) => void;
+    /** The color of switch when checked */
+    color?: string;
+    /** The label for the switch */
+    label?: string;
+    /** Size of switch */
+    size?: "small" | "medium" | "large";
+    /** HTML id */
+    htmlId?: string;
+    className?: string;
+};

package/dist/esm/types/components/Switch/SwitchStyled.d.ts

@@ -0,0 +1,35 @@
+export declare const SwitchContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SwitchSlider: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $size: "small" | "medium" | "large";
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SwitchInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const SwitchTrack: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $checked: boolean;
+    $checkedColor: string;
+    $uncheckedColor: string;
+    $size: "small" | "medium" | "large";
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SwitchThumb: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $checked: boolean;
+    $thumbColor: string;
+    $size: "small" | "medium" | "large";
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SwitchLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;

package/dist/esm/types/components/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Switch";
+export * from "./SwitchInterfaces";

package/dist/esm/types/components/Table/DebouncedFilter.d.ts

@@ -1,7 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { Column, Table } from "@tanstack/react-table";
-import { TCellValues, TTableRow } from "./TableInterfaces";
-export declare function DebouncedFilter<T extends TTableRow<TCellValues>>({ column, table, }: {
+export declare function DebouncedFilter<T>({ column, table, }: {
     column: Column<T, unknown>;
     table: Table<T>;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/Tag/TagInterfaces.d.ts

@@ -1,5 +1,4 @@
-import { Interpolation } from "@emotion/react";
-import { Theme } from "@emotion/react/dist/declarations/src";
+import { Interpolation, Theme } from "@emotion/react";
 import { ITagColors } from "../ThemeContext";
 export type TTagProps = {
     text: string;

package/dist/esm/types/components/ThemeContext/ThemeContext.d.ts

@@ -1,6 +1,7 @@
-import { PropsWithChildren, ReactNode } from "react";
-import { IPalette, IThemeContextProps, IThemeContextValue } from "./ThemeInterfaces";
+import { PropsWithChildren, ReactElement } from "react";
+import { ICommonColors, IPalette, IThemeContextProps, IThemeContextValue } from "./ThemeInterfaces";
+export declare const commonColors: ICommonColors;
 export declare const defaultLightPalette: IPalette;
 export declare const defaultDarkPalette: IPalette;
-export declare const ThemeContextProvider: ({ palettes, defaultMode, children, }: PropsWithChildren<IThemeContextProps>) => ReactNode;
+export declare const ThemeContextProvider: ({ palettes, defaultMode, children, }: PropsWithChildren<IThemeContextProps>) => ReactElement;
 export declare const useThemeContext: () => IThemeContextValue;

package/dist/esm/types/components/ThemeContext/ThemeInterfaces.d.ts

@@ -62,6 +62,8 @@ export interface IIndicatorColors {
     warningFill: string;
     error: string;
     errorFill: string;
+    neutral: string;
+    neutralFill: string;
 }
 export interface IPalette {
     /** Application background */

package/dist/esm/types/components/TreeView/TreeUtils.d.ts

@@ -1,3 +1,22 @@
 import { TTreeViewItem } from "./TreeViewInterfaces";
+/**
+ *
+ * @param items searchable nodes
+ * @returns all the root items
+ */
 export declare const getRootItems: (items: TTreeViewItem[]) => TTreeViewItem[];
+/**
+ *
+ * @param items searchable nodes
+ * @param parentId the id of the parent node
+ * @returns all the children of the parent node
+ */
 export declare const getChildrenItems: (items: TTreeViewItem[], parentId: string) => TTreeViewItem[];
+/**
+ *
+ * @param items searchable nodes
+ * @param searchTerm search term
+ * @returns all the matching nodes and their ancestors
+ */
+export declare function searchWithAncestors(items: TTreeViewItem[], searchTerm: string): TTreeViewItem[];
+export declare const isRootItem: (items: TTreeViewItem[], item: TTreeViewItem) => boolean;

package/dist/esm/types/components/TreeView/TreeViewInterfaces.d.ts

@@ -47,6 +47,12 @@ type TTreeViewProps = TTreeItemFunctions & {
 };
 export type TUncontrolledTreeViewProps = TTreeViewProps & {
     items: TTreeViewItem[];
+    /** A search string used to filter the items. */
+    searchString?: string;
+    /** The ids of the items that should be expanded by default */
+    defaultExpandedItems?: string[];
+    /** Only allow one root item to be expanded at a time */
+    singleRootExpand?: boolean;
 };
 export type TControlledTreeViewProps = TTreeViewProps & {
     /** The current state of the Tree View. */

package/dist/esm/types/components/index.d.ts

@@ -10,6 +10,9 @@ export * from "./Indicator";
 export * from "./Tag";
 export * from "./Card";
 export * from "./Table";
+export * from "./DataGrid";
 export * from "./MultiViewList";
 export * from "./TreeView";
 export * from "./Drawer";
+export * from "./Checkbox";
+export * from "./Switch";

package/dist/esm/types/utils/index.d.ts

@@ -1,5 +1,4 @@
-import useIsMobile from "./isMobile";
-export { transientOptions } from "./transientOptions";
-export { styled } from "./styled";
-export { useIsMobile };
-export { getContrastColor, darkenColor, lightenColor, getHoverColor, getActiveColor } from "./colors";
+export * from "./transientOptions";
+export * from "./isMobile";
+export * from "./colors";
+export * from "./usePrefersColorScheme";

package/dist/esm/types/utils/isMobile.d.ts

@@ -3,5 +3,4 @@
  * @param {number=} mobileBreakpoint breakpoint width to check against
  * @returns boolean
  */
-declare const useIsMobile: (mobileBreakpoint?: number) => boolean;
-export default useIsMobile;
+export declare const useIsMobile: (mobileBreakpoint?: number) => boolean;

package/dist/esm/types/utils/testing.d.ts

@@ -2,6 +2,7 @@ import { TCellValues, TTableRow } from "../components/index";
 import { IThemeContextProps } from "../components/ThemeContext/ThemeInterfaces";
 import { RenderHookResult, RenderResult } from "@testing-library/react";
 import { ColumnDef } from "@tanstack/react-table";
+import { TDataGridRow } from "../components/DataGrid/DataGridInterfaces";
 export declare const renderWithTheme: (ui: React.ReactElement, themeProps?: IThemeContextProps) => RenderResult;
 export declare function renderHookWithTheme<T, R>(hook: (props: T) => R, themeProps?: IThemeContextProps): RenderHookResult<R, T>;
 export declare const headingStyle: {
@@ -10,6 +11,25 @@ export declare const headingStyle: {
     fontWeight: string;
 };
 export declare const templateColumns: ColumnDef<TTableRow<TCellValues>, TCellValues>[];
+export declare const templateDataGridColumns: ColumnDef<TDataGridRow<TCellValues>, TCellValues>[];
+export type TWellData = {
+    [key: string]: string | number | boolean | null;
+    well_id: string;
+    id_t_well: number;
+    well_name: string;
+    data_quality: number;
+    is_live: boolean;
+    country: string;
+    business_unit: string;
+    spud_date: string;
+    rig_contractor: string;
+    rig_name: string;
+    rig_type: string;
+    last_sensordate: string | null;
+    last_ddr_date: string | null;
+    mudlog_data_quality: number;
+};
+export declare const templateDataGridData: TWellData[];
 export declare const templateTableData: {
     cells: {
         well_name: {
@@ -51,3 +71,4 @@ export declare const templateTableData: {
     };
 }[];
 export declare const TemplateCard: (item: TTableRow<TCellValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TemplateCardGrid: (item: TDataGridRow<TCellValues>) => import("@emotion/react/jsx-runtime").JSX.Element;