@tulip-systems/create-app 0.11.1

package/dist/templates/spark/src/app/admin/settings/theme/_components/demo-gallery.tsx

@@ -0,0 +1,632 @@
+"use client";
+
+import { Badge } from "@tulip-systems/ui/badge";
+import { Button } from "@tulip-systems/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@tulip-systems/ui/card";
+import { Input } from "@tulip-systems/ui/input";
+import { Label } from "@tulip-systems/ui/label";
+import { Progress } from "@tulip-systems/ui/progress";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@tulip-systems/ui/recharts";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@tulip-systems/ui/select";
+import { Separator } from "@tulip-systems/ui/separator";
+import { Switch } from "@tulip-systems/ui/switch";
+import { Textarea } from "@tulip-systems/ui/textarea";
+import { ArrowRightIcon, Clock3Icon, LockIcon, WalletIcon } from "lucide-react";
+import * as React from "react";
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Pie,
+  PieChart,
+  Label as RechartsLabel,
+  XAxis,
+} from "recharts";
+
+const revenueData = [
+  { period: "Q1", retainers: 120, projects: 84, support: 56, operations: 72, growth: 64 },
+  { period: "Q2", retainers: 148, projects: 94, support: 61, operations: 78, growth: 72 },
+  { period: "Q3", retainers: 136, projects: 88, support: 58, operations: 74, growth: 68 },
+  { period: "Q4", retainers: 164, projects: 102, support: 66, operations: 83, growth: 79 },
+] as const;
+
+const revenueConfig = {
+  retainers: { label: "Retainers", color: "var(--chart-1)" },
+  projects: { label: "Projects", color: "var(--chart-2)" },
+  support: { label: "Support", color: "var(--chart-3)" },
+  operations: { label: "Ops", color: "var(--chart-4)" },
+  growth: { label: "Growth", color: "var(--chart-5)" },
+} satisfies ChartConfig;
+
+const channelData = [
+  { name: "Direct", value: 348, fill: "var(--color-direct)" },
+  { name: "Partners", value: 254, fill: "var(--color-partners)" },
+  { name: "Inbound", value: 198, fill: "var(--color-inbound)" },
+  { name: "Referrals", value: 167, fill: "var(--color-referrals)" },
+  { name: "Other", value: 121, fill: "var(--color-other)" },
+] as const;
+
+const channelConfig = {
+  direct: { label: "Direct", color: "var(--chart-1)" },
+  partners: { label: "Partners", color: "var(--chart-2)" },
+  inbound: { label: "Inbound", color: "var(--chart-3)" },
+  referrals: { label: "Referrals", color: "var(--chart-4)" },
+  other: { label: "Other", color: "var(--chart-5)" },
+} satisfies ChartConfig;
+
+const trendData = [
+  { month: "Jan", active: 180, target: 160 },
+  { month: "Feb", active: 210, target: 182 },
+  { month: "Mar", active: 198, target: 190 },
+  { month: "Apr", active: 246, target: 205 },
+  { month: "May", active: 232, target: 214 },
+  { month: "Jun", active: 274, target: 228 },
+] as const;
+
+const trendConfig = {
+  active: { label: "Active", color: "var(--chart-1)" },
+  target: { label: "Target", color: "var(--chart-5)" },
+} satisfies ChartConfig;
+
+const transactions = [
+  { title: "Blue Bottle Coffee", meta: "Food & Drink", date: "Today, 10:24", amount: "-$6.50" },
+  { title: "Whole Foods Market", meta: "Groceries", date: "Yesterday", amount: "-$142.30" },
+  { title: "Stripe Payout", meta: "Income", date: "Oct 12", amount: "+$4,200.00" },
+  { title: "Uber Technologies", meta: "Transport", date: "Oct 11", amount: "-$24.10" },
+] as const;
+
+const targets = [
+  { label: "Retainers", value: "$420,000", progress: 65, meta: "$273,000 secured" },
+  { label: "Implementations", value: "$85,000", progress: 32, meta: "$27,200 secured" },
+] as const;
+
+const statCards = [
+  { label: "Card balance", value: "US$12.94", meta: "US$11,337.06 available" },
+  { label: "Payment due", value: "1 Apr", meta: "Pay early available" },
+  { label: "Review queue", value: "08", meta: "2 blocked items" },
+] as const;
+
+const activityRows = [
+  { label: "Releases", value: 76, color: "var(--chart-1)" },
+  { label: "Invoices", value: 58, color: "var(--chart-2)" },
+  { label: "Approvals", value: 43, color: "var(--chart-3)" },
+  { label: "Payouts", value: 65, color: "var(--chart-4)" },
+  { label: "Reviews", value: 51, color: "var(--chart-5)" },
+] as const;
+
+const bottomStats = [
+  {
+    label: "Tax reserve",
+    value: "$3,240",
+    meta: "Held back automatically from quarterly payouts.",
+  },
+  {
+    label: "Next review",
+    value: "Thu 14:00",
+    meta: "Operational sync for invoices, approvals, and transfers.",
+  },
+  {
+    label: "Export status",
+    value: "Ready",
+    meta: "Latest payout statement is prepared for accounting.",
+  },
+] as const;
+
+const accountStats = [
+  {
+    label: "Connected account",
+    value: "Main Checking",
+    meta: "••8402 — $12,450.00 available",
+  },
+  {
+    label: "Transfer target",
+    value: "High Yield Savings",
+    meta: "••1192 — $42,100.00 balance",
+  },
+] as const;
+
+export function ThemeDemoGallery() {
+  const totalChannelValue = React.useMemo(
+    () => channelData.reduce((sum, item) => sum + item.value, 0),
+    [],
+  );
+
+  return (
+    <div className="rounded-2xl border bg-muted/20 p-4 sm:p-6">
+      <div className="columns-1 gap-x-4 md:columns-2 2xl:columns-3">
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Revenue Mix</CardTitle>
+            <CardDescription>
+              Compare the five chart tokens in a denser chart with labels, grid lines, and legend.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={revenueConfig} className="h-64 w-full">
+              <BarChart accessibilityLayer data={revenueData} barGap={8}>
+                <CartesianGrid vertical={false} />
+                <XAxis dataKey="period" tickLine={false} axisLine={false} tickMargin={10} />
+                <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+                <ChartLegend content={<ChartLegendContent />} />
+                <Bar dataKey="retainers" fill="var(--color-retainers)" radius={6} />
+                <Bar dataKey="projects" fill="var(--color-projects)" radius={6} />
+                <Bar dataKey="support" fill="var(--color-support)" radius={6} />
+                <Bar dataKey="operations" fill="var(--color-operations)" radius={6} />
+                <Bar dataKey="growth" fill="var(--color-growth)" radius={6} />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-0">
+            <CardTitle className="text-base">Account Access</CardTitle>
+            <CardDescription>
+              Inputs, labels, buttons, and quiet borders together in one compact form.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4 pt-6">
+            <div className="space-y-2">
+              <Label htmlFor="theme-email">Email address</Label>
+              <Input id="theme-email" defaultValue="artist@studio.inc" />
+            </div>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between gap-2">
+                <Label htmlFor="theme-password">Current password</Label>
+                <button
+                  type="button"
+                  className="text-muted-foreground text-xs uppercase tracking-[0.12em]"
+                >
+                  Forgot?
+                </button>
+              </div>
+              <Input id="theme-password" type="password" defaultValue="secret-password" />
+            </div>
+            <Separator />
+            <Button className="w-full">
+              <LockIcon data-icon="inline-start" />
+              Update security
+            </Button>
+          </CardContent>
+        </Card>
+
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-0">
+            <CardTitle className="text-base">Channel Split</CardTitle>
+            <CardDescription>Palette balance in a smaller circular chart.</CardDescription>
+          </CardHeader>
+          <CardContent className="pb-0">
+            <ChartContainer config={channelConfig} className="mx-auto h-64">
+              <PieChart>
+                <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+                <Pie
+                  data={channelData}
+                  dataKey="value"
+                  nameKey="name"
+                  innerRadius={62}
+                  strokeWidth={6}
+                >
+                  <RechartsLabel
+                    content={({ viewBox }) => {
+                      if (!viewBox || !("cx" in viewBox) || !("cy" in viewBox)) {
+                        return null;
+                      }
+
+                      return (
+                        <text
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          textAnchor="middle"
+                          dominantBaseline="middle"
+                        >
+                          <tspan
+                            x={viewBox.cx}
+                            y={viewBox.cy}
+                            className="fill-foreground font-semibold text-2xl"
+                          >
+                            {totalChannelValue}
+                          </tspan>
+                          <tspan
+                            x={viewBox.cx}
+                            y={(viewBox.cy || 0) + 24}
+                            className="fill-muted-foreground text-xs"
+                          >
+                            total leads
+                          </tspan>
+                        </text>
+                      );
+                    }}
+                  />
+                </Pie>
+              </PieChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Payout Threshold</CardTitle>
+            <CardDescription>Form controls, progress feedback, and secondary copy.</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label>Preferred currency</Label>
+              <Select defaultValue="usd">
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="Choose a currency" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="usd">USD - United States Dollar</SelectItem>
+                  <SelectItem value="eur">EUR - Euro</SelectItem>
+                  <SelectItem value="gbp">GBP - British Pound</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between gap-4">
+                <Label htmlFor="theme-threshold">Minimum payout amount</Label>
+                <span className="font-semibold text-2xl">$2,500.00</span>
+              </div>
+              <Progress value={25} className="h-2" />
+              <div className="flex items-center justify-between text-muted-foreground text-sm">
+                <span>$50 minimum</span>
+                <span>$10,000 maximum</span>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="theme-notes">Notes</Label>
+              <Textarea
+                id="theme-notes"
+                rows={4}
+                defaultValue="Add any notes for this payout configuration or payout batching rule."
+              />
+            </div>
+            <Button className="w-full">Save threshold</Button>
+          </CardContent>
+        </Card>
+
+        <div className="mb-4 grid break-inside-avoid gap-4 sm:grid-cols-3 md:grid-cols-1 xl:grid-cols-1 2xl:grid-cols-3">
+          {statCards.map((item) => (
+            <Card key={item.label}>
+              <CardContent className="p-4">
+                <div className="text-muted-foreground text-sm">{item.label}</div>
+                <div className="mt-2 font-semibold text-3xl leading-none">{item.value}</div>
+                <div className="mt-2 text-muted-foreground text-sm">{item.meta}</div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Release Snapshot</CardTitle>
+            <CardDescription>
+              A simple mix of stronger primary surfaces with calmer supporting panels.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-3 sm:grid-cols-[1.15fr_0.85fr]">
+            <div className="rounded-xl border border-primary px-4 py-5 text-primary-foreground shadow">
+              <div className="text-primary-foreground/75 text-xs uppercase tracking-[0.18em]">
+                Distribution track
+              </div>
+              <div className="mt-3 font-semibold text-3xl leading-none">Northern Lights EP</div>
+              <div className="mt-2 max-w-sm text-primary-foreground/80 text-sm">
+                Scheduled assets, metadata, and publishing checks are all lined up for next week.
+              </div>
+              <div className="mt-5 flex items-center gap-2">
+                <Badge className="border-primary-foreground/15 bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground/10">
+                  Ready to publish
+                </Badge>
+                <span className="text-primary-foreground/75 text-xs">12 files reviewed</span>
+              </div>
+            </div>
+            <div className="grid gap-3">
+              <div className="rounded-2xl border bg-card p-4">
+                <div className="text-muted-foreground text-xs uppercase tracking-[0.16em]">
+                  Next payout
+                </div>
+                <div className="mt-3 font-semibold text-2xl">May 25, 2024</div>
+                <div className="mt-1 text-muted-foreground text-sm">$1,000 scheduled</div>
+              </div>
+              <div className="rounded-2xl border bg-accent/35 p-4 text-accent-foreground">
+                <div className="flex items-center gap-2">
+                  <Clock3Icon className="size-4" />
+                  <span className="font-medium text-sm">Auto-save plan</span>
+                </div>
+                <div className="mt-3 font-semibold text-2xl">Accelerated</div>
+                <div className="mt-1 text-accent-foreground/80 text-sm">Recurring weekly</div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Preferences</CardTitle>
+            <CardDescription>
+              Muted surfaces, switches, badges, and supporting text.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-start justify-between gap-4 rounded-xl border bg-card p-4">
+              <div>
+                <div className="font-medium text-sm">Weekly summary</div>
+                <div className="mt-1 text-muted-foreground text-sm">
+                  Receive a Friday summary of revenue, payouts, and overdue invoices.
+                </div>
+              </div>
+              <Switch defaultChecked aria-label="Weekly summary" />
+            </div>
+            <div className="flex items-start justify-between gap-4 rounded-xl border bg-card p-4">
+              <div>
+                <div className="font-medium text-sm">Approval alerts</div>
+                <div className="mt-1 text-muted-foreground text-sm">
+                  Notify finance when large orders need a second review.
+                </div>
+              </div>
+              <Switch aria-label="Approval alerts" />
+            </div>
+            <Separator />
+            <div className="flex flex-wrap items-center gap-2">
+              <Badge variant="outline">Draft</Badge>
+              <Badge variant="outline">Preview</Badge>
+              <span className="text-muted-foreground text-sm">
+                These compact states help compare accent and border contrast.
+              </span>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Quick Notes</CardTitle>
+            <CardDescription>
+              Small neutral utility card to judge quiet surfaces and text hierarchy.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="rounded-xl border bg-card p-4 text-sm">
+              <div className="font-medium">Transfer funds</div>
+              <div className="mt-1 text-muted-foreground">
+                Move money between connected accounts before the next payout run.
+              </div>
+            </div>
+            <div className="rounded-xl border bg-muted/25 p-4 text-sm">
+              <div className="font-medium">Change transfer limit</div>
+              <div className="mt-1 text-muted-foreground">
+                Adjust how much can be sent from your balance each day.
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Recent Transactions</CardTitle>
+            <CardDescription>
+              Denser list styling to preview separators, icons, muted labels, and positive states.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {transactions.map((transaction, index) => (
+              <div key={transaction.title}>
+                <div className="flex items-center gap-3 rounded-xl px-1 py-2">
+                  <div className="flex size-10 items-center justify-center rounded-xl bg-muted text-muted-foreground">
+                    <WalletIcon className="size-4" />
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="font-medium text-sm">{transaction.title}</div>
+                    <div className="text-muted-foreground text-sm">{transaction.meta}</div>
+                  </div>
+                  <div className="text-right">
+                    <div className="text-muted-foreground text-sm">{transaction.date}</div>
+                    <div
+                      className={
+                        transaction.amount.startsWith("+")
+                          ? "font-medium text-primary"
+                          : "font-medium"
+                      }
+                    >
+                      {transaction.amount}
+                    </div>
+                  </div>
+                </div>
+                {index < transactions.length - 1 && <Separator />}
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Claimable Balance</CardTitle>
+            <CardDescription>
+              A compact KPI strip with stronger hierarchy, utility rows, and a quieter CTA zone.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-4 lg:grid-cols-[0.9fr_1.1fr_0.8fr]">
+            <div>
+              <div className="font-semibold text-5xl leading-none">$12,480</div>
+              <div className="mt-3 flex items-center gap-2">
+                <Badge variant="outline">Pending setup</Badge>
+                <span className="text-muted-foreground text-sm">
+                  Monthly distribution on the 15th
+                </span>
+              </div>
+            </div>
+            <div className="rounded-2xl border bg-card p-4">
+              <div className="space-y-2 text-sm">
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground">Net royalties</span>
+                  <span>$12,640.00</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground">Processing fees</span>
+                  <span>-$160.00</span>
+                </div>
+                <Separator className="my-3" />
+                <div className="flex items-center justify-between font-medium">
+                  <span>Total ready to claim</span>
+                  <span>$12,480.00</span>
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-col justify-between gap-4 rounded-2xl border bg-muted/20 p-4">
+              <div>
+                <div className="text-muted-foreground text-xs uppercase tracking-[0.16em]">
+                  Processing
+                </div>
+                <div className="mt-3 font-semibold text-2xl">1.28%</div>
+                <div className="mt-1 text-muted-foreground text-sm">
+                  Fees are automatically reconciled before every release.
+                </div>
+              </div>
+              <Button className="w-full">
+                View payout details
+                <ArrowRightIcon data-icon="inline-end" />
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Activity Snapshot</CardTitle>
+            <CardDescription>
+              Compact activity rows to compare chart colors against labels, borders, and muted
+              surfaces.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4 rounded-2xl border bg-card p-4">
+              <div className="mb-4 flex items-center justify-between">
+                <span className="text-muted-foreground text-sm">Last 30 days</span>
+                <Badge variant="outline">Live mix</Badge>
+              </div>
+              <div className="space-y-3">
+                {activityRows.map((item) => (
+                  <div key={item.label} className="space-y-1.5">
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-muted-foreground">{item.label}</span>
+                      <span className="font-medium">{item.value}</span>
+                    </div>
+                    <div className="h-2 rounded-full bg-muted">
+                      <div
+                        className="h-full rounded-full"
+                        style={{ width: `${item.value}%`, backgroundColor: item.color }}
+                      />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Savings Targets</CardTitle>
+            <CardDescription>
+              Compare borders, muted fills, and progress colors in a calmer stack.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {targets.map((target) => (
+              <div key={target.label} className="rounded-xl border bg-muted/30 p-4">
+                <div className="mb-3 flex items-start justify-between gap-3">
+                  <div>
+                    <div className="text-muted-foreground text-xs uppercase tracking-[0.16em]">
+                      {target.label}
+                    </div>
+                    <div className="mt-2 font-semibold text-3xl leading-none">{target.value}</div>
+                  </div>
+                  <Badge variant="outline">{target.progress}%</Badge>
+                </div>
+                <div className="h-1.5 rounded-full bg-border/70">
+                  <div
+                    className="h-full rounded-full bg-primary"
+                    style={{ width: `${target.progress}%` }}
+                  />
+                </div>
+                <div className="mt-3 text-muted-foreground text-sm">{target.meta}</div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Active Pipelines</CardTitle>
+            <CardDescription>
+              Primary and fifth chart colors side by side in a simpler trend view.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={trendConfig} className="h-64 w-full">
+              <AreaChart accessibilityLayer data={trendData} margin={{ left: 0, right: 0 }}>
+                <CartesianGrid vertical={false} />
+                <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={10} />
+                <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} />
+                <Area
+                  dataKey="target"
+                  type="monotone"
+                  fill="var(--color-target)"
+                  fillOpacity={0.08}
+                  stroke="var(--color-target)"
+                  strokeWidth={2}
+                />
+                <Area
+                  dataKey="active"
+                  type="monotone"
+                  fill="var(--color-active)"
+                  fillOpacity={0.18}
+                  stroke="var(--color-active)"
+                  strokeWidth={2}
+                />
+              </AreaChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+
+        <div className="mb-4 grid break-inside-avoid gap-4 sm:grid-cols-2 xl:grid-cols-1 2xl:grid-cols-3">
+          {bottomStats.map((item) => (
+            <Card key={item.label}>
+              <CardContent className="p-4">
+                <div className="text-muted-foreground text-sm">{item.label}</div>
+                <div className="mt-2 font-semibold text-3xl leading-none">{item.value}</div>
+                <div className="mt-2 text-muted-foreground text-sm">{item.meta}</div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        <div className="mb-4 grid break-inside-avoid gap-4 sm:grid-cols-2">
+          {accountStats.map((item) => (
+            <Card key={item.label}>
+              <CardContent className="p-4">
+                <div className="text-muted-foreground text-sm">{item.label}</div>
+                <div className="mt-2 font-semibold text-2xl leading-tight">{item.value}</div>
+                <div className="mt-2 text-muted-foreground text-sm">{item.meta}</div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}