@shipfox/react-ui 0.14.0 → 0.15.0

package/src/components/command/command.tsx

@@ -0,0 +1,265 @@
+import {cva, type VariantProps} from 'class-variance-authority';
+import {Command as CommandPrimitive} from 'cmdk';
+import {type ComponentProps, forwardRef, useCallback, useState} from 'react';
+import {cn} from 'utils/cn';
+import {Icon} from '../icon';
+import {Kbd} from '../kbd';
+
+const commandTriggerVariants = cva(
+  [
+    'flex items-center justify-between gap-8',
+    'w-full rounded-6 px-8 text-sm leading-20',
+    'bg-background-field-base text-foreground-neutral-base',
+    'shadow-button-neutral transition-[color,box-shadow] outline-none',
+    'hover:bg-background-field-hover cursor-pointer',
+    'focus-visible:shadow-border-interactive-with-active',
+    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-background-neutral-disabled disabled:shadow-none disabled:text-foreground-neutral-disabled',
+  ],
+  {
+    variants: {
+      variant: {
+        base: 'bg-background-field-base',
+        component: 'bg-background-field-component',
+      },
+      size: {
+        small: 'h-28 py-4',
+        base: 'h-32 py-6',
+      },
+    },
+    defaultVariants: {
+      variant: 'base',
+      size: 'base',
+    },
+  },
+);
+
+type CommandTriggerProps = ComponentProps<'button'> &
+  VariantProps<typeof commandTriggerVariants> & {
+    placeholder?: string;
+  };
+
+const CommandTrigger = forwardRef<HTMLButtonElement, CommandTriggerProps>(
+  ({className, variant, size, placeholder, children, ...props}, ref) => {
+    const hasValue = Boolean(children);
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        data-slot="command-trigger"
+        data-placeholder={!hasValue || undefined}
+        className={cn(
+          commandTriggerVariants({variant, size}),
+          'data-placeholder:text-foreground-neutral-muted',
+          className,
+        )}
+        {...props}
+      >
+        <span className="flex-1 text-left truncate">{hasValue ? children : placeholder}</span>
+        <Icon name="arrowDownSLine" className="size-16 text-foreground-neutral-muted shrink-0" />
+      </button>
+    );
+  },
+);
+CommandTrigger.displayName = 'CommandTrigger';
+
+function Command({className, ...props}: ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        'flex h-full w-full flex-col overflow-hidden rounded-10',
+        'bg-background-neutral-overlay text-foreground-neutral-base',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({children, ...props}: ComponentProps<typeof CommandPrimitive.Dialog>) {
+  return (
+    <CommandPrimitive.Dialog data-slot="command-dialog" {...props}>
+      <div className="fixed inset-0 z-50 bg-background-neutral-overlay/80 backdrop-blur-sm" />
+      <div className="fixed left-1/2 top-1/2 z-50 w-full max-w-600 -translate-x-1/2 -translate-y-1/2 p-16">
+        <Command className="shadow-tooltip">{children}</Command>
+      </div>
+    </CommandPrimitive.Dialog>
+  );
+}
+
+type CommandInputProps = ComponentProps<typeof CommandPrimitive.Input> & {
+  showClearButton?: boolean;
+  onClear?: () => void;
+};
+
+function CommandInput({
+  className,
+  value,
+  onValueChange,
+  onClear,
+  showClearButton = true,
+  ...props
+}: CommandInputProps) {
+  const [internalValue, setInternalValue] = useState('');
+  const isControlled = value !== undefined;
+  const inputValue = isControlled ? value : internalValue;
+  const hasValue = Boolean(inputValue);
+
+  const handleValueChange = useCallback(
+    (newValue: string) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [isControlled, onValueChange],
+  );
+
+  const handleClear = useCallback(() => {
+    if (!isControlled) {
+      setInternalValue('');
+    }
+    onValueChange?.('');
+    onClear?.();
+  }, [isControlled, onValueChange, onClear]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Escape' && hasValue) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleClear();
+      }
+    },
+    [hasValue, handleClear],
+  );
+
+  return (
+    <div className="flex items-center gap-8 border-b border-border-neutral-strong p-8">
+      <Icon name="searchLine" className="size-16 shrink-0 text-foreground-neutral-muted" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        value={inputValue}
+        onValueChange={handleValueChange}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          'flex-1 bg-transparent text-sm leading-20 outline-none',
+          'placeholder:text-foreground-neutral-muted',
+          'disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled',
+          className,
+        )}
+        {...props}
+      />
+      {showClearButton && hasValue && (
+        <button
+          type="button"
+          onClick={handleClear}
+          className={cn(
+            'shrink-0 cursor-pointer rounded-4 p-2',
+            'text-foreground-neutral-muted hover:text-foreground-neutral-subtle transition-colors',
+          )}
+          aria-label="Clear search"
+        >
+          <Icon name="closeLine" className="size-16" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+function CommandList({className, ...props}: ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn('max-h-300 overflow-y-auto overflow-x-hidden p-4 scrollbar', className)}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({className, ...props}: ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className={cn('py-24 text-center text-sm text-foreground-neutral-muted', className)}
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({className, ...props}: ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        'overflow-hidden',
+        '[&_[cmdk-group-heading]]:px-8 [&_[cmdk-group-heading]]:py-4',
+        '[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:leading-20',
+        '[&_[cmdk-group-heading]]:text-foreground-neutral-subtle',
+        '[&_[cmdk-group-heading]]:select-none',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn(
+        'relative -mx-4 my-4 h-px',
+        'bg-border-neutral-menu-top',
+        'after:absolute after:inset-x-0 after:top-px after:h-px',
+        'after:bg-border-neutral-menu-bottom',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({className, ...props}: ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        'relative flex cursor-pointer select-none items-center gap-8 rounded-6 px-8 py-6',
+        'text-sm leading-20 text-foreground-neutral-subtle outline-none transition-colors',
+        'aria-selected:bg-background-components-hover aria-selected:text-foreground-neutral-base',
+        'data-[disabled=true]:pointer-events-none data-[disabled=true]:text-foreground-neutral-disabled',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({className, children, ...props}: ComponentProps<typeof Kbd>) {
+  return (
+    <Kbd data-slot="command-shortcut" className={cn('ml-auto', className)} {...props}>
+      {children}
+    </Kbd>
+  );
+}
+
+export {
+  Command,
+  CommandTrigger,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandSeparator,
+  CommandShortcut,
+  commandTriggerVariants,
+};
+
+export type {CommandTriggerProps, CommandInputProps};

package/src/components/command/index.ts

@@ -0,0 +1 @@
+export * from './command';

package/src/components/dashboard/components/analytics-content.tsx

@@ -0,0 +1,102 @@
+import {Icon} from 'components/icon';
+import {Skeleton} from 'components/skeleton';
+import {Text} from 'components/typography';
+
+export function AnalyticsContent() {
+  return (
+    <div className="min-h-[calc(100vh-48px)] p-12 md:p-24 space-y-16 md:space-y-20 bg-background-neutral-base">
+      <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-12 md:gap-0">
+        <Skeleton className="h-28 md:h-32 w-120 md:w-160" />
+        <div className="flex items-center gap-8 md:gap-16">
+          <Skeleton className="h-28 md:h-32 w-80 md:w-100" />
+          <Skeleton className="h-28 md:h-32 w-100 md:w-160" />
+        </div>
+      </div>
+
+      <div className="flex gap-12 md:gap-16 overflow-x-auto scrollbar pb-4 md:pb-0 -mx-12 px-12 md:mx-0 md:px-0">
+        {['Total', 'Success', 'Failed', 'Neutral', 'Failure rate'].map((label) => (
+          <div
+            key={label}
+            className="shrink-0 w-100 md:w-auto md:flex-1 p-12 rounded-8 bg-background-neutral-base border border-border-neutral-base"
+          >
+            <p className="text-xs text-foreground-neutral-subtle mb-4">{label}</p>
+            <Skeleton className="h-20 w-40" />
+          </div>
+        ))}
+      </div>
+
+      <div className="flex flex-col md:flex-row gap-16 md:gap-20">
+        <div className="flex-1 p-12 rounded-8 bg-background-neutral-base border border-border-neutral-base">
+          <p className="text-sm font-medium text-foreground-neutral-base mb-12">
+            Performance over time
+          </p>
+          <div className="h-120 md:h-160 flex items-center justify-center">
+            <div className="text-center">
+              <Icon
+                name="fileChartLine"
+                className="size-24 text-foreground-neutral-muted mx-auto mb-8"
+              />
+              <p className="text-sm text-foreground-neutral-subtle">Nothing here yet.</p>
+            </div>
+          </div>
+        </div>
+        <div className="flex-1 p-12 rounded-8 bg-background-neutral-base border border-border-neutral-base">
+          <p className="text-sm font-medium text-foreground-neutral-base mb-12">
+            Duration distribution
+          </p>
+          <div className="h-120 md:h-160 flex items-center justify-center">
+            <div className="text-center">
+              <Icon
+                name="barChartBoxLine"
+                className="size-24 text-foreground-neutral-muted mx-auto mb-8"
+              />
+              <p className="text-sm text-foreground-neutral-subtle">Nothing here yet.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="rounded-8 bg-background-neutral-base border border-border-neutral-base overflow-hidden">
+        <div className="flex flex-col md:flex-row items-start md:items-center justify-between p-12 gap-12 md:gap-0 border-b border-border-neutral-strong">
+          <p className="text-sm font-medium text-foreground-neutral-base">Jobs breakdown</p>
+          <div className="flex items-center gap-8 md:gap-16 w-full md:w-auto">
+            <Skeleton className="h-28 flex-1 md:flex-none md:w-200" />
+            <Skeleton className="h-28 w-28 shrink-0" />
+          </div>
+        </div>
+        <div className="py-48 md:py-64 flex flex-col items-center justify-center gap-12">
+          <div className="size-32 rounded-6 bg-transparent border border-border-neutral-strong flex items-center justify-center">
+            <Icon
+              name="shipfox"
+              className="size-16 text-foreground-neutral-subtle"
+              color="var(--foreground-neutral-subtle, #a1a1aa)"
+            />
+          </div>
+          <div className="text-center space-y-4 px-16">
+            <Text size="sm" className="text-foreground-neutral-base">
+              No jobs yet
+            </Text>
+            <Text size="xs" className="text-foreground-neutral-muted">
+              Import past runs or start a runner.
+            </Text>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-16">
+        {Array.from({length: 3}).map((_, i) => {
+          const blockId = `analytics-extra-block-${i}`;
+          return (
+            <div
+              key={blockId}
+              className="p-12 md:p-16 rounded-8 bg-background-subtle-base border border-border-neutral-strong"
+            >
+              <Skeleton className="h-16 w-full max-w-400 mb-8" />
+              <Skeleton className="h-12 w-full max-w-600" />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/dashboard/components/animated-logo.tsx

@@ -0,0 +1,25 @@
+import {Icon} from 'components/icon';
+import {motion} from 'framer-motion';
+
+const LOGO_HEIGHT = 48;
+
+export function AnimatedLogo({scrollProgress}: {scrollProgress: number}) {
+  const isVisible = scrollProgress > 0;
+
+  if (!isVisible) return null;
+
+  const easedProgress = 1 - (1 - scrollProgress) ** 3;
+
+  return (
+    <motion.div
+      className="fixed top-0 left-0 z-50 flex items-center justify-center shrink-0 w-48 h-48 bg-background-neutral-base"
+      style={{
+        opacity: easedProgress,
+        transform: `translateY(${-LOGO_HEIGHT + easedProgress * LOGO_HEIGHT}px)`,
+      }}
+      initial={false}
+    >
+      <Icon name="shipfox" className="size-20 text-foreground-neutral-subtle" />
+    </motion.div>
+  );
+}

package/src/components/dashboard/components/complete-setup-button.tsx

@@ -0,0 +1,30 @@
+import {Button} from 'components/button';
+import {ShinyText} from 'components/shiny-text';
+import {useResolvedTheme} from 'hooks/useResolvedTheme';
+import {ShipfoxLoader} from 'shipfox-loader-react';
+import {cn} from 'utils/cn';
+
+export function CompleteSetupButton({className}: {className?: string}) {
+  const resolvedTheme = useResolvedTheme();
+  return (
+    <Button
+      type="button"
+      variant="transparent"
+      className={cn(
+        'flex items-center gap-8 min-w-124 max-w-280 overflow-hidden px-12 py-10 transition-colors rounded-none h-40 border-l border-border-neutral-strong',
+        className,
+      )}
+    >
+      <ShipfoxLoader
+        size={13}
+        animation="circular"
+        color={resolvedTheme === 'dark' ? 'white' : 'orange'}
+        background={resolvedTheme === 'dark' ? 'dark' : 'light'}
+      />
+      <ShinyText
+        text="Complete setup"
+        className="flex-1 text-sm font-medium leading-20 text-foreground-neutral-base truncate text-left"
+      />
+    </Button>
+  );
+}

package/src/components/dashboard/components/jobs-content.tsx

@@ -0,0 +1,51 @@
+import {Button} from 'components/button';
+import {Icon} from 'components/icon';
+import {SearchInline} from 'components/search/search-inline';
+import {DataTable} from 'components/table/data-table';
+import {jobColumns} from 'components/table/table.stories.columns';
+import {jobsData} from 'components/table/table.stories.data';
+import {Header as TypographyHeader} from 'components/typography';
+import {useMemo, useState} from 'react';
+
+export function JobsContent() {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const filteredData = useMemo(
+    () => jobsData.filter((job) => job.name.toLowerCase().includes(searchQuery.toLowerCase())),
+    [searchQuery],
+  );
+
+  return (
+    <div className="min-h-[calc(100vh-48px)] p-12 md:p-24 bg-background-neutral-base">
+      <div className="rounded-t-8 overflow-hidden">
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-12 md:gap-0 p-12 border-t border-x border-border-neutral-base rounded-t-8 bg-background-neutral-base">
+          <TypographyHeader variant="h3" className="text-foreground-neutral-base">
+            Jobs breakdown
+          </TypographyHeader>
+
+          <div className="flex items-center gap-8 md:gap-16 w-full md:w-auto">
+            <SearchInline
+              placeholder="Search..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onClear={() => setSearchQuery('')}
+              className="flex-1 md:w-240"
+            />
+            <Button variant="secondary" aria-label="Insert column left" className="shrink-0">
+              <Icon name="insertColumnLeft" className="size-16 text-foreground-neutral-subtle" />
+            </Button>
+          </div>
+        </div>
+
+        <DataTable
+          columns={jobColumns}
+          data={filteredData}
+          pagination={true}
+          pageSize={10}
+          pageSizeOptions={[10, 20, 50, 100]}
+          className="rounded-t-none"
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/dashboard/components/mobile-menu.tsx

@@ -0,0 +1,50 @@
+import {Button} from 'components/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from 'components/dropdown-menu';
+import {Icon} from 'components/icon';
+import {ShinyText} from 'components/shiny-text';
+import {useResolvedTheme} from 'hooks/useResolvedTheme';
+import {ShipfoxLoader} from 'shipfox-loader-react';
+
+export function MobileMenu() {
+  const resolvedTheme = useResolvedTheme();
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="transparent"
+          className="flex md:hidden items-center justify-center shrink-0 w-40 h-40 bg-background-subtle-base hover:bg-background-neutral-hover transition-colors rounded-none border-l border-border-neutral-strong"
+          aria-label="Menu"
+        >
+          <Icon name="menuLine" className="size-18 text-foreground-neutral-subtle" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-200">
+        <DropdownMenuItem>
+          <div className="flex items-center gap-8">
+            <ShipfoxLoader
+              size={13}
+              animation="circular"
+              color={resolvedTheme === 'dark' ? 'white' : 'orange'}
+              background={resolvedTheme === 'dark' ? 'dark' : 'light'}
+            />
+            <ShinyText
+              text="Complete setup"
+              className="flex-1 text-sm font-medium leading-20 text-foreground-neutral-base truncate text-left"
+            />
+          </div>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem icon="searchLine">Search</DropdownMenuItem>
+        <DropdownMenuItem icon="questionLine">Help</DropdownMenuItem>
+        <DropdownMenuItem icon="notification3Line">Notifications</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/dashboard/components/organization-selector.tsx

@@ -0,0 +1,51 @@
+import {Avatar} from 'components/avatar';
+import {Button} from 'components/button';
+import {Icon} from 'components/icon';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from 'components/select';
+
+export function OrganizationSelector() {
+  return (
+    <Select defaultValue="stripe">
+      <SelectTrigger className="w-200 h-40 shadow-none bg-background-neutral-base hover:bg-background-neutral-hover rounded-none gap-8 pl-12 border-l min-[321px]:border-r border-border-neutral-strong">
+        <div className="flex items-center gap-8 flex-1 min-w-0">
+          <SelectValue placeholder="Select organization" />
+        </div>
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="stripe">
+          <div className="flex items-center gap-8">
+            <Avatar size="3xs" content="logo" logoName="stripe" radius="rounded" />
+            <span>Stripe</span>
+          </div>
+        </SelectItem>
+        <SelectItem value="shipfox">
+          <div className="flex items-center gap-8">
+            <Avatar size="3xs" content="logo" logoName="shipfox" radius="rounded" />
+            <span>Shipfox</span>
+          </div>
+        </SelectItem>
+        <SelectItem value="github">
+          <div className="flex items-center gap-8">
+            <Avatar size="3xs" content="logo" logoName="github" radius="rounded" />
+            <span>GitHub</span>
+          </div>
+        </SelectItem>
+        <SelectSeparator />
+        <Button
+          variant="transparent"
+          className="w-full justify-start text-foreground-neutral-subtle"
+        >
+          <Icon name="addLine" className="size-16 shrink-0" />
+          <span>New organization</span>
+        </Button>
+      </SelectContent>
+    </Select>
+  );
+}

package/src/components/dashboard/components/top-menu.tsx

@@ -0,0 +1,26 @@
+import {Tabs, TabsList, TabsTrigger} from 'components/tabs';
+
+export function TopMenu({
+  activeTab,
+  onTabChange,
+}: {
+  activeTab: string;
+  onTabChange: (tab: string) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between w-full">
+      <div className="flex items-center flex-1 min-w-0 pl-12 md:pl-20 pr-8">
+        <Tabs value={activeTab} onValueChange={onTabChange}>
+          <TabsList className="h-48 gap-8 md:gap-12">
+            <TabsTrigger value="analytics" className="text-sm font-medium">
+              Analytics
+            </TabsTrigger>
+            <TabsTrigger value="jobs" className="text-sm font-medium">
+              Jobs
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+    </div>
+  );
+}

package/src/components/dashboard/components/topbar-button.tsx

@@ -0,0 +1,27 @@
+import {Button} from 'components/button';
+import {Icon, type IconName} from 'components/icon';
+import {cn} from 'utils/cn';
+
+export function TopbarButton({
+  className,
+  icon,
+  label,
+}: {
+  className?: string;
+  icon: IconName;
+  label?: string;
+}) {
+  return (
+    <Button
+      type="button"
+      variant="transparent"
+      className={cn(
+        'flex items-center justify-center overflow-hidden shrink-0 w-40 h-40 bg-background-subtle-base hover:bg-background-neutral-hover transition-colors rounded-none border-l border-border-neutral-strong',
+        className,
+      )}
+      aria-label={label ?? undefined}
+    >
+      <Icon name={icon} className="size-18 text-foreground-neutral-subtle" />
+    </Button>
+  );
+}

package/src/components/dashboard/components/topbar.tsx

@@ -0,0 +1,40 @@
+import {cn} from 'utils/cn';
+import {CompleteSetupButton} from './complete-setup-button';
+import {MobileMenu} from './mobile-menu';
+import {OrganizationSelector} from './organization-selector';
+import {TopbarButton} from './topbar-button';
+import {UserProfile} from './user-profile';
+
+export function Topbar({hideLogo = false}: {hideLogo?: boolean}) {
+  return (
+    <div className="flex flex-col items-start w-full bg-background-subtle-base">
+      <div className="flex items-center justify-between w-full shrink-0 border-b border-border-neutral-strong">
+        <div className="flex items-center flex-1 min-w-0">
+          <div className={cn('shrink-0', hideLogo ? 'opacity-0' : 'opacity-100')}>
+            <TopbarButton icon="shipfox" label="Shipfox" className="border-none" />
+          </div>
+          <OrganizationSelector />
+          <div className="hidden md:block flex-1 h-40 bg-background-subtle-base" />
+        </div>
+
+        <CompleteSetupButton className="hidden md:flex" />
+
+        <div className="hidden md:block">
+          <TopbarButton icon="searchLine" label="Search" />
+        </div>
+
+        <div className="hidden md:block">
+          <TopbarButton icon="questionLine" label="Help" />
+        </div>
+
+        <div className="hidden md:block">
+          <TopbarButton icon="notification3Line" label="Notifications" />
+        </div>
+
+        <MobileMenu />
+
+        <UserProfile />
+      </div>
+    </div>
+  );
+}