@nexus-cross/design-system 1.0.0 → 1.0.2

package/cursor-rules/nexus-ui-components.mdc

@@ -1,117 +1,182 @@
 ---
-description: '@nexus-cross/design-system 공용 컴포넌트 사용 규칙 — AI가 코드 생성 시 반드시 따라야 하는 컴포넌트 사용 지침'
+description: "@nexus-cross/design-system component usage rules — mandatory guidelines for AI code generation"
 alwaysApply: true
 ---
 
-# @nexus-cross/design-system 컴포넌트 사용 규칙
-
-> 이 프로젝트에는 `@nexus-cross/design-system` 디자인 시스템이 설치되어 있다.
-> 코드를 생성할 때 아래 규칙을 반드시 따른다.
-
-## 핵심 원칙
-
-1. **Figma 디자인에 아래 목록에 해당하는 UI 요소가 있으면, 반드시 `@nexus-cross/design-system`에서 import하여 사용한다.**
-2. **동일 기능의 컴포넌트를 직접 구현하지 않는다.** 예: 직접 `<button className="...">` 대신 `<Button>`을 사용.
-3. **스타일 커스텀은 `className` prop으로 오버라이드**한다. 래퍼 div를 추가하지 않는다.
-4. **`asChild` prop**을 지원하는 컴포넌트는 렌더링 요소를 변경할 수 있다.
-5. **variants 함수만 가져다 쓸 수도 있다** (예: `buttonVariants({ semantic: 'primary', variant: 'contained', size: 'lg' })`).
-
-## 컴포넌트 매핑 가이드
-
-| Figma 요소         | 사용할 컴포넌트                | import                                                                   |
-| ------------------ | ------------------------------ | ------------------------------------------------------------------------ |
-| 버튼               | `<Button>`                     | `import { Button } from '@nexus-cross/design-system'`                    |
-| 텍스트 입력 필드   | `<TextInput>`                  | `import { TextInput } from '@nexus-cross/design-system'`                 |
-| 텍스트 영역        | `<TextArea>`                   | `import { TextArea } from '@nexus-cross/design-system'`                  |
-| 셀렉트/드롭다운    | `<Select>` + `<SelectItem>`    | `import { Select, SelectItem } from '@nexus-cross/design-system'`        |
-| 체크박스           | `<CheckBox>`                   | `import { CheckBox } from '@nexus-cross/design-system'`                  |
-| 라디오 그룹        | `<RadioGroup>` + `<RadioItem>` | `import { RadioGroup, RadioItem } from '@nexus-cross/design-system'`     |
-| 토글/스위치        | `<Switch>`                     | `import { Switch } from '@nexus-cross/design-system'`                    |
-| 칩/태그/뱃지       | `<Chip>`                       | `import { Chip } from '@nexus-cross/design-system'`                      |
-| 로딩 스피너        | `<Spinner>`                    | `import { Spinner } from '@nexus-cross/design-system'`                   |
-| 구분선             | `<Divider>`                    | `import { Divider } from '@nexus-cross/design-system'`                   |
-| 툴팁               | `<Tooltip>`                    | `import { Tooltip } from '@nexus-cross/design-system'`                   |
-| 팝오버             | `<Popover>`                    | `import { Popover } from '@nexus-cross/design-system'`                   |
-| 아코디언/접기      | `<Accordion>`                  | `import { Accordion } from '@nexus-cross/design-system'`                 |
-| 드로어/바텀시트    | `<Drawer>`                     | `import { Drawer } from '@nexus-cross/design-system'`                    |
-| 모달/다이얼로그    | `openModal()`                  | `import { openModal } from '@nexus-cross/design-system'`                 |
-| 토스트/알림        | `toast()`                      | `import { toast } from '@nexus-cross/design-system'`                     |
-| 테이블             | `<Table>`                      | `import { Table, TableRow, TdColumn } from '@nexus-cross/design-system'` |
-| 무한 스크롤        | `<InfiniteScroll>`             | `import { InfiniteScroll } from '@nexus-cross/design-system'`            |
-| 텍스트 말줄임      | `<Ellipsis>`                   | `import { Ellipsis } from '@nexus-cross/design-system'`                  |
-| 페이지네이션       | `<Pagination>`                 | `import { Pagination } from '@nexus-cross/design-system'`                |
-| 숫자 입력          | `<NumberInput>`                | `import { NumberInput } from '@nexus-cross/design-system'`               |
-| 아바타/프로필      | `<Avatar>`                     | `import { Avatar } from '@nexus-cross/design-system'`                    |
-| 숫자 카운트        | `<Counter>`                    | `import { Counter } from '@nexus-cross/design-system'`                   |
-| 카운트다운         | `<Countdown>`                  | `import { Countdown } from '@nexus-cross/design-system'`                 |
-| 마퀴/흐르는 텍스트 | `<Marquee>`                    | `import { Marquee } from '@nexus-cross/design-system'`                   |
-| 탭                 | `<Tab>`                        | `import { Tab } from '@nexus-cross/design-system'`                       |
-| 캐러셀/슬라이더    | `<Carousel>`                   | `import { Carousel, CarouselSlide } from '@nexus-cross/design-system'`   |
-| 가상 스크롤 리스트 | `<VirtualList>`                | `import { VirtualList } from '@nexus-cross/design-system'`               |
-| 가상 스크롤 그리드 | `<VirtualGrid>`                | `import { VirtualGrid } from '@nexus-cross/design-system'`               |
-| 데이터 리스트      | `<DataList>`                   | `import { DataList } from '@nexus-cross/design-system'`                  |
-| 스켈레톤 로딩      | `<Skeleton>`                   | `import { Skeleton } from '@nexus-cross/design-system'`                  |
-
-## 유틸리티 & 훅
-
-| 기능                    | 사용                              | import                                                                              |
-| ----------------------- | --------------------------------- | ----------------------------------------------------------------------------------- |
-| 클래스 병합             | `cn()`                            | `import { cn } from '@nexus-cross/design-system'`                                   |
-| 모달 훅                 | `useModal()`                      | `import { useModal } from '@nexus-cross/design-system'`                             |
-| 뷰포트 감지             | `useInView()`                     | `import { useInView } from '@nexus-cross/design-system'`                            |
-| 디바이스 체크           | `useCheckDevice()`                | `import { useCheckDevice } from '@nexus-cross/design-system'`                       |
-| 외부 클릭               | `useClickOutside()`               | `import { useClickOutside } from '@nexus-cross/design-system'`                      |
-| NumberInput 외부 바인딩 | `numberInputBind(ref, direction)` | `import { numberInputBind, type NumberInputRef } from '@nexus-cross/design-system'` |
-
-## asChild 패턴
-
-`asChild`를 지원하는 컴포넌트: **Button**, **Chip**
+# @nexus-cross/design-system Component Rules
+
+> This project uses `@nexus-cross/design-system`.
+> All generated code MUST follow the rules below.
+
+## Core Principles
+
+1. **If a UI element matches any component in the mapping guide below, you MUST import and use it from `@nexus-cross/design-system`.**
+2. **Never re-implement a component that already exists.** e.g. use `<Button>` instead of `<button className="...">`.
+3. **Use the `className` prop for style overrides.** Do not add wrapper divs.
+4. **Use `asChild` prop** to change the rendered element (supported by Button, Chip).
+5. **Variant functions can be used standalone** (e.g. `buttonVariants({ variant: 'primary', size: 'lg' })`).
+
+## Component Mapping Pre-step (MANDATORY)
+
+**Before writing a single line of code**, map every UI element in the design to a NEXUS component.
+
+1. Identify **all interactive and visual elements** from the design (Figma / MCP output / screenshot).
+2. For each element, ask: **"Does this map to a component in the mapping guide below?"**
+3. Document the mapping as a table or list, then start coding.
+4. Before using any native HTML element (`<button>`, `<img>`, `<span>`, etc.), you MUST verify there is no NEXUS replacement.
+
+Example mapping:
+```
+Detected Element          → NEXUS Component
+──────────────────────────────────────────
+Circular profile images (8)  → <Avatar>
+Category filter tabs (5)     → <Tab>
+Icon-only buttons (4)        → <Button variant="ghost">
+Yes/No status badges (12)    → <Chip variant="filled" size="sm">
+Search input field (1)       → <TextInput>
+Dividers (2)                 → <Divider>
+```
+
+## Component Mapping Guide
+
+| UI Element | Component | import |
+|---|---|---|
+| Button | `<Button>` | `import { Button } from '@nexus-cross/design-system'` |
+| Text input | `<TextInput>` | `import { TextInput } from '@nexus-cross/design-system'` |
+| Text area | `<TextArea>` | `import { TextArea } from '@nexus-cross/design-system'` |
+| Select / Dropdown | `<Select>` + `<SelectItem>` | `import { Select, SelectItem } from '@nexus-cross/design-system'` |
+| Checkbox | `<CheckBox>` | `import { CheckBox } from '@nexus-cross/design-system'` |
+| Radio group | `<RadioGroup>` + `<RadioItem>` | `import { RadioGroup, RadioItem } from '@nexus-cross/design-system'` |
+| Toggle / Switch | `<Switch>` | `import { Switch } from '@nexus-cross/design-system'` |
+| Chip / Tag / Badge | `<Chip>` | `import { Chip } from '@nexus-cross/design-system'` |
+| Loading spinner | `<Spinner>` | `import { Spinner } from '@nexus-cross/design-system'` |
+| Divider | `<Divider>` | `import { Divider } from '@nexus-cross/design-system'` |
+| Tooltip | `<Tooltip>` | `import { Tooltip } from '@nexus-cross/design-system'` |
+| Popover | `<Popover>` | `import { Popover } from '@nexus-cross/design-system'` |
+| Accordion / Collapsible | `<Accordion>` | `import { Accordion } from '@nexus-cross/design-system'` |
+| Drawer / Bottom sheet | `<Drawer>` | `import { Drawer } from '@nexus-cross/design-system'` |
+| Modal / Dialog | `openModal()` | `import { openModal } from '@nexus-cross/design-system'` |
+| Toast / Notification | `toast()` | `import { toast } from '@nexus-cross/design-system'` |
+| Table | `<Table>` | `import { Table, TableRow, TdColumn } from '@nexus-cross/design-system'` |
+| Infinite scroll | `<InfiniteScroll>` | `import { InfiniteScroll } from '@nexus-cross/design-system'` |
+| Text ellipsis | `<Ellipsis>` | `import { Ellipsis } from '@nexus-cross/design-system'` |
+| Pagination | `<Pagination>` | `import { Pagination } from '@nexus-cross/design-system'` |
+| Number input | `<NumberInput>` | `import { NumberInput } from '@nexus-cross/design-system'` |
+| Avatar / Profile | `<Avatar>` | `import { Avatar } from '@nexus-cross/design-system'` |
+| Counter | `<Counter>` | `import { Counter } from '@nexus-cross/design-system'` |
+| Countdown | `<Countdown>` | `import { Countdown } from '@nexus-cross/design-system'` |
+| Marquee | `<Marquee>` | `import { Marquee } from '@nexus-cross/design-system'` |
+| Tab | `<Tab>` | `import { Tab } from '@nexus-cross/design-system'` |
+| Carousel / Slider | `<Carousel>` | `import { Carousel, CarouselSlide } from '@nexus-cross/design-system'` |
+| Virtual scroll list | `<VirtualList>` | `import { VirtualList } from '@nexus-cross/design-system'` |
+| Virtual scroll grid | `<VirtualGrid>` | `import { VirtualGrid } from '@nexus-cross/design-system'` |
+| Data list | `<DataList>` | `import { DataList } from '@nexus-cross/design-system'` |
+| Skeleton loader | `<Skeleton>` | `import { Skeleton } from '@nexus-cross/design-system'` |
+
+## Visual Pattern → Component Mapping
+
+The table above maps by Figma element name, which can miss **visual patterns**. If you see any pattern below, you MUST use the corresponding component.
+
+| Visual Pattern on Screen | Component | Common Mistake |
+|---|---|---|
+| Circular/square profile image, user icon | `<Avatar>` | Using `<Image>` + `rounded-full` manually |
+| Icon-only button (hamburger, X, settings, app launcher, etc.) | `<Button variant="ghost">` or `<Button variant="outlined">` | Using native `<button>` |
+| Horizontal filter/tab group (single selection) | `<Tab>` | Repeating `<button>` manually |
+| Small label / badge / status indicator (Yes/No, Active, New, etc.) | `<Chip>` | Using native `<span>` |
+| Number increment/decrement UI (+/- buttons) | `<NumberInput>` + `numberInputBind` | Using `<input type="number">` + custom buttons |
+| Data list with loading/empty states | `<DataList>` | Using `{list.map()}` + manual conditional rendering |
+| Overflowing text | `<Ellipsis>` | Applying `truncate` / `line-clamp` directly |
+
+## Utilities & Hooks
+
+| Feature | Usage | import |
+|---|---|---|
+| Class merge | `cn()` | `import { cn } from '@nexus-cross/design-system'` |
+| Modal hook | `useModal()` | `import { useModal } from '@nexus-cross/design-system'` |
+| Viewport detection | `useInView()` | `import { useInView } from '@nexus-cross/design-system'` |
+| Device check | `useCheckDevice()` | `import { useCheckDevice } from '@nexus-cross/design-system'` |
+| Outside click | `useClickOutside()` | `import { useClickOutside } from '@nexus-cross/design-system'` |
+
+## asChild Pattern
+
+Components supporting `asChild`: **Button**, **Chip**
 
 ```tsx
-// Button을 <a> 태그로 렌더링
-<Button asChild semantic="primary" variant="contained">
+// Render Button as <a>
+<Button asChild variant="primary">
   <a href="/about">About</a>
 </Button>
 
-// Chip을 <li>로 렌더링
+// Render Chip as <li>
 <Chip asChild variant="accent" size="sm">
-  <li>리스트 아이템</li>
+  <li>List item</li>
 </Chip>
 ```
 
-## variants 함수만 사용하기
+## Using Variant Functions Only
 
-컴포넌트를 사용하지 않고 variant 클래스만 필요할 때:
+When you only need variant classes without the component:
 
 ```tsx
-import { buttonVariants } from '@nexus-cross/design-system'
-
-// 직접 <a> 태그에 Button 스타일 적용
-;<a
-  href="/link"
-  className={buttonVariants({
-    semantic: 'primary',
-    variant: 'outlined',
-    size: 'sm',
-  })}
->
-  링크
+import { buttonVariants } from '@nexus-cross/design-system';
+
+<a href="/link" className={buttonVariants({ variant: 'outline', size: 'sm' })}>
+  Link
 </a>
 ```
 
-사용 가능한 variants 함수: `buttonVariants`, `chipVariants`, `switchVariants`, `textInputVariants`, `textAreaVariants`, `checkBoxVariants`, `radioGroupVariants`, `radioItemVariants`, `dividerVariants`, `selectTriggerVariants`, `selectContentVariants`, `tooltipContentVariants`, `popoverContentVariants`, `drawerContentVariants`
+Available variant functions: `buttonVariants`, `chipVariants`, `switchVariants`, `textInputVariants`, `textAreaVariants`, `checkBoxVariants`, `radioGroupVariants`, `radioItemVariants`, `dividerVariants`, `selectTriggerVariants`, `selectContentVariants`, `tooltipContentVariants`, `popoverContentVariants`, `drawerContentVariants`
+
+## When Customization Is Needed
+
+1. **Style-only difference**: Override with `className` prop.
+2. **Project-specific variant**: Create a project wrapper component that uses the NEXUS component internally.
+3. **Completely different structure**: Use native elements ONLY when NEXUS component props and `className` override **cannot produce the desired result by any means**.
+
+### Checklist Before Using Native Elements
 
-## 커스텀이 필요한 경우
+Before using any native HTML element (`<button>`, `<img>`, `<span>`, etc.), you MUST confirm all of the following:
 
-1. **스타일만 다를 때**: `className` prop으로 오버라이드
-2. **variant가 프로젝트 전용일 때**: 프로젝트 래퍼 컴포넌트 생성 (공용 컴포넌트를 내부에서 사용)
-3. **구조가 완전히 다를 때**: `<button>` 등 네이티브 요소 직접 사용 가능 (강제 아님)
+- [ ] No matching component exists in both the "Component Mapping Guide" and "Visual Pattern → Component Mapping" tables above?
+- [ ] Cannot achieve the desired style by passing `className` to a NEXUS component?
+- [ ] Cannot use the NEXUS component by placing surrounding elements (icons, labels) outside of it?
+
+### Common Misjudgments (DO NOT make these mistakes)
+
+```
+WRONG: "It only has an icon, so it's not a Button"
+RIGHT: → <Button variant="ghost" size="sm"> + icon children
+
+WRONG: "There's a filter icon next to it, so Tab structure doesn't match"
+RIGHT: → Place the icon outside and use <Tab>
+
+WRONG: "It's a small label, not a Chip"
+RIGHT: → <Chip variant="filled" size="sm"> matches exactly
+
+WRONG: "It displays an image directly, not an Avatar"
+RIGHT: → <Avatar src={url} alt={name} size="sm" />
+```
+
+## className Override Rules
+
+`@nexus-cross/design-system` components internally use Tailwind classes with the `nx:` prefix.
+The `cn()` function automatically resolves cross-prefix conflicts, so **consumers should pass regular Tailwind classes without `!` (important).**
+
+```tsx
+// CORRECT — pass without !
+<Avatar className="size-9" />
+<Button className="bg-red-500 px-8" />
+
+// FORBIDDEN — do not use ! (important modifier)
+<Avatar className="!size-9" />
+<Button className="!bg-red-500 !px-8" />
+```
 
-## 환경별 CSS import (필수)
+## CSS Import by Environment (Required)
 
-UI 컴포넌트 스타일은 사용처 환경에 따라 두 가지 entry point 중 하나를 선택한다.
+Choose one of two CSS entry points depending on the project environment:
 
-| 환경 | import |
+| Environment | import |
 |---|---|
 | Tailwind v3 / Plain CSS / CSS Modules | `@nexus-cross/design-system/styles` |
 | Tailwind v4 | `@nexus-cross/design-system/styles/layer` |
@@ -120,17 +185,18 @@ UI 컴포넌트 스타일은 사용처 환경에 따라 두 가지 entry point
 // TW v3 / Plain CSS / CSS Modules
 import '@nexus-cross/design-system/styles'
 
-// TW v4 (@layer nexus 래핑 — className 유틸리티 오버라이드 보장)
+// TW v4 (wrapped in @layer nexus — ensures className utility overrides)
 import '@nexus-cross/design-system/styles/layer'
 ```
 
-Tailwind v4 프로젝트는 `globals.css`에 layer 순서도 선언한다:
+For Tailwind v4 projects, also declare layer order in `globals.css`:
 ```css
 @layer base, nexus, components, utilities;
 ```
 
-## 금지 사항
+## Prohibited
 
-- `@nexus-cross/design-system`에 이미 있는 컴포넌트를 직접 구현하지 않는다
-- Radix UI, Headless UI 등을 직접 import하여 동일 기능 컴포넌트를 만들지 않는다
-- `@nexus-cross/design-system` 컴포넌트의 내부 구현을 복사하지 않는다
+- Do NOT re-implement any component that exists in `@nexus-cross/design-system`
+- Do NOT import Radix UI, Headless UI, etc. to build equivalent components
+- Do NOT copy internal implementations of `@nexus-cross/design-system` components
+- **Do NOT use `!` (Tailwind important modifier) in `className` overrides** — `cn()` resolves prefix conflicts automatically

package/dist/chunks/chunk-55IEEVNR.js

@@ -0,0 +1,7 @@
+'use strict';
+
+// src/styles/.generated/built.ts
+var css = "/*\n * @nexus-cross/design-system \u2014 Pure CSS\n *\n * BEM \uD074\uB798\uC2A4 \uB124\uC774\uBC0D(.nexus-*)\uC73C\uB85C CSS specificity \uAE30\uBC18 \uB3D9\uC791.\n * \uC18C\uBE44\uC790 CSS\uB294 \uB514\uC790\uC778 \uC2DC\uC2A4\uD15C \uC774\uD6C4\uC5D0 \uB85C\uB4DC\uB418\uBBC0\uB85C className\uC73C\uB85C \uC624\uBC84\uB77C\uC774\uB4DC \uAC00\uB2A5.\n */\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   Component Tokens (:root)\n   \uC18C\uBE44\uC790\uAC00 :root\uC5D0\uC11C \uC624\uBC84\uB77C\uC774\uB4DC \uAC00\uB2A5\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n:root {\n  /* \u2500\u2500 Button: Color \u2500\u2500 */\n  --color-comp-btn-focus-ring: var(--color-accent-primary);\n\n  --color-comp-btn-primary-base: var(--color-accent-primary);\n  --color-comp-btn-primary-hover: var(--color-accent-primary-hover);\n  --color-comp-btn-primary-pressed: var(--color-accent-primary-pressed);\n  --color-comp-btn-primary-on: var(--color-accent-on-primary);\n  --color-comp-btn-primary-text: var(\n    --color-accent-primary-intense,\n    var(--color-accent-primary)\n  );\n  --color-comp-btn-primary-subtle-fill: var(--color-accent-primary-disabled);\n  --color-comp-btn-primary-subtle-bg: var(--color-accent-primary-bg);\n\n  --color-comp-btn-secondary-base: var(--color-accent-secondary);\n  --color-comp-btn-secondary-hover: var(--color-accent-secondary-hover);\n  --color-comp-btn-secondary-pressed: var(--color-accent-secondary-pressed);\n  --color-comp-btn-secondary-on: var(--color-accent-on-secondary);\n  --color-comp-btn-secondary-text: var(\n    --color-accent-secondary-intense,\n    var(--color-accent-secondary)\n  );\n  --color-comp-btn-secondary-subtle-fill: var(\n    --color-accent-secondary-disabled\n  );\n  --color-comp-btn-secondary-subtle-bg: var(--color-accent-secondary-bg);\n\n  --color-comp-btn-normal-base: var(--color-surface-subtle);\n  --color-comp-btn-normal-hover: var(--color-surface-subtle-hover);\n  --color-comp-btn-normal-pressed: var(--color-surface-subtle-hover);\n  --color-comp-btn-normal-on: var(--color-text-primary);\n  --color-comp-btn-normal-text: var(--color-text-primary);\n  --color-comp-btn-normal-subtle-fill: var(--color-surface-subtle);\n  --color-comp-btn-normal-subtle-bg: var(--color-surface-subtle-hover);\n  --color-comp-btn-normal-border: var(--color-border-default);\n  --color-comp-btn-normal-border-hover: var(\n    --color-border-default-hover,\n    var(--color-border-default)\n  );\n\n  --color-comp-btn-danger-base: var(--color-status-danger);\n  --color-comp-btn-danger-hover: var(--color-status-danger-hover);\n  --color-comp-btn-danger-pressed: var(--color-status-danger-pressed);\n  --color-comp-btn-danger-on: var(--color-static-white);\n  --color-comp-btn-danger-text: var(\n    --color-status-danger-intense,\n    var(--color-status-danger)\n  );\n  --color-comp-btn-danger-subtle-fill: var(--color-status-danger-disabled);\n  --color-comp-btn-danger-subtle-bg: var(--color-status-danger-bg);\n\n  /* \u2500\u2500 Button: Radius \u2500\u2500 */\n  --radius-comp-btn-xl: 0.75rem;\n  --radius-comp-btn-lg: 0.5rem;\n  --radius-comp-btn-md: 0.5rem;\n  --radius-comp-btn-sm: 0.25rem;\n\n  /* \u2500\u2500 Button: Spacing \u2500\u2500 */\n  --spacing-comp-btn-gap: var(--spacing-gap-sm, 0.5rem);\n  --spacing-comp-btn-xl-h: 3rem;\n  --spacing-comp-btn-xl-px: var(--spacing-padding-lg, 1.5rem);\n  --spacing-comp-btn-lg-h: 2.5rem;\n  --spacing-comp-btn-lg-px: var(--spacing-padding-lg, 1.5rem);\n  --spacing-comp-btn-md-h: 1.875rem;\n  --spacing-comp-btn-md-px: var(--spacing-padding-sm, 0.75rem);\n  --spacing-comp-btn-sm-px: var(--spacing-padding-xs, 0.5rem);\n  --spacing-comp-btn-sm-py: var(--spacing-padding-2xs, 0.25rem);\n\n  /* \u2500\u2500 Button: Font \u2500\u2500 */\n  --text-comp-btn-xl: var(--text-text-base, 1rem);\n  --text-comp-btn-lg: var(--text-text-base, 1rem);\n  --text-comp-btn-md: var(--text-text-sm, 0.875rem);\n  --text-comp-btn-sm: var(--text-text-xs, 0.75rem);\n\n  /* \u2500\u2500 Button: Misc \u2500\u2500 */\n  --shadow-comp-btn: none;\n  --opacity-comp-btn-disabled: 0.5;\n\n  /* \u2500\u2500 Shared: Shadow \u2500\u2500 */\n  --shadow-comp-sm: var(--shadow-elevation-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));\n  --shadow-comp-md: var(--shadow-elevation-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));\n  --shadow-comp-lg: var(--shadow-elevation-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));\n\n  /* \u2500\u2500 Shared: Overlay \u2500\u2500 */\n  --color-comp-overlay: var(--color-overlay-dim, rgba(0, 0, 0, 0.6));\n\n  /* \u2500\u2500 ErrorBoundary \u2500\u2500 */\n  --color-comp-error-border: var(--color-status-danger);\n  --color-comp-error-bg: var(--color-status-danger-bg, #fef2f2);\n  --color-comp-error-text: var(--color-status-danger-intense, #991b1b);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   \uCEF4\uD3EC\uB10C\uD2B8 \uC2A4\uD0C0\uC77C\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* \u2500\u2500\u2500 Shared: sr-only \u2500\u2500\u2500 */\n.nexus-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Button\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--spacing-comp-btn-gap);\n  white-space: nowrap;\n  user-select: none;\n  box-shadow: var(--shadow-comp-btn);\n  transition-property: color, background-color, border-color;\n  transition-duration: 200ms;\n}\n.nexus-btn:disabled,\n.nexus-btn[aria-disabled='true'] {\n  pointer-events: none;\n  opacity: var(--opacity-comp-btn-disabled);\n}\n.nexus-btn:focus-visible {\n  outline: 2px solid\n    color-mix(in srgb, var(--color-comp-btn-focus-ring) 50%, transparent);\n  outline-offset: 2px;\n}\n\n/* Variant: contained */\n.nexus-btn--contained {\n  background: var(--_btn-base);\n  color: var(--_btn-on);\n}\n.nexus-btn--contained:hover {\n  background: var(--_btn-hover);\n}\n.nexus-btn--contained:active {\n  background: var(--_btn-pressed);\n}\n\n/* Variant: outlined */\n.nexus-btn--outlined {\n  border: 1px solid var(--_btn-border);\n  color: var(--_btn-text);\n  background: var(--_btn-outlined-bg);\n}\n.nexus-btn--outlined:hover {\n  background: var(--_btn-outlined-hover-bg);\n  border-color: var(--_btn-border-hover);\n}\n.nexus-btn--outlined:active {\n  background: var(--_btn-outlined-pressed-bg);\n  border-color: var(--_btn-border-hover);\n}\n\n/* Variant: subtle */\n.nexus-btn--subtle {\n  background: var(--_btn-subtle-fill);\n  color: var(--_btn-text);\n}\n.nexus-btn--subtle:hover {\n  background: var(--_btn-light-bg);\n}\n.nexus-btn--subtle:active {\n  background: var(--_btn-light-bg);\n}\n\n/* Variant: ghost */\n.nexus-btn--ghost {\n  background: transparent;\n  color: var(--_btn-text);\n}\n.nexus-btn--ghost:hover {\n  background: var(--_btn-ghost-hover-bg);\n}\n.nexus-btn--ghost:active {\n  background: var(--_btn-ghost-pressed-bg);\n}\n\n/* Sizes */\n.nexus-btn--xl {\n  height: var(--spacing-comp-btn-xl-h);\n  padding-inline: var(--spacing-comp-btn-xl-px);\n  font-size: var(--text-comp-btn-xl);\n  font-weight: 600;\n  border-radius: var(--radius-comp-btn-xl);\n}\n.nexus-btn--lg {\n  height: var(--spacing-comp-btn-lg-h);\n  padding-inline: var(--spacing-comp-btn-lg-px);\n  font-size: var(--text-comp-btn-lg);\n  font-weight: 600;\n  border-radius: var(--radius-comp-btn-lg);\n}\n.nexus-btn--md {\n  height: var(--spacing-comp-btn-md-h);\n  padding-inline: var(--spacing-comp-btn-md-px);\n  font-size: var(--text-comp-btn-md);\n  font-weight: 500;\n  border-radius: var(--radius-comp-btn-md);\n}\n.nexus-btn--sm {\n  padding-inline: var(--spacing-comp-btn-sm-px);\n  padding-block: var(--spacing-comp-btn-sm-py);\n  font-size: var(--text-comp-btn-sm);\n  font-weight: 500;\n  border-radius: var(--radius-comp-btn-sm);\n}\n\n/* Radius override */\n.nexus-btn--circle {\n  border-radius: 9999px !important;\n}\n\n/* Semantic palette \u2014 compound selectors (cascade \uBC29\uC9C0) */\n.nexus-btn--primary {\n  --_btn-base: var(--color-comp-btn-primary-base);\n  --_btn-hover: var(--color-comp-btn-primary-hover);\n  --_btn-pressed: var(--color-comp-btn-primary-pressed);\n  --_btn-on: var(--color-comp-btn-primary-on);\n  --_btn-text: var(--color-comp-btn-primary-text);\n  --_btn-subtle-fill: var(--color-comp-btn-primary-subtle-fill);\n  --_btn-light-bg: var(--color-comp-btn-primary-subtle-bg);\n  --_btn-border: var(--color-accent-primary-focus, var(--color-accent-primary));\n  --_btn-border-hover: var(\n    --color-accent-primary-focus,\n    var(--color-accent-primary)\n  );\n  --_btn-outlined-bg: var(--color-surface-default);\n  --_btn-outlined-hover-bg: var(--color-comp-btn-primary-subtle-bg);\n  --_btn-outlined-pressed-bg: var(--color-surface-default);\n  --_btn-ghost-hover-bg: var(--color-comp-btn-primary-subtle-bg);\n  --_btn-ghost-pressed-bg: var(--color-comp-btn-primary-subtle-fill);\n}\n.nexus-btn--secondary {\n  --_btn-base: var(--color-comp-btn-secondary-base);\n  --_btn-hover: var(--color-comp-btn-secondary-hover);\n  --_btn-pressed: var(--color-comp-btn-secondary-pressed);\n  --_btn-on: var(--color-comp-btn-secondary-on);\n  --_btn-text: var(--color-comp-btn-secondary-text);\n  --_btn-subtle-fill: var(--color-comp-btn-secondary-subtle-fill);\n  --_btn-light-bg: var(--color-comp-btn-secondary-subtle-bg);\n  --_btn-border: var(\n    --color-accent-secondary-focus,\n    var(--color-accent-secondary)\n  );\n  --_btn-border-hover: var(\n    --color-accent-secondary-focus,\n    var(--color-accent-secondary)\n  );\n  --_btn-outlined-bg: var(--color-surface-default);\n  --_btn-outlined-hover-bg: var(--color-comp-btn-secondary-subtle-bg);\n  --_btn-outlined-pressed-bg: var(--color-surface-default);\n  --_btn-ghost-hover-bg: var(--color-comp-btn-secondary-subtle-bg);\n  --_btn-ghost-pressed-bg: var(--color-comp-btn-secondary-subtle-fill);\n}\n.nexus-btn--normal {\n  --_btn-base: var(--color-comp-btn-normal-base);\n  --_btn-hover: var(--color-comp-btn-normal-hover);\n  --_btn-pressed: var(--color-comp-btn-normal-pressed);\n  --_btn-on: var(--color-comp-btn-normal-on);\n  --_btn-text: var(--color-comp-btn-normal-text);\n  --_btn-subtle-fill: var(--color-comp-btn-normal-subtle-fill);\n  --_btn-light-bg: var(--color-comp-btn-normal-subtle-bg);\n  --_btn-border: var(--color-comp-btn-normal-border);\n  --_btn-border-hover: var(--color-comp-btn-normal-border-hover);\n  --_btn-outlined-bg: var(--color-surface-default);\n  --_btn-outlined-hover-bg: var(--color-comp-btn-normal-subtle-bg);\n  --_btn-outlined-pressed-bg: var(\n    --color-surface-pressed,\n    var(--color-surface-strong)\n  );\n  --_btn-ghost-hover-bg: var(--color-comp-btn-normal-subtle-bg);\n  --_btn-ghost-pressed-bg: var(\n    --color-surface-pressed,\n    var(--color-surface-strong)\n  );\n}\n.nexus-btn--danger {\n  --_btn-base: var(--color-comp-btn-danger-base);\n  --_btn-hover: var(--color-comp-btn-danger-hover);\n  --_btn-pressed: var(--color-comp-btn-danger-pressed);\n  --_btn-on: var(--color-comp-btn-danger-on);\n  --_btn-text: var(--color-comp-btn-danger-text);\n  --_btn-subtle-fill: var(--color-comp-btn-danger-subtle-fill);\n  --_btn-light-bg: var(--color-comp-btn-danger-subtle-bg);\n  --_btn-border: var(--color-status-danger-focus, var(--color-status-danger));\n  --_btn-border-hover: var(\n    --color-status-danger-focus,\n    var(--color-status-danger)\n  );\n  --_btn-outlined-bg: var(--color-surface-default);\n  --_btn-outlined-hover-bg: var(--color-comp-btn-danger-subtle-bg);\n  --_btn-outlined-pressed-bg: var(--color-surface-default);\n  --_btn-ghost-hover-bg: var(--color-comp-btn-danger-subtle-bg);\n  --_btn-ghost-pressed-bg: var(--color-comp-btn-danger-subtle-fill);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     TextInput\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* \u2500\u2500 Field wrapper \u2500\u2500 */\n.nexus-text-input-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.nexus-text-input-field__label {\n  font-size: var(--text-text-sm, 0.875rem);\n  font-weight: 600;\n  color: var(--color-text-muted);\n  line-height: 1;\n}\n.nexus-text-input-field__footer {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.nexus-text-input-field__description {\n  font-size: var(--text-text-xs, 0.75rem);\n  color: var(--color-text-muted);\n  line-height: 1.5;\n  letter-spacing: -0.12px;\n}\n.nexus-text-input-field__description--error {\n  color: var(--color-status-danger);\n}\n.nexus-text-input-field__count {\n  font-size: var(--text-text-xs, 0.75rem);\n  color: var(--color-text-muted);\n  margin-left: auto;\n  flex-shrink: 0;\n}\n.nexus-text-input-field__count--error {\n  color: var(--color-status-danger);\n}\n\n/* \u2500\u2500 Input box \u2500\u2500 */\n.nexus-text-input {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: var(--radius-corner-md, 0.5rem);\n  border: 1px solid var(--color-border-default);\n  background: var(--color-surface-default);\n  font-size: var(--text-text-sm, 0.875rem);\n  font-weight: 500;\n  line-height: 1;\n  color: var(--color-text-primary);\n  transition: border-color 200ms, box-shadow 200ms;\n}\n:where(.nexus-text-input) {\n  width: 100%;\n}\n.nexus-text-input:hover:not(.nexus-text-input--disabled):not(:focus-within) {\n  border-color: var(--color-border-default-hover);\n  box-shadow: 0 0 0 0.5px var(--color-border-default-hover);\n}\n.nexus-text-input--default:focus-within {\n  border-color: var(--color-accent-primary);\n  box-shadow: 0 0 0 0.5px var(--color-accent-primary);\n}\n.nexus-text-input--error {\n  border-color: var(--color-status-danger);\n}\n.nexus-text-input--error:focus-within {\n  border-color: var(--color-status-danger);\n  box-shadow: 0 0 0 0.5px var(--color-status-danger);\n}\n.nexus-text-input--disabled {\n  cursor: not-allowed;\n  background: var(--color-surface-strong);\n  border-color: var(--color-border-medium);\n  color: var(--color-text-muted);\n}\n\n/* \u2500\u2500 Sizes \u2500\u2500 */\n.nexus-text-input--xl {\n  padding: calc(var(--spacing-padding-md, 1rem) - 1px) var(--spacing-padding-md, 1rem);\n  font-size: var(--text-text-base, 1rem);\n}\n.nexus-text-input--lg {\n  padding: calc(var(--spacing-padding-sm, 0.75rem) - 1px) var(--spacing-padding-sm, 0.75rem);\n  font-size: var(--text-text-base, 1rem);\n}\n.nexus-text-input--md {\n  padding: calc(var(--spacing-padding-xs, 0.5rem) - 1px) var(--spacing-padding-sm, 0.75rem);\n  font-size: var(--text-text-sm, 0.875rem);\n}\n\n/* \u2500\u2500 Inner elements \u2500\u2500 */\n.nexus-text-input__inner {\n  flex: 1;\n  min-width: 0;\n  padding: 0;\n  background: transparent;\n  border: none;\n  outline: none;\n  color: inherit;\n  font: inherit;\n}\n.nexus-text-input__inner:focus-visible {\n  outline: none;\n}\n.nexus-text-input__inner::placeholder {\n  color: var(--color-text-muted);\n}\n.nexus-text-input__icon {\n  display: flex;\n  flex-shrink: 0;\n  color: var(--color-text-muted);\n}\n.nexus-text-input__clear {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n  border: none;\n  background: transparent;\n  color: var(--color-text-muted);\n  cursor: pointer;\n  padding: 0;\n  transition: color 150ms;\n}\n.nexus-text-input__clear:hover {\n  color: var(--color-icon-tertiary-hover);\n  background: transparent;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     TextArea\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-textarea {\n  border-radius: var(--radius-corner-md, 0.375rem);\n  border: 1px solid var(--color-border-default);\n  background: var(--color-surface-default);\n  padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);\n  font-size: var(--text-text-sm, 0.875rem);\n  color: var(--color-text-primary);\n  transition-property: border-color;\n  transition-duration: 200ms;\n  resize: none;\n}\n:where(.nexus-textarea) {\n  width: 100%;\n}\n.nexus-textarea::placeholder {\n  color: var(--color-text-tertiary);\n}\n.nexus-textarea:focus-visible {\n  outline: none;\n}\n.nexus-textarea:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.nexus-textarea--default:focus {\n  border-color: var(--color-text-primary);\n}\n.nexus-textarea--error {\n  border-color: var(--color-status-danger);\n}\n.nexus-textarea--error:focus {\n  border-color: var(--color-status-danger);\n}\n.nexus-textarea-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.nexus-textarea-count {\n  margin-top: 0.25rem;\n  text-align: right;\n  font-size: var(--text-text-xs, 0.75rem);\n  color: var(--color-text-tertiary);\n}\n.nexus-textarea-count__current {\n  color: var(--color-text-primary);\n  font-weight: 500;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     NumberInput\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-number-input {\n  display: flex;\n  align-items: center;\n  border-radius: var(--radius-corner-md, 0.375rem);\n  border: 1px solid var(--color-border-default);\n  background: var(--color-surface-default);\n  color: var(--color-text-primary);\n  transition: border-color 200ms, box-shadow 200ms;\n}\n:where(.nexus-number-input) {\n  width: 100%;\n}\n.nexus-number-input:hover:not(.nexus-number-input--disabled):not(:focus-within) {\n  box-shadow: 0 0 0 0.5px var(--color-border-default);\n}\n.nexus-number-input--default:focus-within {\n  border-color: var(--color-accent-primary);\n  box-shadow: 0 0 0 0.5px var(--color-accent-primary);\n}\n.nexus-number-input--error {\n  border-color: var(--color-status-danger);\n}\n.nexus-number-input--error:focus-within {\n  border-color: var(--color-status-danger);\n  box-shadow: 0 0 0 0.5px var(--color-status-danger);\n}\n.nexus-number-input--xl {\n  height: 3.5rem;\n  font-size: var(--text-text-base, 1rem);\n}\n.nexus-number-input--lg {\n  height: 3rem;\n  font-size: var(--text-text-base, 1rem);\n}\n.nexus-number-input--md {\n  height: 2.5rem;\n  font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-number-input--sm {\n  height: 2rem;\n  font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-number-input--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.nexus-number-input__field {\n  height: 100%;\n  width: 100%;\n  min-width: 0;\n  flex: 1;\n  background: transparent;\n  outline: none;\n}\n.nexus-number-input__field::placeholder {\n  color: var(--color-text-tertiary);\n}\n.nexus-number-input__field:focus-visible {\n  outline: none;\n}\n.nexus-number-input__field--xl {\n  padding-inline: var(--spacing-padding-lg, 1.25rem);\n}\n.nexus-number-input__field--lg {\n  padding-inline: var(--spacing-padding-md, 1rem);\n}\n.nexus-number-input__field--md {\n  padding-inline: var(--spacing-padding-sm, 0.75rem);\n}\n.nexus-number-input__field--sm {\n  padding-inline: 0.625rem;\n}\n.nexus-number-input__buttons {\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--color-border-default);\n  height: 100%;\n  flex-shrink: 0;\n}\n.nexus-number-input__step {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  padding-inline: 0.375rem;\n  color: var(--color-text-tertiary);\n  transition-property: color, background-color;\n  transition-duration: 150ms;\n}\n.nexus-number-input__step:hover {\n  color: var(--color-text-primary);\n  background: var(--color-surface-hover);\n}\n.nexus-number-input__step:disabled {\n  opacity: 0.4;\n  pointer-events: none;\n}\n.nexus-number-input__step--up {\n  border-top-right-radius: var(--radius-corner-md, 0.375rem);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.nexus-number-input__step--down {\n  border-bottom-right-radius: var(--radius-corner-md, 0.375rem);\n}\n.nexus-number-input__step-icon {\n  width: 0.75rem;\n  height: 0.75rem;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Divider\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-divider {\n  flex-shrink: 0;\n  border-color: var(--color-border-default);\n}\n.nexus-divider--horizontal {\n  width: 100%;\n  border-top-width: 1px;\n}\n.nexus-divider--vertical {\n  align-self: stretch;\n  border-left-width: 1px;\n}\n.nexus-divider--solid {\n  border-style: solid;\n}\n.nexus-divider--dashed {\n  border-style: dashed;\n}\n.nexus-divider--dotted {\n  border-style: dotted;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Avatar\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-avatar {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  background: var(--color-surface-hover);\n  color: var(--color-text-tertiary);\n}\n.nexus-avatar--xs {\n  width: 1.5rem;\n  height: 1.5rem;\n  font-size: 10px;\n}\n.nexus-avatar--sm {\n  width: 2rem;\n  height: 2rem;\n  font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-avatar--md {\n  width: 2.5rem;\n  height: 2.5rem;\n  font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-avatar--lg {\n  width: 3rem;\n  height: 3rem;\n  font-size: var(--text-text-base, 1rem);\n}\n.nexus-avatar--xl {\n  width: 4rem;\n  height: 4rem;\n  font-size: var(--text-text-lg, 1.125rem);\n}\n.nexus-avatar--circle {\n  border-radius: 9999px;\n}\n.nexus-avatar--square {\n  border-radius: var(--radius-corner-md, 0.375rem);\n}\n.nexus-avatar__icon--xs {\n  width: 1rem;\n  height: 1rem;\n}\n.nexus-avatar__icon--sm {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n.nexus-avatar__icon--md {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n.nexus-avatar__icon--lg {\n  width: 2rem;\n  height: 2rem;\n}\n.nexus-avatar__icon--xl {\n  width: 2.5rem;\n  height: 2.5rem;\n}\n.nexus-avatar__img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Switch\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-switch {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  cursor: pointer;\n  border-radius: 9999px;\n  transition-property: background-color;\n  transition-duration: 200ms;\n  border: 2px solid transparent;\n}\n.nexus-switch:has(input:disabled) {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.nexus-switch--sm {\n  height: 1.25rem;\n  width: 2.25rem;\n}\n.nexus-switch--md {\n  height: 1.5rem;\n  width: 2.75rem;\n}\n.nexus-switch--checked {\n  background: var(--color-accent-primary);\n}\n.nexus-switch--unchecked {\n  background: var(--color-border-default);\n}\n.nexus-switch__thumb {\n  pointer-events: none;\n  display: block;\n  border-radius: 9999px;\n  background: var(--color-static-white);\n  box-shadow: var(--shadow-comp-sm);\n  transition-property: transform;\n  transition-duration: 200ms;\n}\n.nexus-switch__thumb--sm {\n  width: 1rem;\n  height: 1rem;\n}\n.nexus-switch__thumb--md {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n.nexus-switch__thumb--sm-on {\n  transform: translateX(1rem);\n}\n.nexus-switch__thumb--md-on {\n  transform: translateX(1.25rem);\n}\n.nexus-switch__thumb--off {\n  transform: translateX(0);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     CheckBox\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-gap-sm, 0.5rem);\n  user-select: none;\n}\n.nexus-checkbox--sm {\n  font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-checkbox--md {\n  font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-checkbox--pointer {\n  cursor: pointer;\n}\n.nexus-checkbox--disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.nexus-checkbox__box {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--color-border-default);\n  transition-property: border-color, background-color;\n  transition-duration: 150ms;\n}\n.nexus-checkbox__box:has(~ .nexus-sr-only:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.nexus-checkbox__box--sm {\n  width: 1rem;\n  height: 1rem;\n}\n.nexus-checkbox__box--md {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n.nexus-checkbox__box--square {\n  border-radius: var(--radius-corner-sm, 0.25rem);\n}\n.nexus-checkbox__box--round {\n  border-radius: 9999px;\n}\n.nexus-checkbox__box--checked {\n  border-color: var(--color-accent-primary);\n  background: var(--color-accent-primary);\n  color: var(--color-static-white);\n}\n.nexus-checkbox__box--unchecked {\n  border-color: var(--color-border-default);\n  background: var(--color-surface-default);\n}\n.nexus-checkbox__icon--sm {\n  width: 0.75rem;\n  height: 0.75rem;\n}\n.nexus-checkbox__icon--md {\n  width: 0.875rem;\n  height: 0.875rem;\n}\n.nexus-checkbox__label {\n  color: var(--color-text-primary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     RadioGroup\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-radio-group {\n  display: flex;\n}\n.nexus-radio-group--horizontal {\n  flex-direction: row;\n  gap: var(--spacing-gap-lg, 1rem);\n}\n.nexus-radio-group--vertical {\n  flex-direction: column;\n  gap: var(--spacing-gap-sm, 0.5rem);\n}\n.nexus-radio-item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-gap-sm, 0.5rem);\n  user-select: none;\n}\n.nexus-radio-item--sm {\n  font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-radio-item--md {\n  font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-radio-item--pointer {\n  cursor: pointer;\n}\n.nexus-radio-item--disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.nexus-radio__circle {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  border: 1px solid var(--color-border-default);\n  transition-property: border-color;\n  transition-duration: 150ms;\n}\n.nexus-radio__circle:has(~ .nexus-sr-only:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.nexus-radio__circle--sm {\n  width: 1rem;\n  height: 1rem;\n}\n.nexus-radio__circle--md {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n.nexus-radio__circle--checked {\n  border-color: var(--color-accent-primary);\n  color: var(--color-accent-primary);\n}\n.nexus-radio__circle--unchecked {\n  border-color: var(--color-border-default);\n  background: var(--color-surface-default);\n}\n.nexus-radio__dot {\n  border-radius: 9999px;\n  background: currentColor;\n}\n.nexus-radio__dot--sm {\n  width: 0.375rem;\n  height: 0.375rem;\n}\n.nexus-radio__dot--md {\n  width: 0.5rem;\n  height: 0.5rem;\n}\n.nexus-radio__label {\n  color: var(--color-text-primary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Chip\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  white-space: nowrap;\n  font-weight: 500;\n  transition-property: color, background-color, border-color;\n  transition-duration: 150ms;\n  user-select: none;\n  border-radius: 9999px;\n  border: 1px solid transparent;\n}\n.nexus-chip[aria-disabled='true'] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n.nexus-chip--default {\n  border-color: var(--color-border-default);\n  background: var(--color-surface-default);\n  color: var(--color-text-primary);\n}\n.nexus-chip--filled {\n  border-color: transparent;\n  background: var(--color-surface-hover);\n  color: var(--color-text-primary);\n}\n.nexus-chip--outline {\n  border-color: var(--color-border-default);\n  background: transparent;\n  color: var(--color-text-primary);\n}\n.nexus-chip--accent {\n  border-color: transparent;\n  background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);\n  color: var(--color-accent-primary);\n}\n.nexus-chip--sm {\n  height: 1.5rem;\n  padding-inline: var(--spacing-padding-xs, 0.5rem);\n  font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-chip--md {\n  height: 1.75rem;\n  padding-inline: 0.625rem;\n  font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-chip--lg {\n  height: 2rem;\n  padding-inline: var(--spacing-padding-sm, 0.75rem);\n  font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-chip__close {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  padding: 0.125rem;\n  opacity: 0.6;\n  transition-property: opacity;\n  transition-duration: 150ms;\n}\n.nexus-chip__close:hover {\n  opacity: 1;\n}\n.nexus-chip__close-icon {\n  width: 0.75rem;\n  height: 0.75rem;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Pagination\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-pagination {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-gap-xs, 0.25rem);\n}\n.nexus-pagination--sm {\n  font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-pagination--md {\n  font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-page-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-corner-md, 0.375rem);\n  font-weight: 500;\n  transition-property: color, background-color;\n  transition-duration: 150ms;\n  user-select: none;\n  border: 1px solid transparent;\n}\n.nexus-page-btn:disabled {\n  opacity: 0.4;\n  pointer-events: none;\n}\n.nexus-page-btn--sm {\n  width: 1.75rem;\n  height: 1.75rem;\n  font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-page-btn--md {\n  width: 2.25rem;\n  height: 2.25rem;\n  font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-page-btn--active {\n  background: var(--color-accent-primary);\n  color: var(--color-static-white);\n  border-color: var(--color-accent-primary);\n}\n.nexus-page-btn--inactive {\n  color: var(--color-text-primary);\n}\n.nexus-page-btn--inactive:hover {\n  background: var(--color-surface-hover);\n}\n.nexus-page-icon--sm {\n  width: 0.875rem;\n  height: 0.875rem;\n}\n.nexus-page-icon--md {\n  width: 1rem;\n  height: 1rem;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Tab\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-tab-list {\n  position: relative;\n  display: flex;\n  border-bottom: 1px solid var(--color-border-default);\n}\n.nexus-tab-list--pill {\n  gap: var(--spacing-gap-xs, 0.25rem);\n  border-bottom: none;\n  background: var(--color-surface-hover);\n  border-radius: var(--radius-corner-lg, 0.5rem);\n  padding: 0.25rem;\n}\n.nexus-tab-trigger {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  white-space: nowrap;\n  font-weight: 500;\n  user-select: none;\n  outline: none;\n  transition-property: color, background-color, border-color;\n  transition-duration: 150ms;\n}\n.nexus-tab-trigger--line {\n  padding: 0.625rem var(--spacing-padding-md, 1rem);\n  color: var(--color-text-tertiary);\n  border-bottom: 2px solid transparent;\n  margin-bottom: -1px;\n}\n.nexus-tab-trigger--line:hover {\n  color: var(--color-text-primary);\n}\n.nexus-tab-trigger--line-active {\n  color: var(--color-text-primary);\n  border-bottom-color: var(--color-accent-primary);\n}\n.nexus-tab-trigger--pill {\n  padding: 0.375rem var(--spacing-padding-sm, 0.75rem);\n  border-radius: var(--radius-corner-md, 0.375rem);\n  color: var(--color-text-tertiary);\n}\n.nexus-tab-trigger--pill:hover {\n  color: var(--color-text-primary);\n}\n.nexus-tab-trigger--pill-active {\n  color: var(--color-text-primary);\n  background: var(--color-surface-default);\n  box-shadow: var(--shadow-comp-sm);\n}\n.nexus-tab-trigger--sm {\n  font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-tab-trigger--md {\n  font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-tab-trigger--disabled {\n  opacity: 0.4;\n  pointer-events: none;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Skeleton\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-skeleton {\n  position: relative;\n  overflow: hidden;\n  background: linear-gradient(\n    to right,\n    var(--color-surface-hover),\n    var(--color-surface-default),\n    var(--color-surface-hover)\n  );\n  background-size: 300% 100%;\n  animation: nexus-skeleton-shimmer 2.5s ease-in-out infinite;\n}\n.nexus-skeleton--rect {\n  border-radius: var(--radius-corner-md, 0.375rem);\n}\n.nexus-skeleton--circle {\n  border-radius: 9999px;\n}\n.nexus-skeleton__children {\n  opacity: 0;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Spinner\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-spinner {\n  animation: nexus-spin 1s linear infinite;\n  color: currentColor;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     ErrorBoundary\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-error-boundary {\n  padding: 1rem;\n  border-radius: var(--radius-corner-lg, 0.5rem);\n  border: 1px solid var(--color-comp-error-border);\n  background: var(--color-comp-error-bg);\n  color: var(--color-comp-error-text);\n  font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-error-boundary__title {\n  margin: 0;\n  font-weight: 600;\n}\n.nexus-error-boundary__message {\n  margin: 0.5rem 0 0;\n  opacity: 0.8;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Divider & Simple components\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-virtual-scroll {\n  overflow: auto;\n}\n.nexus-modal-portal-target {\n  position: absolute;\n  z-index: 9999;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     DataList\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-datalist-center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-block: var(--spacing-padding-xl, 2rem);\n}\n.nexus-datalist-empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-block: var(--spacing-padding-xl, 2rem);\n  font-size: var(--text-text-sm, 0.875rem);\n  color: var(--color-text-tertiary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     InfiniteScroll\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-infinite-scroll {\n  position: relative;\n}\n.nexus-infinite-sentinel {\n  position: relative;\n  height: 1px;\n  width: 100%;\n}\n.nexus-infinite-spinner {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-block: var(--spacing-padding-md, 1rem);\n}\n.nexus-infinite-spinner-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n  animation: nexus-spin 1s linear infinite;\n  border-radius: 9999px;\n  border: 2px solid var(--color-border-default);\n  border-top-color: var(--color-accent-primary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Countdown\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-countdown {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-gap-xs, 0.25rem);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n  font-variant-numeric: tabular-nums;\n}\n.nexus-countdown__separator {\n  color: var(--color-text-tertiary);\n  margin-inline: 0.125rem;\n}\n.nexus-countdown__label {\n  color: var(--color-text-tertiary);\n  font-size: var(--text-text-xs, 0.75rem);\n  margin-left: 0.125rem;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Select\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-select-trigger {\n  position: relative;\n  display: flex;\n  height: 2.5rem;\n  align-items: center;\n  justify-content: space-between;\n  border-radius: var(--radius-corner-sm, 0.25rem);\n  border: 1px solid var(--color-border-default);\n  color: var(--color-text-primary);\n  font-size: var(--text-text-sm, 0.875rem);\n  transition-property: border-color;\n  transition-duration: 200ms;\n}\n.nexus-select-trigger:hover {\n  border-color: var(--color-border-strong);\n}\n.nexus-select-trigger:has(:disabled) {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.nexus-select-trigger::placeholder {\n  color: var(--color-text-tertiary);\n}\n.nexus-select-trigger--default {\n  background: var(--color-surface-hover);\n}\n.nexus-select-trigger--outline {\n  background: var(--color-surface-default);\n}\n.nexus-select-trigger--sm {\n  width: 4rem;\n}\n.nexus-select-trigger--md {\n  width: 8rem;\n}\n.nexus-select-trigger--lg {\n  width: 12rem;\n}\n.nexus-select-trigger--full {\n  width: 100%;\n}\n.nexus-select-trigger--justify-end {\n  justify-content: flex-end;\n}\n.nexus-select-trigger__display {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: flex;\n  height: 100%;\n  width: calc(100% - 30px);\n  align-items: center;\n}\n.nexus-select-trigger__inner {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  flex-direction: row-reverse;\n  align-items: center;\n  justify-content: space-between;\n  border-radius: var(--radius-corner-sm, 0.25rem);\n  padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);\n}\n.nexus-select-trigger__inner:focus {\n  outline: none;\n}\n.nexus-select-chevron {\n  width: 0.75rem;\n  height: 0.75rem;\n  opacity: 0.5;\n  transition: transform 200ms;\n}\n.nexus-select-chevron--open {\n  transform: rotate(180deg);\n}\n\n.nexus-select-content {\n  position: relative;\n  z-index: 50;\n  max-height: 24rem;\n  overflow: hidden;\n  border-radius: var(--radius-corner-sm, 0.25rem);\n  border: 1px solid var(--color-border-default);\n  background: var(--color-surface-default);\n  box-shadow: var(--shadow-comp-lg);\n  transform-origin: top center;\n  will-change: transform, opacity;\n}\n.nexus-select-content[data-state='open'] {\n  animation: nexus-select-slide-in 150ms ease-out;\n}\n.nexus-select-content[data-state='closed'] {\n  animation: nexus-select-slide-out 100ms ease-in forwards;\n}\n@keyframes nexus-select-slide-in {\n  from { opacity: 0; transform: translateY(-4px) scaleY(0.96); }\n  to   { opacity: 1; transform: translateY(0) scaleY(1); }\n}\n@keyframes nexus-select-slide-out {\n  from { opacity: 1; transform: translateY(0) scaleY(1); }\n  to   { opacity: 0; transform: translateY(-4px) scaleY(0.96); }\n}\n.nexus-select-content--sm {\n  width: 4rem;\n}\n.nexus-select-content--md {\n  width: 8rem;\n}\n.nexus-select-content--lg {\n  width: 12rem;\n}\n.nexus-select-content--full {\n  width: var(--radix-popper-anchor-width);\n}\n.nexus-select-viewport {\n  padding: 0.25rem;\n}\n\n.nexus-select-item {\n  position: relative;\n  display: flex;\n  width: 100%;\n  cursor: pointer;\n  align-items: center;\n  border-radius: var(--radius-corner-sm, 0.25rem);\n  padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);\n  color: var(--color-text-primary);\n  font-size: var(--text-text-sm, 0.875rem);\n  transition-property: background-color;\n  transition-duration: 150ms;\n  outline: none;\n  user-select: none;\n}\n.nexus-select-item:hover,\n.nexus-select-item:focus,\n.nexus-select-item[data-highlighted] {\n  background: var(--color-surface-hover);\n}\n.nexus-select-item[data-disabled] {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Tooltip\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-tooltip-content {\n  z-index: 50;\n  display: flex;\n  overflow: hidden;\n  border-radius: var(--radius-corner-md, 0.375rem);\n  padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);\n  font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-tooltip--light {\n  border: 1px solid var(--color-border-default);\n  background: var(--color-static-white);\n  color: var(--color-static-black);\n  box-shadow: var(--shadow-comp-md);\n}\n.nexus-tooltip--dark {\n  border: none;\n  background: var(--color-static-black);\n  color: var(--color-static-white);\n}\n.nexus-tooltip-arrow--dark {\n  fill: var(--color-static-black);\n}\n.nexus-tooltip-arrow--light {\n  fill: var(--color-static-white);\n}\n.nexus-tooltip-trigger {\n  cursor: default;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Popover\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-popover-content {\n  z-index: 50;\n  border-radius: var(--radius-corner-lg, 0.5rem);\n  border: 1px solid var(--color-border-default);\n  padding: var(--spacing-padding-md, 1rem);\n  box-shadow: var(--shadow-comp-lg);\n  outline: none;\n  background: var(--color-surface-default);\n  color: var(--color-text-primary);\n  transform-origin: var(--radix-popover-content-transform-origin);\n  will-change: transform, opacity;\n}\n.nexus-popover-content[data-state='open'] {\n  animation: nexus-popover-in 150ms ease-out;\n}\n.nexus-popover-content[data-state='closed'] {\n  animation: nexus-popover-out 100ms ease-in forwards;\n}\n@keyframes nexus-popover-in {\n  from { opacity: 0; transform: scale(0.95); }\n  to   { opacity: 1; transform: scale(1); }\n}\n@keyframes nexus-popover-out {\n  from { opacity: 1; transform: scale(1); }\n  to   { opacity: 0; transform: scale(0.95); }\n}\n.nexus-popover-arrow {\n  fill: var(--color-surface-default);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Drawer\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-drawer-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  background: var(--color-comp-overlay);\n}\n.nexus-drawer-overlay--blur-sm {\n  backdrop-filter: blur(4px);\n}\n.nexus-drawer-overlay--blur-md {\n  backdrop-filter: blur(12px);\n}\n.nexus-drawer-content {\n  position: fixed;\n  z-index: 50;\n  display: flex;\n  flex-direction: column;\n  background: var(--color-surface-default);\n}\n.nexus-drawer-content--bottom {\n  inset-inline: 0;\n  bottom: 0;\n  margin-top: 6rem;\n  border-top-left-radius: 1rem;\n  border-top-right-radius: 1rem;\n  border-top: 1px solid var(--color-border-default);\n}\n.nexus-drawer-content--top {\n  inset-inline: 0;\n  top: 0;\n  margin-bottom: 6rem;\n  border-bottom-left-radius: 1rem;\n  border-bottom-right-radius: 1rem;\n  border-bottom: 1px solid var(--color-border-default);\n}\n.nexus-drawer-content--left {\n  inset-block: 0;\n  left: 0;\n  margin-right: 6rem;\n  width: 85vw;\n  max-width: 24rem;\n  border-top-right-radius: 1rem;\n  border-bottom-right-radius: 1rem;\n  border-right: 1px solid var(--color-border-default);\n}\n.nexus-drawer-content--right {\n  inset-block: 0;\n  right: 0;\n  margin-left: 6rem;\n  width: 85vw;\n  max-width: 24rem;\n  border-top-left-radius: 1rem;\n  border-bottom-left-radius: 1rem;\n  border-left: 1px solid var(--color-border-default);\n}\n.nexus-drawer-handle {\n  display: flex;\n  justify-content: center;\n}\n.nexus-drawer-handle--bottom {\n  padding-top: var(--spacing-padding-md, 1rem);\n}\n.nexus-drawer-handle--top {\n  padding-bottom: var(--spacing-padding-md, 1rem);\n}\n.nexus-drawer-handle__bar {\n  background: var(--color-border-strong);\n  height: 0.375rem;\n  width: 3rem;\n  border-radius: 9999px;\n}\n.nexus-drawer-title {\n  font-size: var(--text-text-lg, 1.125rem);\n  font-weight: 600;\n  color: var(--color-text-primary);\n}\n.nexus-drawer-description {\n  font-size: var(--text-text-sm, 0.875rem);\n  color: var(--color-text-secondary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Accordion\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-accordion-item {\n  border-bottom: 1px solid var(--color-border-default);\n}\n.nexus-accordion-header {\n  display: flex;\n}\n.nexus-accordion-trigger {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: space-between;\n  padding-block: var(--spacing-padding-md, 1rem);\n  transition: all 150ms;\n}\n.nexus-accordion-trigger[data-state='open'] > .nexus-accordion-chevron {\n  transform: rotate(180deg);\n}\n.nexus-accordion-chevron {\n  width: 0.75rem;\n  height: 0.75rem;\n  flex-shrink: 0;\n  transition: transform 200ms;\n}\n.nexus-accordion-content {\n  overflow: hidden;\n  transition: all 200ms;\n}\n.nexus-accordion-content[data-state='open'] {\n  animation: nexus-accordion-down 200ms ease-out;\n}\n.nexus-accordion-content[data-state='closed'] {\n  animation: nexus-accordion-up 200ms ease-in;\n}\n.nexus-accordion-content__inner {\n  padding-top: 0;\n  padding-bottom: var(--spacing-padding-md, 1rem);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Ellipsis\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-ellipsis {\n  position: relative;\n}\n.nexus-ellipsis__content {\n  overflow: hidden;\n  transition: height 300ms;\n}\n.nexus-ellipsis__trigger {\n  margin-top: 0.25rem;\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-gap-xs, 0.25rem);\n  font-size: var(--text-text-sm, 0.875rem);\n  color: var(--color-text-secondary);\n  transition-property: color;\n  transition-duration: 150ms;\n}\n.nexus-ellipsis__trigger:hover {\n  color: var(--color-text-primary);\n}\n.nexus-ellipsis__trigger--expanded > svg {\n  transform: rotate(180deg);\n}\n.nexus-ellipsis__chevron {\n  width: 0.875rem;\n  height: 0.875rem;\n  transition: transform 200ms;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Marquee\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-marquee {\n  overflow: hidden;\n}\n.nexus-marquee--pause-on-hover:hover > div {\n  animation-play-state: paused !important;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Carousel\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-carousel {\n  position: relative;\n}\n.nexus-carousel__viewport {\n  overflow: hidden;\n}\n.nexus-carousel__container {\n  display: flex;\n}\n.nexus-carousel-slide {\n  min-width: 0;\n  flex-shrink: 0;\n  flex-grow: 0;\n  flex-basis: 100%;\n}\n.nexus-carousel-btn {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 10;\n  width: 2rem;\n  height: 2rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  background: var(--color-surface-default);\n  border: 1px solid var(--color-border-default);\n  box-shadow: var(--shadow-comp-sm);\n  color: var(--color-text-primary);\n  transition-property: background-color;\n  transition-duration: 150ms;\n}\n.nexus-carousel-btn:hover {\n  background: var(--color-surface-hover);\n}\n.nexus-carousel-btn:disabled {\n  opacity: 0.4;\n  pointer-events: none;\n}\n.nexus-carousel-btn--prev {\n  left: 0.5rem;\n}\n.nexus-carousel-btn--next {\n  right: 0.5rem;\n}\n.nexus-carousel-btn__icon {\n  width: 1rem;\n  height: 1rem;\n}\n.nexus-carousel-dots {\n  display: flex;\n  justify-content: center;\n  gap: 0.375rem;\n  margin-top: var(--spacing-padding-sm, 0.75rem);\n}\n.nexus-carousel-dot {\n  width: 0.5rem;\n  height: 0.5rem;\n  border-radius: 9999px;\n  transition-property: background-color;\n  transition-duration: 150ms;\n}\n.nexus-carousel-dot--active {\n  background: var(--color-accent-primary);\n}\n.nexus-carousel-dot--inactive {\n  background: var(--color-border-default);\n}\n.nexus-carousel-dot--inactive:hover {\n  background: var(--color-text-tertiary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Toast\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-toast {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-gap-sm, 0.75rem);\n  border-radius: var(--radius-corner-lg, 0.5rem);\n  border: 1px solid var(--color-border-default);\n  padding: var(--spacing-padding-sm, 0.75rem) var(--spacing-padding-md, 1rem);\n  box-shadow: var(--shadow-comp-lg);\n  background: var(--color-surface-default);\n  color: var(--color-text-primary);\n}\n.nexus-toast__title {\n  font-size: var(--text-text-sm, 0.875rem);\n  font-weight: 500;\n}\n.nexus-toast__desc {\n  font-size: var(--text-text-xs, 0.75rem);\n  color: var(--color-text-secondary);\n}\n.nexus-toast--success {\n  border-color: color-mix(\n    in srgb,\n    var(--color-status-positive) 30%,\n    transparent\n  );\n  background: color-mix(in srgb, var(--color-status-positive) 10%, transparent);\n  color: var(--color-status-positive);\n}\n.nexus-toast--error {\n  border-color: color-mix(\n    in srgb,\n    var(--color-status-danger) 30%,\n    transparent\n  );\n  background: color-mix(in srgb, var(--color-status-danger) 10%, transparent);\n  color: var(--color-status-danger);\n}\n.nexus-toast--warning {\n  border-color: color-mix(\n    in srgb,\n    var(--color-status-caution) 30%,\n    transparent\n  );\n  background: color-mix(in srgb, var(--color-status-caution) 10%, transparent);\n  color: var(--color-status-caution);\n}\n.nexus-toast--info {\n  border-color: color-mix(\n    in srgb,\n    var(--color-accent-primary) 30%,\n    transparent\n  );\n  background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);\n  color: var(--color-accent-primary);\n}\n.nexus-toast__action-btn {\n  background: var(--color-accent-primary);\n  color: var(--color-accent-on-primary);\n  border-radius: var(--radius-corner-sm, 0.25rem);\n  padding: 0.375rem var(--spacing-padding-sm, 0.75rem);\n  font-size: var(--text-text-xs, 0.75rem);\n  font-weight: 500;\n}\n.nexus-toast__cancel-btn {\n  background: var(--color-surface-hover);\n  color: var(--color-text-secondary);\n  border-radius: var(--radius-corner-sm, 0.25rem);\n  padding: 0.375rem var(--spacing-padding-sm, 0.75rem);\n  font-size: var(--text-text-xs, 0.75rem);\n  font-weight: 500;\n}\n.nexus-toast__close-btn {\n  color: var(--color-text-tertiary);\n}\n.nexus-toast__close-btn:hover {\n  color: var(--color-text-primary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Table\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-table-wrap {\n  overflow-x: auto;\n}\n.nexus-table {\n  width: 100%;\n}\n.nexus-table-thead {\n  display: flex;\n  background: var(--color-surface-default);\n}\n.nexus-table-th {\n  display: flex;\n}\n.nexus-table-th--sortable {\n  cursor: pointer;\n}\n.nexus-table-th__sort-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-gap-xs, 0.25rem);\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n  text-align: inherit;\n  width: 100%;\n}\n.nexus-table-sort-icon {\n  width: 1rem;\n  height: 1rem;\n}\n.nexus-table-center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-block: 3rem;\n}\n.nexus-table-nodata {\n  color: var(--color-text-tertiary);\n}\n.nexus-table-loading-icon {\n  width: 2rem;\n  height: 2rem;\n  animation: nexus-spin 1s linear infinite;\n  border-radius: 9999px;\n  border: 2px solid var(--color-border-default);\n  border-top-color: var(--color-accent-primary);\n}\n.nexus-table-skeleton-row {\n  display: flex;\n  cursor: default;\n}\n.nexus-table-skeleton-td {\n  height: 100%;\n  width: 100%;\n  padding-block: var(--spacing-padding-md, 1rem);\n}\n.nexus-table-skeleton-bar {\n  height: 1rem;\n  width: 100%;\n}\n\n/* TableRow */\n.nexus-table-row {\n  border-bottom: 1px solid var(--color-border-default);\n  display: flex;\n  min-width: 0;\n}\n.nexus-table-row::-webkit-scrollbar {\n  display: none;\n}\n.nexus-table-row--default:hover {\n  background: var(--color-surface-hover);\n}\n.nexus-table-row--accent:hover {\n  background: color-mix(in srgb, var(--color-accent-primary) 5%, transparent);\n}\n\n/* TdColumn */\n.nexus-td {\n  min-width: 0;\n  width: 100%;\n}\n.nexus-td__inner {\n  border-radius: var(--radius-corner-md, 0.375rem);\n  padding: 2px 0.25rem;\n  transition-property: background-color;\n  transition-duration: 150ms;\n}\n.nexus-td__inner--flex {\n  display: flex;\n}\n.nexus-td__inner--highlight {\n  background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);\n  outline: 1px dashed var(--color-accent-primary);\n  outline-offset: -1px;\n}\n.nexus-td--nowrap {\n  white-space: nowrap;\n}\n.nexus-td--truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.nexus-td--wrap {\n  white-space: normal;\n  overflow-wrap: break-word;\n}\n.nexus-td--break-all {\n  white-space: normal;\n  word-break: break-all;\n}\n.nexus-td--center {\n  text-align: center;\n  justify-content: center;\n}\n.nexus-td--left {\n  text-align: left;\n  justify-content: flex-start;\n}\n.nexus-td--right {\n  text-align: right;\n  justify-content: flex-end;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Modal\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-modal-wrap {\n  pointer-events: none;\n  position: fixed;\n  inset: 0;\n  z-index: 99999;\n  display: flex;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n  color: var(--color-text-primary);\n}\n.nexus-modal-wrap--bottom-sheet {\n  align-items: flex-end;\n}\n.nexus-modal-wrap--slide-left {\n  height: 100%;\n  justify-content: flex-start;\n}\n.nexus-modal-wrap--slide-right {\n  height: 100%;\n  justify-content: flex-end;\n}\n.nexus-modal-wrap--full-page,\n.nexus-modal-wrap--full-page-reverse {\n  height: 100%;\n  justify-content: flex-start;\n}\n\n.nexus-modal-inner {\n  position: relative;\n  z-index: 2;\n  overflow: hidden;\n  pointer-events: auto;\n  border-radius: var(--radius-corner-lg, 12px);\n  border: 1px solid var(--color-border-default);\n  background: var(--color-surface-default);\n  color: var(--color-text-primary);\n}\n:where(.nexus-modal-inner) {\n  width: 100%;\n  min-height: 200px;\n}\n.nexus-modal-inner > div {\n  display: contents;\n}\n@media (min-width: 640px) {\n  :where(.nexus-modal-inner) {\n    width: 480px;\n    min-height: auto;\n  }\n}\n.nexus-modal-inner--bottom-sheet {\n  margin: 0;\n  width: 100%;\n  border-top-left-radius: 1rem;\n  border-top-right-radius: 1rem;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  border-top: 1px solid var(--color-border-default);\n  padding: 1.5rem 1rem 0;\n}\n.nexus-modal-inner--slide-left,\n.nexus-modal-inner--slide-right {\n  height: 100%;\n  border-radius: 0;\n}\n.nexus-modal-inner--full-page,\n.nexus-modal-inner--full-page-reverse {\n  height: 100%;\n  width: 100%;\n  border-radius: 0;\n  border-color: transparent;\n}\n@media (min-width: 640px) {\n  .nexus-modal-inner--full-page,\n  .nexus-modal-inner--full-page-reverse {\n    width: 100%;\n  }\n}\n.nexus-modal-inner--draggable {\n  min-width: 320px;\n  overflow: visible;\n}\n.nexus-modal-inner--has-footer {\n  padding-bottom: 88px;\n}\n.nexus-modal-inner--bottom-sheet.nexus-modal-inner--has-footer {\n  padding-bottom: 5rem;\n}\n\n.nexus-modal-header {\n  position: relative;\n  padding: 1.5rem 1.25rem 0;\n}\n.nexus-modal-header--bottom-sheet {\n  padding: 0;\n}\n.nexus-modal-header--draggable {\n  cursor: grab;\n  user-select: none;\n}\n.nexus-modal-header--draggable:active {\n  cursor: grabbing;\n}\n\n.nexus-modal-close-btn {\n  position: absolute;\n  top: 1.5rem;\n  right: 1.25rem;\n  z-index: 1;\n  margin-left: auto;\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  justify-content: flex-end;\n}\n.nexus-modal-close-btn--bottom-sheet {\n  position: relative;\n  top: 0;\n  right: 0;\n}\n.nexus-modal-close-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n  color: var(--color-text-muted);\n}\n\n.nexus-modal-title {\n  margin: 0;\n  padding-right: 42px;\n  font-size: var(--text-text-lg, 1.125rem);\n  font-weight: 600;\n  line-height: 26px;\n  letter-spacing: -0.002em;\n  color: var(--color-text-primary);\n}\n.nexus-modal-title--bottom-sheet {\n  padding-top: 0.375rem;\n  line-height: 1.75rem;\n  letter-spacing: -0.012em;\n}\n.nexus-modal-desc {\n  color: var(--color-text-muted);\n  font-size: var(--text-text-xs, 0.75rem);\n  margin-top: 0.25rem;\n}\n\n.nexus-modal-body {\n  position: relative;\n  overflow-y: auto;\n  padding: 1.5rem 1.25rem 0;\n}\n.nexus-modal-body::-webkit-scrollbar {\n  display: none;\n}\n.nexus-modal-body--no-footer {\n  padding-bottom: 1.5rem;\n}\n.nexus-modal-body--bottom-sheet {\n  margin-top: 1.5rem;\n  max-height: calc(100vh - 108px);\n  padding: 0 0 1.5rem;\n}\n.nexus-modal-body--slide,\n.nexus-modal-body--full-page {\n  height: 100%;\n  max-height: 100%;\n  overflow-y: auto;\n}\n.nexus-modal-body--full-page {\n  padding-bottom: 0;\n}\n\n.nexus-modal-footer {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  z-index: 2;\n  display: flex;\n  width: 100%;\n  padding: 1.5rem 1.25rem 1.25rem;\n}\n.nexus-modal-footer button {\n  height: 3rem;\n  flex: 1;\n}\n.nexus-modal-footer--bottom-sheet {\n  padding: 0.75rem 1rem 1.5rem;\n}\n.nexus-modal-footer--draggable {\n  position: relative;\n}\n\n.nexus-modal-dim {\n  pointer-events: auto;\n  position: fixed;\n  inset: 0;\n  z-index: 1;\n  display: block;\n  height: 100vh;\n  width: 100vw;\n  background: color-mix(\n    in srgb,\n    var(--color-static-black, #000) 75%,\n    transparent\n  );\n}\n.nexus-modal-dim--hidden {\n  display: none;\n}\n.nexus-modal-dim--draggable {\n  background: color-mix(\n    in srgb,\n    var(--color-static-black, #000) 30%,\n    transparent\n  );\n}\n\n.nexus-modal-bottom-sheet-handle {\n  display: flex;\n  width: 100%;\n  justify-content: center;\n  padding-top: 0.75rem;\n  padding-bottom: 0.5rem;\n}\n.nexus-modal-bottom-sheet-bar {\n  background: var(--color-border-default);\n  height: 0.375rem;\n  width: 4rem;\n  border-radius: 9999px;\n}\n\n.nexus-modal-component {\n  opacity: 0;\n}\n.nexus-modal-component--visible {\n  opacity: 1;\n}\n.nexus-modal-component--portal {\n  position: relative;\n}\n.nexus-modal-component--enter .nexus-modal-inner {\n  animation-direction: var(--modal-animation-direction);\n  animation-duration: var(--modal-animation-duration);\n  animation-name: var(--modal-animation-name);\n  animation-timing-function: var(--modal-animation-timing-function);\n}\n.nexus-modal-component--leave .nexus-modal-inner {\n  animation-direction: reverse;\n  animation-duration: var(--modal-animation-duration);\n  animation-fill-mode: var(--modal-animation-fill-mode);\n  animation-name: var(--modal-animation-name);\n  animation-timing-function: var(--modal-animation-timing-function);\n}\n\n.nexus-contents {\n  display: contents;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Animation utilities (Radix enter/exit)\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-animate-in {\n  animation: nexus-enter 200ms ease-out;\n  --nx-enter-opacity: 1;\n  --nx-enter-scale: 1;\n  --nx-enter-translate-x: 0;\n  --nx-enter-translate-y: 0;\n}\n.nexus-animate-out {\n  animation: nexus-exit 150ms ease-in forwards;\n  --nx-exit-opacity: 1;\n  --nx-exit-scale: 1;\n  --nx-exit-translate-x: 0;\n  --nx-exit-translate-y: 0;\n}\n.nexus-fade-in-0 {\n  --nx-enter-opacity: 0;\n}\n.nexus-fade-out-0 {\n  --nx-exit-opacity: 0;\n}\n.nexus-zoom-in-95 {\n  --nx-enter-scale: 0.95;\n}\n.nexus-zoom-out-95 {\n  --nx-exit-scale: 0.95;\n}\n.nexus-slide-in-from-top-2 {\n  --nx-enter-translate-y: -0.5rem;\n}\n.nexus-slide-in-from-bottom-2 {\n  --nx-enter-translate-y: 0.5rem;\n}\n.nexus-slide-in-from-left-2 {\n  --nx-enter-translate-x: -0.5rem;\n}\n.nexus-slide-in-from-right-2 {\n  --nx-enter-translate-x: 0.5rem;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   Keyframes\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@keyframes nexus-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes nexus-enter {\n  from {\n    opacity: var(--nx-enter-opacity, 1);\n    transform: translate3d(\n        var(--nx-enter-translate-x, 0),\n        var(--nx-enter-translate-y, 0),\n        0\n      )\n      scale3d(\n        var(--nx-enter-scale, 1),\n        var(--nx-enter-scale, 1),\n        var(--nx-enter-scale, 1)\n      );\n  }\n}\n\n@keyframes nexus-exit {\n  to {\n    opacity: var(--nx-exit-opacity, 1);\n    transform: translate3d(\n        var(--nx-exit-translate-x, 0),\n        var(--nx-exit-translate-y, 0),\n        0\n      )\n      scale3d(\n        var(--nx-exit-scale, 1),\n        var(--nx-exit-scale, 1),\n        var(--nx-exit-scale, 1)\n      );\n  }\n}\n\n@keyframes nexus-accordion-down {\n  from {\n    height: 0;\n  }\n  to {\n    height: var(--radix-accordion-content-height);\n  }\n}\n\n@keyframes nexus-accordion-up {\n  from {\n    height: var(--radix-accordion-content-height);\n  }\n  to {\n    height: 0;\n  }\n}\n\n@keyframes nexus-skeleton-shimmer {\n  0% {\n    background-position: 300% 0;\n  }\n  100% {\n    background-position: -300% 0;\n  }\n}\n\n@keyframes modal-fade {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes modal-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes modal-scale {\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n\n@keyframes modal-small-scale {\n  from {\n    transform: scale(0.9);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n\n@keyframes modal-pop-fade {\n  0% {\n    transform: scale(0.95);\n    opacity: 0;\n  }\n  60% {\n    transform: scale(1.03);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n@keyframes modal-bottom-sheet {\n  from {\n    transform: translateY(calc(100% + 60px));\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes modal-slide-left {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes modal-slide-right {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes modal-full-page {\n  from {\n    transform: translateY(60%);\n    opacity: 0.5;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n@keyframes modal-full-page-reverse {\n  from {\n    transform: translateY(-60%);\n    opacity: 0.5;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n";
+var built_default = css;
+
+exports.built_default = built_default;

package/dist/chunks/{chunk-D6FII7HW.js → chunk-BBLBTOP4.js}

@@ -28,7 +28,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var textInputVariants = classVarianceAuthority.cva("nexus-text-input", {
   variants: {
     size: {
-      sm: "nexus-text-input--sm",
       md: "nexus-text-input--md",
       lg: "nexus-text-input--lg",
       xl: "nexus-text-input--xl"
@@ -73,7 +72,6 @@ var TextInput = React__namespace.forwardRef(
     id,
     ...props
   }, ref) => {
-    const state = error ? "error" : "default";
     const fallbackId = React__namespace.useRef(
       `nexus-ti-${Math.random().toString(36).slice(2, 9)}`
     );
@@ -95,6 +93,7 @@ var TextInput = React__namespace.forwardRef(
     const currentValue = isControlled ? String(controlledValue) : internalValue;
     const charCount = currentValue.length;
     const isOverLimit = !!(maxLength && charCount > maxLength);
+    const state = error || isOverLimit ? "error" : "default";
     const hasField = !!(label || description || showCount);
     const handleChange = React__namespace.useCallback(
       (e) => {
@@ -119,6 +118,9 @@ var TextInput = React__namespace.forwardRef(
       onValueChange?.("");
       input.focus();
     }, [isControlled, onValueChange]);
+    const handleWrapperClick = React__namespace.useCallback(() => {
+      if (!disabled) inputRef.current?.focus();
+    }, [disabled]);
     const inputBox = /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -127,6 +129,7 @@ var TextInput = React__namespace.forwardRef(
           disabled && "nexus-text-input--disabled",
           !hasField && className
         ),
+        onClick: handleWrapperClick,
         children: [
           prefixIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-text-input__icon", children: prefixIcon }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -136,8 +139,8 @@ var TextInput = React__namespace.forwardRef(
               id: label ? inputId : id,
               className: "nexus-text-input__inner",
               disabled,
-              maxLength,
-              "aria-invalid": error || void 0,
+              maxLength: showCount ? void 0 : maxLength,
+              "aria-invalid": error || isOverLimit || void 0,
               "aria-describedby": description ? `${inputId}-desc` : void 0,
               value: isControlled ? controlledValue : void 0,
               defaultValue: !isControlled ? defaultValue : void 0,
@@ -171,7 +174,7 @@ var TextInput = React__namespace.forwardRef(
             id: `${inputId}-desc`,
             className: chunkCZC76ZD5_js.cn(
               "nexus-text-input-field__description",
-              error && "nexus-text-input-field__description--error"
+              (error || isOverLimit) && "nexus-text-input-field__description--error"
             ),
             children: description
           }

package/dist/chunks/{chunk-5JHN4FCY.mjs → chunk-K2TBLM3F.mjs}

@@ -19,10 +19,7 @@ function DataList({
     if (!list || loading) {
       if (skeletonElement) {
         return Array.from({ length: skeletonCount }).map(
-          (_, index) => React.cloneElement(skeletonElement, {
-            ...skeletonElement.props,
-            key: index
-          })
+          (_, index) => React.cloneElement(skeletonElement, { key: index })
         );
       }
       return loadingElement ?? /* @__PURE__ */ jsx("div", { className: cn("nexus-datalist-center"), children: /* @__PURE__ */ jsx(Spinner, { size: 32 }) });

package/dist/chunks/{chunk-MTX7GD3H.js → chunk-PEIEVKD5.js}

@@ -41,10 +41,7 @@ function DataList({
     if (!list || loading) {
       if (skeletonElement) {
         return Array.from({ length: skeletonCount }).map(
-          (_, index) => React__namespace.cloneElement(skeletonElement, {
-            ...skeletonElement.props,
-            key: index
-          })
+          (_, index) => React__namespace.cloneElement(skeletonElement, { key: index })
         );
       }
       return loadingElement ?? /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkCZC76ZD5_js.cn("nexus-datalist-center"), children: /* @__PURE__ */ jsxRuntime.jsx(chunkIOSIQLZL_js.Spinner, { size: 32 }) });