doom-design-system 0.1.3 → 0.1.4

package/README.md

@@ -30,14 +30,17 @@ npm install @emotion/react @emotion/styled lucide-react
 
 ### 1. Setup Provider
 
-Wrap your application with the `DesignSystemProvider` to ensure all styles and themes are applied correctly.
+Wrap your application with the `DesignSystemProvider` to ensure all styles and themes are applied correctly. You can also pass a custom font class using `fontClassName`.
 
 ```tsx
 import { DesignSystemProvider } from 'doom-design-system';
+import { Montserrat } from 'next/font/google';
+
+const montserrat = Montserrat({ subsets: ['latin'] });
 
 export default function App() {
   return (
-    <DesignSystemProvider>
+    <DesignSystemProvider fontClassName={montserrat.className}>
       <YourApp />
     </DesignSystemProvider>
   );

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface AccordionItemProps {
+    value: string;
+    trigger: string;
+    children: React.ReactNode;
+    isOpen?: boolean;
+    onToggle?: () => void;
+}
+export declare function AccordionItem({ value, trigger, children, isOpen, onToggle }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+interface AccordionProps {
+    type?: 'single' | 'multiple';
+    children: React.ReactNode;
+    defaultValue?: string | string[];
+    className?: string;
+}
+export declare function Accordion({ type, children, defaultValue, className }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,94 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import styled from '@emotion/styled';
+import { ChevronDown } from 'lucide-react';
+const AccordionRoot = styled.div `
+  display: flex;
+  flex-direction: column;
+  border: var(--border-width) solid var(--card-border);
+  border-radius: var(--radius);
+  background-color: var(--card-bg);
+  overflow: hidden;
+`;
+const Item = styled.div `
+  border-bottom: var(--border-width) solid var(--card-border);
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+const Header = styled.h3 `
+  display: flex;
+  margin: 0;
+`;
+const Trigger = styled.button `
+  all: unset;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-md);
+  font-family: var(--font-heading);
+  font-weight: 700;
+  font-size: var(--text-base);
+  background-color: var(--card-bg);
+  color: var(--foreground);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: color-mix(in srgb, var(--primary) 25%, transparent);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--primary);
+    z-index: 1;
+  }
+
+  & > svg {
+    transition: transform 0.2s ease;
+    transform: ${props => props.isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};
+  }
+`;
+const ContentWrapper = styled.div `
+  height: ${props => props.isOpen ? 'auto' : '0'};
+  overflow: hidden;
+  display: ${props => props.isOpen ? 'block' : 'none'};
+`;
+const ContentBody = styled.div `
+  padding: var(--spacing-md);
+  padding-top: 0;
+  font-size: var(--text-base);
+  color: var(--muted-foreground);
+  line-height: 1.6;
+`;
+export function AccordionItem({ value, trigger, children, isOpen, onToggle }) {
+    return (_jsxs(Item, { children: [_jsx(Header, { children: _jsxs(Trigger, { type: "button", isOpen: !!isOpen, onClick: onToggle, "aria-expanded": isOpen, children: [trigger, _jsx(ChevronDown, { size: 20, strokeWidth: 2.5 })] }) }), _jsx(ContentWrapper, { isOpen: !!isOpen, role: "region", children: _jsx(ContentBody, { children: children }) })] }));
+}
+export function Accordion({ type = 'single', children, defaultValue, className }) {
+    const [value, setValue] = useState(defaultValue || (type === 'multiple' ? [] : ''));
+    const handleToggle = (itemValue) => {
+        if (type === 'single') {
+            setValue(prev => prev === itemValue ? '' : itemValue);
+        }
+        else {
+            setValue(prev => {
+                const arr = Array.isArray(prev) ? prev : [];
+                if (arr.includes(itemValue)) {
+                    return arr.filter(v => v !== itemValue);
+                }
+                return [...arr, itemValue];
+            });
+        }
+    };
+    return (_jsx(AccordionRoot, { className: className, children: React.Children.map(children, (child) => {
+            if (!React.isValidElement(child))
+                return null;
+            const itemValue = child.props.value;
+            const isOpen = Array.isArray(value) ? value.includes(itemValue) : value === itemValue;
+            return React.cloneElement(child, {
+                isOpen,
+                onToggle: () => handleToggle(itemValue),
+            });
+        }) }));
+}

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

@@ -0,0 +1 @@
+export { Accordion, AccordionItem } from './Accordion';

package/dist/components/Accordion/index.js

@@ -0,0 +1 @@
+export { Accordion, AccordionItem } from './Accordion';

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+interface AlertProps {
+    variant?: AlertVariant;
+    title: string;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    className?: string;
+}
+export declare function Alert({ variant, title, description, icon, className }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Alert/Alert.js

@@ -0,0 +1,70 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { AlertCircle, CheckCircle, Info, XCircle } from 'lucide-react';
+const AlertContainer = styled.div `
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: var(--spacing-md);
+  width: 100%;
+  border: var(--border-width) solid var(--card-border);
+  border-radius: var(--radius);
+  background-color: var(--card-bg);
+  box-shadow: var(--shadow-sm); /* Subtle depth, not full hard shadow usually */
+  position: relative;
+  overflow: hidden;
+
+  /* Left accent border */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 6px;
+    background-color: ${props => `var(--${props.variant})`};
+  }
+
+  ${props => props.variant === 'info' && css `
+    /* Info Styles */
+  `}
+`;
+const Content = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1;
+`;
+const Title = styled.h5 `
+  margin: 0;
+  font-family: var(--font-heading);
+  font-weight: 700;
+  font-size: var(--text-base);
+  color: var(--foreground);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+`;
+const Description = styled.p `
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+  line-height: 1.5;
+`;
+const IconWrapper = styled.div `
+  color: ${props => `var(--${props.variant})`};
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+`;
+const icons = {
+    info: Info,
+    success: CheckCircle,
+    warning: AlertCircle,
+    error: XCircle,
+};
+export function Alert({ variant = 'info', title, description, icon, className }) {
+    const IconComponent = icons[variant];
+    return (_jsxs(AlertContainer, { variant: variant, className: className, role: "alert", children: [_jsx(IconWrapper, { variant: variant, children: icon || _jsx(IconComponent, { size: 20, strokeWidth: 2.5 }) }), _jsxs(Content, { children: [_jsx(Title, { children: title }), description && _jsx(Description, { children: description })] })] }));
+}

package/dist/components/Alert/index.d.ts

@@ -0,0 +1 @@
+export { Alert, type AlertVariant } from './Alert';

package/dist/components/Alert/index.js

@@ -0,0 +1 @@
+export { Alert } from './Alert';

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarShape = 'circle' | 'square';
+interface AvatarProps {
+    src?: string;
+    alt?: string;
+    fallback: React.ReactNode;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    className?: string;
+}
+export declare function Avatar({ src, alt, fallback, size, shape, className }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import styled from '@emotion/styled';
+const sizeMap = {
+    sm: '32px',
+    md: '48px',
+    lg: '64px',
+    xl: '96px',
+};
+const fontSizeMap = {
+    sm: 'var(--text-xs)',
+    md: 'var(--text-base)',
+    lg: 'var(--text-lg)',
+    xl: 'var(--text-2xl)',
+};
+const AvatarContainer = styled.div `
+  position: relative;
+  width: ${props => sizeMap[props.size]};
+  height: ${props => sizeMap[props.size]};
+  border: var(--border-width) solid var(--card-border);
+  border-radius: ${props => props.shape === 'circle' ? '50%' : 'var(--radius)'};
+  overflow: hidden;
+  background-color: var(--card-bg); /* Fallback bg */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+const AvatarImage = styled.img `
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+const Fallback = styled.span `
+  font-family: var(--font-heading);
+  font-weight: 700;
+  font-size: ${props => fontSizeMap[props.size]};
+  color: var(--primary-foreground);
+  background-color: var(--primary);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-transform: uppercase;
+`;
+export function Avatar({ src, alt = 'Avatar', fallback, size = 'md', shape = 'circle', className }) {
+    const [hasError, setHasError] = useState(false);
+    return (_jsx(AvatarContainer, { size: size, shape: shape, className: className, children: src && !hasError ? (_jsx(AvatarImage, { src: src, alt: alt, onError: () => setHasError(true) })) : (_jsx(Fallback, { size: size, children: typeof fallback === 'string' ? fallback.slice(0, 2) : fallback })) }));
+}

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1 @@
+export { Avatar, type AvatarSize, type AvatarShape } from './Avatar';

package/dist/components/Avatar/index.js

@@ -0,0 +1 @@
+export { Avatar } from './Avatar';

package/dist/components/Badge/Badge.js

@@ -19,7 +19,7 @@ const StyledBadge = styled.span `
   display: inline-flex;
   align-items: center;
   padding: 0.25rem 0.75rem;
-  border-radius: 9999px;
+  border-radius: var(--radius-pill);
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface BreadcrumbsProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function Breadcrumbs({ children, className }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+interface BreadcrumbItemProps {
+    href?: string;
+    isCurrent?: boolean;
+    children: React.ReactNode;
+}
+export declare function BreadcrumbItem({ href, isCurrent, children }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { Link } from '../Link';
+const BreadcrumbNav = styled.nav `
+  display: flex;
+  align-items: center;
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+`;
+const BreadcrumbList = styled.ol `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  gap: 0.5rem;
+`;
+const BreadcrumbLi = styled.li `
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  &:not(:last-child)::after {
+    /* Separator */
+    content: '/';
+    margin-left: 0.25rem;
+    color: var(--muted-foreground);
+    opacity: 0.5;
+    font-weight: 700;
+  }
+`;
+const CurrentPage = styled.span `
+  font-weight: 700;
+  color: var(--foreground);
+`;
+export function Breadcrumbs({ children, className }) {
+    return (_jsx(BreadcrumbNav, { "aria-label": "breadcrumb", className: className, children: _jsx(BreadcrumbList, { children: children }) }));
+}
+export function BreadcrumbItem({ href, isCurrent, children }) {
+    if (isCurrent) {
+        return (_jsx(BreadcrumbLi, { "aria-current": "page", children: _jsx(CurrentPage, { children: children }) }));
+    }
+    return (_jsx(BreadcrumbLi, { children: href ? (_jsx(Link, { href: href, variant: "default", style: { fontSize: 'inherit' }, children: children })) : (_jsx("span", { children: children })) }));
+}

package/dist/components/Breadcrumbs/index.d.ts

@@ -0,0 +1 @@
+export { Breadcrumbs, BreadcrumbItem } from './Breadcrumbs';

package/dist/components/Breadcrumbs/index.js

@@ -0,0 +1 @@
+export { Breadcrumbs, BreadcrumbItem } from './Breadcrumbs';

package/dist/components/Button/Button.js

@@ -1,4 +1,3 @@
-'use client';
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -14,6 +13,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 const StyledButton = styled.button `
+  --btn-focus-border: var(--primary);
+  --btn-focus-shadow: var(--shadow-primary);
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -21,22 +23,36 @@ const StyledButton = styled.button `
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  transition: all 0.1s ease;
+  transition: 
+    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), 
+    box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
+    background-color 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease;
   cursor: pointer;
   border: var(--border-width) solid var(--card-border);
   box-shadow: var(--shadow-hard);
   background-color: var(--card-bg);
   color: var(--foreground);
   font-size: var(--text-base);
+  position: relative;
 
   &:hover {
     transform: translate(-2px, -2px);
     box-shadow: var(--shadow-hover);
   }
 
+  &:focus {
+    outline: none;
+    box-shadow: 7px 7px 0px 0px var(--btn-focus-shadow);
+    transform: translate(-2px, -2px);
+    border-color: var(--btn-focus-border);
+  }
+
   &:active {
-    transform: translate(0px, 0px);
-    box-shadow: 0px 0px 0px 0px var(--card-border);
+    transition: none;
+    transform: translate(2px, 2px);
+    box-shadow: none;
   }
 
   &:disabled {
@@ -48,6 +64,10 @@ const StyledButton = styled.button `
 
   /* Variants */
   ${props => props.variant === 'primary' && css `
+    /* Contrast Override */
+    --btn-focus-border: var(--card-border);
+    --btn-focus-shadow: #000000;
+
     background-color: var(--primary);
     color: var(--primary-foreground);
     &:hover {
@@ -56,6 +76,10 @@ const StyledButton = styled.button `
   `}
 
   ${props => props.variant === 'secondary' && css `
+    /* Contrast Override */
+    --btn-focus-border: var(--card-border);
+    --btn-focus-shadow: #000000;
+
     background-color: var(--secondary);
     color: var(--secondary-foreground);
     &:hover {
@@ -64,6 +88,10 @@ const StyledButton = styled.button `
   `}
 
   ${props => props.variant === 'success' && css `
+    /* Contrast Override */
+    --btn-focus-border: var(--card-border);
+    --btn-focus-shadow: #000000;
+
     background-color: var(--success);
     color: var(--card-bg);
     &:hover {
@@ -73,18 +101,23 @@ const StyledButton = styled.button `
   
   ${props => props.variant === 'outline' && css `
     background-color: transparent;
-    /* Outline is default style basically */
   `}
 
   ${props => props.variant === 'ghost' && css `
     background-color: transparent;
     border-color: transparent;
     box-shadow: none;
-    &:hover {
+    &:hover, &:focus {
       background-color: color-mix(in srgb, var(--primary), transparent 90%);
       color: var(--primary);
       transform: none;
       box-shadow: none;
+      border-color: transparent;
+      outline: none;
+    }
+    &:active {
+      transform: scale(0.95);
+      transition: none;
     }
   `}
 

package/dist/components/Card/Card.js

@@ -18,7 +18,7 @@ const StyledCard = styled.div `
   background-color: var(--card-bg);
   border: var(--border-width) solid var(--card-border);
   border-radius: var(--radius);
-  padding: 1.5rem;
+  padding: var(--spacing-lg);
   box-shadow: var(--shadow-hard);
   min-width: 0; /* Safe default for grid/flex items */
 `;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+interface DrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    side?: 'left' | 'right';
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+}
+export declare function Drawer({ isOpen, onClose, title, side, children, footer, className }: DrawerProps): React.ReactPortal | null;
+export {};

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,101 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import styled from '@emotion/styled';
+import { X } from 'lucide-react';
+import { Button } from '../Button';
+import { Flex } from '../Layout';
+const Overlay = styled.div `
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, var(--overlay-opacity));
+  backdrop-filter: blur(4px);
+  opacity: ${props => props.isOpen ? 1 : 0};
+  transition: opacity 0.2s ease-in-out;
+  pointer-events: ${props => props.isOpen ? 'auto' : 'none'};
+  z-index: var(--z-dropdown);
+`;
+const Panel = styled.div `
+  position: fixed;
+  background-color: var(--card-bg);
+  box-shadow: ${props => props.side === 'left'
+    ? '8px 0px 0px 0px var(--card-border)'
+    : '-8px 0px 0px 0px var(--card-border)'};
+  z-index: var(--z-modal);
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+
+  top: 0;
+  bottom: 0;
+  ${props => props.side}: 0;
+  width: 100%;
+  max-width: 400px;
+  
+  ${props => props.side === 'left' ? `
+    border-top-right-radius: var(--radius);
+    border-bottom-right-radius: var(--radius);
+  ` : `
+    border-top-left-radius: var(--radius);
+    border-bottom-left-radius: var(--radius);
+  `}
+  
+  visibility: ${props => props.isOpen ? 'visible' : 'hidden'};
+  
+  transform: ${props => {
+    if (props.isOpen)
+        return 'translateX(0)';
+    return props.side === 'right' ? 'translateX(100%)' : 'translateX(-100%)';
+}};
+`;
+const Header = styled(Flex) `
+  padding: var(--spacing-lg);
+  border-bottom-width: var(--border-width);
+  border-bottom-style: solid;
+  border-bottom-color: var(--card-border);
+`;
+const Title = styled.h2 `
+  margin: 0;
+  font-family: var(--font-heading);
+  font-size: var(--text-xl);
+  font-weight: 700;
+`;
+const Content = styled.div `
+  flex: 1;
+  padding: var(--spacing-lg);
+  overflow-y: auto;
+`;
+const Footer = styled(Flex) `
+  padding: var(--spacing-lg);
+  border-top-width: var(--border-width);
+  border-top-style: solid;
+  border-top-color: var(--card-border);
+`;
+export function Drawer({ isOpen, onClose, title, side = 'right', children, footer, className }) {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = '';
+        }
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [isOpen]);
+    useEffect(() => {
+        const handleEsc = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        if (isOpen)
+            window.addEventListener('keydown', handleEsc);
+        return () => window.removeEventListener('keydown', handleEsc);
+    }, [isOpen, onClose]);
+    if (!mounted)
+        return null;
+    return createPortal(_jsxs(_Fragment, { children: [_jsx(Overlay, { isOpen: isOpen, onClick: onClose, "aria-hidden": "true" }), _jsxs(Panel, { isOpen: isOpen, side: side, role: "dialog", "aria-modal": "true", className: className, children: [_jsxs(Header, { align: "center", justify: "space-between", children: [_jsx(Title, { children: title }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close drawer", children: _jsx(X, { size: 24 }) })] }), _jsx(Content, { children: children }), footer && _jsx(Footer, { justify: "flex-end", gap: "var(--spacing-md)", children: footer })] })] }), document.body);
+}

package/dist/components/Drawer/index.d.ts

@@ -0,0 +1 @@
+export { Drawer } from './Drawer';

package/dist/components/Drawer/index.js

@@ -0,0 +1 @@
+export { Drawer } from './Drawer';

package/dist/components/Form/Form.d.ts

@@ -1,14 +1,27 @@
 import React from 'react';
-interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+import { Label } from '../Label/Label';
+export { Label };
+export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
     children: React.ReactNode;
 }
-export declare function Form({ children, className, style, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
-interface FormGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+export declare function Form({ children, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
+export interface FormMessageProps extends React.HTMLAttributes<HTMLSpanElement> {
     children: React.ReactNode;
+    variant?: 'error' | 'description';
 }
-export declare function FormGroup({ children, className, style, ...props }: FormGroupProps): import("react/jsx-runtime").JSX.Element;
-interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+export declare function FormMessage({ children, variant, ...props }: FormMessageProps): import("react/jsx-runtime").JSX.Element;
+export interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
+    label?: string;
+    error?: string | boolean;
+    description?: string;
+    htmlFor?: string;
+    required?: boolean;
 }
-export declare function Label({ children, className, style, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function Field({ children, label, error, description, htmlFor, required, ...props }: FieldProps): import("react/jsx-runtime").JSX.Element;
+export declare const FormGroup: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    error?: boolean;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;