@moduix/react 1.1.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Blinks44
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,252 @@
+![moduix banner](https://raw.githubusercontent.com/Blinks44/moduix/main/apps/docs/public/banner.png)
+
+[![npm](https://img.shields.io/npm/v/@moduix/react?logo=npm&label=npm)](https://www.npmjs.com/package/@moduix/react)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-3178C6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
+[![Turborepo](https://img.shields.io/badge/Monorepo-Turborepo-EF4444)](https://turbo.build/)
+
+# moduix
+
+React implementation of the moduix component system for product interfaces, built on top of
+[Ark UI](https://ark-ui.com/) primitives.
+
+moduix gives you ready-made components with accessible behavior, native CSS styles, and a
+composition-first API. It supports two production workflows: install the package for managed
+updates, or copy registry component source when your application needs direct ownership.
+
+## Why It Exists
+
+moduix is built for real product screens: predictable behavior, readable composition, small
+runtime surface, and CSS that can be owned by the application. The library is public and actively
+developed around Ark UI primitives, shadcn-compatible source delivery, and practical defaults for
+teams that need consistent interfaces.
+
+## Principles
+
+- **Ark UI underneath.** Components target Ark UI composition and accessibility primitives instead of
+  reimplementing low-level interaction behavior.
+- **Small dependency surface.** Ark UI is the only external UI primitive layer. The package
+  keeps the runtime stack intentionally small and does not bring a styling framework with it.
+- **Two installation paths.** Use moduix as an npm package, or copy component source into your
+  project when direct ownership is more important than package-managed updates.
+- **Composable API.** Components are exposed as named parts, so complex UI can be assembled
+  without hiding important structure.
+- **Native CSS.** Styles are distributed as CSS, use CSS custom properties, and are designed to
+  work with your existing styling approach.
+- **shadcn-compatible source delivery.** shadcn/ui remains a major inspiration for readable
+  component composition. moduix keeps that ownership model available through its registry.
+
+## Installation
+
+moduix supports two installation paths:
+
+- Install the library as a regular npm package when you want package-managed updates.
+- Install component source into your own project with `shadcn` when you want direct ownership.
+
+| Choose this path            | When it fits best                                                                                                             |
+| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| npm package                 | You want the fastest setup, package-managed updates, imports from `@moduix/react`, and styles from `@moduix/react/style.css`. |
+| `shadcn` copy-owned install | You want generated source files inside your app, direct local customization, and imports from `@/components/moduix/*`.        |
+
+### npm package
+
+```bash
+npm install @moduix/react @ark-ui/react
+```
+
+`react`, `react-dom`, and `@ark-ui/react` are peer dependencies. They stay in your application
+bundle, so moduix does not ship duplicate React or Ark UI runtimes.
+
+### shadcn copy-owned install
+
+`shadcn` can install selected moduix components from the GitHub registry directly into your project.
+The files become part of your codebase instead of staying in `node_modules`.
+
+Make sure your project resolves the `@/*` alias to `src/*` in both `tsconfig.json` and
+`tsconfig.app.json`, and mirror it in your bundler config.
+
+Create `components.json` in the project root when your app does not already have one:
+
+```json
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}
+```
+
+```bash
+npx shadcn@latest add Blinks44/moduix/react-button
+npx shadcn@latest add Blinks44/moduix/react-accordion
+```
+
+The registry install also pulls in the shared moduix foundation files those components need, such as
+styles, icons, and small utilities.
+
+Import the generated foundation stylesheet once in your application entry point:
+
+```tsx
+import '@/lib/moduix/styles/style.css';
+```
+
+If you want the optional reset in the copy-owned path, import it explicitly before the main
+stylesheet:
+
+```tsx
+import '@/lib/moduix/styles/reset.css';
+import '@/lib/moduix/styles/style.css';
+```
+
+With the aliases above, generated files land in `src/components/moduix/*` and `src/lib/moduix/*`.
+
+## Usage
+
+Import the required foundation stylesheet once in your application entry point:
+
+```tsx
+import '@moduix/react/style.css';
+```
+
+This stylesheet is required. It provides the shared design tokens and base styles that component
+CSS depends on.
+
+If you want the optional reset, import it explicitly before the main stylesheet:
+
+```tsx
+import '@moduix/react/reset.css';
+import '@moduix/react/style.css';
+```
+
+Then import and compose the components you need:
+
+```tsx
+import { Button, Dialog, Portal } from '@moduix/react';
+
+export function Example() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <Button>Open dialog</Button>
+      </Dialog.Trigger>
+      <Portal>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content>
+            <Dialog.Title>Project settings</Dialog.Title>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>
+  );
+}
+```
+
+`style.css` ships the shared design tokens and base styles. Component imports still bring along only
+the component CSS they use.
+
+## Styling
+
+Components accept `className` where customization is expected and expose stable `data-slot`
+attributes for targeted styling. Theme values are regular CSS custom properties:
+
+```css
+:root {
+  --color-primary: oklch(0.205 0 0);
+  --button-radius: 0.5rem;
+}
+```
+
+Library CSS is organized with cascade layers:
+
+```css
+@layer ui.reset, ui.tokens, ui.components;
+```
+
+This keeps defaults predictable while still letting application styles override tokens,
+classes, or component-level variables.
+
+## What Is Included
+
+The package exports composed components for common product UI needs, including Accordion, Avatar,
+Button, Checkbox, Combobox, Dialog, Drawer, Field, FileUpload, Menu, NumberInput, Popover,
+QrCode, Select, Tabs, Toast, Tooltip, TreeView, and supporting layout and display primitives.
+
+## Documentation
+
+- Documentation: https://moduix.blinks44.workers.dev/
+- npm package: https://www.npmjs.com/package/@moduix/react
+- React package README: `packages/react/README.md`
+- Docs app README: `apps/docs/README.md`
+
+## Repository Quick Start
+
+From the monorepo root:
+
+```bash
+npm install
+npm run build:react
+npm run dev
+```
+
+## Acknowledgements
+
+This project could not exist without the work of these teams and communities:
+
+- [Ark UI](https://ark-ui.com/) for the composition and accessibility primitives now shaping the library contract.
+- [shadcn/ui](https://ui.shadcn.com/) for the API inspiration and the culture of practical,
+  readable component composition.
+- [Tailwind CSS](https://tailwindcss.com/) for the reset.css implementation.
+- [Fumadocs](https://fumadocs.dev/) for the documentation foundation.
+- [TanStack](https://tanstack.com/) for the application tooling used by the docs.
+- [Voidzero](https://voidzero.dev/) for the JavaScript tooling used by the workspace.
+
+## Contributing
+
+Contributions are welcome, especially bug reports, accessibility fixes, documentation
+improvements, and focused component improvements.
+
+Before opening a pull request:
+
+1. Install dependencies from the repository root:
+
+   ```bash
+   npm install
+   ```
+
+2. Build the React package when your change affects `packages/react` or documentation examples:
+
+   ```bash
+   npm run build:react
+   ```
+
+3. Run the required checks:
+
+   ```bash
+   npm run fmt:fix
+   npm run lint:check
+   npm run tsc:check
+   ```
+
+Keep pull requests small and specific. For component changes, update the related stories, exports,
+local component notes, public docs, and registry output so the package and docs stay in sync.
+
+Agent-facing repository guidance lives in `AGENTS.md` and `.agents/skills`. Generated or
+agent-assisted changes should still preserve the library's direct Ark-first component contracts,
+small APIs, and readable implementation style.

package/dist/components/accordion/Accordion.css

@@ -0,0 +1,190 @@
+@layer ui.components {
+  @keyframes YlosVa_accordion-item-content-open {
+    from {
+      height: 0;
+      opacity: var(--accordion-item-content-closed-opacity, .01);
+    }
+
+    to {
+      height: var(--height);
+      opacity: var(--accordion-item-content-open-opacity, 1);
+    }
+  }
+
+  @keyframes YlosVa_accordion-item-content-closed {
+    from {
+      height: var(--height);
+      opacity: var(--accordion-item-content-open-opacity, 1);
+    }
+
+    to {
+      height: 0;
+      opacity: var(--accordion-item-content-closed-opacity, .01);
+    }
+  }
+
+  @keyframes YlosVa_accordion-item-content-open-horizontal {
+    from {
+      width: 0;
+      opacity: var(--accordion-item-content-closed-opacity, .01);
+    }
+
+    to {
+      width: var(--width);
+      opacity: var(--accordion-item-content-open-opacity, 1);
+    }
+  }
+
+  @keyframes YlosVa_accordion-item-content-closed-horizontal {
+    from {
+      width: var(--width);
+      opacity: var(--accordion-item-content-open-opacity, 1);
+    }
+
+    to {
+      width: 0;
+      opacity: var(--accordion-item-content-closed-opacity, .01);
+    }
+  }
+
+  .YlosVa_root {
+    box-sizing: border-box;
+    width: var(--accordion-width, 22rem);
+    max-width: var(--accordion-max-width, 100%);
+    min-width: 0;
+    color: var(--accordion-color, var(--color-foreground));
+    flex-direction: column;
+    display: flex;
+
+    &[data-orientation="horizontal"] {
+      width: var(--accordion-horizontal-width, auto);
+      height: var(--accordion-horizontal-height, 20rem);
+      max-height: var(--accordion-horizontal-max-height, 100%);
+      flex-direction: row;
+    }
+  }
+
+  .YlosVa_item {
+    overflow-anchor: none;
+
+    &[data-orientation="vertical"]:not(:last-child) {
+      border-bottom: var(--accordion-item-border-width, var(--border-width-sm)) solid
+        var(--accordion-item-border-color, var(--color-border));
+    }
+
+    &[data-orientation="horizontal"] {
+      display: flex;
+
+      &:not(:last-child) {
+        border-inline-end: var(--accordion-item-border-width, var(--border-width-sm)) solid
+          var(--accordion-item-border-color, var(--color-border));
+      }
+    }
+  }
+
+  .YlosVa_itemTrigger {
+    box-sizing: border-box;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--accordion-trigger-gap, var(--spacing-4));
+    width: 100%;
+    padding-block: var(--accordion-trigger-padding-y, var(--spacing-2));
+    padding-inline: var(--accordion-trigger-padding-x, var(--spacing-3));
+    background-color: var(--accordion-trigger-bg, var(--color-muted));
+    color: inherit;
+    font: inherit;
+    font-size: var(--accordion-trigger-font-size, var(--text-md));
+    line-height: var(--accordion-trigger-line-height, var(--line-height-text-md));
+    text-align: left;
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--transition-default),
+      color var(--transition-default);
+    border: 0;
+    outline: 0;
+    margin: 0;
+    display: flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--accordion-trigger-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:focus-visible {
+      z-index: 1;
+      outline: var(--accordion-focus-ring-width, var(--border-width-md)) solid
+        var(--accordion-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--accordion-focus-ring-offset, var(--border-width-sm)) * -1);
+      position: relative;
+    }
+
+    &:is([disabled], [data-disabled]) {
+      cursor: default;
+      opacity: var(--accordion-disabled-opacity, var(--opacity-disabled));
+    }
+
+    &[data-orientation="horizontal"] {
+      width: var(--accordion-horizontal-trigger-width, 2.5rem);
+      writing-mode: sideways-lr;
+      justify-content: center;
+      height: 100%;
+    }
+  }
+
+  .YlosVa_itemIndicator {
+    box-sizing: border-box;
+    width: var(--accordion-icon-size, .75rem);
+    height: var(--accordion-icon-size, .75rem);
+    transition: transform var(--accordion-icon-transition, var(--transition-default));
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+
+    & svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    &[data-state="open"] {
+      transform: var(--accordion-icon-open-transform, rotate(45deg) scale(1.1));
+    }
+  }
+
+  .YlosVa_itemContent {
+    box-sizing: border-box;
+    color: var(--accordion-item-content-color, var(--color-muted-foreground));
+    font-size: var(--accordion-item-content-font-size, var(--text-md));
+    line-height: var(--accordion-item-content-line-height, var(--line-height-text-md));
+    overflow: hidden;
+
+    &[hidden]:not([hidden="until-found"]) {
+      display: none;
+    }
+
+    &[data-state="open"][data-orientation="vertical"] {
+      animation: YlosVa_accordion-item-content-open
+        var(--accordion-item-content-transition, var(--transition-default));
+    }
+
+    &[data-state="closed"][data-orientation="vertical"] {
+      animation: YlosVa_accordion-item-content-closed
+        var(--accordion-item-content-transition, var(--transition-default));
+    }
+
+    &[data-state="open"][data-orientation="horizontal"] {
+      animation: YlosVa_accordion-item-content-open-horizontal
+        var(--accordion-item-content-transition, var(--transition-default));
+    }
+
+    &[data-state="closed"][data-orientation="horizontal"] {
+      animation: YlosVa_accordion-item-content-closed-horizontal
+        var(--accordion-item-content-transition, var(--transition-default));
+    }
+
+    &[data-orientation="horizontal"] > * {
+      width: var(--accordion-horizontal-content-width, 16rem);
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+import { Accordion } from "@ark-ui/react/accordion";
+
+//#region src/components/accordion/Accordion.d.ts
+declare const Accordion$1: import("react").ForwardRefExoticComponent<Omit<Accordion.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<Accordion.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Omit<Accordion.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Item: import("react").ForwardRefExoticComponent<Omit<Accordion.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ItemTrigger: import("react").ForwardRefExoticComponent<Omit<Accordion.ItemTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Accordion.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ItemContent: import("react").ForwardRefExoticComponent<Omit<Accordion.ItemContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Accordion$1 as Accordion };

package/dist/components/accordion/Accordion.js

@@ -0,0 +1,67 @@
+import { PlusIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Accordion_module_default from "./Accordion.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { Accordion } from "@ark-ui/react/accordion";
+//#region src/components/accordion/Accordion.tsx
+const AccordionRoot = forwardRef(function AccordionRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Accordion.Root, {
+		ref,
+		"data-slot": "accordion-root",
+		className: clsx(Accordion_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const AccordionRootProvider = forwardRef(function AccordionRootProvider({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Accordion.RootProvider, {
+		ref,
+		"data-slot": "accordion-root-provider",
+		className: clsx(Accordion_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const AccordionItem = forwardRef(function AccordionItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Accordion.Item, {
+		ref,
+		"data-slot": "accordion-item",
+		className: clsx(Accordion_module_default.item, normalizeClassName(className)),
+		...props
+	});
+});
+const AccordionItemTrigger = forwardRef(function AccordionItemTrigger({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Accordion.ItemTrigger, {
+		ref,
+		"data-slot": "accordion-item-trigger",
+		className: clsx(Accordion_module_default.itemTrigger, normalizeClassName(className)),
+		...props
+	});
+});
+const AccordionItemIndicator = forwardRef(function AccordionItemIndicator({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Accordion.ItemIndicator, {
+		ref,
+		"data-slot": "accordion-item-indicator",
+		className: clsx(Accordion_module_default.itemIndicator, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(PlusIcon, {})
+	});
+});
+const AccordionItemContent = forwardRef(function AccordionItemContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Accordion.ItemContent, {
+		ref,
+		"data-slot": "accordion-item-content",
+		className: clsx(Accordion_module_default.itemContent, normalizeClassName(className)),
+		...props
+	});
+});
+const Accordion$1 = Object.assign(AccordionRoot, {
+	Root: AccordionRoot,
+	RootProvider: AccordionRootProvider,
+	Item: AccordionItem,
+	ItemTrigger: AccordionItemTrigger,
+	ItemIndicator: AccordionItemIndicator,
+	ItemContent: AccordionItemContent
+});
+//#endregion
+export { Accordion$1 as Accordion };

package/dist/components/accordion/Accordion.module.js

@@ -0,0 +1,15 @@
+import './Accordion.css';
+//#region src/components/accordion/Accordion.module.css
+var Accordion_module_default = {
+	"accordion-item-content-closed": "YlosVa_accordion-item-content-closed",
+	"accordion-item-content-closed-horizontal": "YlosVa_accordion-item-content-closed-horizontal",
+	"accordion-item-content-open": "YlosVa_accordion-item-content-open",
+	"accordion-item-content-open-horizontal": "YlosVa_accordion-item-content-open-horizontal",
+	"item": "YlosVa_item",
+	"itemContent": "YlosVa_itemContent",
+	"itemIndicator": "YlosVa_itemIndicator",
+	"itemTrigger": "YlosVa_itemTrigger",
+	"root": "YlosVa_root"
+};
+//#endregion
+export { Accordion_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Accordion } from "./Accordion.js";
+export { Accordion };

package/dist/components/alert/Alert.css

@@ -0,0 +1,108 @@
+@layer ui.components {
+  .EnZEzW_root {
+    box-sizing: border-box;
+    align-items: start;
+    gap: var(--alert-gap, var(--spacing-3));
+    border: var(--alert-border-width, var(--border-width-sm)) solid
+      var(--alert-border-color, var(--alert-border-color-default, var(--color-border)));
+    border-radius: var(--alert-radius, var(--radius-lg));
+    width: 100%;
+    min-width: 0;
+    padding: var(--alert-padding, var(--spacing-4));
+    background-color: var(--alert-bg, var(--alert-bg-default, var(--color-card)));
+    color: var(--alert-color, var(--alert-color-default, var(--color-card-foreground)));
+    box-shadow: var(--alert-shadow, none);
+    grid-template-columns: auto minmax(0, 1fr);
+    display: grid;
+
+    &[data-status="neutral"] {
+      --alert-bg-default: var(--color-card);
+      --alert-border-color-default: var(--color-border);
+      --alert-color-default: var(--color-card-foreground);
+      --alert-indicator-color-default: var(--color-muted-foreground);
+    }
+
+    &[data-status="info"] {
+      --alert-bg-default: color-mix(in oklab, var(--color-primary) 4%, var(--color-background));
+      --alert-border-color-default: color-mix(in oklab, var(--color-primary) 32%, transparent);
+      --alert-color-default: var(--color-foreground);
+      --alert-indicator-color-default: var(--color-primary);
+    }
+
+    &[data-status="success"] {
+      --alert-bg-default: color-mix(in oklab, var(--color-success) 10%, var(--color-background));
+      --alert-border-color-default: color-mix(in oklab, var(--color-success) 34%, transparent);
+      --alert-color-default: var(--color-foreground);
+      --alert-indicator-color-default: var(--color-success);
+    }
+
+    &[data-status="warning"] {
+      --alert-bg-default: color-mix(in oklab, var(--color-warning) 13%, var(--color-background));
+      --alert-border-color-default: color-mix(in oklab, var(--color-warning) 38%, transparent);
+      --alert-color-default: var(--color-foreground);
+      --alert-indicator-color-default: var(--color-warning);
+    }
+
+    &[data-status="error"] {
+      --alert-bg-default: color-mix(in oklab, var(--color-destructive) 9%, var(--color-background));
+      --alert-border-color-default: color-mix(in oklab, var(--color-destructive) 35%, transparent);
+      --alert-color-default: var(--color-foreground);
+      --alert-indicator-color-default: var(--color-destructive);
+    }
+
+    &:not(:has([data-part="indicator"])) {
+      & [data-part="content"] {
+        grid-column: 1 / -1;
+      }
+    }
+  }
+
+  .EnZEzW_indicator {
+    width: var(--alert-indicator-size, 1rem);
+    height: var(--alert-indicator-size, 1rem);
+    color: var(--alert-indicator-color, var(--alert-indicator-color-default, currentColor));
+    justify-content: center;
+    align-items: center;
+    margin-block-start: var(--alert-indicator-offset, .125rem);
+    display: inline-flex;
+
+    & :where(svg) {
+      width: var(--alert-indicator-size, 1rem);
+      height: var(--alert-indicator-size, 1rem);
+      pointer-events: none;
+      flex-shrink: 0;
+    }
+  }
+
+  .EnZEzW_content {
+    gap: var(--alert-content-gap, var(--spacing-1));
+    min-width: 0;
+    display: grid;
+  }
+
+  .EnZEzW_title {
+    min-width: 0;
+    color: var(--alert-title-color, var(--alert-color, var(--alert-color-default)));
+    font-size: var(--alert-title-font-size, var(--text-sm));
+    font-weight: var(--alert-title-font-weight, var(--weight-semibold));
+    line-height: var(--alert-title-line-height, var(--line-height-text-sm));
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .EnZEzW_description {
+    min-width: 0;
+    color: var(--alert-description-color, var(--color-muted-foreground));
+    font-size: var(--alert-description-font-size, var(--text-sm));
+    line-height: var(--alert-description-line-height, var(--line-height-text-sm));
+    overflow-wrap: anywhere;
+
+    & > :first-child {
+      margin-top: 0;
+    }
+
+    & > :last-child {
+      margin-bottom: 0;
+    }
+  }
+}