@scality/data-browser-library 1.0.0-preview.2

package/dist/components/objects/UploadButton.js

@@ -0,0 +1,229 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { Icon, Modal, PrettyBytes, Stack, Wrap, spacing } from "@scality/core-ui";
+import { Button } from "@scality/core-ui/dist/components/buttonv2/Buttonv2.component";
+import styled_components from "styled-components";
+import { useUploadObjects } from "../../hooks/index.js";
+const DropZone = styled_components.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 300px;
+  width: 500px;
+  padding: ${spacing.r20};
+  border-width: ${spacing.r2};
+  border-radius: ${spacing.r2};
+  border-color: ${(props)=>props.theme.border};
+  border-style: dashed;
+`;
+const Files = styled_components.div`
+  height: 250px;
+  overflow-y: scroll;
+  margin: ${spacing.r8} 0px;
+`;
+const EmptyFile = styled_components.div`
+  text-align: center;
+  margin-top: 60px;
+  & > * {
+    margin-bottom: ${spacing.r16};
+  }
+`;
+const FileRow = styled_components.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${spacing.r8};
+  border-bottom: 1px solid ${(props)=>props.theme.border};
+`;
+const FileInfo = styled_components.div`
+  flex: 1;
+`;
+const RemoveButton = styled_components.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: ${spacing.r4};
+  color: ${(props)=>props.theme.textPrimary};
+
+  &:hover {
+    color: ${(props)=>props.theme.textSecondary};
+  }
+`;
+const maybePluralize = (count, word)=>1 === count ? `1 ${word}` : `${count} ${word}s`;
+const getTitle = (fileCount)=>0 === fileCount ? "Upload Files" : `Upload ${maybePluralize(fileCount, "file")}`;
+const FileList = ({ acceptedFiles, open, removeFile })=>/*#__PURE__*/ jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                icon: /*#__PURE__*/ jsx(Icon, {
+                    name: "Create-add"
+                }),
+                label: "Add more files",
+                variant: "secondary",
+                onClick: open
+            }),
+            /*#__PURE__*/ jsx(Files, {
+                children: acceptedFiles.map((file)=>/*#__PURE__*/ jsxs(FileRow, {
+                        children: [
+                            /*#__PURE__*/ jsx(FileInfo, {
+                                children: /*#__PURE__*/ jsxs("div", {
+                                    children: [
+                                        file.name,
+                                        /*#__PURE__*/ jsx("br", {}),
+                                        /*#__PURE__*/ jsx("small", {
+                                            children: /*#__PURE__*/ jsx(PrettyBytes, {
+                                                bytes: file.size
+                                            })
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(RemoveButton, {
+                                onClick: ()=>removeFile(file.name),
+                                children: /*#__PURE__*/ jsx(Icon, {
+                                    name: "Close"
+                                })
+                            })
+                        ]
+                    }, file.name))
+            })
+        ]
+    });
+const NoFile = ({ open })=>/*#__PURE__*/ jsxs(EmptyFile, {
+        children: [
+            /*#__PURE__*/ jsx(Icon, {
+                name: "Upload",
+                size: "3x"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                children: "Drag and drop files and folders here"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                children: "OR"
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                icon: /*#__PURE__*/ jsx(Icon, {
+                    name: "Create-add"
+                }),
+                label: "Add files",
+                variant: "secondary",
+                onClick: open
+            })
+        ]
+    });
+const UploadButton_UploadButton = ({ bucket, prefix = "", uploadOptions = {}, onUploadSuccess, onUploadError })=>{
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [acceptedFiles, setAcceptedFiles] = useState([]);
+    const uploadMutation = useUploadObjects();
+    const onDrop = useCallback((accepted)=>{
+        if (accepted.length > 0) setAcceptedFiles((prevFiles)=>{
+            const filtered = accepted.filter((newFile)=>!prevFiles.find((existingFile)=>existingFile.name === newFile.name));
+            return filtered.length > 0 ? [
+                ...prevFiles,
+                ...filtered
+            ] : prevFiles;
+        });
+    }, []);
+    const { getRootProps, getInputProps, open } = useDropzone({
+        noClick: true,
+        noKeyboard: true,
+        onDrop
+    });
+    const openModal = useCallback(()=>{
+        setIsModalOpen(true);
+    }, []);
+    const closeModal = useCallback(()=>{
+        setAcceptedFiles([]);
+        setIsModalOpen(false);
+    }, []);
+    const removeFile = useCallback((fileName)=>{
+        setAcceptedFiles((prevFiles)=>prevFiles.filter((file)=>file.name !== fileName));
+    }, []);
+    const handleUpload = useCallback(async ()=>{
+        if (0 === acceptedFiles.length) return;
+        const successfulFiles = [];
+        const failedFiles = [];
+        for (const file of acceptedFiles)try {
+            const fileBuffer = await file.arrayBuffer();
+            await uploadMutation.mutateAsync({
+                Bucket: bucket,
+                Key: prefix ? `${prefix}/${file.name}` : file.name,
+                Body: new Uint8Array(fileBuffer),
+                ContentType: file.type,
+                ...uploadOptions
+            });
+            successfulFiles.push(file);
+        } catch (error) {
+            failedFiles.push(file);
+            if (1 === failedFiles.length) onUploadError?.(error, [
+                file
+            ]);
+        }
+        if (successfulFiles.length > 0) onUploadSuccess?.(successfulFiles);
+        setAcceptedFiles([]);
+        setIsModalOpen(false);
+    }, [
+        acceptedFiles,
+        bucket,
+        prefix,
+        uploadMutation,
+        uploadOptions,
+        onUploadSuccess,
+        onUploadError
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                icon: /*#__PURE__*/ jsx(Icon, {
+                    name: "Simple-upload"
+                }),
+                label: "Upload",
+                variant: "secondary",
+                onClick: openModal
+            }),
+            isModalOpen && /*#__PURE__*/ jsx(Modal, {
+                close: closeModal,
+                footer: /*#__PURE__*/ jsxs(Wrap, {
+                    children: [
+                        /*#__PURE__*/ jsx("p", {}),
+                        /*#__PURE__*/ jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ jsx(Button, {
+                                    variant: "outline",
+                                    onClick: closeModal,
+                                    label: "Cancel",
+                                    disabled: uploadMutation.isPending
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    disabled: 0 === acceptedFiles.length || uploadMutation.isPending,
+                                    variant: "secondary",
+                                    onClick: handleUpload,
+                                    label: uploadMutation.isPending ? "Uploading..." : "Upload"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                isOpen: true,
+                title: getTitle(acceptedFiles.length),
+                children: /*#__PURE__*/ jsxs(DropZone, {
+                    ...getRootProps(),
+                    children: [
+                        /*#__PURE__*/ jsx("input", {
+                            ...getInputProps()
+                        }),
+                        acceptedFiles.length > 0 ? /*#__PURE__*/ jsx(FileList, {
+                            acceptedFiles: acceptedFiles,
+                            open: open,
+                            removeFile: removeFile
+                        }) : /*#__PURE__*/ jsx(NoFile, {
+                            open: open
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+const UploadButton = UploadButton_UploadButton;
+export { UploadButton_UploadButton as UploadButton, UploadButton as default };

package/dist/components/providers/DataBrowserProvider.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { QueryClient } from "@tanstack/react-query";
+import { GetConfigFunction } from "../../types";
+import { CoreUITheme } from "@scality/core-ui/dist/style/theme";
+export interface DataBrowserContextValue {
+    getS3Config: GetConfigFunction;
+    theme: CoreUITheme;
+}
+export declare const DataBrowserContext: React.Context<DataBrowserContextValue | null>;
+export declare const useDataBrowserContext: () => DataBrowserContextValue;
+export declare const useDataBrowserTheme: () => CoreUITheme;
+interface DataBrowserProviderProps {
+    children: React.ReactNode;
+    queryClient?: QueryClient;
+    enableDevtools?: boolean;
+    getS3Config?: GetConfigFunction;
+    theme?: CoreUITheme;
+}
+export declare const DataBrowserProvider: React.FC<DataBrowserProviderProps>;
+export {};

package/dist/components/providers/DataBrowserProvider.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+const DataBrowserContext = /*#__PURE__*/ createContext(null);
+const useDataBrowserContext = ()=>{
+    const context = useContext(DataBrowserContext);
+    if (!context) throw new Error("useDataBrowserContext must be used within a DataBrowserProvider component");
+    return context;
+};
+const useDataBrowserTheme = ()=>{
+    const { theme } = useDataBrowserContext();
+    return theme;
+};
+const defaultQueryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            staleTime: 300000,
+            retry: 2
+        }
+    }
+});
+const DataBrowserProvider = ({ children, queryClient = defaultQueryClient, enableDevtools = "development" === process.env.NODE_ENV, getS3Config, theme })=>{
+    const content = /*#__PURE__*/ jsxs(QueryClientProvider, {
+        client: queryClient,
+        children: [
+            children,
+            enableDevtools && /*#__PURE__*/ jsx(ReactQueryDevtools, {
+                initialIsOpen: false
+            })
+        ]
+    });
+    if (getS3Config && theme) return /*#__PURE__*/ jsx(DataBrowserContext.Provider, {
+        value: {
+            getS3Config,
+            theme
+        },
+        children: content
+    });
+    return content;
+};
+export { DataBrowserContext, DataBrowserProvider, useDataBrowserContext, useDataBrowserTheme };

package/dist/components/search/MetadataSearch.d.ts

@@ -0,0 +1,5 @@
+type MetadataSearchProps = {
+    isError: boolean;
+};
+export declare const MetadataSearch: ({ isError }: MetadataSearchProps) => import("react/jsx-runtime").JSX.Element;
+export default MetadataSearch;

package/dist/components/search/MetadataSearch.js

@@ -0,0 +1,162 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { usePrefixWithSlash, useQueryParams } from "../../utils/hooks.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { SearchContainer, SearchInputContainer, searchIcon } from "../ui/Search.elements.js";
+import { Box, Button, Input } from "@scality/core-ui/dist/next";
+import { Icon } from "@scality/core-ui";
+import { SearchHints } from "./SearchHints.js";
+const METADATA_SEARCH_HINT_ITEMS = [
+    {
+        label: 'files with extension ".pdf"',
+        query: "key like /pdf$/"
+    },
+    {
+        label: "files bigger than 1MB",
+        query: "content-length > 1000000"
+    },
+    {
+        label: "file names that contain scality (case insensitive)",
+        query: "key like /scality/i"
+    },
+    {
+        label: "files with metadata field color set to green",
+        query: 'x-amz-meta-color="green"'
+    },
+    {
+        label: "files tagged with color blue",
+        query: "tags.color=blue"
+    },
+    {
+        label: "PDF files (from content-type)",
+        query: "content-type=application/pdf"
+    },
+    {
+        label: "file names that contain the word Report (case sensitive)",
+        query: "key like Report"
+    },
+    {
+        label: "files waiting to be replicated",
+        query: 'replication-status="PENDING"'
+    }
+];
+const MetadataSearch = ({ isError })=>{
+    const navigate = useNavigate();
+    const location = useLocation();
+    const query = useQueryParams();
+    const searchInput = query.get("metadatasearch");
+    const [inputText, setInputText] = useState(searchInput || "");
+    const [hintsShown, setHintsShown] = useState(false);
+    const prefixWithSlash = usePrefixWithSlash();
+    const inputRef = useRef(null);
+    const hintsRef = useRef(null);
+    const handleSubmit = useCallback((e)=>{
+        e.preventDefault();
+        if (!inputText || prefixWithSlash) return;
+        const newQuery = new URLSearchParams(location.search);
+        newQuery.set("metadatasearch", inputText);
+        navigate(`${location.pathname}?${newQuery.toString()}`);
+    }, [
+        inputText,
+        prefixWithSlash,
+        location,
+        navigate
+    ]);
+    const handleChange = useCallback((e)=>{
+        setInputText(e.target.value);
+    }, []);
+    const handleHintClicked = useCallback((queryText)=>{
+        setInputText(queryText);
+        setHintsShown(false);
+    }, []);
+    const handleInputClick = useCallback(()=>{
+        if (inputText || hintsShown) return;
+        setHintsShown(true);
+    }, [
+        inputText,
+        hintsShown
+    ]);
+    useEffect(()=>{
+        const handleClickOutside = (event)=>{
+            if (hintsShown && inputRef.current && hintsRef.current && !inputRef.current.contains(event.target) && !hintsRef.current.contains(event.target)) setHintsShown(false);
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return ()=>{
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [
+        hintsShown
+    ]);
+    const reset = useCallback(()=>{
+        setHintsShown(false);
+        setInputText("");
+        const newQuery = new URLSearchParams(location.search);
+        newQuery.delete("metadatasearch");
+        navigate(`${location.pathname}?${newQuery.toString()}`);
+    }, [
+        location,
+        navigate
+    ]);
+    const handleHintClickWithFocus = useCallback((query)=>{
+        handleHintClicked(query);
+        if (inputRef.current) inputRef.current.focus();
+    }, [
+        handleHintClicked
+    ]);
+    const isSearchDisabled = !inputText || !!prefixWithSlash;
+    const shouldShowHints = hintsShown && !inputText;
+    const shouldShowResetButton = !!inputText;
+    const leftIcon = searchIcon({
+        isMetadata: !!searchInput,
+        isError
+    });
+    return /*#__PURE__*/ jsxs(SearchContainer, {
+        isHidden: !!prefixWithSlash,
+        onSubmit: handleSubmit,
+        children: [
+            /*#__PURE__*/ jsxs(SearchInputContainer, {
+                children: [
+                    /*#__PURE__*/ jsx(Input, {
+                        id: "metadata-search-input",
+                        ref: inputRef,
+                        onChange: handleChange,
+                        placeholder: "Metadata Search",
+                        value: inputText,
+                        onClick: handleInputClick,
+                        leftIcon: leftIcon.name,
+                        leftIconColor: leftIcon.color
+                    }),
+                    shouldShowResetButton && /*#__PURE__*/ jsx(Box, {
+                        position: "absolute",
+                        right: "1px",
+                        top: "0px",
+                        children: /*#__PURE__*/ jsx(Button, {
+                            icon: /*#__PURE__*/ jsx(Icon, {
+                                name: "Close"
+                            }),
+                            tooltip: {
+                                overlay: "Reset search"
+                            },
+                            onClick: reset,
+                            "aria-label": "Clear search input"
+                        })
+                    })
+                ]
+            }),
+            shouldShowHints && /*#__PURE__*/ jsx(SearchHints, {
+                ref: hintsRef,
+                hints: METADATA_SEARCH_HINT_ITEMS,
+                onHintClick: handleHintClickWithFocus
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                variant: "primary",
+                type: "submit",
+                label: "Search",
+                disabled: isSearchDisabled,
+                "aria-label": "Execute metadata search"
+            })
+        ]
+    });
+};
+const search_MetadataSearch = MetadataSearch;
+export { MetadataSearch, search_MetadataSearch as default };

package/dist/components/search/SearchHints.d.ts

@@ -0,0 +1,8 @@
+export interface SearchHintItem {
+    label: string;
+    query: string;
+}
+export declare const SearchHints: import("react").ForwardRefExoticComponent<{
+    hints: SearchHintItem[];
+    onHintClick: (query: string) => void;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/search/SearchHints.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { HintItem, HintsContainer, HintsTitle } from "../ui/Search.elements.js";
+const SearchHints = /*#__PURE__*/ forwardRef(({ hints, onHintClick }, ref)=>/*#__PURE__*/ jsxs(HintsContainer, {
+        ref: ref,
+        role: "listbox",
+        "aria-label": "Suggestions",
+        children: [
+            /*#__PURE__*/ jsx(HintsTitle, {
+                children: "Suggestions"
+            }),
+            hints.map((item, index)=>/*#__PURE__*/ jsx(HintItem, {
+                    onClick: ()=>onHintClick(item.query),
+                    role: "option",
+                    tabIndex: 0,
+                    children: item.label
+                }, index))
+        ]
+    }));
+SearchHints.displayName = "SearchHints";
+export { SearchHints };

package/dist/components/ui/DeleteObjectModalContent.d.ts

@@ -0,0 +1,5 @@
+import { Objects } from "../objects/DeleteObjectButton";
+export declare const DeleteObjectModalContent: ({ objects, onRemove, }: {
+    objects: Objects;
+    onRemove: (key: string) => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/DeleteObjectModalContent.js

@@ -0,0 +1,71 @@
+import { jsx } from "react/jsx-runtime";
+import { ConstrainedText, Icon, PrettyBytes, spacing } from "@scality/core-ui";
+import { tableRowHeight } from "@scality/core-ui/dist/components/tablev2/TableUtils";
+import { Box, Table } from "@scality/core-ui/dist/next";
+import { useMemo } from "react";
+import styled_components from "styled-components";
+const Container = styled_components(Box)`
+  height: ${({ height })=>height};
+  min-height: 15.63rem;
+  margin: ${spacing.r8} 0rem;
+`;
+const DeleteObjectModalContent = ({ objects, onRemove })=>{
+    const columns = useMemo(()=>[
+            {
+                Header: "Name",
+                accessor: "Key",
+                Cell: ({ value })=>/*#__PURE__*/ jsx(ConstrainedText, {
+                        text: value,
+                        lineClamp: 1
+                    }),
+                id: "name"
+            },
+            {
+                Header: "Size",
+                accessor: "Size",
+                cellStyle: {
+                    textAlign: "right"
+                },
+                Cell: ({ value })=>/*#__PURE__*/ jsx(PrettyBytes, {
+                        bytes: Number(value)
+                    }),
+                id: "size"
+            },
+            {
+                Header: "",
+                accessor: "type",
+                cellStyle: {
+                    width: "0.625rem"
+                },
+                Cell: (row)=>{
+                    const objectKey = row.row.original.Key;
+                    return /*#__PURE__*/ jsx("div", {
+                        onClick: ()=>onRemove(objectKey),
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            name: "Close",
+                            color: "buttonSecondary"
+                        })
+                    });
+                }
+            }
+        ], [
+        onRemove
+    ]);
+    const HEADER_AND_SPACING_ROWS = 3;
+    const rowHeight = "h40";
+    const tableRowHeightInRem = tableRowHeight[rowHeight];
+    return /*#__PURE__*/ jsx(Container, {
+        height: `calc(${objects.length + HEADER_AND_SPACING_ROWS} * (${tableRowHeightInRem}rem + 1px))`,
+        children: /*#__PURE__*/ jsx(Table, {
+            columns: columns,
+            data: objects,
+            children: /*#__PURE__*/ jsx(Table.SingleSelectableContent, {
+                rowHeight: "h40",
+                separationLineVariant: "backgroundLevel3",
+                selectedId: "Name",
+                onRowSelected: ()=>{}
+            })
+        })
+    });
+};
+export { DeleteObjectModalContent };

package/dist/components/ui/Search.elements.d.ts

@@ -0,0 +1,17 @@
+import { IconColor, IconName } from "@scality/core-ui/dist/components/icon/Icon.component";
+export declare const SearchContainer: import("styled-components").StyledComponent<"form", any, {
+    isHidden?: boolean;
+}, never>;
+export declare const SearchInputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HintsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HintItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HintsTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+type SearchIcon = {
+    name: IconName;
+    color: IconColor;
+};
+export declare const searchIcon: ({ isMetadata, isError, }: {
+    isMetadata: boolean;
+    isError: boolean;
+}) => SearchIcon;
+export {};

package/dist/components/ui/Search.elements.js

@@ -0,0 +1,59 @@
+import { spacing } from "@scality/core-ui/dist/spacing";
+import styled_components from "styled-components";
+const SearchContainer = styled_components.form`
+  flex: 1 0 auto;
+  display: flex;
+  max-width: 600px;
+  margin-right: ${spacing.r20};
+  visibility: ${(props)=>props.isHidden ? "hidden" : "visible"};
+  gap: ${spacing.r8};
+`;
+const SearchInputContainer = styled_components.div`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  margin-right: ${spacing.r4};
+  align-items: center;
+`;
+const HintsContainer = styled_components.div`
+  position: absolute;
+  z-index: 1;
+  background-color: ${(props)=>props.theme.backgroundLevel1};
+  padding: ${spacing.r16};
+  margin-top: ${spacing.r40};
+`;
+const HintItem = styled_components.div`
+  padding: ${spacing.r8} ${spacing.r12};
+  cursor: pointer;
+  color: ${(props)=>props.theme.textPrimary};
+  font-size: 0.875rem;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background: ${(props)=>props.theme.backgroundLevel2};
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+const HintsTitle = styled_components.div`
+  font-style: italic;
+  padding: ${spacing.r2} 0px ${spacing.r8} ${spacing.r8};
+  color: ${(props)=>props.theme.textSecondary};
+`;
+const searchIcon = ({ isMetadata, isError })=>{
+    if (isError) return {
+        name: "Close",
+        color: "statusCritical"
+    };
+    if (isMetadata) return {
+        name: "Check",
+        color: "statusHealthy"
+    };
+    return {
+        name: "Search",
+        color: "textSecondary"
+    };
+};
+export { HintItem, HintsContainer, HintsTitle, SearchContainer, SearchInputContainer, searchIcon };

package/dist/components/ui/Table.elements.d.ts

@@ -0,0 +1,36 @@
+export declare const Table: ({ children, ...props }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Body: ({ children, ...props }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Group: ({ children, ...props }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const GroupName: ({ children, ...props }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const GroupContent: ({ children, ...props }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Row: ({ children, ...props }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Key: import("styled-components").StyledComponent<"div", any, {
+    principal?: boolean;
+    required?: boolean;
+} & {
+    size?: string;
+}, never>;
+export declare const Value: import("styled-components").StyledComponent<"div", any, {
+    width?: string;
+}, never>;
+export declare const TableContainer: ({ children, ...props }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const GroupValues: import("styled-components").StyledComponent<"div", any, {
+    size?: string;
+}, never>;
+export declare const ExtraCell: import("styled-components").StyledComponent<"div", any, {
+    marginLeft?: string;
+}, never>;