@wallarm-org/design-system 0.1.0

package/README.md

@@ -0,0 +1,92 @@
+# Wallarm Design System
+
+Modern React component library for building user interfaces.
+
+## 📚 Documentation
+
+All documentation is available in:
+
+- [Storybook](https://wallarm.github.io/wallarm-design-system/) - Interactive component examples
+- [Installation Guide](docs/installation.md) - Setup instructions
+- [Getting Started](docs/getting-started.md) - Introduction and overview
+
+Run Storybook locally:
+
+```bash
+pnpm storybook
+```
+
+## 🚀 Quick Start
+
+See [Installation Guide](docs/installation.md) for detailed setup instructions.
+
+### Basic Example
+
+```tsx
+// App.tsx
+import { ThemeProvider } from '@wallarm-org/design-system/ThemeProvider';
+import { Button } from '@wallarm-org/design-system/Button';
+import 'non.geist';
+import 'non.geist/mono';
+import './App.css';
+
+export const App = () => {
+  return (
+    <ThemeProvider defaultTheme="light">
+      <Button variant="primary">Hello, World!</Button>
+    </ThemeProvider>
+  );
+};
+```
+
+## ✨ Features
+
+- **40+ components** - Complete set of UI elements
+- **React 19** - Latest React version
+- **TypeScript** - Full type safety
+- **Tailwind CSS v4** - Modern styling system
+- **Geist font** - Modern typography (non.geist)
+- **Animations** - Built-in animations (tw-animate-css)
+- **Theming** - Light and dark themes
+- **Accessibility** - ARIA compliance
+- **Tree-shaking** - Optimal bundle size
+
+## 📦 Core Components
+
+- **Buttons and controls** - Button, Link, ToggleButton
+- **Forms** - Input, Select, Checkbox, Radio, Switch
+- **Feedback** - Alert, Toast, Tooltip, Loader
+- **Modals** - Dialog, Drawer, Popover
+- **Navigation** - Tabs, Breadcrumbs, SegmentedControl
+- **Layout** - Stack, Flex, ScrollArea
+- **Data display** - Badge, Tag, Code
+
+## 🛠 Development
+
+```bash
+# Clone repository
+git clone https://github.com/wallarm/design-system.git
+cd wallarm-design-system
+
+# Install dependencies
+pnpm install
+
+# Run Storybook
+pnpm storybook
+
+# Run tests
+pnpm test
+
+# Build library
+pnpm build
+```
+
+## 📖 Resources
+
+- [Storybook](https://wallarm.github.io/design-system/) - Interactive examples
+- [NPM](https://www.npmjs.com/package/@wallarm-org/design-system) - NPM package
+- [GitHub](https://github.com/wallarm/design-system) - Source code
+
+## 📄 License
+
+MIT © Wallarm

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

@@ -0,0 +1,25 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import type { AlertColor } from './AlertIcon';
+export type { AlertColor };
+declare const alertVariants: (props?: ({
+    color?: "primary" | "destructive" | "info" | "warning" | "success" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AlertProps extends VariantProps<typeof alertVariants>, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    ref?: Ref<HTMLDivElement>;
+    /** Color variant of the alert */
+    color?: AlertColor;
+    /** Minimum width in pixels (default: 256) */
+    minWidth?: number;
+    /** Maximum width in pixels (default: 980) */
+    maxWidth?: number;
+    /** Alert content */
+    children?: ReactNode;
+}
+/**
+ * Alert component for displaying important messages to users.
+ *
+ * Supports 5 color variants: primary (neutral), destructive, info, warning, and success.
+ * Use compound components: AlertIcon, AlertContent, AlertClose, AlertControls, AlertActions.
+ */
+export declare const Alert: FC<AlertProps>;

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

@@ -0,0 +1 @@
+export {};

package/dist/components/Alert/Alert.figma.js

@@ -0,0 +1,240 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Button } from "../Button/index.js";
+import { Alert } from "./Alert.js";
+import { AlertClose } from "./AlertClose.js";
+import { AlertContent } from "./AlertContent.js";
+import { AlertControls } from "./AlertControls.js";
+import { AlertDescription } from "./AlertDescription.js";
+import { AlertIcon } from "./AlertIcon.js";
+import { AlertTitle } from "./AlertTitle.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=1584-1798';
+code_connect.connect(Alert, figmaNodeUrl, {
+    variant: {
+        Type: 'Primary'
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Alert, {
+            color: "primary",
+            children: [
+                /*#__PURE__*/ jsx(AlertIcon, {}),
+                /*#__PURE__*/ jsxs(AlertContent, {
+                    children: [
+                        /*#__PURE__*/ jsx(AlertTitle, {
+                            children: "Message goes here"
+                        }),
+                        /*#__PURE__*/ jsx(AlertDescription, {
+                            children: "Description goes here"
+                        })
+                    ]
+                })
+            ]
+        })
+});
+code_connect.connect(Alert, figmaNodeUrl, {
+    variant: {
+        Type: 'Destructive'
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Alert, {
+            color: "destructive",
+            children: [
+                /*#__PURE__*/ jsx(AlertIcon, {}),
+                /*#__PURE__*/ jsxs(AlertContent, {
+                    children: [
+                        /*#__PURE__*/ jsx(AlertTitle, {
+                            children: "Message goes here"
+                        }),
+                        /*#__PURE__*/ jsx(AlertDescription, {
+                            children: "Description goes here"
+                        })
+                    ]
+                })
+            ]
+        })
+});
+code_connect.connect(Alert, figmaNodeUrl, {
+    variant: {
+        Type: 'Info'
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Alert, {
+            color: "info",
+            children: [
+                /*#__PURE__*/ jsx(AlertIcon, {}),
+                /*#__PURE__*/ jsxs(AlertContent, {
+                    children: [
+                        /*#__PURE__*/ jsx(AlertTitle, {
+                            children: "Message goes here"
+                        }),
+                        /*#__PURE__*/ jsx(AlertDescription, {
+                            children: "Description goes here"
+                        })
+                    ]
+                })
+            ]
+        })
+});
+code_connect.connect(Alert, figmaNodeUrl, {
+    variant: {
+        Type: 'Warning'
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Alert, {
+            color: "warning",
+            children: [
+                /*#__PURE__*/ jsx(AlertIcon, {}),
+                /*#__PURE__*/ jsxs(AlertContent, {
+                    children: [
+                        /*#__PURE__*/ jsx(AlertTitle, {
+                            children: "Message goes here"
+                        }),
+                        /*#__PURE__*/ jsx(AlertDescription, {
+                            children: "Description goes here"
+                        })
+                    ]
+                })
+            ]
+        })
+});
+code_connect.connect(Alert, figmaNodeUrl, {
+    variant: {
+        Type: 'Success'
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Alert, {
+            color: "success",
+            children: [
+                /*#__PURE__*/ jsx(AlertIcon, {}),
+                /*#__PURE__*/ jsxs(AlertContent, {
+                    children: [
+                        /*#__PURE__*/ jsx(AlertTitle, {
+                            children: "Message goes here"
+                        }),
+                        /*#__PURE__*/ jsx(AlertDescription, {
+                            children: "Description goes here"
+                        })
+                    ]
+                })
+            ]
+        })
+});
+code_connect.connect(Alert, figmaNodeUrl, {
+    variant: {
+        Closable: true
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Alert, {
+            color: "destructive",
+            children: [
+                /*#__PURE__*/ jsx(AlertIcon, {}),
+                /*#__PURE__*/ jsxs(AlertContent, {
+                    children: [
+                        /*#__PURE__*/ jsx(AlertTitle, {
+                            children: "Message goes here"
+                        }),
+                        /*#__PURE__*/ jsx(AlertDescription, {
+                            children: "Description goes here"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(AlertClose, {})
+            ]
+        })
+});
+code_connect.connect(Alert, figmaNodeUrl, {
+    variant: {
+        'Top Actions': true
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Alert, {
+            color: "destructive",
+            children: [
+                /*#__PURE__*/ jsx(AlertIcon, {}),
+                /*#__PURE__*/ jsxs(AlertContent, {
+                    children: [
+                        /*#__PURE__*/ jsx(AlertTitle, {
+                            children: "Message goes here"
+                        }),
+                        /*#__PURE__*/ jsx(AlertDescription, {
+                            children: "Description goes here"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(AlertControls, {
+                    children: [
+                        /*#__PURE__*/ jsx(Button, {
+                            variant: "secondary",
+                            color: "destructive",
+                            size: "small",
+                            children: "Button"
+                        }),
+                        /*#__PURE__*/ jsx(Button, {
+                            variant: "secondary",
+                            color: "destructive",
+                            size: "small",
+                            children: "Button"
+                        })
+                    ]
+                })
+            ]
+        })
+});
+code_connect.connect(Alert, figmaNodeUrl, {
+    variant: {
+        'Bottom Actions': true
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Alert, {
+            color: "destructive",
+            children: [
+                /*#__PURE__*/ jsx(AlertIcon, {}),
+                /*#__PURE__*/ jsxs(AlertContent, {
+                    children: [
+                        /*#__PURE__*/ jsx(AlertTitle, {
+                            children: "Message goes here"
+                        }),
+                        /*#__PURE__*/ jsx(AlertDescription, {
+                            children: "Description goes here"
+                        }),
+                        /*#__PURE__*/ jsxs(AlertControls, {
+                            children: [
+                                /*#__PURE__*/ jsx(Button, {
+                                    variant: "secondary",
+                                    color: "destructive",
+                                    size: "small",
+                                    children: "Button"
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    variant: "secondary",
+                                    color: "destructive",
+                                    size: "small",
+                                    children: "Button"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+});
+code_connect.connect(Alert, figmaNodeUrl, {
+    variant: {
+        'Code TBD': true
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Alert, {
+            color: "destructive",
+            children: [
+                /*#__PURE__*/ jsx(AlertIcon, {}),
+                /*#__PURE__*/ jsxs(AlertContent, {
+                    children: [
+                        /*#__PURE__*/ jsx(AlertTitle, {
+                            children: "Message goes here"
+                        }),
+                        /*#__PURE__*/ jsx(AlertDescription, {
+                            children: "Description goes here"
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: "pt-8",
+                            children: /*#__PURE__*/ jsx("span", {
+                                className: "font-mono font-medium text-xs leading-xs text-text-danger",
+                                children: "Optional code output"
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+});

package/dist/components/Alert/Alert.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { ALERT_MAX_WIDTH, ALERT_MIN_WIDTH } from "./const.js";
+const alertVariants = cva([
+    'font-sans flex items-start gap-8',
+    'rounded-12 border-1',
+    'pl-16 pr-12 py-12'
+], {
+    variants: {
+        color: {
+            primary: 'bg-bg-surface-2 border-border-primary',
+            destructive: 'bg-bg-light-danger border-border-danger',
+            info: 'bg-bg-light-info border-border-info',
+            warning: 'bg-bg-light-warning border-border-warning',
+            success: 'bg-bg-light-success border-border-success'
+        }
+    },
+    defaultVariants: {
+        color: 'primary'
+    }
+});
+const Alert = ({ ref, color = 'primary', minWidth = ALERT_MIN_WIDTH, maxWidth = ALERT_MAX_WIDTH, children, ...props })=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        role: "alert",
+        "data-color": color,
+        className: alertVariants({
+            color
+        }),
+        style: {
+            minWidth,
+            maxWidth
+        },
+        children: children
+    });
+Alert.displayName = 'Alert';
+export { Alert };

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

@@ -0,0 +1,12 @@
+import type { ButtonHTMLAttributes, FC, Ref } from 'react';
+export interface AlertCloseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    ref?: Ref<HTMLButtonElement>;
+    /** Callback when the close button is clicked */
+    onClick?: () => void;
+}
+/**
+ * Close button component for Alert.
+ *
+ * Renders a close button with an X icon and "Close" tooltip.
+ */
+export declare const AlertClose: FC<AlertCloseProps>;

package/dist/components/Alert/AlertClose.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "../../icons/index.js";
+import { Button } from "../Button/index.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../Tooltip/index.js";
+const AlertClose = ({ ref, onClick, ...props })=>/*#__PURE__*/ jsx(TooltipProvider, {
+        children: /*#__PURE__*/ jsxs(Tooltip, {
+            children: [
+                /*#__PURE__*/ jsx(TooltipTrigger, {
+                    asChild: true,
+                    children: /*#__PURE__*/ jsx(Button, {
+                        ...props,
+                        ref: ref,
+                        variant: "ghost",
+                        color: "neutral",
+                        size: "small",
+                        "aria-label": "close",
+                        onClick: onClick,
+                        children: /*#__PURE__*/ jsx(X, {})
+                    })
+                }),
+                /*#__PURE__*/ jsx(TooltipContent, {
+                    children: "Close"
+                })
+            ]
+        })
+    });
+AlertClose.displayName = 'AlertClose';
+export { AlertClose };

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

@@ -0,0 +1,10 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface AlertContentProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Container for Alert's main content (title, description, and bottom actions).
+ *
+ * Provides proper spacing and flex layout for child components.
+ */
+export declare const AlertContent: FC<AlertContentProps>;

package/dist/components/Alert/AlertContent.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const AlertContent = ({ ref, children, ...props })=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        className: cn('flex-1 flex flex-col gap-0 py-2 **:data-[slot=alert-controls]:mt-8'),
+        children: children
+    });
+AlertContent.displayName = 'AlertContent';
+export { AlertContent };

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

@@ -0,0 +1,11 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export type AlertControlsProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'> & {
+    ref?: Ref<HTMLDivElement>;
+};
+/**
+ * Controls container for Alert
+ *
+ * Use this to place action buttons.
+ * Buttons should use variant="secondary" with color="neutral" or "destructive" and size="small".
+ */
+export declare const AlertControls: FC<AlertControlsProps>;

package/dist/components/Alert/AlertControls.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const alertControlsVariants = cva(cn('flex items-center gap-4 shrink-0'));
+const AlertControls = ({ ref, ...props })=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        className: cn(alertControlsVariants()),
+        "data-slot": "alert-controls"
+    });
+AlertControls.displayName = 'AlertControls';
+export { AlertControls };

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

@@ -0,0 +1,15 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface AlertDescriptionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    ref?: Ref<HTMLDivElement>;
+    children: ReactNode;
+    /** Maximum number of lines before truncation (default: 4). Set to 0 to disable truncation. */
+    lineClamp?: number;
+}
+/**
+ * Description component for Alert.
+ *
+ * Displays secondary description text with regular weight and secondary color.
+ * Supports text truncation with configurable max lines.
+ * Shows a tooltip with full text when content is truncated.
+ */
+export declare const AlertDescription: FC<AlertDescriptionProps>;

package/dist/components/Alert/AlertDescription.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OverflowTooltip, OverflowTooltipContent, OverflowTooltipTrigger } from "../OverflowTooltip/index.js";
+import { Text } from "../Text/index.js";
+const AlertDescription = ({ ref, children, lineClamp, ...props })=>/*#__PURE__*/ jsxs(OverflowTooltip, {
+        children: [
+            /*#__PURE__*/ jsx(OverflowTooltipTrigger, {
+                children: /*#__PURE__*/ jsx(Text, {
+                    ...props,
+                    ref: ref,
+                    size: "sm",
+                    color: "secondary",
+                    lineClamp: lineClamp,
+                    children: children
+                })
+            }),
+            /*#__PURE__*/ jsx(OverflowTooltipContent, {
+                children: children
+            })
+        ]
+    });
+AlertDescription.displayName = "AlertDescription";
+export { AlertDescription };

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

@@ -0,0 +1,14 @@
+import { type FC, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+export type AlertColor = 'primary' | 'destructive' | 'info' | 'warning' | 'success';
+export interface AlertIconProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    ref?: Ref<HTMLDivElement>;
+    /** Override the default icon for the variant */
+    icon?: ReactNode;
+}
+/**
+ * Icon component for Alert.
+ *
+ * Automatically displays the appropriate icon based on the parent Alert's data-color attribute.
+ * Can be overridden with a custom icon via the `icon` prop.
+ */
+export declare const AlertIcon: FC<AlertIconProps>;

package/dist/components/Alert/AlertIcon.js

@@ -0,0 +1,57 @@
+import { jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { cva } from "class-variance-authority";
+import { CircleCheckBig, CircleDashed, Info, OctagonAlert, TriangleAlert } from "../../icons/index.js";
+const alertIconVariants = cva('shrink-0', {
+    variants: {
+        color: {
+            primary: 'text-icon-primary',
+            destructive: 'text-icon-danger',
+            info: 'text-icon-info',
+            warning: 'text-icon-warning',
+            success: 'text-icon-success'
+        }
+    },
+    defaultVariants: {
+        color: 'primary'
+    }
+});
+const iconMap = {
+    primary: CircleDashed,
+    destructive: OctagonAlert,
+    info: Info,
+    warning: TriangleAlert,
+    success: CircleCheckBig
+};
+const AlertIcon = ({ ref, icon, ...props })=>{
+    const internalRef = useRef(null);
+    const [color, setColor] = useState('primary');
+    useLayoutEffect(()=>{
+        const el = internalRef.current;
+        if (!el) return;
+        const alertParent = el.closest('[data-color]');
+        if (alertParent) {
+            const parentColor = alertParent.getAttribute('data-color');
+            if (parentColor && parentColor in iconMap) setColor(parentColor);
+        }
+    }, []);
+    const setRefs = (node)=>{
+        internalRef.current = node;
+        if ('function' == typeof ref) ref(node);
+        else if (ref) ref.current = node;
+    };
+    const IconComponent = iconMap[color];
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: setRefs,
+        className: "py-2 shrink-0",
+        children: icon || /*#__PURE__*/ jsx(IconComponent, {
+            size: "lg",
+            className: alertIconVariants({
+                color
+            })
+        })
+    });
+};
+AlertIcon.displayName = 'AlertIcon';
+export { AlertIcon };

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

@@ -0,0 +1,15 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface AlertTitleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    ref?: Ref<HTMLDivElement>;
+    children: ReactNode;
+    /** Maximum number of lines before truncation (default: 4). Set to 0 to disable truncation. */
+    lineClamp?: number;
+}
+/**
+ * Title component for Alert.
+ *
+ * Displays the main title text with medium weight.
+ * Supports text truncation with configurable max lines.
+ * Shows a tooltip with full text when content is truncated.
+ */
+export declare const AlertTitle: FC<AlertTitleProps>;

package/dist/components/Alert/AlertTitle.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OverflowTooltip, OverflowTooltipContent, OverflowTooltipTrigger } from "../OverflowTooltip/index.js";
+import { Text } from "../Text/index.js";
+const AlertTitle = ({ ref, children, lineClamp, ...props })=>/*#__PURE__*/ jsxs(OverflowTooltip, {
+        children: [
+            /*#__PURE__*/ jsx(OverflowTooltipTrigger, {
+                children: /*#__PURE__*/ jsx(Text, {
+                    ...props,
+                    ref: ref,
+                    size: "sm",
+                    weight: "medium",
+                    color: "primary",
+                    lineClamp: lineClamp,
+                    children: children
+                })
+            }),
+            /*#__PURE__*/ jsx(OverflowTooltipContent, {
+                children: children
+            })
+        ]
+    });
+AlertTitle.displayName = 'AlertTitle';
+export { AlertTitle };

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

@@ -0,0 +1,2 @@
+export declare const ALERT_MIN_WIDTH = 256;
+export declare const ALERT_MAX_WIDTH = 980;

package/dist/components/Alert/const.js

@@ -0,0 +1,3 @@
+const ALERT_MIN_WIDTH = 256;
+const ALERT_MAX_WIDTH = 980;
+export { ALERT_MAX_WIDTH, ALERT_MIN_WIDTH };

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

@@ -0,0 +1,8 @@
+export { Alert, type AlertColor, type AlertProps } from './Alert';
+export { AlertClose, type AlertCloseProps } from './AlertClose';
+export { AlertContent, type AlertContentProps } from './AlertContent';
+export { AlertControls, type AlertControlsProps } from './AlertControls';
+export { AlertDescription, type AlertDescriptionProps, } from './AlertDescription';
+export { AlertIcon, type AlertIconProps } from './AlertIcon';
+export { AlertTitle, type AlertTitleProps } from './AlertTitle';
+export { ALERT_MAX_WIDTH, ALERT_MIN_WIDTH } from './const';

package/dist/components/Alert/index.js

@@ -0,0 +1,9 @@
+import { Alert } from "./Alert.js";
+import { AlertClose } from "./AlertClose.js";
+import { AlertContent } from "./AlertContent.js";
+import { AlertControls } from "./AlertControls.js";
+import { AlertDescription } from "./AlertDescription.js";
+import { AlertIcon } from "./AlertIcon.js";
+import { AlertTitle } from "./AlertTitle.js";
+import { ALERT_MAX_WIDTH, ALERT_MIN_WIDTH } from "./const.js";
+export { ALERT_MAX_WIDTH, ALERT_MIN_WIDTH, Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle };