@wandelbots/wandelbots-js-react-components 2.34.2-pr.feature-robot-precondition-list.372.9dfd57e → 2.34.2

package/dist/components/RobotCard.d.ts

@@ -1,103 +0,0 @@
-import type { ConnectedMotionGroup, RobotControllerStateOperationModeEnum, RobotControllerStateSafetyStateEnum } from "@wandelbots/nova-js/v1";
-import type { Group } from "three";
-import type { ProgramState } from "./ProgramControl";
-export interface RobotCardProps {
-    /** Name of the robot displayed at the top */
-    robotName: string;
-    /** Current program state */
-    programState: ProgramState;
-    /** Current safety state of the robot controller */
-    safetyState: RobotControllerStateSafetyStateEnum;
-    /** Current operation mode of the robot controller */
-    operationMode: RobotControllerStateOperationModeEnum;
-    /** Whether the "Drive to Home" button should be enabled */
-    driveToHomeEnabled?: boolean;
-    /** Callback fired when "Drive to Home" button is pressed */
-    onDriveToHomePress?: () => void;
-    /** Callback fired when "Drive to Home" button is released */
-    onDriveToHomeRelease?: () => void;
-    /**
-     * Callback fired when "Drive to Home" button is pressed, with the default home position.
-     * If provided, this will be called instead of onDriveToHomePress, providing the recommended
-     * home position joint configuration based on the robot manufacturer.
-     */
-    onDriveToHomePressWithConfig?: (homePosition: number[]) => void;
-    /**
-     * Callback fired when "Drive to Home" button is released after using onDriveToHomePressWithConfig.
-     * If provided, this will be called instead of onDriveToHomeRelease.
-     */
-    onDriveToHomeReleaseWithConfig?: () => void;
-    /**
-     * Custom default joint configuration to use if manufacturer-based defaults are not available.
-     * Joint values should be in radians.
-     */
-    defaultJointConfig?: number[];
-    /** Connected motion group for the robot */
-    connectedMotionGroup: ConnectedMotionGroup;
-    /** Custom robot component to render (optional, defaults to Robot) */
-    robotComponent?: React.ComponentType<{
-        connectedMotionGroup: ConnectedMotionGroup;
-        flangeRef?: React.Ref<Group>;
-        postModelRender?: () => void;
-        transparentColor?: string;
-        getModel?: (modelFromController: string) => string;
-    }>;
-    /** Custom cycle timer component (optional, defaults to CycleTimer) */
-    cycleTimerComponent?: React.ComponentType<{
-        variant?: "default" | "small";
-        compact?: boolean;
-        onCycleComplete: (controls: {
-            startNewCycle: (maxTimeSeconds?: number, elapsedSeconds?: number) => void;
-            pause: () => void;
-            resume: () => void;
-            isPaused: () => boolean;
-        }) => void;
-        onCycleEnd?: () => void;
-        autoStart?: boolean;
-        hasError?: boolean;
-        className?: string;
-    }>;
-    /** Callback to receive cycle timer controls for external timer management */
-    onCycleTimerReady?: (controls: {
-        startNewCycle: (maxTimeSeconds?: number, elapsedSeconds?: number) => void;
-        pause: () => void;
-        resume: () => void;
-        isPaused: () => boolean;
-    }) => void;
-    /** Callback fired when a cycle completes (reaches zero) */
-    onCycleEnd?: () => void;
-    /** Whether the cycle timer should auto-start when a new cycle is set */
-    cycleTimerAutoStart?: boolean;
-    /** Whether the cycle timer is in an error state (pauses timer and shows error styling) */
-    cycleTimerHasError?: boolean;
-    /** Additional CSS class name */
-    className?: string;
-}
-/**
- * A responsive card component that displays a 3D robot with states and controls.
- * The card automatically adapts to its container's size and aspect ratio.
- *
- * Features:
- * - Fully responsive Material-UI Card that adapts to container dimensions
- * - Automatic layout switching based on aspect ratio:
- *   - Portrait mode: Vertical layout with robot in center
- *   - Landscape mode: Horizontal layout with robot on left, content on right (left-aligned)
- * - Responsive 3D robot rendering:
- *   - Scales dynamically with container size
- *   - Hides at very small sizes to preserve usability
- *   - Adaptive margin based on available space
- * - Smart spacing and padding that reduces at smaller sizes
- * - Minimum size constraints for usability while maximizing content density
- * - Robot name displayed in Typography h6 at top-left
- * - Program state indicator below the name
- * - Auto-fitting 3D robot model that scales with container size
- * - Compact cycle time component with small variant, error state, and count-up/count-down mode support
- * - Transparent gray divider line
- * - "Drive to Home" button with press-and-hold functionality
- * - Localization support via react-i18next
- * - Material-UI theming integration
- */
-export declare const RobotCard: (({ robotName, programState, safetyState, operationMode, driveToHomeEnabled, onDriveToHomePress, onDriveToHomeRelease, connectedMotionGroup, robotComponent: RobotComponent, cycleTimerComponent: CycleTimerComponent, onCycleTimerReady, onCycleEnd, cycleTimerAutoStart, cycleTimerHasError, className, }: RobotCardProps) => import("react/jsx-runtime").JSX.Element) & {
-    displayName: string;
-};
-//# sourceMappingURL=RobotCard.d.ts.map

package/dist/components/RobotCard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RobotCard.d.ts","sourceRoot":"","sources":["../../src/components/RobotCard.tsx"],"names":[],"mappings":"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"}

package/dist/components/RobotListItem.d.ts

@@ -1,34 +0,0 @@
-import type { ComponentType } from "react";
-import { RobotSetupReadinessState } from "./RobotSetupReadinessIndicator";
-export interface RobotListItemProps {
-    /** The name of the robot */
-    robotName: string;
-    /** The type/model of the robot (will try to derive from nova if not provided) */
-    robotType?: string;
-    /** The current setup readiness state of the robot */
-    setupState: RobotSetupReadinessState;
-    /**
-     * Component to render for the precondition indicator.
-     * Defaults to RobotSetupReadinessIndicator.
-     * Pass null or undefined to hide the indicator.
-     */
-    PreconditionComponent?: ComponentType<{
-        setupState: RobotSetupReadinessState;
-    }> | null;
-    /** Additional CSS class name */
-    className?: string;
-}
-/**
- * A list item component that displays robot information and setup readiness state.
- *
- * Features:
- * - Shows robot name, type, and customizable precondition component
- * - Color-coded icon based on readiness state (robot icon for ready, warning for issues)
- * - Styled with consistent border, background, and spacing
- * - Responsive layout with proper spacing and alignment
- * - Flexible precondition component that can be customized or hidden
- */
-export declare const RobotListItem: (({ robotName, robotType, setupState, PreconditionComponent, className, }: RobotListItemProps) => import("react/jsx-runtime").JSX.Element) & {
-    displayName: string;
-};
-//# sourceMappingURL=RobotListItem.d.ts.map

package/dist/components/RobotListItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RobotListItem.d.ts","sourceRoot":"","sources":["../../src/components/RobotListItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAG1C,OAAO,EAEL,wBAAwB,EACzB,MAAM,gCAAgC,CAAA;AAEvC,MAAM,WAAW,kBAAkB;IACjC,4BAA4B;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qDAAqD;IACrD,UAAU,EAAE,wBAAwB,CAAA;IACpC;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,aAAa,CAAC;QACpC,UAAU,EAAE,wBAAwB,CAAA;KACrC,CAAC,GAAG,IAAI,CAAA;IACT,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,6EAQnB,kBAAkB;;CAqGxB,CAAA"}

package/dist/components/RobotSetupReadinessIndicator.d.ts

@@ -1,31 +0,0 @@
-/**
- * Enum representing the robot setup readiness state
- */
-export declare enum RobotSetupReadinessState {
-    /** Preconditions are not fulfilled for robot operation */
-    PRECONDITION_NOT_FULFILLED = "PRECONDITION_NOT_FULFILLED",
-    /** Robot is disconnected from the system */
-    ROBOT_DISCONNECTED = "ROBOT_DISCONNECTED",
-    /** Robot is ready for operation */
-    READY = "READY"
-}
-export interface RobotSetupReadinessIndicatorProps {
-    /** The current setup readiness state of the robot */
-    setupState: RobotSetupReadinessState;
-    /** Additional CSS class name */
-    className?: string;
-}
-/**
- * A state indicator component that displays the current robot setup readiness state.
- *
- * Features:
- * - Shows three states: Precondition not fulfilled, Robot disconnected, Ready
- * - Color-coded based on state (ready: tertiary/main, others: error/main)
- * - Rendered as Material-UI filled chip with paper-elevation-11 background
- * - Includes colored circle indicator (8px width)
- * - Localization support via react-i18next
- */
-export declare const RobotSetupReadinessIndicator: (({ setupState, className }: RobotSetupReadinessIndicatorProps) => import("react/jsx-runtime").JSX.Element) & {
-    displayName: string;
-};
-//# sourceMappingURL=RobotSetupReadinessIndicator.d.ts.map

package/dist/components/RobotSetupReadinessIndicator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RobotSetupReadinessIndicator.d.ts","sourceRoot":"","sources":["../../src/components/RobotSetupReadinessIndicator.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,oBAAY,wBAAwB;IAClC,0DAA0D;IAC1D,0BAA0B,+BAA+B;IACzD,4CAA4C;IAC5C,kBAAkB,uBAAuB;IACzC,mCAAmC;IACnC,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,iCAAiC;IAChD,qDAAqD;IACrD,UAAU,EAAE,wBAAwB,CAAA;IACpC,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,4BAA4B,+BACF,iCAAiC;;CAwFvE,CAAA"}

package/dist/components/RobotSetupReadinessIndicator.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=RobotSetupReadinessIndicator.test.d.ts.map

package/dist/components/RobotSetupReadinessIndicator.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RobotSetupReadinessIndicator.test.d.ts","sourceRoot":"","sources":["../../src/components/RobotSetupReadinessIndicator.test.tsx"],"names":[],"mappings":""}

package/dist/components/TabBar.d.ts

@@ -1,30 +0,0 @@
-import type { SxProps } from "@mui/material";
-export interface TabItem {
-    /** Unique identifier for the tab */
-    id: string;
-    /** Label text for the tab */
-    label: string;
-    /** Content to display when tab is active */
-    content: React.ReactNode;
-    /** Optional icon component to display with the tab */
-    icon?: React.ReactElement;
-}
-export interface TabBarProps {
-    /** Array of tab items to display */
-    items: TabItem[];
-    /** Default active tab index */
-    defaultActiveTab?: number;
-    /** Callback when tab changes */
-    onTabChange?: (index: number) => void;
-    /** Additional styling */
-    sx?: SxProps;
-}
-/**
- * A styled tab bar component with configurable tabs and content.
- * Features the same styling as the Wandelbots design system with rounded tabs
- * and smooth transitions.
- */
-export declare const TabBar: ((props: TabBarProps) => import("react/jsx-runtime").JSX.Element) & {
-    displayName: string;
-};
-//# sourceMappingURL=TabBar.d.ts.map

package/dist/components/TabBar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../src/components/TabBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAM5C,MAAM,WAAW,OAAO;IACtB,oCAAoC;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,4CAA4C;IAC5C,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,sDAAsD;IACtD,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;CAC1B;AAED,MAAM,WAAW,WAAW;IAC1B,oCAAoC;IACpC,KAAK,EAAE,OAAO,EAAE,CAAA;IAChB,+BAA+B;IAC/B,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gCAAgC;IAChC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,yBAAyB;IACzB,EAAE,CAAC,EAAE,OAAO,CAAA;CACb;AAwBD;;;;GAIG;AACH,eAAO,MAAM,MAAM,WACA,WAAW;;CAuF7B,CAAA"}

package/dist/components/robots/manufacturerHomePositions.d.ts

@@ -1,21 +0,0 @@
-import { Manufacturer } from "@wandelbots/nova-api/v1";
-/**
- * Default home configs for different robot manufacturers.
- * These joint configurations represent safe home configs for each manufacturer's robots.
- * All angles are in radians.
- */
-export declare const MANUFACTURER_HOME_CONFIGS: Record<Manufacturer, number[]>;
-/**
- * Extracts manufacturer from modelFromController string.
- * @param modelFromController - String in format "Manufacturer_ModelName"
- * @returns Manufacturer enum value or null if not recognized
- */
-export declare function extractManufacturer(modelFromController: string): Manufacturer | null;
-/**
- * Gets the default home config for a robot based on its model identifier.
- * @param modelFromController - String in format "Manufacturer_ModelName"
- * @param defaultJointConfig - Optional custom default configuration to use if manufacturer not found
- * @returns Array of joint positions in radians, or null if no configuration available
- */
-export declare function getDefaultHomeConfig(modelFromController: string, defaultJointConfig?: number[]): number[] | null;
-//# sourceMappingURL=manufacturerHomePositions.d.ts.map

package/dist/components/robots/manufacturerHomePositions.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"manufacturerHomePositions.d.ts","sourceRoot":"","sources":["../../../src/components/robots/manufacturerHomePositions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAEtD;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,EAAE,CAsBpE,CAAA;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,mBAAmB,EAAE,MAAM,GAC1B,YAAY,GAAG,IAAI,CAkBrB;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAClC,mBAAmB,EAAE,MAAM,EAC3B,kBAAkB,CAAC,EAAE,MAAM,EAAE,GAC5B,MAAM,EAAE,GAAG,IAAI,CAQjB"}

package/dist/icons/DropdownArrowIcon.d.ts

@@ -1,3 +0,0 @@
-import { type SvgIconProps } from "@mui/material";
-export declare const DropdownArrowIcon: (props: SvgIconProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=DropdownArrowIcon.d.ts.map

package/dist/icons/DropdownArrowIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownArrowIcon.d.ts","sourceRoot":"","sources":["../../src/icons/DropdownArrowIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAE1D,eAAO,MAAM,iBAAiB,GAAI,OAAO,YAAY,4CAUpD,CAAA"}

package/src/components/AppHeader.md

@@ -1,84 +0,0 @@
-# AppHeader Component
-
-A navigation header component that displays the current application's icon and name, with an optional dropdown menu for switching between different applications.
-
-## Features
-
-- **App Branding**: Displays the current app's icon and name with custom typography
-- **App Switching**: Dropdown menu with blur backdrop for navigating to other apps
-- **Responsive Design**: Uses MUI AppBar for consistent styling
-- **Accessibility**: Proper ARIA labels and keyboard navigation
-- **Flexible Navigation**: Supports both URL navigation and custom click handlers
-
-## Usage
-
-```tsx
-import {
-  AppHeader,
-  type AppItem,
-} from "@wandelbots/wandelbots-js-react-components"
-import { Home, Settings, Person } from "@mui/icons-material"
-
-const apps: AppItem[] = [
-  {
-    id: "dashboard",
-    name: "Dashboard",
-    icon: <Home />,
-    href: "/dashboard",
-  },
-  {
-    id: "settings",
-    name: "Settings",
-    icon: <Settings />,
-    onClick: () => navigateToSettings(),
-  },
-]
-
-function MyApp() {
-  return (
-    <AppHeader
-      appIcon={<Person />}
-      appName="Robot Control Studio"
-      apps={apps}
-      onAppSelect={(app) => console.log("Selected:", app.name)}
-    />
-  )
-}
-```
-
-## Props
-
-### AppHeaderProps
-
-- **appIcon** (`ReactNode`): Icon component for the current application
-- **appName** (`string`): Display name of the current application
-- **apps** (`AppItem[]`, optional): Array of available apps for the dropdown menu
-- **onAppSelect** (`(app: AppItem) => void`, optional): Callback when an app is selected
-- **sx** (`SxProps`, optional): Additional MUI styling
-
-### AppItem
-
-- **id** (`string`): Unique identifier for the app
-- **name** (`string`): Display name of the app
-- **icon** (`ReactNode`): Icon component to display
-- **href** (`string`, optional): URL to navigate to
-- **onClick** (`() => void`, optional): Custom click handler
-
-## Styling
-
-The component uses the specified typography:
-
-- Font weight: 700 (Bold)
-- Font size: 20px
-- Line height: 24px
-- Letter spacing: 0px
-
-The dropdown arrow uses a custom SVG icon with 56% opacity.
-
-## Behavior
-
-- When apps are provided, a dropdown arrow appears on the right side
-- Clicking the arrow opens a menu with available apps
-- The background blurs when the menu is open to focus attention
-- Apps can navigate via URL (`href`) or custom handler (`onClick`)
-- The menu closes automatically when an app is selected or when clicking outside

package/src/components/AppHeader.tsx

@@ -1,199 +0,0 @@
-import {
-  alpha,
-  AppBar,
-  Backdrop,
-  Box,
-  IconButton,
-  Menu,
-  MenuItem,
-  type SxProps,
-  Toolbar,
-  Typography,
-} from "@mui/material"
-import { observer } from "mobx-react-lite"
-import { type MouseEvent, type ReactNode, useState } from "react"
-import { externalizeComponent } from "../externalizeComponent"
-import { DropdownArrowIcon } from "../icons/DropdownArrowIcon"
-
-export type AppItem = {
-  /** Unique identifier for the app */
-  id: string
-  /** Display name of the app */
-  name: string
-  /** Icon component to display */
-  icon: ReactNode
-  /** URL or callback to navigate to the app */
-  href?: string
-  /** Click handler for the app */
-  onClick?: () => void
-}
-
-export type AppHeaderProps = {
-  /** Current app icon */
-  appIcon: ReactNode
-  /** Current app name */
-  appName: string
-  /** List of other available apps */
-  apps?: AppItem[]
-  /** Callback when an app is selected */
-  onAppSelect?: (app: AppItem) => void
-  /** Additional styling */
-  sx?: SxProps
-}
-
-/**
- * A top navigation header component that displays the current app and provides
- * a dropdown menu to navigate to other apps.
- */
-export const AppHeader = externalizeComponent(
-  observer((props: AppHeaderProps) => {
-    const { appIcon, appName, apps = [], onAppSelect, sx } = props
-    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
-    const isMenuOpen = Boolean(anchorEl)
-
-    const handleMenuOpen = (event: MouseEvent<HTMLElement>) => {
-      setAnchorEl(event.currentTarget)
-    }
-
-    const handleMenuClose = () => {
-      setAnchorEl(null)
-    }
-
-    const handleAppSelect = (app: AppItem) => {
-      handleMenuClose()
-
-      if (app.onClick) {
-        app.onClick()
-      } else if (app.href) {
-        window.location.href = app.href
-      }
-
-      onAppSelect?.(app)
-    }
-
-    return (
-      <>
-        <AppBar
-          position="static"
-          sx={{
-            boxShadow: "none",
-            backgroundImage: "none",
-            "& .MuiAppBar-root": {
-              backgroundImage: "none",
-              backgroundColor: "transparent",
-            },
-            ...sx,
-          }}
-        >
-          <Toolbar sx={{ minHeight: "64px !important" }}>
-            {/* App Icon */}
-            <Box sx={{ mr: 2, display: "flex", alignItems: "center" }}>
-              {appIcon}
-            </Box>
-
-            {/* App Name and Dropdown */}
-            <Box sx={{ display: "flex", alignItems: "center", flexGrow: 1 }}>
-              <Typography
-                variant="h6"
-                component="div"
-                sx={{
-                  fontWeight: 700,
-                  fontSize: "20px",
-                  lineHeight: "24px",
-                  letterSpacing: 0,
-                }}
-              >
-                {appName}
-              </Typography>
-
-              {/* Dropdown Button */}
-              {apps.length > 0 && (
-                <IconButton
-                  color="inherit"
-                  aria-label="switch app"
-                  aria-controls="app-menu"
-                  aria-haspopup="true"
-                  onClick={handleMenuOpen}
-                  sx={{
-                    ml: 2,
-                    width: 30,
-                    height: 30,
-                    borderRadius: "8px",
-                    padding: "5px",
-                    backgroundColor: (theme) =>
-                      alpha(theme.palette.common.white, 0.1),
-                    opacity: 1,
-                    "&:hover": {
-                      backgroundColor: (theme) =>
-                        alpha(theme.palette.common.white, 0.16),
-                    },
-                    "& .MuiSvgIcon-root": {
-                      fontSize: "10px",
-                      width: "10px",
-                      height: "8px",
-                    },
-                  }}
-                >
-                  <DropdownArrowIcon />
-                </IconButton>
-              )}
-            </Box>
-          </Toolbar>
-        </AppBar>
-
-        {/* Backdrop for blur effect */}
-        <Backdrop
-          open={isMenuOpen}
-          onClick={handleMenuClose}
-          sx={{
-            backdropFilter: "blur(4px)",
-            backgroundColor: "rgba(0, 0, 0, 0.3)",
-            zIndex: (theme) => theme.zIndex.modal - 1,
-          }}
-        />
-
-        {/* Dropdown Menu */}
-        <Menu
-          id="app-menu"
-          anchorEl={anchorEl}
-          open={isMenuOpen}
-          onClose={handleMenuClose}
-          anchorOrigin={{
-            vertical: "bottom",
-            horizontal: "left",
-          }}
-          transformOrigin={{
-            vertical: "top",
-            horizontal: "left",
-          }}
-          sx={{
-            zIndex: (theme) => theme.zIndex.modal,
-            "& .MuiPaper-root": {
-              minWidth: 200,
-              mt: 1,
-            },
-          }}
-        >
-          {apps.map((app) => (
-            <MenuItem
-              key={app.id}
-              onClick={() => handleAppSelect(app)}
-              sx={{
-                display: "flex",
-                alignItems: "center",
-                gap: 2,
-                py: 1.5,
-                px: 2,
-              }}
-            >
-              <Box sx={{ display: "flex", alignItems: "center" }}>
-                {app.icon}
-              </Box>
-              <Typography variant="body1">{app.name}</Typography>
-            </MenuItem>
-          ))}
-        </Menu>
-      </>
-    )
-  }),
-)