@antscorp/antsomi-ui 1.3.7-beta.49 → 1.3.7-beta.50

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

@@ -9,374 +9,374 @@ import { THEME } from '../../../../constants';
 import { Space } from 'antd';
 const { Text } = Typography;
 // SQLGenerationPopover styles
-export const PopoverContent = styled.div `
-  max-width: ${props => props.maxWidth || 800}px;
-  padding: 0;
-  border-radius: 8px;
-  box-shadow:
-    0 6px 16px 0 rgba(0, 0, 0, 0.08),
-    0 3px 6px -4px rgba(0, 0, 0, 0.12),
-    0 9px 28px 8px rgba(0, 0, 0, 0.05);
-`;
-export const PopoverBody = styled.div `
-  padding: 0 16px 16px;
+export const PopoverContent = styled.div `
+  max-width: ${props => props.maxWidth || 800}px;
+  padding: 0;
+  border-radius: 8px;
+  box-shadow:
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+`;
+export const PopoverBody = styled.div `
+  padding: 0 16px 16px;
 `;
 // SQLGenerationHeader styles
-export const HeaderContainer = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 16px 12px;
-  border-bottom: 1px solid #f0f0f0;
-  margin-bottom: 16px;
-`;
-export const HeaderContent = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-export const HeaderTitle = styled(Text) `
-  &.antsomi-typography {
-    font-size: 16px;
-    font-weight: 500;
-    color: #202124;
-    margin: 0;
-  }
-`;
-export const CloseButton = styled(Button) `
-  border: none;
-  box-shadow: none;
-  padding: 4px;
-  min-width: auto;
-  height: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:hover {
-    background-color: #f5f5f5;
-  }
+export const HeaderContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 16px 12px;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 16px;
+`;
+export const HeaderContent = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+export const HeaderTitle = styled(Text) `
+  &.antsomi-typography {
+    font-size: 16px;
+    font-weight: 500;
+    color: #202124;
+    margin: 0;
+  }
+`;
+export const CloseButton = styled(Button) `
+  border: none;
+  box-shadow: none;
+  padding: 4px;
+  min-width: auto;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
 `;
 // SQLGenerationPrompt styles
-export const PromptSection = styled(Space) `
-  margin-bottom: 0px;
-`;
-export const PromptTextArea = styled.textarea `
-  width: 100%;
-  min-height: 72px;
-  max-height: 144px;
-  resize: none;
-  font-size: 14px;
-  line-height: 1.5;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-  padding: 8px 12px;
-  font-family: inherit;
-  outline: none;
-  transition: border-color 0.2s;
-
-  &:focus {
-    border-color: ${THEME.token?.colorPrimary};
-    box-shadow: 0 0 0 2px rgba(0, 94, 184, 0.1);
-  }
-
-  &::placeholder {
-    color: ${THEME.token?.colorTextPlaceholder};
-  }
-
-  &:disabled {
-    background-color: #f5f5f5;
-    cursor: not-allowed;
-  }
-`;
-export const GenerateButtonContainer = styled.div `
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 12px;
-`;
-export const GenerateButton = styled(Button) `
-  border-radius: 6px;
-  font-weight: 500;
+export const PromptSection = styled(Space) `
+  margin-bottom: 0px;
+`;
+export const PromptTextArea = styled.textarea `
+  width: 100%;
+  min-height: 72px;
+  max-height: 144px;
+  resize: none;
+  font-size: 14px;
+  line-height: 1.5;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  padding: 8px 12px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.2s;
+
+  &:focus {
+    border-color: ${THEME.token?.colorPrimary};
+    box-shadow: 0 0 0 2px rgba(0, 94, 184, 0.1);
+  }
+
+  &::placeholder {
+    color: ${THEME.token?.colorTextPlaceholder};
+  }
+
+  &:disabled {
+    background-color: #f5f5f5;
+    cursor: not-allowed;
+  }
+`;
+export const GenerateButtonContainer = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 12px;
+`;
+export const GenerateButton = styled(Button) `
+  border-radius: 6px;
+  font-weight: 500;
 `;
 // SQLGenerationResult styles
-export const ResultSection = styled.div `
-  margin-bottom: 16px;
-  min-height: 200px;
-`;
-export const LoadingContainer = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100px;
-  color: #666;
-  flex-direction: column;
-  gap: 12px;
-`;
-export const SQLCodeBlock = styled(EditorScript) `
-  padding: 0 12px;
-  background: #f1f3f4;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-`;
-export const ResultInfo = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: #dbddde;
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
-  padding: 4px 12px;
-`;
-export const PaginationIndicator = styled.div `
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
+export const ResultSection = styled.div `
+  margin-bottom: 16px;
+  min-height: 200px;
+`;
+export const LoadingContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100px;
+  color: #666;
+  flex-direction: column;
+  gap: 12px;
+`;
+export const SQLCodeBlock = styled(EditorScript) `
+  padding: 0 12px;
+  background: #f1f3f4;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+`;
+export const ResultInfo = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: #dbddde;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  padding: 4px 12px;
+`;
+export const PaginationIndicator = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
 `;
 // SQLGenerationActions styles
-export const ActionsSection = styled.div `
-  border-top: 1px solid #f0f0f0;
-  padding-top: 12px;
-`;
-export const ActionButton = styled(Button) `
-  border-radius: 6px;
-  font-size: 13px;
-  height: 32px;
-  padding: 0 12px;
-
-  &.primary {
-    font-weight: 500;
-  }
-
-  &.with-icon {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-`;
-export const CautionLink = styled(Button) `
-  font-size: 13px;
-  height: 32px;
-  padding: 0 4px;
-  color: #1a73e8;
-  text-decoration: underline;
-  margin-left: auto;
-
-  &:hover {
-    color: #1557b0;
-  }
-`;
-export const RatingSection = styled.div `
-  margin-top: 12px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-export const RatingText = styled.span `
-  font-size: 13px;
-  color: #5f6368;
-`;
-export const RatingButton = styled(Button) `
-  min-width: auto;
-  height: 24px;
-  padding: 0 4px;
-  border: none;
-  box-shadow: none;
-
-  &:hover {
-    background-color: #f5f5f5;
-  }
+export const ActionsSection = styled.div `
+  border-top: 1px solid #f0f0f0;
+  padding-top: 12px;
+`;
+export const ActionButton = styled(Button) `
+  border-radius: 6px;
+  font-size: 13px;
+  height: 32px;
+  padding: 0 12px;
+
+  &.primary {
+    font-weight: 500;
+  }
+
+  &.with-icon {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+`;
+export const CautionLink = styled(Button) `
+  font-size: 13px;
+  height: 32px;
+  padding: 0 4px;
+  color: #1a73e8;
+  text-decoration: underline;
+  margin-left: auto;
+
+  &:hover {
+    color: #1557b0;
+  }
+`;
+export const RatingSection = styled.div `
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+export const RatingText = styled.span `
+  font-size: 13px;
+  color: #5f6368;
+`;
+export const RatingButton = styled(Button) `
+  min-width: auto;
+  height: 24px;
+  padding: 0 4px;
+  border: none;
+  box-shadow: none;
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
 `;
 // EditTableSourcesModal styles
-export const StyledModal = styled(Modal) `
-  .antsomi-modal-header {
-    border-bottom: 1px solid #f0f0f0;
-  }
-
-  .antsomi-modal-body {
-    padding: 16px 24px;
-  }
-`;
-export const ModalDescription = styled(Text) `
-  font-size: 14px;
-  color: ${THEME.token?.colorTextSecondary};
-  margin-bottom: 16px;
-  display: block;
-`;
-export const SearchSection = styled.div `
-  display: flex;
-  gap: 12px;
-  padding: 12px;
-  background-color: #f8f9fa;
-  border-radius: 6px;
-  border: 1px solid #e9ecef;
-  margin-bottom: 16px;
-`;
-export const LanguageSelector = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-`;
-export const SearchInput = styled.div `
-  flex: 1;
-`;
-export const SearchActions = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-export const GeneratedSearchInfo = styled.div `
-  font-size: 13px;
-  color: #5f6368;
-  margin-bottom: 16px;
-`;
-export const TableListHeader = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #f0f0f0;
-`;
-export const TableListHeaderLeft = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-export const TableListHeaderRight = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 16px;
-`;
-export const TableListContainer = styled.div `
-  max-height: 300px;
-  overflow-y: auto;
-`;
-export const TableItem = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 0;
-  border-bottom: 1px solid #f5f5f5;
-`;
-export const TableItemContent = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: 1;
-`;
-export const TableName = styled(Text) `
-  font-size: 14px;
-  color: #1a73e8;
-`;
-export const EmptyState = styled.div `
-  text-align: center;
-  padding: 40px 20px;
-  color: #999;
-`;
-export const PaginationControls = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 4px;
-`;
-export const PaginationText = styled(Text) `
-  font-size: 13px;
-  color: ${THEME.token?.colorTextSecondary};
+export const StyledModal = styled(Modal) `
+  .antsomi-modal-header {
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .antsomi-modal-body {
+    padding: 16px 24px;
+  }
+`;
+export const ModalDescription = styled(Text) `
+  font-size: 14px;
+  color: ${THEME.token?.colorTextSecondary};
+  margin-bottom: 16px;
+  display: block;
+`;
+export const SearchSection = styled.div `
+  display: flex;
+  gap: 12px;
+  padding: 12px;
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  border: 1px solid #e9ecef;
+  margin-bottom: 16px;
+`;
+export const LanguageSelector = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+`;
+export const SearchInput = styled.div `
+  flex: 1;
+`;
+export const SearchActions = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+export const GeneratedSearchInfo = styled.div `
+  font-size: 13px;
+  color: #5f6368;
+  margin-bottom: 16px;
+`;
+export const TableListHeader = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+`;
+export const TableListHeaderLeft = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+export const TableListHeaderRight = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 16px;
+`;
+export const TableListContainer = styled.div `
+  max-height: 300px;
+  overflow-y: auto;
+`;
+export const TableItem = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid #f5f5f5;
+`;
+export const TableItemContent = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+`;
+export const TableName = styled(Text) `
+  font-size: 14px;
+  color: #1a73e8;
+`;
+export const EmptyState = styled.div `
+  text-align: center;
+  padding: 40px 20px;
+  color: #999;
+`;
+export const PaginationControls = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+export const PaginationText = styled(Text) `
+  font-size: 13px;
+  color: ${THEME.token?.colorTextSecondary};
 `;
 // Edit Prompt Styles
-export const EditPromptSection = styled.div `
-  display: flex;
-  gap: 12px;
-  margin-bottom: 16px;
-`;
-export const EditPromptInput = styled.div `
-  display: flex;
-  align-items: center;
-  flex: 1;
-
-  .input__wrapper {
-    width: 100%;
-  }
-`;
-export const EditPromptActions = styled.div `
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
+export const EditPromptSection = styled.div `
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+`;
+export const EditPromptInput = styled.div `
+  display: flex;
+  align-items: center;
+  flex: 1;
+
+  .input__wrapper {
+    width: 100%;
+  }
+`;
+export const EditPromptActions = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
 `;
 // Prompt Display Styles
-export const PromptDisplaySection = styled.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-  gap: 12px;
-`;
-export const PromptDisplayText = styled.div `
-  flex: 1;
-  line-height: 1.4;
-`;
-export const PromptDisplayActions = styled.div `
-  flex-shrink: 0;
-`;
-export const SummarySection = styled.div `
-  margin-top: 16px;
-  max-height: 60px;
-  overflow-y: auto;
-  display: flex;
-  gap: 10px;
-
-  &.loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 60px;
-  }
-`;
-export const RefineSection = styled.div `
-  display: flex;
-  gap: 12px;
-  margin-top: 16px;
-  margin-bottom: 16px;
+export const PromptDisplaySection = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  gap: 12px;
+`;
+export const PromptDisplayText = styled.div `
+  flex: 1;
+  line-height: 1.4;
+`;
+export const PromptDisplayActions = styled.div `
+  flex-shrink: 0;
+`;
+export const SummarySection = styled.div `
+  margin-top: 16px;
+  max-height: 60px;
+  overflow-y: auto;
+  display: flex;
+  gap: 10px;
+
+  &.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 60px;
+  }
+`;
+export const RefineSection = styled.div `
+  display: flex;
+  gap: 12px;
+  margin-top: 16px;
+  margin-bottom: 16px;
 `;
 // Global styles for accessibility
-export const AccessibilityStyles = styled.div `
-  /* Focus indicators */
-  .antsomi-btn:focus-visible,
-  .antsomi-input:focus-visible,
-  .antsomi-checkbox:focus-visible {
-    outline: 2px solid #1890ff !important;
-    outline-offset: 2px !important;
-  }
-
-  /* High contrast mode support */
-  @media (prefers-contrast: high) {
-    .sql-generation-modal {
-      border: 2px solid !important;
-    }
-  }
-
-  /* Reduced motion support */
-  @media (prefers-reduced-motion: reduce) {
-    .antsomi-spin {
-      animation: none !important;
-    }
-  }
-
-  /* Error display styles */
-  .sql-generation-error {
-    margin: 12px 0;
-  }
-
-  /* Keyboard shortcuts help */
-  kbd {
-    background-color: #f5f5f5;
-    border: 1px solid #d9d9d9;
-    border-radius: 3px;
-    padding: 2px 4px;
-    font-family: monospace;
-    font-size: 0.85em;
-  }
+export const AccessibilityStyles = styled.div `
+  /* Focus indicators */
+  .antsomi-btn:focus-visible,
+  .antsomi-input:focus-visible,
+  .antsomi-checkbox:focus-visible {
+    outline: 2px solid #1890ff !important;
+    outline-offset: 2px !important;
+  }
+
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
+    .sql-generation-modal {
+      border: 2px solid !important;
+    }
+  }
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    .antsomi-spin {
+      animation: none !important;
+    }
+  }
+
+  /* Error display styles */
+  .sql-generation-error {
+    margin: 12px 0;
+  }
+
+  /* Keyboard shortcuts help */
+  kbd {
+    background-color: #f5f5f5;
+    border: 1px solid #d9d9d9;
+    border-radius: 3px;
+    padding: 2px 4px;
+    font-family: monospace;
+    font-size: 0.85em;
+  }
 `;