kaleido-ui 0.2.2 → 0.2.5

package/dist/web/chunk-GX5URFML.js

@@ -0,0 +1,375 @@
+"use client";
+import {
+  ChartDataTable,
+  ChartHeader,
+  ChartLegend,
+  ChartLegendRow,
+  ChartTooltip,
+  tooltipText,
+  useSeriesVisibility
+} from "./chunk-CXLGQSHM.js";
+import {
+  formatAmount
+} from "./chunk-VM6AGMYO.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/trend-chart.tsx
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var toneFill = {
+  // The charts' green, so every chart draws the same one.
+  primary: "var(--series-1)",
+  danger: "var(--destructive)",
+  info: "var(--chart-4)",
+  warning: "var(--chart-2)",
+  muted: "var(--muted-foreground)"
+};
+var defaultFormat = (value) => formatAmount(value);
+var MARGIN = { top: 8, right: 8, bottom: 24, left: 8 };
+var TICK_FONT = 11;
+var X_LABEL_SPACING = 64;
+var FALLBACK_WIDTH = 640;
+var MAX_BAR_WIDTH = 40;
+function trendChartTicks(max) {
+  if (!Number.isFinite(max) || max <= 0) return [0];
+  const rough = max / 4;
+  const magnitude = 10 ** Math.floor(Math.log10(rough));
+  const step = [1, 2, 5, 10].map((m) => m * magnitude).find((s) => s >= rough) ?? 10 * magnitude;
+  const wholeStep = Math.max(1, Math.round(step));
+  const ticks = [0];
+  for (let value = wholeStep; value < max - max * 0.15; value += wholeStep) ticks.push(value);
+  ticks.push(max);
+  return ticks;
+}
+function trendChartLabelIndices(count, maxLabels) {
+  if (count <= 0) return [];
+  if (count === 1) return [0];
+  const slots = Math.max(2, Math.min(count, Math.floor(maxLabels)));
+  const indices = /* @__PURE__ */ new Set();
+  for (let slot = 0; slot < slots; slot += 1) {
+    indices.add(Math.round(slot * (count - 1) / (slots - 1)));
+  }
+  return [...indices].sort((a, b) => a - b);
+}
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function useElementWidth() {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(FALLBACK_WIDTH);
+  useIsomorphicLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const measured = Math.round(element.getBoundingClientRect().width);
+    if (measured > 0) setWidth(measured);
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(([entry]) => {
+      const next = Math.round(entry.contentRect.width);
+      if (next > 0) setWidth(next);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return [ref, width];
+}
+function TrendChart({
+  points,
+  series: allSeries,
+  scaleLabel,
+  label,
+  empty,
+  formatValue = defaultFormat,
+  height = 220,
+  view: controlledView,
+  onViewChange,
+  className,
+  ...head
+}) {
+  const [containerRef, width] = useElementWidth();
+  const [active, setActive] = useState(null);
+  const [ownView, setOwnView] = useState("chart");
+  const view = controlledView ?? ownView;
+  const setView = (next) => {
+    if (controlledView === void 0) setOwnView(next);
+    onViewChange?.(next);
+  };
+  const styledSeries = allSeries.map((s, index) => ({ ...s, texture: s.texture ?? (index === 0 ? "solid" : "hatch") }));
+  const visibility = useSeriesVisibility(allSeries.map((s) => s.id));
+  const series = styledSeries.filter((s) => visibility.isVisible(s.id));
+  const idBase = `trend-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const count = points.length;
+  const moveActive = useCallback(
+    (event) => {
+      if (count === 0) return;
+      const current = active ?? -1;
+      let next;
+      switch (event.key) {
+        case "ArrowRight":
+          next = Math.min(count - 1, current + 1);
+          break;
+        case "ArrowLeft":
+          next = current < 0 ? count - 1 : Math.max(0, current - 1);
+          break;
+        case "Home":
+          next = 0;
+          break;
+        case "End":
+          next = count - 1;
+          break;
+        case "Escape":
+          next = null;
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      setActive(next);
+    },
+    [active, count]
+  );
+  if (count === 0) return /* @__PURE__ */ jsx(Fragment, { children: empty ?? null });
+  const textures = series.map((s) => s.texture);
+  const totals = points.map(
+    (point) => series.reduce((sum, s) => sum + Math.max(0, point.values[s.id] ?? 0), 0)
+  );
+  const max = Math.max(0, ...totals);
+  const ticks = trendChartTicks(max);
+  const tickLabels = ticks.map(formatValue);
+  const axisWidth = Math.max(...tickLabels.map((t) => t.length)) * TICK_FONT * 0.62 + 8;
+  const plotLeft = MARGIN.left + axisWidth;
+  const plotRight = width - MARGIN.right;
+  const plotTop = MARGIN.top;
+  const plotBottom = height - MARGIN.bottom;
+  const plotWidth = Math.max(1, plotRight - plotLeft);
+  const plotHeight = Math.max(1, plotBottom - plotTop);
+  const domainTop = max > 0 ? max : 1;
+  const y = (value) => plotBottom - value / domainTop * plotHeight;
+  const band = plotWidth / count;
+  const barWidth = band >= 4 ? Math.min(band * 0.72, MAX_BAR_WIDTH) : Math.max(1, band - 0.75);
+  const barOffset = (band - barWidth) / 2;
+  const labelIndices = trendChartLabelIndices(count, plotWidth / X_LABEL_SPACING);
+  const fillFor = (index) => textures[index] === "hatch" ? `url(#${idBase}-hatch-${index})` : toneFill[series[index].tone];
+  const activePoint = active === null ? null : points[active];
+  const readoutId = `${idBase}-readout`;
+  const activeRows = activePoint ? series.map((s) => ({
+    id: s.id,
+    label: s.label,
+    value: formatValue(activePoint.values[s.id] ?? 0),
+    color: toneFill[s.tone]
+  })) : [];
+  const activeTitle = activePoint ? activePoint.detail ?? activePoint.label : "";
+  const containerWidth = containerRef.current?.clientWidth ?? width;
+  const toContainer = width > 0 ? containerWidth / width : 1;
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      "data-slot": "trend-chart",
+      "aria-label": label,
+      className: cn("m-0 min-w-0 space-y-2", className),
+      children: [
+        /* @__PURE__ */ jsx(ChartHeader, { ...head, view, onViewChange: setView }),
+        view === "table" && /* @__PURE__ */ jsx(
+          ChartDataTable,
+          {
+            label,
+            table: {
+              columns: ["Period", ...series.map((s) => s.label), "Total"],
+              rows: points.map((point, index) => [
+                point.detail ?? point.label,
+                ...series.map((s) => formatValue(point.values[s.id] ?? 0)),
+                formatValue(totals[index])
+              ])
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { id: readoutId, "data-slot": "trend-chart-readout", "aria-live": "polite", className: "sr-only", children: activePoint ? tooltipText(activeTitle, activeRows) : "" }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: containerRef,
+            hidden: view === "table",
+            role: "group",
+            "aria-roledescription": "chart",
+            tabIndex: 0,
+            "aria-describedby": readoutId,
+            "aria-keyshortcuts": "ArrowLeft ArrowRight Home End Escape",
+            "aria-label": `${label}: ${count} periods. Arrow keys move between them.`,
+            onKeyDown: moveActive,
+            onBlur: () => setActive(null),
+            className: "relative mt-5 w-full min-w-0 rounded-xl outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:shadow-glow-primary-soft",
+            children: [
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  width: "100%",
+                  height,
+                  viewBox: `0 0 ${width} ${height}`,
+                  preserveAspectRatio: "none",
+                  className: "block overflow-visible",
+                  onPointerLeave: () => setActive(null),
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx("defs", { children: series.map(
+                      (s, index) => textures[index] === "hatch" ? /* @__PURE__ */ jsx(Texture, { id: `${idBase}-hatch-${index}`, tone: s.tone, texture: "hatch" }, s.id) : null
+                    ) }),
+                    /* @__PURE__ */ jsx("g", { "data-slot": "trend-chart-y-axis", children: ticks.map((tick, index) => /* @__PURE__ */ jsxs("g", { children: [
+                      /* @__PURE__ */ jsx(
+                        "line",
+                        {
+                          x1: plotLeft,
+                          x2: plotRight,
+                          y1: y(tick),
+                          y2: y(tick),
+                          stroke: "var(--border)",
+                          strokeDasharray: tick === 0 ? void 0 : "2 3"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "text",
+                        {
+                          x: plotLeft - 6,
+                          y: y(tick),
+                          dy: "0.32em",
+                          textAnchor: "end",
+                          fontSize: TICK_FONT,
+                          fill: "var(--muted-foreground)",
+                          style: { fontVariantNumeric: "tabular-nums" },
+                          children: tickLabels[index]
+                        }
+                      )
+                    ] }, tick)) }),
+                    active !== null && /* @__PURE__ */ jsx(
+                      "rect",
+                      {
+                        "data-slot": "trend-chart-active",
+                        x: plotLeft + active * band,
+                        y: plotTop,
+                        width: band,
+                        height: plotHeight,
+                        fill: "var(--chart-4)",
+                        opacity: 0.14
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("g", { "data-slot": "trend-chart-bars", children: points.map((point, pointIndex) => {
+                      let base = 0;
+                      return /* @__PURE__ */ jsxs("g", { "data-period": point.key, children: [
+                        series.map((s, seriesIndex) => {
+                          const value = point.values[s.id] ?? 0;
+                          if (value <= 0) return null;
+                          const top = y(base + value);
+                          const bottom = y(base);
+                          base += value;
+                          const hatched = textures[seriesIndex] === "hatch";
+                          return /* @__PURE__ */ jsx(
+                            "rect",
+                            {
+                              "data-series": s.id,
+                              x: plotLeft + pointIndex * band + barOffset,
+                              y: top,
+                              width: barWidth,
+                              height: Math.max(0.5, bottom - top - (seriesIndex > 0 ? 1 : 0)),
+                              fill: fillFor(seriesIndex),
+                              stroke: hatched ? toneFill[s.tone] : void 0,
+                              strokeWidth: hatched && barWidth >= 4 ? 1 : 0
+                            },
+                            s.id
+                          );
+                        }),
+                        /* @__PURE__ */ jsx(
+                          "rect",
+                          {
+                            x: plotLeft + pointIndex * band,
+                            y: plotTop,
+                            width: band,
+                            height: plotHeight,
+                            fill: "transparent",
+                            onPointerEnter: () => setActive(pointIndex)
+                          }
+                        )
+                      ] }, point.key);
+                    }) }),
+                    /* @__PURE__ */ jsx("g", { "data-slot": "trend-chart-x-axis", children: labelIndices.map((index) => /* @__PURE__ */ jsx(
+                      "text",
+                      {
+                        x: plotLeft + index * band + band / 2,
+                        y: plotBottom + 16,
+                        textAnchor: index === 0 && count > 1 ? "start" : index === count - 1 && count > 1 ? "end" : "middle",
+                        fontSize: TICK_FONT,
+                        fill: "var(--muted-foreground)",
+                        children: points[index].label
+                      },
+                      points[index].key
+                    )) })
+                  ]
+                }
+              ),
+              activePoint && /* @__PURE__ */ jsx(
+                ChartTooltip,
+                {
+                  title: activeTitle,
+                  rows: activeRows,
+                  swatch: "rect",
+                  x: (plotLeft + active * band + band / 2) * toContainer,
+                  y: plotTop,
+                  width: containerWidth
+                }
+              )
+            ]
+          }
+        ),
+        view === "chart" && /* @__PURE__ */ jsx(ChartLegendRow, { children: /* @__PURE__ */ jsx(
+          ChartLegend,
+          {
+            items: styledSeries.map((s, index) => ({
+              id: s.id,
+              label: s.label,
+              color: toneFill[s.tone],
+              swatch: /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", "aria-hidden": "true", className: "shrink-0", children: [
+                /* @__PURE__ */ jsx(Texture, { id: `${idBase}-legend-${index}`, tone: s.tone, texture: s.texture }),
+                /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    width: "12",
+                    height: "12",
+                    rx: "2",
+                    fill: s.texture === "hatch" ? `url(#${idBase}-legend-${index})` : toneFill[s.tone],
+                    stroke: toneFill[s.tone]
+                  }
+                )
+              ] })
+            })),
+            ...visibility.legend
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("p", { "data-slot": "trend-chart-scale", className: "sr-only", children: [
+          scaleLabel,
+          " \xB7 linear, from 0"
+        ] })
+      ]
+    }
+  );
+}
+function Texture({
+  id,
+  tone,
+  texture
+}) {
+  if (texture !== "hatch") return null;
+  return /* @__PURE__ */ jsxs("pattern", { id, width: "4", height: "4", patternUnits: "userSpaceOnUse", patternTransform: "rotate(45)", children: [
+    /* @__PURE__ */ jsx("rect", { width: "4", height: "4", fill: toneFill[tone], opacity: 0.25 }),
+    /* @__PURE__ */ jsx("rect", { width: "2", height: "4", fill: toneFill[tone] })
+  ] });
+}
+
+export {
+  trendChartTicks,
+  trendChartLabelIndices,
+  TrendChart
+};

package/dist/web/chunk-GZZ5KVON.js

@@ -0,0 +1,70 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/card.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var cardSurface = {
+  primary: "rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card shadow-card",
+  secondary: "rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card shadow-card-secondary"
+};
+var Card = React.forwardRef(
+  ({ className, variant = "primary", ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-variant": variant,
+      className: cn(
+        cardSurface[variant],
+        // A column, so CardFooter can sit on the bottom edge when the card is
+        // taller than its content (a grid row of cards stretches them all).
+        "flex flex-col text-card-foreground transition-[color,background-color,box-shadow] duration-300",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h3",
+    {
+      ref,
+      className: cn("text-title font-semibold leading-none tracking-tight", className),
+      ...props
+    }
+  )
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-caption text-muted-foreground", className), ...props })
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React.forwardRef(
+  ({ className, ...props }, ref) => (
+    // mt-auto: the card's actions stay on its bottom edge, however tall it is.
+    /* @__PURE__ */ jsx("div", { ref, className: cn("mt-auto flex items-center p-6 pt-0", className), ...props })
+  )
+);
+CardFooter.displayName = "CardFooter";
+
+export {
+  cardSurface,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter
+};

package/dist/web/chunk-H3GYLFHP.js

@@ -0,0 +1,30 @@
+"use client";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/label.tsx
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { jsx } from "react/jsx-runtime";
+var Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "mb-1 inline-block leading-none",
+      eyebrow,
+      "text-secondary-content peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className
+    ),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export {
+  Label
+};

package/dist/web/chunk-HKF7IPXV.js

@@ -0,0 +1,146 @@
+"use client";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  LiquidNetworkIcon,
+  OnchainNetworkIcon
+} from "./chunk-WBW5E6LC.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  ChevronRight
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/deposit-network-default-modal.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var NETWORK_OPTIONS = {
+  RGB: {
+    network: "onchain",
+    account: "RGB",
+    label: "On-chain / Lightning",
+    description: "Classic Bitcoin address or Lightning invoice via the RLN node.",
+    icon: /* @__PURE__ */ jsx(OnchainNetworkIcon, { className: "size-5" }),
+    accentBg: "bg-network-bitcoin/10",
+    accentBorder: "border-network-bitcoin/30",
+    accentText: "text-network-bitcoin-fg"
+  },
+  SPARK: {
+    network: "spark",
+    account: "SPARK",
+    label: "Spark",
+    description: "Receive directly into your Spark account. Fast and free.",
+    icon: /* @__PURE__ */ jsx("img", { src: "/icons/spark/Asterisk/Spark Asterisk White.svg", alt: "", className: "kui-mono-icon h-[18px]" }),
+    accentBg: "bg-info/10",
+    accentBorder: "border-info/30",
+    accentText: "text-info-fg"
+  },
+  ARKADE: {
+    network: "arkade",
+    account: "ARKADE",
+    label: "Arkade",
+    description: "Receive directly into your Arkade account. Low fees, near-instant settlement.",
+    icon: /* @__PURE__ */ jsx("img", { src: "/icons/arkade/arkade-icon.svg", alt: "", className: "h-[18px]" }),
+    accentBg: "bg-network-arkade/10",
+    accentBorder: "border-network-arkade/30",
+    accentText: "text-network-arkade-fg"
+  },
+  LIQUID: {
+    // Liquid is its own chain; reuse the "onchain" network key for the modal's
+    // network callback (there's no dedicated Liquid DepositNetworkKey).
+    network: "onchain",
+    account: "LIQUID",
+    label: "Liquid",
+    description: "Receive L-BTC or a Liquid asset (USDt) via a confidential Liquid address.",
+    icon: /* @__PURE__ */ jsx(LiquidNetworkIcon, { className: "h-[18px] w-[18px]" }),
+    accentBg: "bg-network-liquid/10",
+    accentBorder: "border-network-liquid/30",
+    accentText: "text-network-liquid-fg"
+  }
+};
+function DepositNetworkDefaultModal({
+  open,
+  assetTicker,
+  availableAccounts,
+  suggestedAccount,
+  onSelect
+}) {
+  if (!open) return null;
+  const options = availableAccounts.map((id) => NETWORK_OPTIONS[id]).filter(Boolean);
+  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-end justify-center bg-background/80 backdrop-blur-lg", children: /* @__PURE__ */ jsxs("div", { className: "w-full space-y-4 rounded-t-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero px-4 pb-7 pt-5 shadow-popover animate-in slide-in-from-bottom-4 duration-200", children: [
+    /* @__PURE__ */ jsx("div", { className: "-mt-1 mb-1 flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-1 w-10 rounded-full bg-secondary/40" }) }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "text-body font-bold text-foreground", children: "Choose your default network" }),
+      /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-tiny text-foreground/55", children: [
+        "Pick how you would like to receive",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-semibold text-muted-foreground", children: assetTicker }),
+        " by default. You can always switch in the deposit screen."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: options.map((option) => {
+      const isSuggested = option.account === suggestedAccount;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSelect(option.network),
+          className: cn(
+            "flex w-full items-center gap-3 rounded-xl p-3 text-left transition-all",
+            isSuggested ? cn(option.accentBg, "shadow-glow-violet-soft ring-1 ring-inset ring-secondary/50") : "bg-muted/40 shadow-raised hover-gradient-violet"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex size-8 flex-shrink-0 items-center justify-center rounded-lg",
+                  isSuggested ? cn(option.accentBg, "shadow-raised") : "bg-secondary/15",
+                  isSuggested ? option.accentText : "text-secondary-content"
+                ),
+                children: option.icon
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: cn("text-caption font-bold", isSuggested ? option.accentText : "text-foreground"), children: option.label }),
+                isSuggested && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "rounded-full px-1.5 py-0.5",
+                      eyebrow,
+                      option.accentBg,
+                      option.accentText
+                    ),
+                    children: "recommended"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xxs leading-snug text-foreground/55", children: option.description })
+            ] }),
+            /* @__PURE__ */ jsx(
+              IconGlyph,
+              {
+                glyph: ChevronRight,
+                className: cn(
+                  "flex-shrink-0 text-icon-lg",
+                  isSuggested ? option.accentText : "text-foreground/25"
+                )
+              }
+            )
+          ]
+        },
+        option.account
+      );
+    }) })
+  ] }) });
+}
+
+export {
+  DepositNetworkDefaultModal
+};