@nexus-cross/design-system 1.0.4 → 1.0.5

package/DESIGN.md

@@ -0,0 +1,185 @@
+# NEXUS Design System
+
+## Overview
+
+This document defines the visual identity and design principles for projects using `@nexus-cross/design-system`. AI agents should read this file to generate consistent, on-brand UI across the entire project.
+
+## Visual Theme & Atmosphere
+
+The interface prioritizes **clarity, density, and efficiency**. It targets professional data-driven applications — trading platforms, dashboards, and enterprise tools — where information density matters but readability must not be sacrificed.
+
+Design philosophy:
+- **Functional minimalism**: Every visual element serves a purpose. No decorative flourishes.
+- **High contrast hierarchy**: Clear distinction between primary, secondary, and tertiary information.
+- **Calm neutrals with intentional accent**: The UI stays quiet until interaction or status demands attention.
+- **Dark-mode first**: Designed for prolonged screen use. Light mode is equally supported but dark mode is the primary context.
+
+## Color Palette & Roles
+
+### Background layers (depth ordering)
+
+| Token | Role | Light | Dark |
+|---|---|---|---|
+| `bg-default` | Page-level background | `#FFFFFF` | `#1E232E` |
+| `bg-subtle` | Recessed areas, sidebar backgrounds | `#F3F6F8` | `#161A21` |
+| `bg-strong` | Maximum depth contrast | `#ECF0F2` | `#000000` |
+
+### Surface layers (interactive containers)
+
+| Token | Role | Light | Dark |
+|---|---|---|---|
+| `surface-default` | Cards, panels, modals | `#FFFFFF` | `#1E232E` |
+| `surface-subtle` | Secondary panels, nested containers | `#F3F6F8` | `#252B39` |
+| `surface-strong` | Emphasized containers, active sections | `#ECF0F2` | `#363B4C` |
+| `surface-inverted` | High-contrast banners, tooltips | `#161A21` | `#F3F6F8` |
+
+**Rule**: Always layer surfaces in order: `bg` → `surface-default` → `surface-subtle`. Never place `surface-subtle` directly on `bg-default` — use `surface-default` as an intermediate layer.
+
+### Text hierarchy
+
+| Token | Role | When to use |
+|---|---|---|
+| `text-highlight` | Maximum emphasis | Titles, critical numbers, hero stats |
+| `text-primary` | Default readable text | Body text, labels, headings |
+| `text-secondary` | Supporting information | Descriptions, helper text, timestamps |
+| `text-tertiary` | De-emphasized content | Placeholders, disabled labels |
+| `text-muted` | Lowest priority | Watermarks, footnotes |
+
+**Rule**: Never use `text-muted` for any content the user needs to read. It exists only for decorative or supplementary text.
+
+### Accent colors
+
+| Token | Role |
+|---|---|
+| `accent-primary` (teal/green) | Primary CTA, links, active states, brand identity |
+| `accent-secondary` (purple) | Secondary actions, premium features, alternate highlights |
+
+**Rule**: Use `accent-primary` for the single most important action on screen. If there are multiple CTAs, only ONE gets `accent-primary` — the rest use `outline` or `ghost` variants.
+
+### Status colors
+
+| Token | Role | Usage context |
+|---|---|---|
+| `status-success` | Positive outcomes | Completed actions, profit, online status |
+| `status-warning` | Caution needed | Expiring items, approaching limits |
+| `status-danger` | Errors or destructive | Failed actions, losses, delete confirmations |
+| `status-info` | Neutral information | Tips, update notices, general alerts |
+
+**Rule**: Status colors should only appear in context — on alerts, badges, inline messages, or status indicators. Never use status colors for decorative purposes or general theming.
+
+## Typography Rules
+
+- **Font**: System font stack (inherits from the consuming project).
+- **Scale**: 8 levels from `text-xs` (0.75rem) to `text-xl` (1.25rem) for body, plus heading scale `h7`–`h1` and display `sm`–`lg`.
+- **Weight system**: Regular (400) for body, Medium (500) for labels, Semi-bold (600) for headings, Bold (700) for display and h1–h2.
+- **Letter spacing**: `-0.01em` for body text (tighter for readability at small sizes), `0` for headings and labels.
+- **Line height**: Built into each typography token — do not override.
+
+**Rule**: Use typography tokens (`text-text-sm`, `text-heading-h4`, etc.) instead of raw Tailwind sizes. The tokens include coordinated font-size, font-weight, line-height, and letter-spacing.
+
+## Spacing & Layout
+
+### Spacing scale
+
+- **Padding**: `none` (0), `2xs` (4px), `xs` (8px), `sm` (12px), `md` (16px), `lg` (24px), `xl` (32px), `2xl` (40px)
+- **Gap**: `none` (0), `xs` (4px), `sm` (8px), `md` (16px), `lg` (24px), `xl` (32px)
+
+### Control sizes
+
+| Size | Height | Use case |
+|---|---|---|
+| `xs` | 24px | Compact tables, inline actions |
+| `sm` | 32px | Secondary actions, filters |
+| `md` | 40px | Default inputs, buttons |
+| `lg` | 48px | Primary CTAs, prominent inputs |
+
+### Border radius
+
+| Token | Value | Use case |
+|---|---|---|
+| `corner-none` | 0px | Tables, full-width elements |
+| `corner-sm` | 4px | Chips, badges, small elements |
+| `corner-md` | 8px | Buttons, inputs, cards (default) |
+| `corner-lg` | 12px | Modals, large cards |
+| `corner-xl` | 16px | Hero sections, featured cards |
+| `corner-full` | 9999px | Avatars, pills, circular buttons |
+
+**Rule**: Be consistent within a feature. If a card uses `corner-md`, its internal buttons should also use `corner-md` or smaller — never larger than their container.
+
+### Breakpoints
+
+| Token | Value | Context |
+|---|---|---|
+| `screen-xs` | 320px | Small mobile |
+| `screen-sm` | 640px | Mobile |
+| `screen-md` | 768px | Tablet |
+| `screen-lg` | 1024px | Desktop |
+| `screen-xl` | 1280px | Wide desktop |
+| `screen-2xl` | 1440px | Ultra-wide |
+
+## Component Styling Principles
+
+- **Buttons**: `corner-md` (8px) radius by default. Primary actions use `accent-primary` fill with white text. Ghost and outline variants for secondary actions.
+- **Inputs**: `corner-md` radius, `border-default` border, `surface-default` background. Focus state uses `accent-primary` ring.
+- **Cards/Panels**: `surface-default` background, `border-default` border (1px), `corner-md` or `corner-lg` radius. No drop shadows by default — use `shadow-sm` only on hover or elevated contexts.
+- **Modals/Drawers**: `surface-default` background, `corner-lg` radius on visible corners. Overlay uses `opacity-overlay-dim` (0.5).
+- **Chips/Tags**: `corner-sm` (4px) radius, compact padding. Use semantic variants (`accent`, `success`, `danger`) to convey meaning.
+- **Tables**: No border-radius on the table itself. Use `surface-subtle` for alternating rows or header background. `border-default` for cell dividers.
+
+## Elevation & Shadows
+
+| Token | Value | Use case |
+|---|---|---|
+| `shadow-none` | `none` | Default state for most elements |
+| `shadow-sm` | `0 1px 2px 0 rgb(0 0 0 / 0.12)` | Hover states, subtle lift |
+| `shadow-md` | `0 1px 3px 0 rgb(0 0 0 / 0.12)` | Dropdown menus, popovers |
+| `shadow-lg` | `0 2px 8px -1px rgb(0 0 0 / 0.12)` | Modals, drawers |
+| `shadow-xl` | `0 4px 15px -3px rgb(0 0 0 / 0.12)` | Toast notifications |
+
+**Rule**: Prefer borders over shadows for static elements. Shadows should imply interactivity or overlay behavior. A card sitting on a page uses a border, not a shadow.
+
+## Animation & Motion
+
+- **Transitions**: 150ms (fast), 200ms (normal), 300ms (slow). Use `cubic-bezier(0, 0, 0.2, 1)` (ease-out) for most transitions.
+- **Enter animations**: 200ms with ease-out. Elements enter from the direction they were triggered (dropdown from top, drawer from side).
+- **Exit animations**: 150ms with `cubic-bezier(0.4, 0, 1, 1)` (ease-in). Exits are faster than enters.
+
+**Rule**: Only animate properties that benefit the user's understanding of state change (opacity, transform). Never animate color or background-color on large surfaces — it feels sluggish.
+
+## Do's and Don'ts
+
+### Colors
+
+- **Do** use semantic token names (`bg-surface-default`, `text-text-primary`), not raw hex values.
+- **Do** use `accent-primary` sparingly — one primary CTA per visible area.
+- **Don't** use `status-danger` red for non-error purposes (e.g., decorative highlights).
+- **Don't** mix `text-muted` with `bg-subtle` — the contrast ratio is too low for accessibility.
+- **Don't** override dark mode colors manually. The token system handles light/dark switching automatically.
+
+### Typography
+
+- **Do** use the typography token scale. Every text element should map to a token.
+- **Don't** use more than 3 different text sizes in a single card or section.
+- **Don't** use `font-bold` (700) for body text. Bold is reserved for headings and display text.
+
+### Layout
+
+- **Do** use the spacing scale tokens for all padding, margin, and gap values.
+- **Do** maintain consistent spacing within a component: if padding-x is `md`, padding-y should be `sm` or `md`, not `2xs`.
+- **Don't** use arbitrary pixel values (e.g., `p-[13px]`). Snap to the nearest spacing token.
+- **Don't** nest more than 3 surface layers deep. If you need more depth, reconsider the information architecture.
+
+### Components
+
+- **Do** use `@nexus-cross/design-system` components for any matching UI element. Never re-implement buttons, inputs, modals, etc.
+- **Do** use `className` prop for style overrides. The `cn()` utility resolves prefix conflicts automatically.
+- **Don't** use `!important` in className overrides — it's unnecessary and breaks the override system.
+- **Don't** wrap design system components in extra `<div>` elements for styling. Use `className` directly.
+- **Don't** import Radix UI, Headless UI, or similar libraries to build components that already exist in the design system.
+
+### Interaction States
+
+- **Do** provide visual feedback for all interactive elements: hover, focus, active, disabled.
+- **Do** use `focus-visible` outlines (not `focus`) to avoid showing focus rings on click.
+- **Don't** remove focus indicators entirely — they are required for keyboard accessibility.
+- **Don't** use `opacity` below `0.4` for disabled states — it becomes invisible in some contexts.

package/cursor-rules/nexus-ui-api.mdc

@@ -945,21 +945,25 @@ Text ellipsis. Built-in show more/less toggle.
 
 ## NumberInput
 
-Number input. Accelerated increment on long press. Exposes increment/decrement methods via ref. numberInputBind(ref, direction) binds same acceleration to external buttons.
+Number input with two variants: basic (chevron arrows) and bind (+/- buttons). Supports label, description, max display, accelerated increment on long press. numberInputBind(ref, direction) binds acceleration to external buttons.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
+| `variant` | `'basic'` \| `'bind'` | `"basic"` | Variant: basic (right chevron arrows) or bind (left/right +/- buttons) |
 | `value` | `number` \| `string` | - | Current value |
-| `size` | `'sm'` \| `'md'` \| `'lg'` \| `'xl'` | `"md"` | Size |
+| `size` | `'lg'` \| `'xl'` | `"lg"` | Size |
 | `error` | `boolean` | - | Error state |
 | `min` | `number` | - | Minimum value |
-| `max` | `number` | - | Maximum value |
+| `max` | `number` | - | Maximum value. When set, "Max {value}" is displayed in the header |
 | `step` | `number` | `1` | Step increment |
 | `digit` | `number` | `0` | Decimal places |
-| `hideButtons` | `boolean` | `false` | Hide default spin buttons. Use with numberInputBind for external button event binding |
+| `label` | `string` | - | Label text displayed above input |
+| `description` | `string` | - | Description text displayed below input |
+| `showMax` | `boolean` | - | Show "Max {value}" in header (defaults to true when max is set) |
+| `hideButtons` | `boolean` | `false` | Hide built-in buttons. Use with numberInputBind for external button event binding |
 | `disabled` | `boolean` | - | Disabled |
-| `readOnly` | `boolean` | - | Read-only (includes hiding spin buttons) |
-| `placeholder` | `string` | - | Placeholder |
+| `readOnly` | `boolean` | - | Read-only (includes hiding buttons) |
+| `placeholder` | `string` | - | Placeholder (default: "0") |
 | `name` | `string` | - | Form field name |
 | `id` | `string` | - | Element ID |
 | `autoFocus` | `boolean` | - | Auto focus |

package/dist/chunks/{chunk-AFSEYJZT.js → chunk-2T7RUYEK.js}

@@ -27,21 +27,62 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var numberInputVariants = classVarianceAuthority.cva("nexus-number-input", {
   variants: {
+    variant: {
+      basic: "nexus-number-input--basic",
+      bind: "nexus-number-input--bind"
+    },
     size: {
-      sm: "nexus-number-input--sm",
-      md: "nexus-number-input--md",
       lg: "nexus-number-input--lg",
       xl: "nexus-number-input--xl"
-    },
-    state: {
-      default: "nexus-number-input--default",
-      error: "nexus-number-input--error"
     }
   },
-  defaultVariants: { size: "md", state: "default" }
+  defaultVariants: { variant: "basic", size: "lg" }
 });
-var ChevronUp = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "nexus-number-input__step-icon", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 7.5L6 4.5l3 3" }) });
-var ChevronDown = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "nexus-number-input__step-icon", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 4.5L6 7.5l3-3" }) });
+var CHEVRON_PATH = "M3.606.179C3.82-.06 4.18-.06 4.394.179L7.846 4.01C8.18 4.382 7.934 5 7.452 5H.548C.066 5-.18 4.382.154 4.01L3.606.179Z";
+var ChevronUpIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className: "nexus-number-input__chevron-icon",
+    viewBox: "0 0 8 5",
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: CHEVRON_PATH })
+  }
+);
+var ChevronDownIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className: "nexus-number-input__chevron-icon nexus-number-input__chevron-icon--down",
+    viewBox: "0 0 8 5",
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: CHEVRON_PATH })
+  }
+);
+var MinusIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className: "nexus-number-input__bind-icon",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.33",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.333 8h9.334" })
+  }
+);
+var PlusIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className: "nexus-number-input__bind-icon",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.33",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.333 8h9.334M8 3.333v9.334" })
+  }
+);
 function clampValue(val, min, max) {
   let result = val;
   if (min !== void 0) result = Math.max(min, result);
@@ -65,6 +106,7 @@ function numberInputBind(ref, direction) {
 var NumberInput = React__namespace.forwardRef(
   ({
     className,
+    variant = "basic",
     size,
     error,
     value,
@@ -72,6 +114,9 @@ var NumberInput = React__namespace.forwardRef(
     max,
     step = 1,
     digit = 0,
+    label,
+    description,
+    showMax,
     hideButtons = false,
     disabled,
     readOnly,
@@ -80,8 +125,9 @@ var NumberInput = React__namespace.forwardRef(
     ...props
   }, ref) => {
     const inputRef = React__namespace.useRef(null);
-    const state = error ? "error" : "default";
-    const [internalValue, setInternalValue] = React__namespace.useState(value?.toString() ?? "");
+    const [internalValue, setInternalValue] = React__namespace.useState(
+      value?.toString() ?? ""
+    );
     const internalValueRef = React__namespace.useRef(internalValue);
     const timeoutRef = React__namespace.useRef(null);
     const pressCountRef = React__namespace.useRef(0);
@@ -189,72 +235,151 @@ var NumberInput = React__namespace.forwardRef(
       }),
       [step]
     );
-    const padSize = size === "sm" ? "nexus-number-input__field--sm" : size === "xl" ? "nexus-number-input__field--xl" : size === "lg" ? "nexus-number-input__field--lg" : "nexus-number-input__field--md";
-    const showButtons = !hideButtons && !readOnly && !disabled;
+    const handleMaxClick = React__namespace.useCallback(() => {
+      if (disabled || readOnly || max === void 0) return;
+      const maxStr = max.toString();
+      internalValueRef.current = maxStr;
+      setInternalValue(maxStr);
+      onValueChange?.(max);
+      inputRef.current?.focus();
+    }, [disabled, readOnly, max, onValueChange]);
     const numValue = parseFloat(internalValue) || 0;
     const isMinDisabled = min !== void 0 && numValue <= min;
     const isMaxDisabled = max !== void 0 && numValue >= max;
+    const isMaxExceeded = max !== void 0 && numValue > max;
+    const displayMax = showMax ?? max !== void 0;
+    const showHeader = !!label || displayMax;
+    const isError = error || isMaxExceeded;
+    const showBtns = !hideButtons && !readOnly;
+    const isBasic = variant !== "bind";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: chunkCZC76ZD5_js.cn(
-          numberInputVariants({ size, state }),
+          numberInputVariants({ variant, size }),
+          isError && "nexus-number-input--error",
           disabled && "nexus-number-input--disabled",
           className
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              ref: inputRef,
-              type: "text",
-              inputMode: "decimal",
-              role: "spinbutton",
-              className: chunkCZC76ZD5_js.cn("nexus-number-input__field", padSize),
-              value: internalValue,
-              disabled,
-              readOnly,
-              placeholder,
-              "aria-invalid": error || void 0,
-              "aria-valuemin": min,
-              "aria-valuemax": max,
-              "aria-valuenow": internalValue ? parseFloat(internalValue) || void 0 : void 0,
-              onChange: handleInputChange,
-              onBlur: handleBlur,
-              onKeyDown: handleKeyDown,
-              ...props
-            }
-          ),
-          showButtons && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-number-input__buttons", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
+          showHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-number-input__header", children: [
+            label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-number-input__label", children: label }),
+            displayMax && max !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
                 type: "button",
+                className: "nexus-number-input__max",
+                onClick: handleMaxClick,
+                disabled: disabled || readOnly,
                 tabIndex: -1,
-                disabled: isMaxDisabled,
-                className: "nexus-number-input__step nexus-number-input__step--up",
-                onPointerDown: (e) => startRepeat(step, e),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-number-input__max-text", children: "Max" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: chunkCZC76ZD5_js.cn(
+                        "nexus-number-input__max-value",
+                        isMaxExceeded && "nexus-number-input__max-value--exceeded"
+                      ),
+                      children: max
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-number-input__container", children: [
+            !isBasic && showBtns && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                disabled: disabled || isMinDisabled,
+                className: "nexus-number-input__bind-btn",
+                onPointerDown: (e) => startRepeat(-step, e),
                 onPointerUp: stopRepeat,
                 onPointerLeave: stopRepeat,
-                "aria-label": "Increase",
-                children: /* @__PURE__ */ jsxRuntime.jsx(ChevronUp, {})
+                "aria-label": "Decrease",
+                children: /* @__PURE__ */ jsxRuntime.jsx(MinusIcon, {})
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                inputMode: "decimal",
+                role: "spinbutton",
+                className: "nexus-number-input__field",
+                value: internalValue,
+                disabled,
+                readOnly,
+                placeholder: placeholder ?? "0",
+                "aria-invalid": isError || void 0,
+                "aria-valuemin": min,
+                "aria-valuemax": max,
+                "aria-valuenow": internalValue ? parseFloat(internalValue) || void 0 : void 0,
+                onChange: handleInputChange,
+                onBlur: handleBlur,
+                onKeyDown: handleKeyDown,
+                ...props
+              }
+            ),
+            !isBasic && showBtns && /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
                 tabIndex: -1,
-                disabled: isMinDisabled,
-                className: "nexus-number-input__step nexus-number-input__step--down",
-                onPointerDown: (e) => startRepeat(-step, e),
+                disabled: disabled || isMaxDisabled,
+                className: "nexus-number-input__bind-btn",
+                onPointerDown: (e) => startRepeat(step, e),
                 onPointerUp: stopRepeat,
                 onPointerLeave: stopRepeat,
-                "aria-label": "Decrease",
-                children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+                "aria-label": "Increase",
+                children: /* @__PURE__ */ jsxRuntime.jsx(PlusIcon, {})
               }
-            )
-          ] })
+            ),
+            isBasic && showBtns && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-number-input__buttons", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  disabled: disabled || isMaxDisabled,
+                  className: "nexus-number-input__step nexus-number-input__step--up",
+                  onPointerDown: (e) => startRepeat(step, e),
+                  onPointerUp: stopRepeat,
+                  onPointerLeave: stopRepeat,
+                  "aria-label": "Increase",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ChevronUpIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  disabled: disabled || isMinDisabled,
+                  className: "nexus-number-input__step nexus-number-input__step--down",
+                  onPointerDown: (e) => startRepeat(-step, e),
+                  onPointerUp: stopRepeat,
+                  onPointerLeave: stopRepeat,
+                  "aria-label": "Decrease",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {})
+                }
+              )
+            ] })
+          ] }),
+          description && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: chunkCZC76ZD5_js.cn(
+                "nexus-number-input__description",
+                isError && "nexus-number-input__description--error"
+              ),
+              children: description
+            }
+          )
         ]
       }
     );