doom-design-system 0.1.6 → 0.1.8

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

@@ -2,12 +2,12 @@ import React from 'react';
 export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
     children: React.ReactNode;
 }
-export declare function Form({ children, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
+export declare function Form({ children, className, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
 export interface FormMessageProps extends React.HTMLAttributes<HTMLSpanElement> {
     children: React.ReactNode;
     variant?: 'error' | 'description';
 }
-export declare function FormMessage({ children, variant, ...props }: FormMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormMessage({ children, variant, className, ...props }: FormMessageProps): import("react/jsx-runtime").JSX.Element;
 export interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     label?: string;
@@ -16,10 +16,5 @@ export interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
     htmlFor?: string;
     required?: boolean;
 }
-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>, {}>;
+export declare function Field({ children, label, error, description, htmlFor, required, className, ...props }: FieldProps): import("react/jsx-runtime").JSX.Element;
+export declare const FormGroup: typeof Field;

package/dist/components/Form/Form.js

@@ -11,53 +11,19 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
+import clsx from 'clsx';
 import { Label } from '../Label/Label';
-const StyledForm = styled.form `
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  width: 100%;
-`;
-const StyledField = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  width: 100%;
-  
-`;
-const StyledMessage = styled.span `
-  font-size: 0.75rem;
-  font-weight: 500;
-  
-  ${props => props.variant === 'error' && css `
-    color: var(--error);
-    font-weight: 700;
-    text-transform: uppercase;
-    animation: shake 0.3s ease-in-out;
-  `}
-
-  ${props => props.variant === 'description' && css `
-    color: var(--muted-foreground);
-  `}
-
-  @keyframes shake {
-    0%, 100% { transform: translateX(0); }
-    25% { transform: translateX(-4px); }
-    75% { transform: translateX(4px); }
-  }
-`;
+import styles from './Form.module.css';
 export function Form(_a) {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return _jsx(StyledForm, Object.assign({}, props, { children: children }));
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return _jsx("form", Object.assign({ className: clsx(styles.form, className) }, props, { children: children }));
 }
 export function FormMessage(_a) {
-    var { children, variant = 'description' } = _a, props = __rest(_a, ["children", "variant"]);
-    return _jsx(StyledMessage, Object.assign({ variant: variant }, props, { children: children }));
+    var { children, variant = 'description', className } = _a, props = __rest(_a, ["children", "variant", "className"]);
+    return (_jsx("span", Object.assign({ className: clsx(styles.message, variant === 'error' && styles.error, variant === 'description' && styles.description, className) }, props, { children: children })));
 }
 export function Field(_a) {
-    var { children, label, error, description, htmlFor, required } = _a, props = __rest(_a, ["children", "label", "error", "description", "htmlFor", "required"]);
-    return (_jsxs(StyledField, Object.assign({ error: !!error }, props, { children: [label && (_jsx(Label, { htmlFor: htmlFor, required: required, children: label })), children, description && !error && (_jsx(FormMessage, { variant: "description", children: description })), error && typeof error === 'string' && (_jsx(FormMessage, { variant: "error", children: error }))] })));
+    var { children, label, error, description, htmlFor, required, className } = _a, props = __rest(_a, ["children", "label", "error", "description", "htmlFor", "required", "className"]);
+    return (_jsxs("div", Object.assign({ className: clsx(styles.field, className) }, props, { children: [label && (_jsx(Label, { htmlFor: htmlFor, required: required, children: label })), children, description && !error && (_jsx(FormMessage, { variant: "description", children: description })), error && typeof error === 'string' && (_jsx(FormMessage, { variant: "error", children: error }))] })));
 }
-export const FormGroup = StyledField;
+export const FormGroup = Field;

package/dist/components/Form/Form.module.css

@@ -0,0 +1,41 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 100%;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.message {
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.error {
+  color: var(--error);
+  font-weight: 700;
+  text-transform: uppercase;
+  animation: shake 0.3s ease-in-out;
+}
+
+.description {
+  color: var(--muted-foreground);
+}
+
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-4px);
+  }
+  75% {
+    transform: translateX(4px);
+  }
+}

package/dist/components/Input/Input.js

@@ -12,65 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
+import clsx from 'clsx';
 import { Label } from '../Label/Label';
-import { baseInteractiveStyles, focusStyles, errorStyles } from '../../styles/mixins';
-const InputContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  width: 100%;
-`;
-const InputWrapper = styled.div `
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-`;
-const StyledInput = styled.input `
-  width: 100%;
-  padding: 0.75rem 1rem;
-  padding-left: ${props => props.hasStartAdornment ? '2rem' : '1rem'};
-  padding-right: ${props => props.hasEndAdornment ? '2rem' : '1rem'};
-  font-size: var(--text-base);
-  background: var(--card-bg);
-  color: var(--foreground);
-  
-  ${baseInteractiveStyles}
-  ${focusStyles}
-
-  &::placeholder {
-    color: var(--muted);
-  }
-
-  ${props => props.isError && errorStyles}
-`;
-const Adornment = styled.span `
-  position: absolute;
-  ${props => props.position === 'start' ? 'left: 0.75rem;' : 'right: 0.75rem;'}
-  color: var(--muted-foreground);
-  font-size: 0.875rem;
-  pointer-events: none;
-  z-index: 1;
-`;
-const HelperText = styled.span `
-  font-size: var(--text-xs);
-  font-weight: var(--font-medium);
-  color: ${props => props.isError ? 'var(--error)' : 'var(--muted-foreground)'};
-  
-  ${props => props.isError && css `
-    font-weight: var(--font-bold);
-    text-transform: uppercase;
-    animation: input-shake 0.3s ease-in-out;
-  `}
-
-  @keyframes input-shake {
-    0%, 100% { transform: translateX(0); }
-    25% { transform: translateX(-4px); }
-    75% { transform: translateX(4px); }
-  }
-`;
+import styles from './Input.module.css';
 export function Input(_a) {
     var { label, error: errorProp, helperText, startAdornment, endAdornment, style, className, format, validate, onBlur, onFocus, value, id, required } = _a, props = __rest(_a, ["label", "error", "helperText", "startAdornment", "endAdornment", "style", "className", "format", "validate", "onBlur", "onFocus", "value", "id", "required"]);
     const [isFocused, setIsFocused] = useState(false);
@@ -92,5 +36,5 @@ export function Input(_a) {
     const displayValue = (!isFocused && format && value !== undefined)
         ? format(value)
         : value;
-    return (_jsxs(InputContainer, { style: style, className: className, children: [label && (_jsx(Label, { htmlFor: id, required: required, children: label })), _jsxs(InputWrapper, { children: [startAdornment && _jsx(Adornment, { position: "start", children: startAdornment }), _jsx(StyledInput, Object.assign({ id: id, required: required, value: displayValue, hasStartAdornment: !!startAdornment, hasEndAdornment: !!endAdornment, isError: !!error, onBlur: handleBlur, onFocus: handleFocus }, props)), endAdornment && _jsx(Adornment, { position: "end", children: endAdornment })] }), helperText && !error && (_jsx(HelperText, { children: helperText })), error && (_jsx(HelperText, { isError: true, children: error }))] }));
+    return (_jsxs("div", { className: clsx(styles.container, className), style: style, children: [label && (_jsx(Label, { htmlFor: id, required: required, children: label })), _jsxs("div", { className: styles.wrapper, children: [startAdornment && (_jsx("span", { className: clsx(styles.adornment, styles.start), children: startAdornment })), _jsx("input", Object.assign({ className: clsx(styles.input, startAdornment && styles.hasStartAdornment, endAdornment && styles.hasEndAdornment, error && styles.error), id: id, required: required, value: displayValue, onBlur: handleBlur, onFocus: handleFocus }, props)), endAdornment && (_jsx("span", { className: clsx(styles.adornment, styles.end), children: endAdornment }))] }), helperText && !error && (_jsx("span", { className: styles.helperText, children: helperText })), error && (_jsx("span", { className: clsx(styles.helperText, styles.error), children: error }))] }));
 }

package/dist/components/Input/Input.module.css

@@ -0,0 +1,86 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font-size: var(--text-base);
+  background: var(--card-bg);
+  color: var(--foreground);
+  border: var(--border-width) solid var(--card-border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-hard);
+  transition: all 0.1s ease;
+  outline: none;
+}
+.input:focus, .input:focus-visible, .input[aria-expanded=true] {
+  outline: none;
+  transform: translate(-2px, -2px);
+  box-shadow: 7px 7px 0px 0px var(--shadow-primary);
+  border-color: var(--primary);
+}
+.input::placeholder {
+  color: var(--muted);
+}
+.input.error {
+  border-color: var(--error);
+  box-shadow: 5px 5px 0px 0px var(--shadow-error);
+}
+.input.error:focus, .input.error:focus-visible {
+  border-color: var(--error);
+  box-shadow: 7px 7px 0px 0px var(--shadow-error);
+}
+.input.hasStartAdornment {
+  padding-left: 2rem;
+}
+.input.hasEndAdornment {
+  padding-right: 2rem;
+}
+
+.adornment {
+  position: absolute;
+  color: var(--muted-foreground);
+  font-size: 0.875rem;
+  pointer-events: none;
+  z-index: 1;
+}
+.adornment.start {
+  left: 0.75rem;
+}
+.adornment.end {
+  right: 0.75rem;
+}
+
+.helperText {
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  color: var(--muted-foreground);
+}
+.helperText.error {
+  color: var(--error);
+  font-weight: var(--font-bold);
+  text-transform: uppercase;
+  animation: input-shake 0.3s ease-in-out;
+}
+@keyframes input-shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-4px);
+  }
+  75% {
+    transform: translateX(4px);
+  }
+}

package/dist/components/Label/Label.d.ts

@@ -3,4 +3,4 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
     children: React.ReactNode;
     required?: boolean;
 }
-export declare function Label({ children, required, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+export declare function Label({ children, required, className, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Label/Label.js

@@ -11,28 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-const StyledLabel = styled.label `
-  font-family: var(--font-heading);
-  font-weight: var(--font-bold);
-  font-size: var(--text-sm);
-  color: var(--foreground);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-
-  ${props => props.required && css `
-    &::after {
-      content: '*';
-      color: var(--error);
-      margin-left: 0.25rem;
-    }
-  `}
-`;
+import clsx from 'clsx';
+import styles from './Label.module.css';
 export function Label(_a) {
-    var { children, required } = _a, props = __rest(_a, ["children", "required"]);
-    return _jsx(StyledLabel, Object.assign({ required: required }, props, { children: children }));
+    var { children, required, className } = _a, props = __rest(_a, ["children", "required", "className"]);
+    return (_jsx("label", Object.assign({ className: clsx(styles.label, required && styles.required, className) }, props, { children: children })));
 }

package/dist/components/Label/Label.module.css

@@ -0,0 +1,16 @@
+.label {
+  font-family: var(--font-heading);
+  font-weight: var(--font-bold);
+  font-size: var(--text-sm);
+  color: var(--foreground);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.label.required::after {
+  content: "*";
+  color: var(--error);
+  margin-left: 0.25rem;
+}

package/dist/components/Layout/Layout.d.ts

@@ -4,7 +4,7 @@ interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
     columns?: string;
     gap?: string;
 }
-export declare function Grid({ children, columns, gap, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
+export declare function Grid({ children, columns, gap, className, style, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
 interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     direction?: 'row' | 'column';
@@ -13,5 +13,5 @@ interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
     gap?: string;
     wrap?: boolean;
 }
-export declare function Flex({ children, direction, justify, align, gap, wrap, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
+export declare function Flex({ children, direction, justify, align, gap, wrap, className, style, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Layout/Layout.js

@@ -1,6 +1,4 @@
 'use client';
-'use client';
-'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)
@@ -13,25 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-const StyledGrid = styled.div `
-  display: grid;
-  grid-template-columns: ${props => props.columns};
-  gap: ${props => props.gap};
-`;
+import styles from './Layout.module.css';
 export function Grid(_a) {
-    var { children, columns = '1fr', gap = '1rem' } = _a, props = __rest(_a, ["children", "columns", "gap"]);
-    return (_jsx(StyledGrid, Object.assign({ columns: columns, gap: gap }, props, { children: children })));
+    var { children, columns = '1fr', gap = '1rem', className, style } = _a, props = __rest(_a, ["children", "columns", "gap", "className", "style"]);
+    return (_jsx("div", Object.assign({ className: `${styles.grid} ${className || ''}`, style: Object.assign({ gridTemplateColumns: columns, gap }, style) }, props, { children: children })));
 }
-const StyledFlex = styled.div `
-  display: flex;
-  flex-direction: ${props => props.direction};
-  justify-content: ${props => props.justify};
-  align-items: ${props => props.align};
-  gap: ${props => props.gap};
-  flex-wrap: ${props => props.$wrap ? 'wrap' : 'nowrap'};
-`;
 export function Flex(_a) {
-    var { children, direction = 'row', justify = 'flex-start', align = 'stretch', gap = '0', wrap = false } = _a, props = __rest(_a, ["children", "direction", "justify", "align", "gap", "wrap"]);
-    return (_jsx(StyledFlex, Object.assign({ direction: direction, justify: justify, align: align, gap: gap, "$wrap": wrap }, props, { children: children })));
+    var { children, direction = 'row', justify = 'flex-start', align = 'stretch', gap = '0', wrap = false, className, style } = _a, props = __rest(_a, ["children", "direction", "justify", "align", "gap", "wrap", "className", "style"]);
+    return (_jsx("div", Object.assign({ className: `${styles.flex} ${className || ''}`, style: Object.assign({ flexDirection: direction, justifyContent: justify, alignItems: align, gap, flexWrap: wrap ? 'wrap' : 'nowrap' }, style) }, props, { children: children })));
 }

package/dist/components/Layout/Layout.module.css

@@ -0,0 +1,7 @@
+.grid {
+  display: grid;
+}
+
+.flex {
+  display: flex;
+}

package/dist/components/Link/Link.d.ts

@@ -3,6 +3,7 @@ export type LinkVariant = 'default' | 'button' | 'subtle';
 interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     children: React.ReactNode;
     variant?: LinkVariant;
+    className?: string;
 }
-export declare function Link({ children, variant, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function Link({ children, variant, className, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Link/Link.js

@@ -11,67 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-const StyledLink = styled.a `
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  text-decoration: none;
-  transition: all var(--duration-fast) var(--ease-in-out);
-  cursor: pointer;
-  
-  /* Default Variant */
-  ${props => (!props.variant || props.variant === 'default') && css `
-    color: var(--foreground);
-    border-bottom: 2px solid transparent;
-    
-    &:hover {
-      color: var(--primary);
-      border-bottom-color: var(--primary);
-      transform: translateY(-1px);
-    }
-  `}
-
-  /* Subtle Variant */
-  ${props => props.variant === 'subtle' && css `
-    color: var(--muted-foreground);
-    font-size: 0.875rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    
-    &:hover {
-      color: var(--foreground);
-      text-decoration: underline;
-    }
-  `}
-
-  /* Button-like Variant */
-  ${props => props.variant === 'button' && css `
-    background-color: var(--primary);
-    color: var(--primary-foreground);
-    border: var(--border-width) solid var(--card-border);
-    border-radius: var(--radius);
-    padding: 0.75rem 1.5rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    box-shadow: var(--shadow-hover);
-    font-size: 0.75rem;
-    
-    &:hover {
-      filter: brightness(1.1);
-      transform: translate(-2px, -2px);
-      box-shadow: var(--shadow-hover);
-    }
-    
-    &:active {
-      transform: translate(0, 0);
-      box-shadow: none;
-    }
-  `}
-`;
+import clsx from 'clsx';
+import styles from './Link.module.css';
 export function Link(_a) {
-    var { children, variant = 'default' } = _a, props = __rest(_a, ["children", "variant"]);
-    return (_jsx(StyledLink, Object.assign({ variant: variant }, props, { children: children })));
+    var { children, variant = 'default', className } = _a, props = __rest(_a, ["children", "variant", "className"]);
+    return (_jsx("a", Object.assign({ className: clsx(styles.link, styles[variant], className) }, props, { children: children })));
 }

package/dist/components/Link/Link.module.css

@@ -0,0 +1,48 @@
+.link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  text-decoration: none;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+}
+.link.default {
+  color: var(--foreground);
+  border-bottom: 2px solid transparent;
+}
+.link.default:hover {
+  color: var(--primary);
+  border-bottom-color: var(--primary);
+  transform: translateY(-1px);
+}
+.link.subtle {
+  color: var(--muted-foreground);
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.link.subtle:hover {
+  color: var(--foreground);
+  text-decoration: underline;
+}
+.link.button {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  border: var(--border-width) solid var(--card-border);
+  border-radius: var(--radius);
+  padding: 0.75rem 1.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  box-shadow: var(--shadow-hover);
+  font-size: 0.75rem;
+}
+.link.button:hover {
+  filter: brightness(1.1);
+  transform: translate(-2px, -2px);
+  box-shadow: var(--shadow-hover);
+}
+.link.button:active {
+  transform: translate(0, 0);
+  box-shadow: none;
+}

package/dist/components/Modal/Modal.js

@@ -3,64 +3,21 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React, { useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { X } from 'lucide-react';
-import styled from '@emotion/styled';
-import { Card, Button, Flex } from '../..';
+import clsx from 'clsx';
+import { Card } from '../Card/Card';
+import { Button } from '../Button/Button';
+import { Flex } from '../Layout/Layout';
+import styles from './Modal.module.css';
 const ModalContext = React.createContext({ onClose: () => { } });
-const Overlay = styled.div `
-  position: fixed;
-  inset: 0;
-  z-index: var(--z-modal);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-md);
-  backdrop-filter: blur(4px);
-  background-color: rgba(0, 0, 0, var(--overlay-opacity));
-  animation: fadeIn 0.2s ease-out;
-
-  @keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-`;
-const ContentContainer = styled.div `
-  width: 100%;
-  max-width: 28rem;
-  animation: slideUp 0.3s ease-out;
-
-  @keyframes slideUp {
-    from { transform: translateY(20px); opacity: 0; }
-    to { transform: translateY(0); opacity: 1; }
-  }
-`;
-const StyledHeader = styled(Flex) `
-  padding: var(--spacing-lg);
-  border-bottom: var(--border-width) solid var(--card-border);
-  background: var(--background);
-  
-  h2 {
-    font-size: var(--text-xl);
-    font-weight: bold;
-    margin: 0;
-  }
-`;
-const StyledBody = styled.div `
-  padding: var(--spacing-lg);
-`;
-const StyledFooter = styled.div `
-  padding: var(--spacing-lg);
-  border-top: var(--border-width) solid var(--card-border);
-  background: var(--background);
-`;
 export function ModalHeader({ children, className }) {
     const { onClose } = React.useContext(ModalContext);
-    return (_jsxs(StyledHeader, { justify: "space-between", align: "center", className: className, children: [_jsx("h2", { children: children }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, children: _jsx(X, { size: 20, strokeWidth: 2.5 }) })] }));
+    return (_jsxs(Flex, { align: "center", justify: "space-between", className: clsx(styles.header, className), children: [_jsx("h2", { children: children }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, children: _jsx(X, { size: 20, strokeWidth: 2.5 }) })] }));
 }
 export function ModalBody({ children, className }) {
-    return (_jsx(StyledBody, { className: className, children: children }));
+    return (_jsx("div", { className: clsx(styles.body, className), children: children }));
 }
 export function ModalFooter({ children, className }) {
-    return (_jsx(StyledFooter, { className: className, children: children }));
+    return (_jsx("div", { className: clsx(styles.footer, className), children: children }));
 }
 export function Modal({ isOpen, onClose, title, children, footer }) {
     const overlayRef = useRef(null);
@@ -85,5 +42,5 @@ export function Modal({ isOpen, onClose, title, children, footer }) {
             onClose();
         }
     };
-    return createPortal(_jsx(ModalContext.Provider, { value: { onClose }, children: _jsx(Overlay, { ref: overlayRef, onClick: handleOverlayClick, children: _jsx(ContentContainer, { children: _jsx(Card, { style: { padding: 0, overflow: 'hidden' }, children: title ? (_jsxs(_Fragment, { children: [_jsx(ModalHeader, { children: title }), _jsx(ModalBody, { children: children }), footer && _jsx(ModalFooter, { children: footer })] })) : (children) }) }) }) }), document.body);
+    return createPortal(_jsx(ModalContext.Provider, { value: { onClose }, children: _jsx("div", { className: styles.overlay, ref: overlayRef, onClick: handleOverlayClick, children: _jsx("div", { className: styles.contentContainer, children: _jsx(Card, { style: { padding: 0, overflow: 'hidden' }, children: title ? (_jsxs(_Fragment, { children: [_jsx(ModalHeader, { children: title }), _jsx(ModalBody, { children: children }), footer && _jsx(ModalFooter, { children: footer })] })) : (children) }) }) }) }), document.body);
 }