@antscorp/antsomi-ui 2.0.102 → 2.0.104

package/es/components/organism/SQLGeneration/components/SQLGenerationModal.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal } from 'antd';
+import { SQL_GENERATION_CONSTANTS } from '../constants';
+import { PopoverContent, PopoverBody, AccessibilityStyles } from './styled';
+import { useSQLGenerationStore } from '../store/provider';
+import { selectHasResult, selectIsEditingPrompt, selectIsOpen } from '../selectors';
+import { SQLGenerationHeader } from './SQLGenerationHeader';
+import { SQLGenerationEditPrompt } from './SQLGenerationEditPrompt';
+import { SQLGenerationPromptDisplay } from './SQLGenerationPromptDisplay';
+import { SQLGenerationResult } from './SQLGenerationResult';
+import { SQLGenerationRefine } from './SQLGenerationRefine';
+import { SQLGenerationActions } from './SQLGenerationActions';
+import { SQLGenerationQuerySummary } from './SQLGenerationQuerySummary';
+import { SQLGenerationPrompt } from './SQLGenerationPrompt';
+import { EditTableSourcesDrawer } from './EditTableSourcesDrawer';
+import { useSQLGenerationKeyboard } from '../hooks';
+import { useFocusManagement } from '@antscorp/antsomi-ui/es/hooks';
+export const SQLGenerationModal = () => {
+    const isOpen = useSQLGenerationStore(selectIsOpen);
+    const hasResults = useSQLGenerationStore(selectHasResult);
+    const isEditingPrompt = useSQLGenerationStore(selectIsEditingPrompt);
+    const setIsOpen = useSQLGenerationStore(s => s.setIsOpen);
+    // Enable keyboard navigation
+    useSQLGenerationKeyboard();
+    // Enable focus management
+    const { containerRef } = useFocusManagement(isOpen, {
+        autoFocus: true,
+        restoreFocus: true,
+        trapFocus: true,
+    });
+    const popoverContent = (_jsxs(PopoverContent, { ref: containerRef, children: [_jsx(SQLGenerationHeader, {}), _jsx(PopoverBody, { children: hasResults ? (_jsxs(_Fragment, { children: [isEditingPrompt ? _jsx(SQLGenerationEditPrompt, {}) : _jsx(SQLGenerationPromptDisplay, {}), _jsx(SQLGenerationResult, {}), _jsx(SQLGenerationRefine, {}), _jsx(SQLGenerationActions, { children: _jsx(SQLGenerationQuerySummary, {}) })] })) : (_jsx(SQLGenerationPrompt, {})) })] }));
+    return (_jsx(AccessibilityStyles, { children: _jsxs(Modal, { open: isOpen, footer: null, closeIcon: null, width: SQL_GENERATION_CONSTANTS.MODAL_WIDTH, onCancel: () => setIsOpen(false), destroyOnClose: true, maskClosable: false, 
+            // Accessibility improvements - Antd Modal already has role="dialog" and aria-modal="true"
+            title: null, className: "sql-generation-modal", children: [popoverContent, _jsx(EditTableSourcesDrawer, {})] }) }));
+};

package/es/components/organism/SQLGeneration/components/SQLGenerationPagination.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const SQLGenerationPagination: React.FC<{
+    style?: React.CSSProperties;
+}>;

package/es/components/organism/SQLGeneration/components/SQLGenerationPagination.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useSQLGenerationStore } from '../store/provider';
+import { selectCurrentResultIndex, selectResultsAllKeys, selectTotalResults } from '../selectors';
+import { PaginationIndicator } from './styled';
+import { Button, Space, Text } from '../../../atoms';
+import { NavigateBeforeIcon, NavigateNextIcon } from '../../../icons';
+export const SQLGenerationPagination = ({ style }) => {
+    const totalResults = useSQLGenerationStore(selectTotalResults);
+    const currentResultIndex = useSQLGenerationStore(selectCurrentResultIndex);
+    const resultAllKeys = useSQLGenerationStore(selectResultsAllKeys);
+    const setCurrentResultKey = useSQLGenerationStore(s => s.setCurrentResultKey);
+    return (_jsxs(_Fragment, { children: [totalResults > 1 && (_jsx(PaginationIndicator, { style: style, role: "navigation", "aria-label": "SQL results pagination", children: _jsxs(Space, { size: 8, align: "center", children: [_jsx(Button, { type: "text", size: "small", disabled: currentResultIndex === 0, onClick: () => setCurrentResultKey(resultAllKeys[currentResultIndex - 1]), icon: _jsx(NavigateBeforeIcon, { size: 14 }), "aria-label": "Go to previous SQL result", title: "Previous result (Arrow Left)" }), _jsxs(Text, { style: { fontSize: '13px', color: '#999' }, role: "status", "aria-label": `Result ${currentResultIndex + 1} of ${totalResults}`, children: [currentResultIndex + 1, " / ", totalResults] }), _jsx(Button, { type: "text", size: "small", disabled: currentResultIndex === totalResults - 1, onClick: () => setCurrentResultKey(resultAllKeys[currentResultIndex + 1]), icon: _jsx(NavigateNextIcon, { size: 14 }), "aria-label": "Go to next SQL result", title: "Next result (Arrow Right)" })] }) })), totalResults === 1 && (_jsx(PaginationIndicator, { style: style, role: "status", "aria-label": "Single result", children: _jsx(Text, { style: { fontSize: '13px', color: '#5f6368' }, children: "1/1" }) }))] }));
+};

package/es/components/organism/SQLGeneration/components/SQLGenerationPrompt.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SQLGenerationPrompt: React.FC;

package/es/components/organism/SQLGeneration/components/SQLGenerationPrompt.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SQL_GENERATION_CONSTANTS } from '../constants';
+import { PromptSection, PromptTextArea, GenerateButtonContainer, GenerateButton } from './styled';
+import { useSQLGenerationStore } from '../store/provider';
+import { selectIsLoading, selectPrompt, selectGenerateSQLError } from '../selectors';
+import { GenerateSQLError } from './ErrorDisplay';
+export const SQLGenerationPrompt = () => {
+    const prompt = useSQLGenerationStore(selectPrompt);
+    const isLoading = useSQLGenerationStore(selectIsLoading);
+    const generateError = useSQLGenerationStore(selectGenerateSQLError);
+    const setPrompt = useSQLGenerationStore(s => s.setPrompt);
+    const generateSQL = useSQLGenerationStore(s => s.generateSQL);
+    const onGenerateSQL = useSQLGenerationStore(s => s.onGenerateSQL);
+    const disabled = !onGenerateSQL;
+    // Handle textarea change
+    const handleChange = (e) => {
+        setPrompt(e.target.value);
+    };
+    // Handle Enter key press (Ctrl/Cmd + Enter to generate)
+    const handleKeyDown = (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+            e.preventDefault();
+            if (!disabled && !isLoading && prompt.trim()) {
+                generateSQL();
+            }
+        }
+    };
+    // Check if generate button should be disabled
+    const isGenerateDisabled = disabled || isLoading || !prompt.trim();
+    return (_jsxs(PromptSection, { direction: "vertical", size: 12, style: { width: '100%' }, children: [_jsx(PromptTextArea, { id: "sql-prompt-input", value: prompt, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: SQL_GENERATION_CONSTANTS.PLACEHOLDER_TEXTS.PROMPT, disabled: disabled, "aria-label": "SQL generation prompt", "aria-describedby": "sql-generation-description prompt-help-text", "aria-required": "true", autoFocus: true }), _jsx(GenerateButtonContainer, { children: _jsx(GenerateButton, { type: "primary", onClick: generateSQL, loading: isLoading, disabled: isGenerateDisabled, children: SQL_GENERATION_CONSTANTS.BUTTON_TEXTS.GENERATE }) }), generateError && _jsx(GenerateSQLError, { style: { marginTop: '12px' } })] }));
+};

package/es/components/organism/SQLGeneration/components/SQLGenerationPromptDisplay.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SQLGenerationPromptDisplay: React.FC;

package/es/components/organism/SQLGeneration/components/SQLGenerationPromptDisplay.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography, Button } from '../../../atoms';
+import { PromptDisplaySection, PromptDisplayText, PromptDisplayActions } from './styled';
+import { useSQLGenerationStore } from '../store/provider';
+import { selectCurrentResult, selectIsLoading } from '../selectors';
+const { Text } = Typography;
+export const SQLGenerationPromptDisplay = () => {
+    const currentResult = useSQLGenerationStore(selectCurrentResult);
+    const isLoading = useSQLGenerationStore(selectIsLoading);
+    const setIsEditingPrompt = useSQLGenerationStore(s => s.setIsEditingPrompt);
+    if (!currentResult)
+        return null;
+    const { prompt } = currentResult;
+    return (_jsxs(PromptDisplaySection, { children: [_jsx(PromptDisplayText, { children: _jsx(Text, { style: { color: '#1a73e8', fontSize: '14px' }, children: prompt }) }), _jsx(PromptDisplayActions, { children: _jsx(Button, { onClick: () => setIsEditingPrompt(true), disabled: isLoading, children: "Edit" }) })] }));
+};

package/es/components/organism/SQLGeneration/components/SQLGenerationQuerySummary.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SQLGenerationQuerySummary: React.FC;

package/es/components/organism/SQLGeneration/components/SQLGenerationQuerySummary.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSQLGenerationStore } from '../store/provider';
+import { selectCurrentResultSummary, selectIsSummaryLoading } from '../selectors';
+import { SummarySection } from './styled';
+import { Spin, Typography } from '../../../atoms';
+const { Text } = Typography;
+export const SQLGenerationQuerySummary = () => {
+    const isSummaryLoading = useSQLGenerationStore(selectIsSummaryLoading);
+    const summary = useSQLGenerationStore(selectCurrentResultSummary);
+    if (isSummaryLoading) {
+        return (_jsx(SummarySection, { className: "loading", role: "status", "aria-live": "polite", children: _jsx(Spin, { size: "small", indicatorSize: 20, "aria-hidden": "true" }) }));
+    }
+    if (!summary) {
+        return null;
+    }
+    return (_jsx(SummarySection, { role: "region", "aria-label": "Query summary", children: _jsx(Text, { children: summary }) }));
+};

package/es/components/organism/SQLGeneration/components/SQLGenerationRefine.d.ts

@@ -0,0 +1 @@
+export declare const SQLGenerationRefine: () => import("react/jsx-runtime").JSX.Element;

package/es/components/organism/SQLGeneration/components/SQLGenerationRefine.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input } from 'antd';
+import { useSQLGenerationStore } from '../store/provider';
+import { selectCurrentResult, selectIsRefining, selectRefineSQLError } from '../selectors';
+import { RefineSection } from './styled';
+import { useEffect, useRef, useState } from 'react';
+import { PlaneIcon } from '../../../icons';
+import { RefineSQLError } from './ErrorDisplay';
+export const SQLGenerationRefine = () => {
+    const currentResult = useSQLGenerationStore(selectCurrentResult);
+    const isRefining = useSQLGenerationStore(selectIsRefining);
+    const refineError = useSQLGenerationStore(selectRefineSQLError);
+    const setRefinePrompt = useSQLGenerationStore(s => s.setRefinePrompt);
+    const refineSQL = useSQLGenerationStore(s => s.refineSQL);
+    const { refinePrompt: originalRefinePrompt = '' } = currentResult || {};
+    const sectionRef = useRef(null);
+    const [hasChanges, setHasChanges] = useState(false);
+    const [currentRefinePrompt, setCurrentRefinePrompt] = useState(originalRefinePrompt);
+    useEffect(() => {
+        setCurrentRefinePrompt(originalRefinePrompt);
+        setHasChanges(false);
+    }, [originalRefinePrompt]);
+    useEffect(() => {
+        setHasChanges(currentRefinePrompt.trim() !== originalRefinePrompt.trim());
+    }, [currentRefinePrompt, originalRefinePrompt]);
+    const handleCancel = () => {
+        setCurrentRefinePrompt(originalRefinePrompt);
+        setHasChanges(false);
+    };
+    const handleBlur = (e) => {
+        if (!sectionRef.current?.contains(e.relatedTarget)) {
+            handleCancel();
+        }
+    };
+    const handleRefine = () => {
+        if (hasChanges && currentRefinePrompt.trim()) {
+            setRefinePrompt(currentRefinePrompt.trim());
+            refineSQL().finally(() => {
+                setHasChanges(false);
+            });
+        }
+    };
+    const handleKeyPress = (e) => {
+        if (e.key === 'Enter' && hasChanges && !isRefining) {
+            handleRefine();
+        }
+        if (e.key === 'Escape') {
+            handleCancel();
+        }
+    };
+    const handleRefinePromptChange = (e) => {
+        setCurrentRefinePrompt(e.target.value);
+    };
+    return (_jsxs(RefineSection, { ref: sectionRef, role: "region", "aria-label": "Refine SQL query", children: [_jsx(Input, { id: "refine-input", value: currentRefinePrompt, onChange: handleRefinePromptChange, onKeyDown: handleKeyPress, placeholder: "Enter refine prompt", disabled: isRefining, onBlur: handleBlur, "aria-label": "SQL refinement prompt" }), _jsxs(Button, { type: "primary", disabled: !hasChanges, onClick: handleRefine, loading: isRefining, "aria-describedby": isRefining ? 'refine-loading' : undefined, children: ["Refine", _jsx(PlaneIcon, { size: 16 })] }), refineError && _jsx(RefineSQLError, { style: { marginTop: '12px' } })] }));
+};

package/es/components/organism/SQLGeneration/components/SQLGenerationResult.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react-ace/node_modules/ace-builds/ace-modules" />
+import React from 'react';
+import 'ace-builds/src-noconflict/mode-mysql';
+import 'ace-builds/src-noconflict/theme-textmate';
+export declare const SQLGenerationResult: React.FC;

package/es/components/organism/SQLGeneration/components/SQLGenerationResult.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spin, Typography, Flex } from '../../../atoms';
+import { SQL_GENERATION_CONSTANTS } from '../constants';
+import { ResultSection, LoadingContainer, ResultInfo } from './styled';
+import { useSQLGenerationStore } from '../store/provider';
+import { selectCurrentResult, selectIsLoading, selectResultsAllKeys } from '../selectors';
+import { StatusSuccessIcon } from '../../../icons';
+import 'ace-builds/src-noconflict/mode-mysql';
+import 'ace-builds/src-noconflict/theme-textmate';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { SQLGenerationCodeBlock } from './SQLGenerationCodeBlock';
+import { SQLGenerationPagination } from './SQLGenerationPagination';
+import { CheckboxShowDiff } from './CheckboxShowDiff';
+const { Text } = Typography;
+export const SQLGenerationResult = () => {
+    const isLoading = useSQLGenerationStore(selectIsLoading);
+    const resultAllKeys = useSQLGenerationStore(selectResultsAllKeys);
+    const currentResult = useSQLGenerationStore(selectCurrentResult);
+    // Loading state
+    if (isLoading) {
+        return (_jsx(ResultSection, { role: "region", "aria-labelledby": "result-heading", children: _jsxs(LoadingContainer, { role: "status", "aria-live": "polite", children: [_jsx(Spin, { size: "small", indicatorSize: 20, "aria-hidden": "true" }), _jsx(Text, { style: { fontSize: '14px', color: '#666' }, children: SQL_GENERATION_CONSTANTS.LOADING_TEXTS.GENERATING })] }) }));
+    }
+    if (resultAllKeys.length === 0) {
+        return (_jsx(ResultSection, { role: "region", "aria-labelledby": "result-heading", children: _jsx(LoadingContainer, { role: "status", children: _jsx(Text, { style: { fontSize: '14px', color: '#999' }, children: SQL_GENERATION_CONSTANTS.PLACEHOLDER_TEXTS.NO_RESULT }) }) }));
+    }
+    if (!currentResult)
+        return null;
+    return (_jsxs(ResultSection, { role: "region", "aria-labelledby": "result-heading", children: [_jsx("div", { role: "region", "aria-label": "Generated SQL code", children: _jsx(SQLGenerationCodeBlock, {}) }), currentResult.processedDataSize && (_jsxs(ResultInfo, { role: "status", "aria-label": "Query processing information", children: [_jsx(StatusSuccessIcon, { size: 16, color: globalToken?.colorSuccess, "aria-hidden": "true" }), _jsx(Text, { style: { fontSize: '13px', color: '#5f6368' }, children: SQL_GENERATION_CONSTANTS.RESULT_TEXTS.PROCESSED_DATA.replace('{size}', currentResult.processedDataSize) })] })), _jsxs(Flex, { style: { marginTop: '16px', marginBottom: '16px' }, justify: "space-between", align: "center", children: [_jsx(CheckboxShowDiff, {}), _jsx(SQLGenerationPagination, { style: { marginLeft: 'auto' } })] })] }));
+};

package/es/components/organism/SQLGeneration/components/index.d.ts

@@ -0,0 +1,9 @@
+export { SQLGenerationModal } from './SQLGenerationModal';
+export { SQLGenerationHeader } from './SQLGenerationHeader';
+export { SQLGenerationPrompt } from './SQLGenerationPrompt';
+export { SQLGenerationEditPrompt } from './SQLGenerationEditPrompt';
+export { SQLGenerationPromptDisplay } from './SQLGenerationPromptDisplay';
+export { SQLGenerationResult } from './SQLGenerationResult';
+export { SQLGenerationActions } from './SQLGenerationActions';
+export { EditTableSourcesDrawer } from './EditTableSourcesDrawer';
+export { ErrorDisplay, CurrentOperationError, GenerateSQLError, RefineSQLError, QuerySummaryError, } from './ErrorDisplay';

package/es/components/organism/SQLGeneration/components/index.js

@@ -0,0 +1,9 @@
+export { SQLGenerationModal } from './SQLGenerationModal';
+export { SQLGenerationHeader } from './SQLGenerationHeader';
+export { SQLGenerationPrompt } from './SQLGenerationPrompt';
+export { SQLGenerationEditPrompt } from './SQLGenerationEditPrompt';
+export { SQLGenerationPromptDisplay } from './SQLGenerationPromptDisplay';
+export { SQLGenerationResult } from './SQLGenerationResult';
+export { SQLGenerationActions } from './SQLGenerationActions';
+export { EditTableSourcesDrawer } from './EditTableSourcesDrawer';
+export { ErrorDisplay, CurrentOperationError, GenerateSQLError, RefineSQLError, QuerySummaryError, } from './ErrorDisplay';

package/es/components/organism/SQLGeneration/components/styled.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+export declare const PopoverContent: import("styled-components").StyledComponent<"div", any, {
+    maxWidth?: number | undefined;
+}, never>;
+export declare const PopoverBody: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HeaderContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HeaderTitle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;
+export declare const PromptSection: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").SpaceProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Compact: import("react").FC<import("antd/es/space/Compact").SpaceCompactProps>;
+}, any, {}, never>;
+export declare const PromptTextArea: import("styled-components").StyledComponent<"textarea", any, {}, never>;
+export declare const GenerateButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const GenerateButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;
+export declare const ResultSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LoadingContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SQLCodeBlock: import("styled-components").StyledComponent<import("react").FC<import("../../../molecules/EditorScript").EditorScriptProps>, any, {}, never>;
+export declare const ResultInfo: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PaginationIndicator: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ActionsSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ActionButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;
+export declare const CautionLink: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;
+export declare const RatingSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RatingText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const RatingButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;
+export declare const StyledModal: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
+export declare const ModalDescription: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const SearchSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LanguageSelector: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchInput: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchActions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const GeneratedSearchInfo: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableListHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableListHeaderLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableListHeaderRight: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableName: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const EmptyState: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PaginationControls: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PaginationText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const EditPromptSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EditPromptInput: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EditPromptActions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PromptDisplaySection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PromptDisplayText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PromptDisplayActions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SummarySection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RefineSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AccessibilityStyles: import("styled-components").StyledComponent<"div", any, {}, never>;