@cystackapp/ui 1.5.0 → 2.0.0

package/dist/components/chart/chart-legend/ChartLegend.d.ts

@@ -0,0 +1,38 @@
+import { ChartLegendProps } from './types';
+/**
+ * Unified chart legend component.
+ *
+ * Renders a list of color-coded legend items with optional
+ * percentage, value, and unit display. Supports vertical,
+ * horizontal, and grid layouts.
+ *
+ * @example Vertical (default)
+ * ```tsx
+ * <ChartLegend data={chartData} showPercentage />
+ * ```
+ *
+ * @example Horizontal
+ * ```tsx
+ * <ChartLegend data={chartData} layout="horizontal" />
+ * ```
+ *
+ * @example Grid (2-column)
+ * ```tsx
+ * <ChartLegend data={chartData} layout="grid" columns={2} />
+ * ```
+ *
+ * @example With unit
+ * ```tsx
+ * <ChartLegend
+ *   data={chartData}
+ *   showPercentage
+ *   getUnit={(n) => `${n} tickets`}
+ * />
+ * ```
+ *
+ * @example Suppress empty state (parent handles it)
+ * ```tsx
+ * <ChartLegend data={chartData} emptyText={null} />
+ * ```
+ */
+export declare const ChartLegend: import('react').ForwardRefExoticComponent<ChartLegendProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/chart/chart-legend/ChartLegend.js

@@ -0,0 +1,57 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as v, useMemo as w } from "react";
+import { cn as y } from "../../../utils/cn.js";
+import { ChartLegendItem as C } from "./ChartLegendItem.js";
+const N = {
+  vertical: "flex flex-col gap-1",
+  horizontal: "flex flex-row flex-wrap gap-x-3 gap-y-1",
+  // Grid base — column count is set via inline `gridTemplateColumns`.
+  grid: "grid gap-x-5 gap-y-1"
+}, L = v(
+  ({
+    data: a,
+    layout: l = "vertical",
+    columns: m = 2,
+    showPercentage: n = !1,
+    showValue: p = !1,
+    getUnit: i,
+    emptyText: o = "No data",
+    itemClassName: c,
+    className: d,
+    style: s,
+    ...f
+  }, g) => {
+    const t = w(
+      () => a.reduce((e, h) => e + h.value, 0),
+      [a]
+    ), x = t === 0, u = l === "grid" ? {
+      gridTemplateColumns: `repeat(${m}, minmax(0, 1fr))`,
+      ...s
+    } : s;
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        ref: g,
+        className: y(N[l], d),
+        style: u,
+        ...f,
+        children: x && o !== null ? /* @__PURE__ */ r("span", { className: "text-sm text-gray-v2-600 whitespace-nowrap col-span-full", children: o }) : a.map((e) => /* @__PURE__ */ r(
+          C,
+          {
+            item: e,
+            totalValue: t,
+            showPercentage: n,
+            showValue: p,
+            getUnit: i,
+            className: c
+          },
+          `legend-${e.id}`
+        ))
+      }
+    );
+  }
+);
+L.displayName = "ChartLegend";
+export {
+  L as ChartLegend
+};

package/dist/components/chart/chart-legend/ChartLegendItem.d.ts

@@ -0,0 +1,19 @@
+import { ChartDataItem } from '../types';
+interface Props {
+    item: ChartDataItem;
+    totalValue: number;
+    showPercentage: boolean;
+    showValue: boolean;
+    getUnit?: (count: number) => string;
+    className?: string;
+}
+/**
+ * A single legend row: color indicator + label text.
+ *
+ * Display format (all options enabled):
+ * ```
+ * [●] 42% Critical · 12 tickets
+ * ```
+ */
+export declare const ChartLegendItem: ({ item, totalValue, showPercentage, showValue, getUnit, className, }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/chart/chart-legend/ChartLegendItem.js

@@ -0,0 +1,30 @@
+import { jsxs as l, jsx as u } from "react/jsx-runtime";
+import { cn as m } from "../../../utils/cn.js";
+const i = ({
+  item: e,
+  totalValue: n,
+  showPercentage: c,
+  showValue: a,
+  getUnit: r,
+  className: o
+}) => {
+  const d = n > 0 ? (e.value / n * 100).toFixed(0) : "0", s = r ? r(e.value) : null;
+  return /* @__PURE__ */ l("div", { className: m("flex items-center gap-1.5", o), children: [
+    /* @__PURE__ */ u(
+      "div",
+      {
+        className: "w-2 h-2 min-w-2 shrink-0 rounded-full",
+        style: { backgroundColor: e.color }
+      }
+    ),
+    /* @__PURE__ */ l("span", { className: "text-sm text-gray-v2-600 whitespace-nowrap", children: [
+      c && n > 0 ? `${d}% ` : null,
+      e.name,
+      a && n > 0 ? ` (${e.value})` : null,
+      s ? ` · ${s}` : null
+    ] })
+  ] });
+};
+export {
+  i as ChartLegendItem
+};

package/dist/components/chart/chart-legend/types.d.ts

@@ -0,0 +1,49 @@
+import { HTMLAttributes } from 'react';
+import { ChartDataItem } from '../types';
+/** Controls how legend items are arranged. */
+export type ChartLegendLayout = "vertical" | "horizontal" | "grid";
+/**
+ * Props for the `ChartLegend` component.
+ *
+ * At minimum, provide `data`. The component renders a vertical
+ * list of legend items by default.
+ */
+export interface ChartLegendProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Chart data entries. Uses `ChartDataItem` from `DonutChart`. */
+    data: ChartDataItem[];
+    /**
+     * Layout direction.
+     * - `"vertical"` (default): single column, stacked top-to-bottom.
+     * - `"horizontal"`: items flow left-to-right with wrapping.
+     * - `"grid"`: CSS grid with configurable columns.
+     */
+    layout?: ChartLegendLayout;
+    /**
+     * Number of columns when `layout="grid"`. Default: `2`.
+     * Ignored for other layouts.
+     */
+    columns?: number;
+    /** Show the percentage of each item relative to the total. Default: `false`. */
+    showPercentage?: boolean;
+    /** Show the raw numeric value of each item. Default: `false`. */
+    showValue?: boolean;
+    /**
+     * Format a unit label for each item's value.
+     * Receives the item's value and should return a formatted string.
+     *
+     * @example
+     * ```tsx
+     * getUnit={(n) => `${n} tickets`}
+     * // item.value = 12 → "12 tickets"
+     * ```
+     */
+    getUnit?: (count: number) => string;
+    /**
+     * Text to display when all items have zero value (totalCount === 0).
+     * Pass `null` to suppress the empty state entirely.
+     * Default: `"No data"`.
+     */
+    emptyText?: string | null;
+    /** Additional CSS classes applied to each legend item row. */
+    itemClassName?: string;
+}

package/dist/components/chart/donut-chart/DonutChart.d.ts

@@ -0,0 +1,55 @@
+import { ReactNode, SVGAttributes } from 'react';
+import { DonutTooltipPayload } from './donut-tooltip';
+import { ChartDataItem } from '../types';
+/**
+ * Props for the `DonutChart` component.
+ *
+ * At minimum, provide `data`. The chart renders a built-in tooltip by default;
+ * pass `tooltip` to override, or `tooltip={null}` to disable.
+ */
+interface DonutChartProps extends Omit<SVGAttributes<SVGSVGElement>, "viewBox"> {
+    /** Chart data slices. Zero-value items are filtered automatically. */
+    data: ChartDataItem[];
+    /**
+     * Custom tooltip renderer. Receives the hovered item, total value, and unit.
+     * - Omit to use the built-in tooltip.
+     * - Pass `null` to disable tooltips entirely.
+     */
+    tooltip?: ((payload: DonutTooltipPayload) => ReactNode) | null;
+    /** Format unit label for tooltip display. Receives the hovered item's value. */
+    getUnit?: (count: number) => string;
+    /**
+     * Ratio of the inner hole radius to the outer radius.
+     * - `0` renders a pie chart (no hole).
+     * - `0.56` is the default donut.
+     * - `1` is degenerate (invisible).
+     */
+    holeRatio?: number;
+    /** Color of the empty-state placeholder ring. */
+    emptyColor?: string;
+}
+/**
+ * SVG donut chart with built-in tooltip.
+ *
+ * Use `className` to control the rendered size, e.g. `className="w-32 h-32"`.
+ *
+ * @example
+ * ```tsx
+ * // Minimal — tooltip works out of the box
+ * <DonutChart data={[
+ *   { id: "a", name: "Critical", value: 12, color: "#e11d48" },
+ *   { id: "b", name: "High",     value: 25, color: "#f97316" },
+ * ]} />
+ *
+ * // Custom size via className
+ * <DonutChart data={chartData} className="w-40 h-40" />
+ *
+ * // Pie chart (no hole)
+ * <DonutChart data={chartData} holeRatio={0} />
+ *
+ * // Disable tooltip
+ * <DonutChart data={chartData} tooltip={null} />
+ * ```
+ */
+export declare const DonutChart: import('react').ForwardRefExoticComponent<DonutChartProps & import('react').RefAttributes<SVGSVGElement>>;
+export {};

package/dist/components/chart/donut-chart/DonutChart.js

@@ -0,0 +1,110 @@
+import { jsxs as m, Fragment as E, jsx as d } from "react/jsx-runtime";
+import { forwardRef as C, useMemo as p, useState as A, useCallback as R } from "react";
+import { computeSegments as w, DonutSegments as F } from "./DonutSegments.js";
+import { defaultTooltipRenderer as I, renderTooltipPortal as j } from "./donut-tooltip.js";
+const v = 200, N = 0.56, P = "var(--color-gray-v2-200)", n = v / 2, o = { x: n, y: n }, U = C(
+  ({
+    data: s,
+    tooltip: y = I,
+    getUnit: a,
+    holeRatio: T = N,
+    emptyColor: D = P,
+    className: L,
+    ...M
+  }, O) => {
+    const l = n * T, S = p(
+      () => s.filter((e) => e.value > 0),
+      [s]
+    ), r = p(
+      () => s.reduce((e, u) => e + u.value, 0),
+      [s]
+    ), [i, g] = A({ x: 0, y: 0, visible: !1, payload: null }), h = R(
+      (e, u, b) => {
+        g({
+          x: u + 8,
+          y: b + 8,
+          visible: !0,
+          payload: {
+            item: e,
+            totalValue: r,
+            unit: a ? a(e.value) : ""
+          }
+        });
+      },
+      [r, a]
+    ), f = R(() => {
+      g((e) => ({ ...e, visible: !1, payload: null }));
+    }, []), t = p(
+      () => w(
+        S,
+        r,
+        n,
+        l,
+        o
+      ),
+      [S, r, l]
+    ), _ = t.length > 1, c = t.length === 1, x = t.length === 0;
+    return /* @__PURE__ */ m(E, { children: [
+      /* @__PURE__ */ m(
+        "svg",
+        {
+          ref: O,
+          className: L,
+          viewBox: `0 0 ${v} ${v}`,
+          ...M,
+          children: [
+            _ && /* @__PURE__ */ d(
+              F,
+              {
+                segments: t,
+                outerRadius: n,
+                innerRadius: l,
+                center: o,
+                onSegmentEnter: h,
+                onSegmentLeave: f
+              }
+            ),
+            (c || x) && /* @__PURE__ */ m(E, { children: [
+              /* @__PURE__ */ d(
+                "circle",
+                {
+                  cx: o.x,
+                  cy: o.y,
+                  r: n,
+                  fill: c ? t[0].item.color : D,
+                  opacity: x ? 0.4 : 1,
+                  onMouseMove: c ? (e) => h(
+                    t[0].item,
+                    e.clientX,
+                    e.clientY
+                  ) : void 0,
+                  onMouseOut: c ? f : void 0
+                }
+              ),
+              l > 0 && /* @__PURE__ */ d(
+                "circle",
+                {
+                  cx: o.x,
+                  cy: o.y,
+                  r: l,
+                  fill: "white"
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      y && j(
+        i.y,
+        i.x,
+        i.visible,
+        i.payload,
+        y
+      )
+    ] });
+  }
+);
+U.displayName = "DonutChart";
+export {
+  U as DonutChart
+};

package/dist/components/chart/donut-chart/DonutSegments.d.ts

@@ -0,0 +1,25 @@
+import { ChartDataItem } from '../types';
+export interface Point {
+    x: number;
+    y: number;
+}
+/** Pre-computed geometry for a single donut segment. */
+export interface DonutSegment {
+    item: ChartDataItem;
+    startAngle: number;
+    endAngle: number;
+    outerStart: Point;
+    outerEnd: Point;
+    innerEnd: Point;
+}
+export declare function computeSegments(data: ChartDataItem[], totalValue: number, outerRadius: number, innerRadius: number, center: Point): DonutSegment[];
+interface Props {
+    segments: DonutSegment[];
+    outerRadius: number;
+    innerRadius: number;
+    center: Point;
+    onSegmentEnter: (item: ChartDataItem, x: number, y: number) => void;
+    onSegmentLeave: () => void;
+}
+export declare const DonutSegments: ({ segments, outerRadius, innerRadius, center, onSegmentEnter, onSegmentLeave, }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/chart/donut-chart/DonutSegments.js

@@ -0,0 +1,51 @@
+import { jsx as $, Fragment as p } from "react/jsx-runtime";
+function l(o, e, t) {
+  const r = o * Math.PI / 180;
+  return {
+    x: Math.sin(r) * e + t.x,
+    y: -Math.cos(r) * e + t.y
+  };
+}
+function m(o, e, t, r) {
+  const c = Math.abs(t - e) % 360 > 180 ? 1 : 0, u = t >= e ? 1 : 0, n = l(t, o, r);
+  return `A ${o} ${o} 0 ${c} ${u} ${n.x} ${n.y}`;
+}
+function M(o, e, t, r) {
+  const { outerStart: c, innerEnd: u, startAngle: n, endAngle: i } = o, a = m(e, n, i, r), s = m(t, i, n, r);
+  return `M ${c.x} ${c.y} ${a} L ${u.x} ${u.y} ${s}`;
+}
+function h(o, e, t, r, c) {
+  let u = 0;
+  return o.map((n) => {
+    const i = n.value / e * 360, a = u, s = a + i;
+    return u = s, {
+      item: n,
+      startAngle: a,
+      endAngle: s,
+      outerStart: l(a, t, c),
+      outerEnd: l(s, t, c),
+      innerEnd: l(s, r, c)
+    };
+  });
+}
+const x = ({
+  segments: o,
+  outerRadius: e,
+  innerRadius: t,
+  center: r,
+  onSegmentEnter: c,
+  onSegmentLeave: u
+}) => /* @__PURE__ */ $(p, { children: o.map((n) => /* @__PURE__ */ $(
+  "path",
+  {
+    fill: n.item.color,
+    d: M(n, e, t, r),
+    onMouseMove: (i) => c(n.item, i.clientX, i.clientY),
+    onMouseOut: u
+  },
+  n.item.id
+)) });
+export {
+  x as DonutSegments,
+  h as computeSegments
+};

package/dist/components/chart/donut-chart/donut-tooltip.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { ChartDataItem } from '../types';
+/** Payload passed to a custom tooltip renderer. */
+export interface DonutTooltipPayload {
+    item: ChartDataItem;
+    totalValue: number;
+    /** Formatted unit label, e.g. "tickets". Empty string when `getUnit` is not provided. */
+    unit: string;
+}
+/**
+ * Built-in tooltip renderer.
+ * Shows the item name, value with unit, and percentage of total.
+ */
+export declare const defaultTooltipRenderer: ({ item, totalValue, unit, }: DonutTooltipPayload) => ReactNode;
+/**
+ * Render the tooltip into `document.body` via a portal.
+ * This is a plain function (not a component) to avoid `ReactPortal` vs `ReactNode`
+ * type mismatch issues between `@types/react` and `@types/react-dom`.
+ */
+export declare function renderTooltipPortal(top: number, left: number, visible: boolean, payload: DonutTooltipPayload | null, renderer: (payload: DonutTooltipPayload) => ReactNode): ReactNode;

package/dist/components/chart/donut-chart/donut-tooltip.js

@@ -0,0 +1,37 @@
+import { jsxs as t, jsx as d } from "react/jsx-runtime";
+import { createPortal as c } from "react-dom";
+const a = ({
+  item: e,
+  totalValue: r,
+  unit: n
+}) => {
+  const o = r > 0 ? (e.value / r * 100).toFixed() : "0";
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      style: { backgroundColor: e.color },
+      className: "rounded-md p-3 shadow-lg whitespace-pre text-white font-medium text-sm",
+      children: [
+        /* @__PURE__ */ d("p", { children: e.name }),
+        /* @__PURE__ */ t("p", { children: [
+          e.value,
+          " ",
+          n,
+          " (",
+          o,
+          "%)"
+        ] })
+      ]
+    }
+  );
+};
+function p(e, r, n, o, l) {
+  return !n || !o ? null : c(
+    /* @__PURE__ */ d("div", { style: { top: e, left: r }, className: "fixed z-10 pointer-events-none", children: l(o) }),
+    document.body
+  );
+}
+export {
+  a as defaultTooltipRenderer,
+  p as renderTooltipPortal
+};

package/dist/components/chart/types.d.ts

@@ -0,0 +1,8 @@
+/** A single data entry shared across chart components (DonutChart, ChartLegend, etc.). */
+export interface ChartDataItem {
+    id: string;
+    name: string;
+    value: number;
+    /** Resolved CSS color string (hex, rgb, etc.). */
+    color: string;
+}

package/dist/components/checkbox/CheckboxTestStory.d.ts

@@ -1,7 +1,7 @@
-export declare function CheckboxUnchecked(): import("react/jsx-runtime").JSX.Element;
-export declare function CheckboxChecked(): import("react/jsx-runtime").JSX.Element;
-export declare function CheckboxIndeterminate(): import("react/jsx-runtime").JSX.Element;
-export declare function CheckboxCheckedAndIndeterminate(): import("react/jsx-runtime").JSX.Element;
-export declare function CheckboxDisabled(): import("react/jsx-runtime").JSX.Element;
-export declare function CheckboxDisabledChecked(): import("react/jsx-runtime").JSX.Element;
-export declare function CheckboxWithClickCounter(): import("react/jsx-runtime").JSX.Element;
+export declare function CheckboxUnchecked(): import("react").JSX.Element;
+export declare function CheckboxChecked(): import("react").JSX.Element;
+export declare function CheckboxIndeterminate(): import("react").JSX.Element;
+export declare function CheckboxCheckedAndIndeterminate(): import("react").JSX.Element;
+export declare function CheckboxDisabled(): import("react").JSX.Element;
+export declare function CheckboxDisabledChecked(): import("react").JSX.Element;
+export declare function CheckboxWithClickCounter(): import("react").JSX.Element;

package/dist/components/collapsible/Collapsible.d.ts

@@ -17,5 +17,5 @@ interface Props {
  * @param expanded - Whether the content is shown.
  * @param duration - Transition duration in milliseconds (default: 300).
  */
-export declare const Collapsible: ({ expanded, duration, className, children, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Collapsible: ({ expanded, duration, className, children, }: Props) => import("react").JSX.Element;
 export {};

package/dist/components/combobox/Combobox.d.ts

@@ -92,5 +92,5 @@ interface Props {
  *
  * <Combobox value={value} onChange={handleChange} error={error} />
  */
-export declare const Combobox: ({ id, value, onChange, onBlur, getSuggestions, delimiter, placeholder, error, disabled, getBadgeProps, getLabel, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Combobox: ({ id, value, onChange, onBlur, getSuggestions, delimiter, placeholder, error, disabled, getBadgeProps, getLabel, }: Props) => import("react").JSX.Element;
 export {};

package/dist/components/divider/Divider.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface Props {
+    /** Optional content rendered in the middle of the divider. */
+    children?: ReactNode;
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+}
+export declare const Divider: ({ children, orientation, className, }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/divider/Divider.js

@@ -0,0 +1,28 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { cn as e } from "../../utils/cn.js";
+const p = ({
+  children: t,
+  orientation: s = "horizontal",
+  className: a
+}) => s === "vertical" ? /* @__PURE__ */ r(
+  "span",
+  {
+    role: "separator",
+    "aria-orientation": "vertical",
+    className: e("self-stretch w-px bg-gray-v2-200", a)
+  }
+) : t ? /* @__PURE__ */ l(
+  "div",
+  {
+    role: "separator",
+    className: e("flex items-center gap-3 w-full", a),
+    children: [
+      /* @__PURE__ */ r("span", { className: "flex-1 h-px bg-gray-v2-200" }),
+      /* @__PURE__ */ r("span", { className: "text-sm font-medium text-gray-v2-600 whitespace-nowrap", children: t }),
+      /* @__PURE__ */ r("span", { className: "flex-1 h-px bg-gray-v2-200" })
+    ]
+  }
+) : /* @__PURE__ */ r("hr", { className: e("w-full border-0 h-px bg-gray-v2-200", a) });
+export {
+  p as Divider
+};

package/dist/components/drawer/Drawer.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface DrawerProps {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+    children?: ReactNode;
+    className?: string;
+}
+export declare const Drawer: ({ isOpen, onOpenChange, children, className, }: DrawerProps) => import('react').ReactPortal;

package/dist/components/drawer/Drawer.js

@@ -0,0 +1,68 @@
+import { jsx as a, jsxs as v } from "react/jsx-runtime";
+import { useRef as f, useCallback as h, useEffect as x } from "react";
+import { createPortal as g } from "react-dom";
+import { XClose as p } from "@untitled-ui/icons-react";
+import { Button as w } from "../button/Button.js";
+import { cn as d } from "../../utils/cn.js";
+import { useClickOutsideModal as E } from "../modal/use-click-outside-modal.js";
+const k = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', A = ({
+  isOpen: e,
+  onOpenChange: r,
+  children: u,
+  className: m
+}) => {
+  const i = f(null), l = f(null), b = (t) => {
+    if (!(!e || l.current === null) && (t.key === "Escape" && r(!1), t.key === "Tab")) {
+      const o = Array.from(
+        l.current.querySelectorAll(k)
+      ).filter((y) => !y.closest("[inert]"));
+      if (o.length === 0) return;
+      const s = o[0], c = o[o.length - 1];
+      t.shiftKey ? document.activeElement === s && (t.preventDefault(), c.focus()) : document.activeElement === c && (t.preventDefault(), s.focus());
+    }
+  }, n = h(() => r(!1), [r]);
+  return E(n, i, [l]), x(() => (document.body.classList.toggle("overflow-hidden", e), () => document.body.classList.remove("overflow-hidden")), [e]), g(
+    /* @__PURE__ */ a(
+      "div",
+      {
+        ref: i,
+        className: d(
+          "fixed inset-0 flex items-center justify-end z-10 transition-all duration-300 bg-gray-v2-950/48",
+          { "invisible opacity-0": !e }
+        ),
+        onKeyDown: b,
+        children: /* @__PURE__ */ v(
+          "div",
+          {
+            ref: l,
+            role: "dialog",
+            "aria-modal": "true",
+            className: d(
+              "relative h-full w-104 bg-white flex flex-col overflow-hidden transition-all duration-300",
+              { "translate-x-full": !e },
+              m
+            ),
+            children: [
+              /* @__PURE__ */ a(
+                w,
+                {
+                  variant: "tertiary",
+                  color: "gray",
+                  className: "absolute right-0 top-0 m-4",
+                  onClick: n,
+                  "aria-label": "Close",
+                  children: /* @__PURE__ */ a(p, { className: "size-6 shrink-0 text-gray-v2-400" })
+                }
+              ),
+              u
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+};
+export {
+  A as Drawer
+};