@dreamtree-org/twreact-ui 1.3.1 → 1.3.3

package/DESIGN.md

@@ -41,7 +41,7 @@ rounded:
 spacing:
   grid: 4px
   steps: [4, 8, 12, 16, 20, 24, 32]
-brands: [default, practicepro]
+brand: dreamtree.brand.json in each product repo (build its CSS with `npx @dreamtree-org/twreact-ui brand build`)
 ---
 
 <!-- Generated by twreact-ui scripts/build-tokens.mjs from tokens/tokens.json. Edit the tokens or this generator, not this file. -->
@@ -76,7 +76,7 @@ Every Dreamtree product screen, and every prototype generated by Dreamtree Studi
 
 - **One accent per screen.** `primary` marks the primary action, the active nav item, the current step and progress. Red (`error`) is only for errors, overdue items and destructive actions.
 - Badge and status fills use the 100 step with 800 text, which keeps contrast at or above 4.5:1.
-- Products change their look with a **brand file** (`tokens/brands/<product>.json`), which overrides `--dt-*` variables. Brands available: `default`, `practicepro`.
+- Each product keeps its look in its own repo, in **`dreamtree.brand.json`** (its `--dt-*` overrides: colour scales, roles, font). `npx @dreamtree-org/twreact-ui brand build` turns it into the CSS the product loads after twreact-ui's CSS. Never restyle a product with raw colours; change its brand file.
 
 ## 3. Type, space and shape
 

package/README.md

@@ -79,7 +79,8 @@ bundle. `import { Button } from '@dreamtree-org/twreact-ui'` costs about 8 KB gz
 100 KB. `require()`, Jest and plain Node keep getting the CommonJS build (`dist/index.js`).
 
 There are no per-component subpaths such as `@dreamtree-org/twreact-ui/button`. The root import
-already tree-shakes. Existing file paths (`dist/index.css`, `dist/tokens/*`, `tokens/*`,
+already tree-shakes. The only subpaths are the two **optional entry points** below, which exist
+because they need an extra dependency. Existing file paths (`dist/index.css`, `dist/tokens/*`, `tokens/*`,
 `dist/index.esm.js`, `package.json`, …) still resolve through the `exports` map.
 
 ### Next.js App Router
@@ -103,6 +104,27 @@ Server Component to these Client Components. You also cannot dot into a client e
 In Vite, Rollup can log `Module level directives cause errors when bundled, "use client" … was ignored`.
 This message is harmless. To hide it, filter `MODULE_LEVEL_DIRECTIVE` in `build.rollupOptions.onwarn`.
 
+### Optional entry points: charts and rich text
+
+Charts and the rich-text editor wrap third-party libraries, so they live on their own entry points
+and use **optional peer dependencies**. If you never import them you install nothing extra, and
+nothing changes in your bundle — the root `@dreamtree-org/twreact-ui` import never touches them.
+
+| Entry point | Exports | Install first |
+|---|---|---|
+| `@dreamtree-org/twreact-ui/charts` | `LineChart`, `BarChart`, `AreaChart`, `DonutChart`, `Sparkline` | `npm install recharts` (recharts 2.15+ or 3.x; React 18 apps also `npm install react-is@18`) |
+| `@dreamtree-org/twreact-ui/rich-text` | `RichTextEditor` | `npm install @tiptap/react @tiptap/pm @tiptap/starter-kit` (Tiptap 3) |
+
+```jsx
+import { LineChart, DonutChart } from '@dreamtree-org/twreact-ui/charts';
+import { RichTextEditor } from '@dreamtree-org/twreact-ui/rich-text';
+```
+
+Both ship ESM (with `'use client'`), CommonJS and TypeScript declarations, and resolve under every
+TypeScript `moduleResolution` (`bundler`, `node16`/`nodenext` and legacy `node`). Their styles are
+already in `dist/index.css`. Rich-text output is HTML from the user — **sanitize it on the server**
+before you store or render it (see [doc/RichTextEditor.md](doc/RichTextEditor.md#security-sanitize-the-html-on-the-server)).
+
 ## Quick Start
 
 ```jsx
@@ -256,7 +278,7 @@ Advanced select component with search, multi-select, and grouping support.
 - `selectAllOption`: boolean
 - `closeOnSelect`: boolean
 - `maxTagCount`: number (default: 3)
-- `allowClear`: boolean
+- `allowClear`: boolean (default: false; set it when the field may be emptied)
 
 ```jsx
 <Select
@@ -709,6 +731,61 @@ import { Drawer, Popover, Textarea, Slider, Sortable, Tour, Button } from '@drea
 <Tour open={tourOpen} steps={[{ title: 'Welcome' }, { target: '[data-tour="new-task"]', title: 'Capture work' }]} onClose={() => setTourOpen(false)} />
 ```
 
+### Charts (optional entry point)
+
+Import from `@dreamtree-org/twreact-ui/charts` after `npm install recharts`. A data-first API over
+recharts: pass rows as `data`, the x-axis key as `index` and the series keys as `categories`.
+Colours are design tokens (`'primary'`, `'success-600'`, …) resolved from the `--dt-*` variables,
+so charts follow your theme and dark mode. Every chart is responsive, `forwardRef` + `className` +
+`...rest`, a named `role="img"` (`title` / `description`) with a visually-hidden data table for
+screen readers (`accessibleTable`), shows `emptyState` for empty data, and disables animation under
+`prefers-reduced-motion`.
+
+| Component | Use for |
+|---|---|
+| [`LineChart`](doc/LineChart.md) | Trends over time (`curveType`, `showDots`, `connectNulls`) |
+| [`BarChart`](doc/BarChart.md) | Comparisons — grouped, `stacked` or `horizontal` |
+| [`AreaChart`](doc/AreaChart.md) | Volume over time, optionally `stacked` |
+| [`DonutChart`](doc/DonutChart.md) | Part-to-whole (`variant="donut"` or `"pie"`, `centerLabel`) |
+| [`Sparkline`](doc/Sparkline.md) | Word-sized trend for stat cards and table cells |
+
+Shared props: `valueFormatter`, `height`, `showLegend`, `showTooltip`, `showXAxis`, `showYAxis`,
+`showGrid`, `colors`, `animate`.
+
+```jsx
+import { LineChart, DonutChart, Sparkline } from '@dreamtree-org/twreact-ui/charts';
+
+<LineChart
+  data={[{ month: 'Jan', revenue: 4200 }, { month: 'Feb', revenue: 5100 }]}
+  index="month"
+  categories={['revenue']}
+  valueFormatter={(v) => `$${v.toLocaleString()}`}
+  title="Revenue, Jan–Feb"
+/>
+<DonutChart data={byStatus} index="status" category="tasks" centerLabel="63 tasks" title="Tasks by status" />
+<Sparkline data={weekly} category="signups" color="success" title="Signups, last 4 weeks" />
+```
+
+### Rich text (optional entry point)
+
+[`RichTextEditor`](doc/RichTextEditor.md) — import from `@dreamtree-org/twreact-ui/rich-text` after
+`npm install @tiptap/react @tiptap/pm @tiptap/starter-kit`. A Tiptap (StarterKit) field with the
+same `label` / `error` / `helperText` / `required` wiring as `Input`; controlled (`value` +
+`onChange(html)`) or uncontrolled (`defaultValue`), `outputFormat="json"` for Tiptap JSON,
+`disabled` / `readOnly`, `minHeight` / `maxHeight`, and a `toolbar` (bold, italic, strike, code,
+headings, lists, quote, link, undo/redo) that is a `role="toolbar"` of real buttons with
+`aria-pressed` and arrow-key roving focus. The `ref` is an imperative handle (`editor`, `focus()`,
+`getHTML()`, `getJSON()`, `setContent()`, `clear()`). SSR-safe: the editor mounts on the client.
+
+```jsx
+import { RichTextEditor } from '@dreamtree-org/twreact-ui/rich-text';
+
+<RichTextEditor label="Description" placeholder="Describe the task…" value={html} onChange={setHtml} maxHeight={320} />
+```
+
+> The HTML comes from the user. Sanitize it on the server (e.g. DOMPurify / `sanitize-html`) before
+> storing or rendering it; this library ships no sanitizer.
+
 ### Page blocks
 
 Page-level patterns extracted from the Dreamtree products. Build pages from these before composing layouts by hand.
@@ -759,13 +836,21 @@ See [doc/useApi.md](doc/useApi.md).
 
 Every colour in the compiled CSS is a CSS variable (`--dt-primary-600`, `--dt-surface`, …) generated from `tokens/tokens.json` (W3C Design Tokens format). The defaults equal the classic palette, so nothing changes until you override a variable.
 
-**Re-theme with a brand file** (no Tailwind config needed, works with the precompiled CSS):
+**Your brand lives in your repo.** Keep it in `dreamtree.brand.json` at the repo root (colour scales, roles, font, logo, and optional landing-page colours) and build the CSS from it. No Tailwind config is needed, and it works with the precompiled CSS:
+
+```bash
+npx @dreamtree-org/twreact-ui brand init --id acme --name "Acme"      # starter file
+npx @dreamtree-org/twreact-ui brand build --out app/brand.css          # only the --dt-* variables you override
+npx @dreamtree-org/twreact-ui brand build --out app/brand.css --check  # in CI: fails if the CSS is stale
+```
 
 ```css
 @import "@dreamtree-org/twreact-ui/dist/index.css";
-@import "@dreamtree-org/twreact-ui/dist/tokens/brands/practicepro.css"; /* or your own --dt-* overrides */
+@import "./brand.css";
 ```
 
+The file is checked against `tokens/brand.schema.json` (add `"$schema": "https://unpkg.com/@dreamtree-org/twreact-ui/tokens/brand.schema.json"` for editor help). `brand validate` lists every problem with its fix, and `--scope ".my-app"` limits the brand to part of a page. twreact-ui ships only `default`; the `practicepro` and `studio` brands are deprecated copies until 1.5.0.
+
 **Use the same tokens in your own classes:**
 
 ```js
@@ -793,7 +878,7 @@ This adds semantic utilities next to the palettes: `bg-surface`, `bg-background`
 
 **Colour props are overrides, not defaults.** Without colour props, `ProgressBar`, `Checkbox`, `Rate` and `Skeleton` use token classes, so a brand file recolours them. Their HEX props (`color`, `bgColor`, `borderColor`, `activeColor`, `inactiveColor`) still work but are deprecated.
 
-**SSR:** `Tabs`, `Tooltip` and `Switch` generate ids with `React.useId()`, so server-rendered pages (Next.js) hydrate without mismatches.
+**SSR:** `Tabs`, `Tooltip` and `Switch` generate ids with `React.useId()`, so server-rendered pages (Next.js) hydrate without mismatches. The `/charts` components do the same for their SVG ids, and they render token colours and reduced-motion state the way the server did until hydration finishes.
 
 ## Dark Mode
 

package/ai-skills/dreamtree-ui.md

@@ -29,6 +29,17 @@ npm install react react-dom
 `react` / `react-dom` are **peer dependencies** at `^18.3.1`. React 19
 is not yet supported.
 
+**Optional entry points** — install the peer only when the user needs it:
+
+```bash
+# charts: @dreamtree-org/twreact-ui/charts
+npm install recharts            # React 18 apps also: npm install react-is@18
+# rich text: @dreamtree-org/twreact-ui/rich-text
+npm install @tiptap/react @tiptap/pm @tiptap/starter-kit
+```
+
+Apps that don't import these subpaths install and bundle nothing extra.
+
 ## Wiring (do not invent alternatives)
 
 ```jsx
@@ -112,6 +123,8 @@ The library exports four kinds of things from `@dreamtree-org/twreact-ui`:
 | **Feedback**    | `Dialog`, `Toast` (+ `ToastProvider`, `ToastContainer`, `useToast`), `Alert`, `Drawer` (side sheet; `isOpen`/`onClose` like Dialog), `Tour` (onboarding spotlight) |
 | **Utility**     | `Badge`, `Avatar`, `Card`, `Pagination`, `Stepper`, `FileUpload`, `Condition`, `Carousel`, `Sortable` (drag + keyboard reorder) |
 | **Blocks**      | `AppShell`, `PageHeader`, `StatCard`, `StatusPill`, `EmptyState`, `ErrorState`, `LoadingState`, `ConfirmDialog` — page-level patterns; build pages from these before composing layouts by hand |
+| **Charts** (`@dreamtree-org/twreact-ui/charts`, peer `recharts`) | `LineChart`, `BarChart`, `AreaChart`, `DonutChart`, `Sparkline` — NOT exported from the root |
+| **Rich text** (`@dreamtree-org/twreact-ui/rich-text`, peers `@tiptap/react @tiptap/pm @tiptap/starter-kit`) | `RichTextEditor` — NOT exported from the root |
 
 ### Hooks
 
@@ -185,12 +198,16 @@ When suggesting a component or new variant value, use this exact vocabulary.
 - `Textarea` — same API as `Input` plus `autoResize`/`maxRows`; never a raw `<textarea>`.
 - `Slider` — `defaultValue={40}` for one thumb, `[low, high]` for a range; `onChangeEnd` to save after a drag.
 - `Sortable` — `items` + `onReorder(newItems)` + `renderItem`; keyboard reordering and announcements are built in. Pass `handle` and spread `handleProps` on a grip for touch screens.
+- Charts (`/charts`) — `<LineChart data={rows} index="month" categories={['revenue', 'costs']} />`; same shape for `BarChart` (`stacked`, `horizontal`) and `AreaChart` (`stacked`); `DonutChart` takes `index` (name key) + `category` (value key) + `centerLabel`; `Sparkline` takes `category` + `color`. Colours are tokens (`colors={['primary', 'success-600']}`), never hex. Always pass `title` (accessible name) and, for key charts, a `description` with the takeaway. `valueFormatter` formats tooltip/axis/table values.
+- `RichTextEditor` (`/rich-text`) — `label`/`error`/`helperText` like `Input`; `value` + `onChange(html)` (or `outputFormat="json"`); `toolbar={['bold', 'italic', 'link']}` to trim. Tell the user to **sanitize the HTML server-side**; never render it with `dangerouslySetInnerHTML` unsanitized.
 - `Tour` — onboarding coach marks: `steps=[{ target: '[data-tour="x"]', title, content, placement }]`, `open`, `onClose(reason)`; a missing target falls back to a centred card.
 
 **Tokens:** colours are CSS variables (`--dt-primary-600`, `--dt-surface`, …) generated from
 `tokens/tokens.json`. Use semantic classes (`bg-primary-600`, `bg-surface`, `text-foreground`,
 `text-muted`, `border-line`, `text-micro`, `rounded-card`) — never hex values or Tailwind's raw
-palette (`bg-blue-500`). A product re-themes by loading `dist/tokens/brands/<brand>.css`.
+palette (`bg-blue-500`). A product's brand lives in its own repo as `dreamtree.brand.json`;
+`npx @dreamtree-org/twreact-ui brand build --out app/brand.css` turns it into the CSS to load after
+twreact-ui's CSS. To change a product's colours, edit that file, never the components.
 The full rule set for screens is `DESIGN.md` in the package root.
 
 ```jsx
@@ -326,6 +343,25 @@ fetchApiWith('updateUser', [7, { name: 'A' }]); // apiMap.updateUser(7, {...})
 Treat `useApi` as a thin axios wrapper, not a caching/dedup layer. For
 cache, the consumer brings their own (React Query, SWR, etc.).
 
+### Charts and rich text (optional entry points)
+
+```jsx
+import { LineChart, DonutChart, Sparkline } from '@dreamtree-org/twreact-ui/charts';
+import { RichTextEditor } from '@dreamtree-org/twreact-ui/rich-text';
+
+<LineChart
+  data={[{ month: 'Jan', revenue: 4200 }, { month: 'Feb', revenue: 5100 }]}
+  index="month"
+  categories={['revenue']}
+  valueFormatter={(v) => `$${v.toLocaleString()}`}
+  title="Revenue, Jan–Feb"
+/>
+<DonutChart data={byStatus} index="status" category="tasks" colors={['info', 'error', 'success']} centerLabel="63 tasks" title="Tasks by status" />
+<Sparkline data={weekly} category="signups" color="success" title="Signups, last 4 weeks" />
+
+<RichTextEditor label="Description" placeholder="Describe the task…" value={html} onChange={setHtml} maxHeight={320} />
+```
+
 ### cn
 
 ```jsx
@@ -341,7 +377,7 @@ import { cn } from '@dreamtree-org/twreact-ui';
 1. **Use library components.** When the user asks for a button, input,
    table, modal, toast, navbar, sidebar, breadcrumb, badge, card,
    stepper, file uploader, date picker, color picker, location picker,
-   pagination, or carousel — reach into this library FIRST. Don't
+   pagination, carousel, chart or rich-text editor — reach into this library FIRST. Don't
    propose a hand-rolled `<div>` + Tailwind unless the library has no
    matching primitive.
 2. **Use the shared vocabulary.** `variant="primary"`, `size="md"`,
@@ -356,8 +392,11 @@ import { cn } from '@dreamtree-org/twreact-ui';
    "components render unstyled," check first whether their
    `tailwind.config.js` `content[]` includes
    `./node_modules/@dreamtree-org/twreact-ui/dist/**/*.{js,mjs}`.
-6. **Don't deep-import.** Only `@dreamtree-org/twreact-ui` is public.
-   Don't suggest `@dreamtree-org/twreact-ui/src/components/core/Button`.
+6. **Don't deep-import.** The public modules are `@dreamtree-org/twreact-ui`
+   plus the two optional entry points `@dreamtree-org/twreact-ui/charts` and
+   `@dreamtree-org/twreact-ui/rich-text` (each needs its peer installed).
+   Don't suggest `@dreamtree-org/twreact-ui/src/components/core/Button`, and
+   never import charts or `RichTextEditor` from the root.
 7. **React 18 only.** If the user is on React 19, warn them: this
    library has not yet been verified on React 19.
 8. **Accessibility-first.** Icon-only buttons need `aria-label`.

package/bin/cli.mjs

@@ -17,7 +17,8 @@
 
 import { readFileSync, writeFileSync, mkdirSync, existsSync } from "node:fs";
 import { fileURLToPath } from "node:url";
-import { dirname, join, resolve } from "node:path";
+import { dirname, join, resolve, relative } from "node:path";
+import { createRequire } from "node:module";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const PKG_ROOT = resolve(__dirname, "..");
@@ -56,14 +57,20 @@ function printHelp() {
     `${PKG} CLI (v${VERSION})\n\n` +
       `Usage:\n` +
       `  npx ${PKG} init --ai <provider> [--out <path>] [--force]\n` +
-      `  npx ${PKG} mcp\n\n` +
+      `  npx ${PKG} mcp\n` +
+      `  npx ${PKG} brand init|validate|build [dreamtree.brand.json] [options]\n\n` +
       `Commands:\n` +
       `  init    Install the AI-assistant skill (ai-skills/dreamtree-ui.md) so your\n` +
       `          coding agent knows this library's components, conventions, wiring.\n` +
       `  mcp     Run the Model Context Protocol server over stdio — gives an MCP\n` +
       `          client live, queryable access to the library (list_components,\n` +
       `          get_component, search_components + docs + a compose_ui prompt).\n` +
-      `          Wire it as: { "command": "npx", "args": ["-y", "${PKG}", "mcp"] }\n\n` +
+      `          Wire it as: { "command": "npx", "args": ["-y", "${PKG}", "mcp"] }\n` +
+      `  brand   Your product's brand lives in your repo as dreamtree.brand.json.\n` +
+      `          init      write a starter file (--id <slug> --name <Name>)\n` +
+      `          validate  check it, with a fix for every problem\n` +
+      `          build     write the CSS to load after twreact-ui's CSS\n` +
+      `                    (--out app/brand.css, --scope <selector>, --check for CI)\n\n` +
       `init options:\n` +
       `  --ai <provider>   Target assistant: ${providers}  (default: claude)\n` +
       `  --out <path>      Write to this path instead of the provider default\n` +
@@ -74,12 +81,16 @@ function printHelp() {
 }
 
 function parseArgs(argv) {
-  const out = { _: [], ai: undefined, out: undefined, force: false, help: false, version: false };
+  const out = { _: [], ai: undefined, out: undefined, force: false, help: false, version: false, scope: undefined, check: false, id: undefined, name: undefined };
   for (let i = 0; i < argv.length; i++) {
     const a = argv[i];
     if (a === "--ai") out.ai = argv[++i];
     else if (a === "--out") out.out = argv[++i];
     else if (a === "--force") out.force = true;
+    else if (a === "--scope") out.scope = argv[++i];
+    else if (a === "--check") out.check = true;
+    else if (a === "--id") out.id = argv[++i];
+    else if (a === "--name") out.name = argv[++i];
     else if (a === "-h" || a === "--help") out.help = true;
     else if (a === "-v" || a === "--version") out.version = true;
     else out._.push(a);
@@ -117,6 +128,62 @@ function runInit(args) {
   );
 }
 
+// `brand` — a product keeps its brand in its own repo (dreamtree.brand.json); these commands turn it into CSS.
+// tokens/lib.cjs is CommonJS and dependency-free, so this stays a zero-dependency path.
+const BRAND_FILE = "dreamtree.brand.json";
+
+function runBrand(args) {
+  const lib = createRequire(import.meta.url)("../tokens/lib.cjs");
+  const sub = args._[1];
+  const file = resolve(process.cwd(), args._[2] || BRAND_FILE);
+  const shown = relative(process.cwd(), file) || BRAND_FILE;
+
+  if (sub === "init") {
+    if (existsSync(file) && !args.force) fail(`${shown} already exists. Re-run with --force to overwrite.`);
+    const id = (args.id || "my-product").toLowerCase();
+    const base = lib.scales(lib.loadTokens()).primary;
+    const starter = {
+      $schema: "https://unpkg.com/@dreamtree-org/twreact-ui/tokens/brand.schema.json",
+      id,
+      name: args.name || id,
+      color: { primary: base },
+      role: {},
+      marketing: {},
+    };
+    writeFileSync(file, JSON.stringify(starter, null, 2) + "\n");
+    process.stdout.write(`✓ wrote ${shown}. Change color.primary to your product's scale, then run: npx ${PKG} brand build\n`);
+    return;
+  }
+
+  if (sub === "validate" || sub === "build") {
+    let brand;
+    try {
+      brand = lib.loadBrand(file);
+    } catch (err) {
+      fail(err.message);
+    }
+    if (sub === "validate") {
+      process.stdout.write(`✓ ${shown} is a valid brand ("${lib.brandId(brand)}").\n`);
+      return;
+    }
+    const css = lib.brandCss(lib.loadTokens(), brand, { scope: args.scope });
+    const outFile = resolve(process.cwd(), args.out || "brand.css");
+    const outShown = relative(process.cwd(), outFile);
+    if (args.check) {
+      const current = existsSync(outFile) ? readFileSync(outFile, "utf8") : "";
+      if (current !== css) fail(`${outShown} is out of date with ${shown}. Run: npx ${PKG} brand build ${shown} --out ${outShown}${args.scope ? ` --scope "${args.scope}"` : ""}`);
+      process.stdout.write(`✓ ${outShown} matches ${shown}.\n`);
+      return;
+    }
+    mkdirSync(dirname(outFile), { recursive: true });
+    writeFileSync(outFile, css);
+    process.stdout.write(`✓ wrote ${outShown} from ${shown}. Import it after "${PKG}/dist/index.css".\n`);
+    return;
+  }
+
+  fail(`unknown brand command "${sub || ""}". Use: brand init | brand validate | brand build.`);
+}
+
 // Boot the bundled MCP server over stdio. The SDK + server are lazy-imported
 // here so plain `init` carries no dependency cost. stdout is the MCP protocol
 // channel, so this path must only ever log to stderr. The shipped server reads
@@ -140,6 +207,7 @@ async function main() {
   const cmd = args._[0];
   if (cmd === "init") return runInit(args);
   if (cmd === "mcp") return runMcp();
+  if (cmd === "brand") return runBrand(args);
 
   fail(`unknown command "${cmd}". Run \`npx ${PKG} --help\`.`);
 }

package/charts/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/charts/index.js",
+  "module": "../dist/esm/charts/index.js",
+  "types": "../dist/charts/index.d.ts"
+}

package/dist/_shared/cn-DPPQUJu1.js

@@ -0,0 +1,138 @@
+'use strict';
+
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+function cn() {
+  for (var _len = arguments.length, inputs = new Array(_len), _key = 0; _key < _len; _key++) {
+    inputs[_key] = arguments[_key];
+  }
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+
+exports._objectSpread2 = _objectSpread2;
+exports._objectWithoutProperties = _objectWithoutProperties;
+exports._slicedToArray = _slicedToArray;
+exports._toConsumableArray = _toConsumableArray;
+exports.cn = cn;