@uisatin/ui 0.0.0-stage → 0.1.1

package/chunk-L6NCCSIP.js

@@ -0,0 +1,213 @@
+import { Input } from './chunk-YPNKBE5X.js';
+import { TooltipBubble } from './chunk-B6V4VSGH.js';
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { Slider as Slider$1 } from 'radix-ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var decimals = (n) => (String(n).split(".")[1] ?? "").length;
+function Slider({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  onValueCommit,
+  min = 0,
+  max = 100,
+  step = 1,
+  minStepsBetweenThumbs = 0,
+  label,
+  showValue = true,
+  inputs = false,
+  tooltip = false,
+  orientation = "horizontal",
+  formatValue = String,
+  disabled = false,
+  name,
+  id,
+  "aria-label": ariaLabel,
+  className
+}) {
+  const autoId = React.useId();
+  const sliderId = id ?? autoId;
+  const labelId = `${sliderId}-label`;
+  const vertical = orientation === "vertical";
+  const range = Array.isArray(valueProp ?? defaultValue);
+  const toArray = (v) => v == null ? range ? [min, max] : [min] : Array.isArray(v) ? [...v] : [v];
+  const toOut = (a) => range ? [a[0], a[1]] : a[0];
+  const [uncontrolled, setUncontrolled] = React.useState(() => toArray(defaultValue));
+  const values = valueProp != null ? toArray(valueProp) : uncontrolled;
+  const change = (next) => {
+    if (valueProp == null) setUncontrolled(next);
+    onValueChange?.(toOut(next));
+  };
+  const [dragging, setDragging] = React.useState(false);
+  const [keying, setKeying] = React.useState(false);
+  const [focused, setFocused] = React.useState(null);
+  const keyTimer = React.useRef(void 0);
+  React.useEffect(() => {
+    if (!dragging) return;
+    const end = () => setDragging(false);
+    window.addEventListener("pointerup", end);
+    window.addEventListener("pointercancel", end);
+    return () => {
+      window.removeEventListener("pointerup", end);
+      window.removeEventListener("pointercancel", end);
+    };
+  }, [dragging]);
+  React.useEffect(() => () => clearTimeout(keyTimer.current), []);
+  const readout = range ? `${formatValue(values[0])} \u2013 ${formatValue(values[1])}` : formatValue(values[0]);
+  const thumbLabel = (i) => range ? i === 0 ? "From" : "To" : void 0;
+  const fieldLabel = (i) => range ? i === 0 ? "From" : "To" : "Value";
+  const commitTyped = (i, typed) => {
+    const places = decimals(step);
+    let v = Math.round((typed - min) / step) * step + min;
+    v = Number(Math.min(max, Math.max(min, v)).toFixed(places));
+    const gap = minStepsBetweenThumbs * step;
+    if (range) v = i === 0 ? Math.min(v, values[1] - gap) : Math.max(v, values[0] + gap);
+    const next = values.map((x, j) => j === i ? v : x);
+    change(next);
+    onValueCommit?.(toOut(next));
+  };
+  const field = (i) => /* @__PURE__ */ jsx(
+    SliderInput,
+    {
+      value: values[i],
+      disabled,
+      "aria-label": fieldLabel(i),
+      onCommit: (v) => commitTyped(i, v)
+    },
+    i
+  );
+  const slider = /* @__PURE__ */ jsxs(
+    Slider$1.Root,
+    {
+      id: sliderId,
+      "data-slot": "slider",
+      value: values,
+      onValueChange: change,
+      onValueCommit: (v) => onValueCommit?.(toOut(v)),
+      min,
+      max,
+      step,
+      minStepsBetweenThumbs,
+      orientation,
+      disabled,
+      name,
+      "aria-labelledby": label ? labelId : void 0,
+      onPointerDown: () => !disabled && setDragging(true),
+      className: cn(
+        "relative flex shrink-0 touch-none items-center select-none data-[disabled]:cursor-not-allowed",
+        vertical ? "h-40 w-5 flex-col" : "h-5 w-full min-w-0 flex-1"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Slider$1.Track,
+          {
+            className: cn("relative grow cursor-pointer overflow-hidden rounded-full bg-bg-muted", vertical ? "w-1" : "h-1"),
+            children: /* @__PURE__ */ jsx(Slider$1.Range, { className: cn("absolute rounded-full bg-action-primary-bg", vertical ? "w-full" : "h-full") })
+          }
+        ),
+        values.map((v, i) => /* @__PURE__ */ jsx(
+          Slider$1.Thumb,
+          {
+            "aria-label": thumbLabel(i) ?? (label ? void 0 : ariaLabel),
+            "aria-labelledby": !range && label ? labelId : void 0,
+            "aria-valuetext": formatValue(v),
+            onFocus: () => setFocused(i),
+            onBlur: () => {
+              setFocused(null);
+              setKeying(false);
+            },
+            onKeyDown: (e) => {
+              if (!/^(Arrow|Page|Home|End)/.test(e.key)) return;
+              setKeying(true);
+              clearTimeout(keyTimer.current);
+              keyTimer.current = setTimeout(() => setKeying(false), 1e3);
+            },
+            className: cn(
+              "relative block size-4 cursor-grab rounded-full border border-border-strong bg-bg-popover outline-none active:cursor-grabbing",
+              "[box-shadow:0_1px_3px_0_var(--effect-shadow-sm)]",
+              "transition-[border-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
+              "hover:border-text-subtle focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+              "data-[disabled]:cursor-not-allowed data-[disabled]:hover:border-border-strong"
+            ),
+            children: tooltip && /* @__PURE__ */ jsx(
+              TooltipBubble,
+              {
+                "aria-hidden": true,
+                label: formatValue(v),
+                "data-visible": (dragging || keying) && focused === i ? "" : void 0,
+                className: cn(
+                  "pointer-events-none absolute tabular-nums opacity-0 transition-[opacity,translate] duration-(--duration-fast) ease-(--ease-out) data-[visible]:opacity-100",
+                  vertical ? "top-1/2 left-full ml-2 -translate-x-0.5 -translate-y-1/2 data-[visible]:translate-x-0" : "bottom-full left-1/2 mb-2 -translate-x-1/2 translate-y-0.5 data-[visible]:translate-y-0"
+                )
+              }
+            )
+          },
+          i
+        ))
+      ]
+    }
+  );
+  const head = (label || showValue && !inputs) && /* @__PURE__ */ jsxs("div", { className: cn("flex h-[18px] items-center justify-between gap-3 whitespace-nowrap", vertical && "min-w-full"), children: [
+    label ? /* @__PURE__ */ jsx("span", { id: labelId, className: "text-sm leading-[18px] font-medium text-text-default", children: label }) : /* @__PURE__ */ jsx("span", {}),
+    showValue && !inputs && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-sm leading-[18px] text-text-muted tabular-nums", children: readout })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "slider-field",
+      "data-orientation": orientation,
+      "data-disabled": disabled || void 0,
+      className: cn("flex flex-col gap-2", vertical ? "w-max items-center" : "w-full", className),
+      children: [
+        head,
+        vertical ? /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-2", disabled && "opacity-50"), children: [
+          inputs && range && field(1),
+          slider,
+          inputs && field(0)
+        ] }) : /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", disabled && "opacity-50"), children: [
+          inputs && range && field(0),
+          slider,
+          inputs && field(range ? 1 : 0)
+        ] })
+      ]
+    }
+  );
+}
+function SliderInput({
+  value,
+  disabled,
+  onCommit,
+  "aria-label": ariaLabel
+}) {
+  const [draft, setDraft] = React.useState(null);
+  const commit = () => {
+    if (draft == null) return;
+    const n = Number(draft.replace(",", "."));
+    setDraft(null);
+    if (draft.trim() !== "" && Number.isFinite(n) && n !== value) onCommit(n);
+  };
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      size: "sm",
+      inputMode: "decimal",
+      "aria-label": ariaLabel,
+      disabled,
+      value: draft ?? String(value),
+      onChange: (e) => setDraft(e.target.value),
+      onBlur: commit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") commit();
+        if (e.key === "Escape") setDraft(null);
+      },
+      wrapperClassName: "w-16 shrink-0",
+      className: "[&_input]:text-center [&_input]:tabular-nums"
+    }
+  );
+}
+
+export { Slider };
+//# sourceMappingURL=chunk-L6NCCSIP.js.map
+//# sourceMappingURL=chunk-L6NCCSIP.js.map

package/chunk-L6NCCSIP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/slider.tsx"],"names":["SliderPrimitive"],"mappings":"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","file":"chunk-L6NCCSIP.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slider as SliderPrimitive } from 'radix-ui'\nimport { cn } from '../lib/utils'\nimport { Input } from './input'\nimport { TooltipBubble } from './tooltip'\n\n/**\n * Slider, 1:1 with the uiKit `Slider` set (4025:3621): a 4px bg/muted track with the picked\n * part in action/primary/bg, and 16px bg/popover thumbs with a border/strong ring and the\n * shadow-sm drop (0 1 3). Hover turns the ring text/subtle, keyboard focus adds a 2px focus\n * ring, disabled fades the whole slider to 50%. 20px tall, so the thumbs have room.\n *\n * One value or a range: pass a number or a `[from, to]` pair as `value` / `defaultValue`.\n *\n * Around it, all optional:\n * - `label` on the left above the track and, on the same line at the right, the picked value\n *   (`showValue`, on by default, \"40\" or \"20 – 80\", through `formatValue`).\n * - `inputs`: small number fields beside the track to type a value: the range's from on the\n *   left and to on the right, a single value on the right. They take the readout's place.\n *   A typed value is clamped, snapped to `step` and kept in order on Enter or blur; Escape\n *   puts the current value back.\n * - `tooltip`: the value in a Tooltip bubble over the thumb while it is dragged or moved with\n *   the keys.\n * - `orientation=\"vertical\"`: the track runs bottom to top (160px unless styled), the inputs\n *   go above (to) and below (from or the single value).\n *\n * Built on the Radix Slider: arrow keys, Page Up/Down, Home/End, a native form value (`name`)\n * and a `slider` role per thumb, with `formatValue` as its spoken value.\n */\nexport interface SliderProps {\n  /** A number, or a `[from, to]` pair for a range. */\n  value?: number | [number, number]\n  defaultValue?: number | [number, number]\n  /** Every change while it moves. Gets a number or a pair, as given. */\n  onValueChange?: (value: number | [number, number]) => void\n  /** Once, when a drag ends or a key or a typed value changes it. */\n  onValueCommit?: (value: number | [number, number]) => void\n  min?: number\n  max?: number\n  step?: number\n  /** Smallest gap between the range's thumbs, in steps. */\n  minStepsBetweenThumbs?: number\n  label?: React.ReactNode\n  /** The picked value at the right of the label's line. Hidden while `inputs` are on. */\n  showValue?: boolean\n  /** Small number fields beside the track to type the value. */\n  inputs?: boolean\n  /** The value in a bubble over the thumb while it moves. */\n  tooltip?: boolean\n  orientation?: 'horizontal' | 'vertical'\n  /** How a value reads in the readout, the bubble, the fields' neighbours and to screen readers. */\n  formatValue?: (value: number) => string\n  disabled?: boolean\n  /** Form field name, for a native form submit. */\n  name?: string\n  id?: string\n  /** Names the slider when there is no `label`. */\n  'aria-label'?: string\n  /** Classes for the outer wrapper. */\n  className?: string\n}\n\nconst decimals = (n: number) => (String(n).split('.')[1] ?? '').length\n\nexport function Slider({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onValueCommit,\n  min = 0,\n  max = 100,\n  step = 1,\n  minStepsBetweenThumbs = 0,\n  label,\n  showValue = true,\n  inputs = false,\n  tooltip = false,\n  orientation = 'horizontal',\n  formatValue = String,\n  disabled = false,\n  name,\n  id,\n  'aria-label': ariaLabel,\n  className,\n}: SliderProps) {\n  const autoId = React.useId()\n  const sliderId = id ?? autoId\n  const labelId = `${sliderId}-label`\n  const vertical = orientation === 'vertical'\n\n  const range = Array.isArray(valueProp ?? defaultValue)\n  const toArray = (v: number | [number, number] | undefined) => (v == null ? (range ? [min, max] : [min]) : Array.isArray(v) ? [...v] : [v])\n  const toOut = (a: number[]) => (range ? ([a[0], a[1]] as [number, number]) : a[0])\n\n  const [uncontrolled, setUncontrolled] = React.useState(() => toArray(defaultValue))\n  const values = valueProp != null ? toArray(valueProp) : uncontrolled\n  const change = (next: number[]) => {\n    if (valueProp == null) setUncontrolled(next)\n    onValueChange?.(toOut(next))\n  }\n\n  // The bubble shows on the thumb that moves: while a pointer drags it, or for a moment after a key.\n  const [dragging, setDragging] = React.useState(false)\n  const [keying, setKeying] = React.useState(false)\n  const [focused, setFocused] = React.useState<number | null>(null)\n  const keyTimer = React.useRef<ReturnType<typeof setTimeout>>(undefined)\n  React.useEffect(() => {\n    if (!dragging) return\n    const end = () => setDragging(false)\n    window.addEventListener('pointerup', end)\n    window.addEventListener('pointercancel', end)\n    return () => {\n      window.removeEventListener('pointerup', end)\n      window.removeEventListener('pointercancel', end)\n    }\n  }, [dragging])\n  React.useEffect(() => () => clearTimeout(keyTimer.current), [])\n\n  const readout = range ? `${formatValue(values[0])} – ${formatValue(values[1])}` : formatValue(values[0])\n  const thumbLabel = (i: number) => (range ? (i === 0 ? 'From' : 'To') : undefined)\n  const fieldLabel = (i: number) => (range ? (i === 0 ? 'From' : 'To') : 'Value')\n\n  // A typed value: clamped, snapped to the step and kept on its side of the other thumb.\n  const commitTyped = (i: number, typed: number) => {\n    const places = decimals(step)\n    let v = Math.round((typed - min) / step) * step + min\n    v = Number(Math.min(max, Math.max(min, v)).toFixed(places))\n    const gap = minStepsBetweenThumbs * step\n    if (range) v = i === 0 ? Math.min(v, values[1] - gap) : Math.max(v, values[0] + gap)\n    const next = values.map((x, j) => (j === i ? v : x))\n    change(next)\n    onValueCommit?.(toOut(next))\n  }\n\n  const field = (i: number) => (\n    <SliderInput\n      key={i}\n      value={values[i]}\n      disabled={disabled}\n      aria-label={fieldLabel(i)}\n      onCommit={(v) => commitTyped(i, v)}\n    />\n  )\n\n  const slider = (\n    <SliderPrimitive.Root\n      id={sliderId}\n      data-slot=\"slider\"\n      value={values}\n      onValueChange={change}\n      onValueCommit={(v) => onValueCommit?.(toOut(v))}\n      min={min}\n      max={max}\n      step={step}\n      minStepsBetweenThumbs={minStepsBetweenThumbs}\n      orientation={orientation}\n      disabled={disabled}\n      name={name}\n      aria-labelledby={label ? labelId : undefined}\n      onPointerDown={() => !disabled && setDragging(true)}\n      className={cn(\n        'relative flex shrink-0 touch-none items-center select-none data-[disabled]:cursor-not-allowed',\n        vertical ? 'h-40 w-5 flex-col' : 'h-5 w-full min-w-0 flex-1',\n      )}\n    >\n      <SliderPrimitive.Track\n        className={cn('relative grow cursor-pointer overflow-hidden rounded-full bg-bg-muted', vertical ? 'w-1' : 'h-1')}\n      >\n        <SliderPrimitive.Range className={cn('absolute rounded-full bg-action-primary-bg', vertical ? 'w-full' : 'h-full')} />\n      </SliderPrimitive.Track>\n      {values.map((v, i) => (\n        <SliderPrimitive.Thumb\n          key={i}\n          aria-label={thumbLabel(i) ?? (label ? undefined : ariaLabel)}\n          aria-labelledby={!range && label ? labelId : undefined}\n          aria-valuetext={formatValue(v)}\n          onFocus={() => setFocused(i)}\n          onBlur={() => {\n            setFocused(null)\n            setKeying(false)\n          }}\n          onKeyDown={(e) => {\n            if (!/^(Arrow|Page|Home|End)/.test(e.key)) return\n            setKeying(true)\n            clearTimeout(keyTimer.current)\n            keyTimer.current = setTimeout(() => setKeying(false), 1000)\n          }}\n          className={cn(\n            'relative block size-4 cursor-grab rounded-full border border-border-strong bg-bg-popover outline-none active:cursor-grabbing',\n            '[box-shadow:0_1px_3px_0_var(--effect-shadow-sm)]',\n            'transition-[border-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)',\n            'hover:border-text-subtle focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]',\n            'data-[disabled]:cursor-not-allowed data-[disabled]:hover:border-border-strong',\n          )}\n        >\n          {tooltip && (\n            <TooltipBubble\n              aria-hidden\n              label={formatValue(v)}\n              data-visible={(dragging || keying) && focused === i ? '' : undefined}\n              className={cn(\n                'pointer-events-none absolute tabular-nums opacity-0 transition-[opacity,translate] duration-(--duration-fast) ease-(--ease-out) data-[visible]:opacity-100',\n                vertical\n                  ? 'top-1/2 left-full ml-2 -translate-x-0.5 -translate-y-1/2 data-[visible]:translate-x-0'\n                  : 'bottom-full left-1/2 mb-2 -translate-x-1/2 translate-y-0.5 data-[visible]:translate-y-0',\n              )}\n            />\n          )}\n        </SliderPrimitive.Thumb>\n      ))}\n    </SliderPrimitive.Root>\n  )\n\n  const head = (label || (showValue && !inputs)) && (\n    <div className={cn('flex h-[18px] items-center justify-between gap-3 whitespace-nowrap', vertical && 'min-w-full')}>\n      {label ? (\n        <span id={labelId} className=\"text-sm leading-[18px] font-medium text-text-default\">\n          {label}\n        </span>\n      ) : (\n        <span />\n      )}\n      {showValue && !inputs && (\n        <span aria-hidden className=\"text-sm leading-[18px] text-text-muted tabular-nums\">\n          {readout}\n        </span>\n      )}\n    </div>\n  )\n\n  return (\n    <div\n      data-slot=\"slider-field\"\n      data-orientation={orientation}\n      data-disabled={disabled || undefined}\n      className={cn('flex flex-col gap-2', vertical ? 'w-max items-center' : 'w-full', className)}\n    >\n      {head}\n      {vertical ? (\n        <div className={cn('flex flex-col items-center gap-2', disabled && 'opacity-50')}>\n          {inputs && range && field(1)}\n          {slider}\n          {inputs && field(0)}\n        </div>\n      ) : (\n        <div className={cn('flex items-center gap-3', disabled && 'opacity-50')}>\n          {inputs && range && field(0)}\n          {slider}\n          {inputs && field(range ? 1 : 0)}\n        </div>\n      )}\n    </div>\n  )\n}\n\n/** A small Input for one value: free typing, then committed on Enter or blur; Escape undoes. */\nfunction SliderInput({\n  value,\n  disabled,\n  onCommit,\n  'aria-label': ariaLabel,\n}: {\n  value: number\n  disabled?: boolean\n  onCommit: (value: number) => void\n  'aria-label': string\n}) {\n  const [draft, setDraft] = React.useState<string | null>(null)\n  const commit = () => {\n    if (draft == null) return\n    const n = Number(draft.replace(',', '.'))\n    setDraft(null)\n    if (draft.trim() !== '' && Number.isFinite(n) && n !== value) onCommit(n)\n  }\n  return (\n    <Input\n      size=\"sm\"\n      inputMode=\"decimal\"\n      aria-label={ariaLabel}\n      disabled={disabled}\n      value={draft ?? String(value)}\n      onChange={(e) => setDraft(e.target.value)}\n      onBlur={commit}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') commit()\n        if (e.key === 'Escape') setDraft(null)\n      }}\n      wrapperClassName=\"w-16 shrink-0\"\n      className=\"[&_input]:text-center [&_input]:tabular-nums\"\n    />\n  )\n}\n"]}

package/chunk-LLHTVIM3.js

@@ -0,0 +1,50 @@
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { RadioGroup as RadioGroup$1 } from 'radix-ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function RadioGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(RadioGroup$1.Root, { "data-slot": "radio-group", className: cn("grid gap-3", className), ...props });
+}
+function Radio({ className, label, description, placement = "left", id, disabled, ...props }) {
+  const autoId = React.useId();
+  const radioId = id ?? autoId;
+  const labelId = label ? `${radioId}-label` : void 0;
+  const descriptionId = description ? `${radioId}-description` : void 0;
+  const circle = /* @__PURE__ */ jsx(
+    RadioGroup$1.Item,
+    {
+      id: radioId,
+      "data-slot": "radio",
+      "aria-labelledby": labelId,
+      "aria-describedby": descriptionId,
+      disabled,
+      className: cn("peer satin-radio", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(RadioGroup$1.Indicator, { className: "satin-radio-dot" })
+    }
+  );
+  if (!label && !description) return circle;
+  return (
+    // The whole field is the <label>: the control, its label and its description all toggle it.
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: radioId,
+        "data-slot": "radio-field",
+        className: cn("flex cursor-pointer items-start gap-2 has-disabled:cursor-not-allowed has-data-disabled:cursor-not-allowed [&>:first-child]:mt-0.5", placement === "right" && "flex-row-reverse justify-between"),
+        children: [
+          circle,
+          /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 gap-0.5 text-base text-text-default peer-data-disabled:text-text-subtle peer-data-disabled:*:text-text-subtle", children: [
+            label && /* @__PURE__ */ jsx("span", { id: labelId, className: "block leading-5 font-medium", children: label }),
+            description && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "block leading-5 text-text-muted", children: description })
+          ] })
+        ]
+      }
+    )
+  );
+}
+
+export { Radio, RadioGroup };
+//# sourceMappingURL=chunk-LLHTVIM3.js.map
+//# sourceMappingURL=chunk-LLHTVIM3.js.map

package/chunk-LLHTVIM3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/radio.tsx"],"names":["RadioGroupPrimitive"],"mappings":";;;;;AAqBO,SAAS,UAAA,CAAW,EAAE,SAAA,EAAW,GAAG,OAAM,EAAoB;AACnE,EAAA,uBAAO,GAAA,CAACA,YAAA,CAAoB,IAAA,EAApB,EAAyB,WAAA,EAAU,aAAA,EAAc,SAAA,EAAW,EAAA,CAAG,YAAA,EAAc,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC9G;AAWO,SAAS,KAAA,CAAM,EAAE,SAAA,EAAW,KAAA,EAAO,WAAA,EAAa,SAAA,GAAY,MAAA,EAAQ,EAAA,EAAI,QAAA,EAAU,GAAG,KAAA,EAAM,EAAe;AAC/G,EAAA,MAAM,SAAe,KAAA,CAAA,KAAA,EAAM;AAC3B,EAAA,MAAM,UAAU,EAAA,IAAM,MAAA;AACtB,EAAA,MAAM,OAAA,GAAU,KAAA,GAAQ,CAAA,EAAG,OAAO,CAAA,MAAA,CAAA,GAAW,MAAA;AAC7C,EAAA,MAAM,aAAA,GAAgB,WAAA,GAAc,CAAA,EAAG,OAAO,CAAA,YAAA,CAAA,GAAiB,MAAA;AAE/D,EAAA,MAAM,MAAA,mBACJ,GAAA;AAAA,IAACA,YAAA,CAAoB,IAAA;AAAA,IAApB;AAAA,MACC,EAAA,EAAI,OAAA;AAAA,MACJ,WAAA,EAAU,OAAA;AAAA,MACV,iBAAA,EAAiB,OAAA;AAAA,MACjB,kBAAA,EAAkB,aAAA;AAAA,MAClB,QAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,kBAAA,EAAoB,SAAS,CAAA;AAAA,MAC1C,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAACA,YAAA,CAAoB,SAAA,EAApB,EAA8B,WAAU,iBAAA,EAAkB;AAAA;AAAA,GAC7D;AAGF,EAAA,IAAI,CAAC,KAAA,IAAS,CAAC,WAAA,EAAa,OAAO,MAAA;AAEnC,EAAA;AAAA;AAAA,oBAEE,IAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,OAAA;AAAA,QACT,WAAA,EAAU,aAAA;AAAA,QAEV,SAAA,EAAW,EAAA,CAAG,oIAAA,EAAsI,SAAA,KAAc,WAAW,kCAAkC,CAAA;AAAA,QAE9M,QAAA,EAAA;AAAA,UAAA,MAAA;AAAA,0BAED,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4HAAA,EACZ,QAAA,EAAA;AAAA,YAAA,KAAA,wBACE,MAAA,EAAA,EAAK,EAAA,EAAI,OAAA,EAAS,SAAA,EAAU,+BAC1B,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,YAED,+BACC,GAAA,CAAC,MAAA,EAAA,EAAK,IAAI,aAAA,EAAe,SAAA,EAAU,mCAChC,QAAA,EAAA,WAAA,EACH;AAAA,WAAA,EAEJ;AAAA;AAAA;AAAA;AACF;AAEJ","file":"chunk-LLHTVIM3.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { RadioGroup as RadioGroupPrimitive } from 'radix-ui'\nimport { cn } from '../lib/utils'\n\n/**\n * Radio, 1:1 with the uiKit `_radioBase` (852:22410) and `Radio` (852:22426) sets: a 16px\n * circle, checked as a solid primary fill with a 6px dot, with an optional label (14/20 medium,\n * text/default) and description (14/20 regular, muted) 2px apart, 8px from the circle, on either\n * side. Disabled turns both texts text/subtle. The look of every state is\n * styles/components/radio.css.\n *\n * A Radio lives in a RadioGroup (Radix): the group owns the value, so `checked` (Figma's\n * property) follows from the group's `value` / `defaultValue`, and arrow keys move between\n * options. With a label or description the whole field is a `<label>`, so a click anywhere on\n * it (circle, label, description) picks the option, and hovering it hovers the circle; the label\n * names the circle, the description is wired with `aria-describedby`.\n */\nexport interface RadioGroupProps extends React.ComponentProps<typeof RadioGroupPrimitive.Root> {}\n\nexport function RadioGroup({ className, ...props }: RadioGroupProps) {\n  return <RadioGroupPrimitive.Root data-slot=\"radio-group\" className={cn('grid gap-3', className)} {...props} />\n}\n\nexport interface RadioProps extends React.ComponentProps<typeof RadioGroupPrimitive.Item> {\n  label?: React.ReactNode\n  description?: React.ReactNode\n  /** Which side of the text the circle sits on. */\n  placement?: 'left' | 'right'\n  /** Show a state without interacting, for state sheets. */\n  'data-force'?: 'hover' | 'focus' | 'pressed'\n}\n\nexport function Radio({ className, label, description, placement = 'left', id, disabled, ...props }: RadioProps) {\n  const autoId = React.useId()\n  const radioId = id ?? autoId\n  const labelId = label ? `${radioId}-label` : undefined\n  const descriptionId = description ? `${radioId}-description` : undefined\n\n  const circle = (\n    <RadioGroupPrimitive.Item\n      id={radioId}\n      data-slot=\"radio\"\n      aria-labelledby={labelId}\n      aria-describedby={descriptionId}\n      disabled={disabled}\n      className={cn('peer satin-radio', className)}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator className=\"satin-radio-dot\" />\n    </RadioGroupPrimitive.Item>\n  )\n\n  if (!label && !description) return circle\n\n  return (\n    // The whole field is the <label>: the control, its label and its description all toggle it.\n    <label\n      htmlFor={radioId}\n      data-slot=\"radio-field\"\n      // The 16px circle sits on the middle of the label's first 20px line.\n      className={cn('flex cursor-pointer items-start gap-2 has-disabled:cursor-not-allowed has-data-disabled:cursor-not-allowed [&>:first-child]:mt-0.5', placement === 'right' && 'flex-row-reverse justify-between')}\n    >\n      {circle}\n      {/* Disabled (on the item or the whole group) turns both texts text/subtle. */}\n      <div className=\"grid min-w-0 gap-0.5 text-base text-text-default peer-data-disabled:text-text-subtle peer-data-disabled:*:text-text-subtle\">\n        {label && (\n          <span id={labelId} className=\"block leading-5 font-medium\">\n            {label}\n          </span>\n        )}\n        {description && (\n          <span id={descriptionId} className=\"block leading-5 text-text-muted\">\n            {description}\n          </span>\n        )}\n      </div>\n    </label>\n  )\n}\n"]}

package/chunk-LW3TRU5W.js

@@ -0,0 +1,131 @@
+import { useFieldChrome, FieldChrome } from './chunk-72OCFAPT.js';
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { Minus, Plus } from 'iconoir-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var decimals = (n) => (String(n).split(".")[1] ?? "").length;
+function NumberInput({
+  value: valueProp,
+  defaultValue = 0,
+  onValueChange,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  size = "md",
+  formatValue = String,
+  label,
+  hint,
+  error,
+  disabled,
+  id,
+  name,
+  wrapperClassName,
+  className,
+  ...props
+}) {
+  const chrome = useFieldChrome({ id, disabled, error, hint });
+  const [inner, setInner] = React.useState(defaultValue);
+  const value = valueProp ?? inner;
+  const [draft, setDraft] = React.useState(null);
+  const clamp = (n) => {
+    const snapped = Number.isFinite(min) ? Math.round((n - min) / step) * step + min : Math.round(n / step) * step;
+    return Number(Math.min(max, Math.max(min, snapped)).toFixed(decimals(step)));
+  };
+  const commit = (n) => {
+    const next = clamp(n);
+    setDraft(null);
+    if (next === value) return;
+    if (valueProp == null) setInner(next);
+    onValueChange?.(next);
+  };
+  const by = (k) => commit(value + k * step);
+  const atMin = value <= min;
+  const atMax = value >= max;
+  const btn = cn(
+    "grid size-6 shrink-0 place-items-center rounded-md text-text-muted outline-none",
+    "transition-[background-color,color,opacity] duration-(--duration-fast) ease-(--ease-out)",
+    "hover:bg-bg-hover hover:text-text-default focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+    "disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-4 [&_svg]:[stroke-width:1.875]"
+  );
+  return /* @__PURE__ */ jsx(FieldChrome, { label, chrome, className: wrapperClassName, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "number-input",
+      "data-size": size,
+      "data-filled": true,
+      "data-invalid": chrome.invalid || void 0,
+      "data-disabled": chrome.disabled || void 0,
+      className: cn("satin-field gap-1 px-1", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            "aria-label": "Decrease",
+            "aria-controls": chrome.controlId,
+            disabled: chrome.disabled || atMin,
+            onClick: () => by(-1),
+            className: btn,
+            children: /* @__PURE__ */ jsx(Minus, { "aria-hidden": true })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: chrome.controlId,
+            name,
+            role: "spinbutton",
+            inputMode: "decimal",
+            "aria-valuenow": value,
+            "aria-valuemin": Number.isFinite(min) ? min : void 0,
+            "aria-valuemax": Number.isFinite(max) ? max : void 0,
+            "aria-valuetext": formatValue(value),
+            "aria-invalid": chrome.invalid || void 0,
+            "aria-describedby": chrome.describedBy,
+            "aria-label": props["aria-label"],
+            disabled: chrome.disabled,
+            value: draft ?? formatValue(value),
+            onChange: (e) => setDraft(e.target.value),
+            onBlur: () => draft != null && commit(Number(draft.replace(",", ".").replace(/[^\d.-]/g, "")) || 0),
+            onKeyDown: (e) => {
+              const keys = {
+                ArrowUp: () => by(1),
+                ArrowDown: () => by(-1),
+                PageUp: () => by(10),
+                PageDown: () => by(-10),
+                Home: () => Number.isFinite(min) && commit(min),
+                End: () => Number.isFinite(max) && commit(max),
+                Enter: () => draft != null && commit(Number(draft.replace(",", ".").replace(/[^\d.-]/g, "")) || 0),
+                Escape: () => setDraft(null)
+              };
+              if (keys[e.key]) {
+                e.preventDefault();
+                keys[e.key]();
+              }
+            },
+            className: "satin-field-input text-center tabular-nums"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            "aria-label": "Increase",
+            "aria-controls": chrome.controlId,
+            disabled: chrome.disabled || atMax,
+            onClick: () => by(1),
+            className: btn,
+            children: /* @__PURE__ */ jsx(Plus, { "aria-hidden": true })
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+export { NumberInput };
+//# sourceMappingURL=chunk-LW3TRU5W.js.map
+//# sourceMappingURL=chunk-LW3TRU5W.js.map

package/chunk-LW3TRU5W.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/number-input.tsx"],"names":[],"mappings":"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","file":"chunk-LW3TRU5W.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Minus, Plus } from 'iconoir-react'\nimport { cn } from '../lib/utils'\nimport { FieldChrome, useFieldChrome } from './select'\n\n/**\n * NumberInput, 1:1 with the uiKit design (🆕 input otp & number): Input's field skin and sizes\n * (sm 28, md 32, lg 36) with − and + at its ends and the value centred, tabular. The buttons are\n * 24px squares (radius-md, hover bg/hover, text/muted → text/default); at `min` or `max` the one\n * that would cross it fades to 40% and stops.\n *\n * It's a spinbutton: ArrowUp / ArrowDown step, PageUp / PageDown step ten times, Home / End jump\n * to `min` / `max`. Typing is free while focused; Enter or leaving the field clamps it, snaps it to\n * `step` and commits; Escape puts the last value back.\n */\nexport interface NumberInputProps {\n  value?: number\n  defaultValue?: number\n  onValueChange?: (value: number) => void\n  min?: number\n  max?: number\n  step?: number\n  size?: 'sm' | 'md' | 'lg'\n  /** How the value reads in the field and to screen readers. */\n  formatValue?: (value: number) => string\n  label?: React.ReactNode\n  hint?: React.ReactNode\n  error?: React.ReactNode | boolean\n  disabled?: boolean\n  id?: string\n  name?: string\n  'aria-label'?: string\n  /** Classes for the outer wrapper (label + field + hint). `className` styles the field. */\n  wrapperClassName?: string\n  className?: string\n}\n\nconst decimals = (n: number) => (String(n).split('.')[1] ?? '').length\n\nexport function NumberInput({\n  value: valueProp,\n  defaultValue = 0,\n  onValueChange,\n  min = -Infinity,\n  max = Infinity,\n  step = 1,\n  size = 'md',\n  formatValue = String,\n  label,\n  hint,\n  error,\n  disabled,\n  id,\n  name,\n  wrapperClassName,\n  className,\n  ...props\n}: NumberInputProps) {\n  const chrome = useFieldChrome({ id, disabled, error, hint })\n  const [inner, setInner] = React.useState(defaultValue)\n  const value = valueProp ?? inner\n  const [draft, setDraft] = React.useState<string | null>(null)\n\n  const clamp = (n: number) => {\n    const snapped = Number.isFinite(min) ? Math.round((n - min) / step) * step + min : Math.round(n / step) * step\n    return Number(Math.min(max, Math.max(min, snapped)).toFixed(decimals(step)))\n  }\n  const commit = (n: number) => {\n    const next = clamp(n)\n    setDraft(null)\n    if (next === value) return\n    if (valueProp == null) setInner(next)\n    onValueChange?.(next)\n  }\n  const by = (k: number) => commit(value + k * step)\n\n  const atMin = value <= min\n  const atMax = value >= max\n  const btn = cn(\n    'grid size-6 shrink-0 place-items-center rounded-md text-text-muted outline-none',\n    'transition-[background-color,color,opacity] duration-(--duration-fast) ease-(--ease-out)',\n    'hover:bg-bg-hover hover:text-text-default focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]',\n    'disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-4 [&_svg]:[stroke-width:1.875]',\n  )\n\n  return (\n    <FieldChrome label={label} chrome={chrome} className={wrapperClassName}>\n      <div\n        data-slot=\"number-input\"\n        data-size={size}\n        data-filled\n        data-invalid={chrome.invalid || undefined}\n        data-disabled={chrome.disabled || undefined}\n        className={cn('satin-field gap-1 px-1', className)}\n      >\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-label=\"Decrease\"\n          aria-controls={chrome.controlId}\n          disabled={chrome.disabled || atMin}\n          onClick={() => by(-1)}\n          className={btn}\n        >\n          <Minus aria-hidden />\n        </button>\n        <input\n          id={chrome.controlId}\n          name={name}\n          role=\"spinbutton\"\n          inputMode=\"decimal\"\n          aria-valuenow={value}\n          aria-valuemin={Number.isFinite(min) ? min : undefined}\n          aria-valuemax={Number.isFinite(max) ? max : undefined}\n          aria-valuetext={formatValue(value)}\n          aria-invalid={chrome.invalid || undefined}\n          aria-describedby={chrome.describedBy}\n          aria-label={props['aria-label']}\n          disabled={chrome.disabled}\n          value={draft ?? formatValue(value)}\n          onChange={(e) => setDraft(e.target.value)}\n          onBlur={() => draft != null && commit(Number(draft.replace(',', '.').replace(/[^\\d.-]/g, '')) || 0)}\n          onKeyDown={(e) => {\n            const keys: Record<string, () => void> = {\n              ArrowUp: () => by(1),\n              ArrowDown: () => by(-1),\n              PageUp: () => by(10),\n              PageDown: () => by(-10),\n              Home: () => Number.isFinite(min) && commit(min),\n              End: () => Number.isFinite(max) && commit(max),\n              Enter: () => draft != null && commit(Number(draft.replace(',', '.').replace(/[^\\d.-]/g, '')) || 0),\n              Escape: () => setDraft(null),\n            }\n            if (keys[e.key]) {\n              e.preventDefault()\n              keys[e.key]()\n            }\n          }}\n          className=\"satin-field-input text-center tabular-nums\"\n        />\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-label=\"Increase\"\n          aria-controls={chrome.controlId}\n          disabled={chrome.disabled || atMax}\n          onClick={() => by(1)}\n          className={btn}\n        >\n          <Plus aria-hidden />\n        </button>\n      </div>\n    </FieldChrome>\n  )\n}\n"]}

package/chunk-LZMKSFCF.js

@@ -0,0 +1,79 @@
+import { ChartCard, ChartTooltip, defaultFormat, ChartLegendRow } from './chunk-YPJYW624.js';
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var seriesColor = (i) => `var(--chart-${i % 5 + 1})`;
+function ChannelCard({
+  data,
+  formatValue = defaultFormat,
+  highlight,
+  total,
+  ...props
+}) {
+  const [hovered, setHovered] = React.useState(null);
+  const [anchor, setAnchor] = React.useState(null);
+  const active = hovered ?? highlight ?? null;
+  const sum = data.reduce((n, d) => n + d.value, 0);
+  const last = data.length - 1;
+  return /* @__PURE__ */ jsx(ChartCard, { total: total ?? formatValue(sum), ...props, children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-4", onPointerLeave: () => setHovered(null), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "relative grid h-3.5 gap-x-0.5",
+        style: { gridTemplateColumns: data.map((d) => `minmax(0, ${Math.max(d.value, 0)}fr)`).join(" ") },
+        children: data.map((d, i) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: active === i ? setAnchor : void 0,
+            onPointerEnter: () => setHovered(i),
+            className: cn(
+              "relative rounded-[1.5px] transition-opacity duration-(--duration-fast) ease-(--ease-out)",
+              i === 0 && "rounded-l-[4px]",
+              i === last && "rounded-r-[4px]",
+              active !== null && active !== i && "opacity-15"
+            ),
+            style: { background: seriesColor(i) },
+            children: active === i && /* @__PURE__ */ jsx(ChartTooltip, { anchor, sideOffset: 8, label: d.tooltipLabel ?? d.label, value: formatValue(d.value) })
+          },
+          d.label
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: "flex flex-col gap-0.5 @min-[560px]:grid @min-[560px]:grid-flow-col @min-[560px]:auto-cols-fr @min-[560px]:gap-x-6",
+        style: { gridTemplateRows: `repeat(${Math.ceil(data.length / 2)}, auto)` },
+        "aria-label": props.title,
+        children: data.map((d, i) => /* @__PURE__ */ jsx(
+          "li",
+          {
+            tabIndex: 0,
+            onPointerEnter: () => setHovered(i),
+            onFocus: () => setHovered(i),
+            onBlur: () => setHovered(null),
+            "aria-label": `${d.label}: ${formatValue(d.value)}, ${Math.round(d.value / (sum || 1) * 100)}%`,
+            className: "rounded-md focus-visible:outline-none focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+            children: /* @__PURE__ */ jsx(
+              ChartLegendRow,
+              {
+                color: seriesColor(i),
+                label: d.label,
+                value: formatValue(d.value),
+                active: active === i,
+                dimmed: active !== null && active !== i
+              }
+            )
+          },
+          d.label
+        ))
+      }
+    )
+  ] }) });
+}
+
+export { ChannelCard };
+//# sourceMappingURL=chunk-LZMKSFCF.js.map
+//# sourceMappingURL=chunk-LZMKSFCF.js.map

package/chunk-LZMKSFCF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/channel-chart.tsx"],"names":[],"mappings":"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","file":"chunk-LZMKSFCF.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../lib/utils'\nimport { ChartCard, ChartLegendRow, ChartTooltip, defaultFormat, type ChartCardBaseProps } from './chart'\n\n/**\n * Channel chart, 1:1 with the uiKit `chart/channelCard` (3608:18797), in the shared card\n * frame (chart.tsx).\n *\n * ChannelCard: the KPI (the sum unless given) with its change badge, a 14px stacked bar of fr\n * segments 2px apart in chart/1–5 (4px outer corners, 1.5px inner), and a legend row per\n * channel (8px swatch, label, value, 32 high, 2px apart), in two columns from 560px. Hover (or `highlight`) fades the\n * other segments to 15% and the other rows to 45%, and fills the row bg/muted.\n */\nexport interface ChannelCardProps extends ChartCardBaseProps {}\n\nconst seriesColor = (i: number) => `var(--chart-${(i % 5) + 1})`\n\nexport function ChannelCard({\n  data,\n  formatValue = defaultFormat,\n  highlight,\n  total,\n  ...props\n}: ChannelCardProps) {\n  const [hovered, setHovered] = React.useState<number | null>(null)\n  const [anchor, setAnchor] = React.useState<HTMLElement | null>(null)\n  const active = hovered ?? highlight ?? null\n  const sum = data.reduce((n, d) => n + d.value, 0)\n  const last = data.length - 1\n\n  return (\n    <ChartCard total={total ?? formatValue(sum)} {...props}>\n      <div className=\"relative flex flex-col gap-4\" onPointerLeave={() => setHovered(null)}>\n        <div\n          aria-hidden\n          className=\"relative grid h-3.5 gap-x-0.5\"\n          style={{ gridTemplateColumns: data.map((d) => `minmax(0, ${Math.max(d.value, 0)}fr)`).join(' ') }}\n        >\n          {data.map((d, i) => (\n            <span\n              key={d.label}\n              ref={active === i ? setAnchor : undefined}\n              onPointerEnter={() => setHovered(i)}\n              className={cn(\n                'relative rounded-[1.5px] transition-opacity duration-(--duration-fast) ease-(--ease-out)',\n                i === 0 && 'rounded-l-[4px]',\n                i === last && 'rounded-r-[4px]',\n                active !== null && active !== i && 'opacity-15',\n              )}\n              style={{ background: seriesColor(i) }}\n            >\n              {active === i && (\n                <ChartTooltip anchor={anchor} sideOffset={8} label={d.tooltipLabel ?? d.label} value={formatValue(d.value)} />\n              )}\n            </span>\n          ))}\n        </div>\n        <ul\n          className=\"flex flex-col gap-0.5 @min-[560px]:grid @min-[560px]:grid-flow-col @min-[560px]:auto-cols-fr @min-[560px]:gap-x-6\"\n          style={{ gridTemplateRows: `repeat(${Math.ceil(data.length / 2)}, auto)` }}\n          aria-label={props.title}\n        >\n          {data.map((d, i) => (\n            <li\n              key={d.label}\n              tabIndex={0}\n              onPointerEnter={() => setHovered(i)}\n              onFocus={() => setHovered(i)}\n              onBlur={() => setHovered(null)}\n              aria-label={`${d.label}: ${formatValue(d.value)}, ${Math.round((d.value / (sum || 1)) * 100)}%`}\n              className=\"rounded-md focus-visible:outline-none focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]\"\n            >\n              <ChartLegendRow\n                color={seriesColor(i)}\n                label={d.label}\n                value={formatValue(d.value)}\n                active={active === i}\n                dimmed={active !== null && active !== i}\n              />\n            </li>\n          ))}\n        </ul>\n      </div>\n    </ChartCard>\n  )\n}\n"]}