@keboola/design 2.0.1 → 2.1.0

package/src/components/Modal/Modal.tsx

@@ -1,49 +0,0 @@
-import type { ComponentProps } from 'react';
-import { Close, Root, Trigger } from '@radix-ui/react-dialog';
-
-import { ModalBody } from './ModalBody';
-import { ModalContent } from './ModalContent';
-import { ModalFooter } from './ModalFooter';
-import { ModalHeader } from './ModalHeader';
-import { ModalIcon } from './ModalIcon';
-import { ModalOverlay } from './ModalOverlay';
-
-/**
- * Props for the `Modal` root — forwarded to Radix `Dialog.Root` (controls `open`, `onOpenChange`,
- * `defaultOpen`, `modal`).
- */
-type Props = ComponentProps<typeof Root>;
-
-/**
- * Blocking dialog for confirmations, forms, and detail views. Built on Radix Dialog.
- *
- * **When to use:** the user must act before continuing (confirm a destructive action, fill a short form,
- * view a focused detail panel). Use the compound parts `Modal.Trigger`, `Modal.Content`, `Modal.Header`,
- * `Modal.Body`, `Modal.Footer`, and optionally `Modal.Icon` for a status-coloured header glyph.
- * **When NOT to use:** for slide-in side editing use `Sheet`; for an inline destructive confirmation anchored
- * to its trigger use `Popconfirm`; for hover previews use `HoverCard`.
- * **Composition:** wrap `Modal.Content` around `Modal.Header` + `Modal.Body` + `Modal.Footer`. Put `useAppForm`
- * `FormBody` inside `Modal.Body` and the submit / cancel buttons inside `Modal.Footer`.
- *
- * @see RECIPES.md#modal-form — for the canonical form-in-modal composition
- * @see RECIPES.md#confirm-dialog — for destructive-confirm dialogs
- */
-export const Modal = (props: Props) => <Root {...props} />;
-
-/** Radix `Dialog.Close` re-export — closes the nearest `Modal` when clicked. Use `asChild` to wrap a `Button`. */
-Modal.Close = Close;
-/** Radix `Dialog.Trigger` re-export — opens the modal. Use `asChild` to wrap a `Button`. */
-Modal.Trigger = Trigger;
-
-/** Modal content container — portals into the overlay, handles sizing (`small` / `medium` / `large`) and open/close animation. */
-Modal.Content = ModalContent;
-/** Scrollable body slot. Place form fields or detail content here; takes available space inside `Modal.Content`. */
-Modal.Body = ModalBody;
-/** Status-coloured circular icon docked to the top-left of `Modal.Content`. Use `color="red"` for destructive, `"orange"` for warning, etc. */
-Modal.Icon = ModalIcon;
-/** Bottom action row. Place the primary + cancel `Button`s here; sits below `Modal.Body`. */
-Modal.Footer = ModalFooter;
-/** Top row with title, optional description, and close icon. Pass `title` / `description` props or nest custom JSX. */
-Modal.Header = ModalHeader;
-/** Backdrop overlay rendered behind `Modal.Content`. Normally implicit — only override for non-standard layouts. */
-Modal.Overlay = ModalOverlay;

package/src/components/Modal/ModalBody.tsx

@@ -1,33 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-/** Props for `Modal.Body`. Accepts all `<div>` attributes; `as="form"` is reserved for future use. */
-type Props = ComponentProps<'div'> & {
-  as?: 'form';
-};
-
-/**
- * Scrollable body slot for `Modal`. Place form fields, content blocks, or detail panels here.
- * Takes available height inside `Modal.Content` and scrolls when content overflows.
- */
-export const ModalBody = ({ className, ...props }: Props) => (
-  <div
-    data-slot="modal-body"
-    className={cn(
-      // scrollable body - takes available space and scrolls when content overflows
-      'tw-flex-1',
-      'tw-overflow-y-auto',
-
-      'tw-px-1', // 4 px to complement ModalContent and still keep input focus outline visible
-      'tw-py-1',
-
-      // Default size for nested Lucide icons; callers can override on the icon.
-      "[&_svg:not([class*='tw-size-'])]:tw-size-4",
-      '[&_svg]:tw-shrink-0',
-
-      className,
-    )}
-    {...props}
-  />
-);

package/src/components/Modal/ModalCloseIcon.tsx

@@ -1,31 +0,0 @@
-import type { ComponentProps } from 'react';
-import { Close } from '@radix-ui/react-dialog';
-
-import { X } from '../../icons';
-import { cn } from '../../utils';
-
-type Props = ComponentProps<typeof Close>;
-
-export const ModalCloseIcon = ({ className, ...rest }: Props) => (
-  <Close
-    {...rest}
-    className={cn(
-      'tw-group/modal-close-icon',
-      'tw-flex',
-      'tw-items-center',
-      'tw-justify-center',
-      'focus:tw-outline-none',
-      className,
-    )}
-  >
-    <X
-      className={cn(
-        'tw-size-4',
-        'tw-text-neutral-400',
-        'group-focus/modal-close-icon:tw-text-neutral-500',
-        'group-hover/modal-close-icon:tw-text-neutral-500',
-      )}
-    />
-    <span className="tw-sr-only">Close</span>
-  </Close>
-);

package/src/components/Modal/ModalContent.tsx

@@ -1,95 +0,0 @@
-import type { ComponentProps } from 'react';
-import { Content, Portal } from '@radix-ui/react-dialog';
-
-import { cn } from '../../utils';
-
-import { ModalOverlay } from './ModalOverlay';
-
-/**
- * Props for `Modal.Content`. `size` controls the max-width (`small` 480px / `medium` default / `large` 4xl).
- * All other Radix `Dialog.Content` props (`onEscapeKeyDown`, `onPointerDownOutside`, …) pass through.
- */
-type Props = ComponentProps<typeof Content> & { size?: 'small' | 'medium' | 'large' };
-
-/**
- * Modal content surface — portals into the overlay and renders the header / body / footer slots.
- * Stops escape-key propagation so a parent `FullScreenModal` does not also close.
- */
-export const ModalContent = ({
-  size = 'medium',
-  className,
-  children,
-  onEscapeKeyDown,
-  ...props
-}: Props) => {
-  const handleEscapeKeyDown: typeof onEscapeKeyDown = (event) => {
-    // Stop propagation to prevent parent modals (like FullScreenModal) from closing
-    event.stopPropagation();
-    onEscapeKeyDown?.(event);
-  };
-
-  return (
-    <Portal>
-      <ModalOverlay>
-        <Content
-          /**
-           * Intentionally set undefined to avoid warning as suggested in docs, (https://www.radix-ui.com/primitives/docs/components/dialog#description)
-           * as of now we don't use modal description anywhere, if we decide to fix this issue, we fix it everywhere at once.
-           */
-          aria-describedby={undefined}
-          className={cn(
-            // reset
-            'tailwindcss-preflight',
-
-            // positioning - centered with viewport-relative constraints
-            'tw-fixed',
-            'tw-left-1/2',
-            'tw-top-20',
-            'tw--translate-x-1/2',
-            'tw-z-[1051]',
-
-            // sizing - responsive max dimensions
-            'tw-w-full',
-            'tw-max-w-2xl',
-            'tw-max-h-[calc(100vh-2*theme(spacing.20))]',
-
-            // layout
-            'tw-flex',
-            'tw-flex-col',
-            'tw-gap-4',
-            'tw-rounded-lg',
-            'tw-bg-white',
-            'tw-px-7', // 4 px less padding to prevent input focus rings/outlines from being clipped by overflow
-            'tw-py-8',
-
-            // opening animation
-            'tw-duration-200',
-            'data-[state=open]:tw-animate-in',
-            'data-[state=open]:tw-fade-in-0',
-            'data-[state=open]:tw-zoom-in-80',
-            'data-[state=open]:tw-slide-in-from-left-1/2',
-            'data-[state=open]:tw-slide-in-from-top-[48%]',
-
-            // closing animation
-            'data-[state=closed]:tw-animate-out',
-            'data-[state=closed]:tw-fade-out-0',
-            'data-[state=closed]:tw-zoom-out-80',
-            'data-[state=closed]:tw-slide-out-to-left-1/2',
-            'data-[state=closed]:tw-slide-out-to-top-[48%]',
-
-            {
-              'tw-max-w-[480px]': size === 'small',
-              'tw-max-w-4xl': size === 'large',
-            },
-
-            className,
-          )}
-          onEscapeKeyDown={handleEscapeKeyDown}
-          {...props}
-        >
-          {children}
-        </Content>
-      </ModalOverlay>
-    </Portal>
-  );
-};

package/src/components/Modal/ModalDescription.tsx

@@ -1,20 +0,0 @@
-import type { ComponentProps } from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<typeof DialogPrimitive.Description>;
-
-export const ModalDescription = ({ className, ...props }: Props) => (
-  <DialogPrimitive.Description
-    className={cn(
-      'tw-text-sm',
-      'tw-font-sans',
-      'tw-tracking-normal',
-      'tw-font-normal',
-      'tw-text-neutral-400',
-      className,
-    )}
-    {...props}
-  />
-);

package/src/components/Modal/ModalFooter.tsx

@@ -1,20 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-/** Props for `Modal.Footer`. Accepts all `<div>` attributes. */
-type Props = ComponentProps<'div'>;
-
-/**
- * Bottom action row for `Modal`. Layout is up to the caller — typically `tw-flex tw-justify-end tw-gap-2`
- * with cancel + primary `Button`s.
- */
-export const ModalFooter = ({ className, ...props }: Props) => (
-  <div
-    className={cn(
-      'tw-px-1', // 4 px to complement ModalContent and still keep input focus outline visible
-      className,
-    )}
-    {...props}
-  />
-);

package/src/components/Modal/ModalHeader.tsx

@@ -1,61 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-
-import { cn } from '../../utils';
-
-import { ModalCloseIcon } from './ModalCloseIcon';
-import { ModalDescription } from './ModalDescription';
-import { ModalTitle } from './ModalTitle';
-
-/**
- * Props for `Modal.Header`. Pass `title` + optional `description` for the standard layout, or nest custom JSX
- * as `children` to render below the title row.
- */
-type Props = {
-  /** Title text rendered as `ModalTitle`. Wraps a Radix `Dialog.Title` for a11y. */
-  title?: ReactNode;
-  /** Subtitle / supporting text rendered below the title. */
-  description?: ReactNode;
-  /** Hide the top-right close icon. Use when the modal must not be dismissible by the icon (still closable via `Modal.Close`). */
-  hideCloseIcon?: boolean;
-} & ComponentProps<'div'>;
-
-/**
- * Modal header slot — title + description row with a built-in close icon.
- * Renders a bottom border when followed by a `Modal.Body`; drops the border when body contains `Tabs`.
- */
-export const ModalHeader = ({
-  className,
-  title,
-  description,
-  hideCloseIcon = false,
-  children,
-  ...props
-}: Props) => (
-  <div
-    className={cn(
-      'tw-flex',
-      'tw-flex-col',
-      'tw-gap-3',
-      'tw-pb-5',
-      // Show border separator only if body is visible
-      '[&:has(~[data-slot=modal-body])]:tw-border-b',
-      // Tabs render their own bottom border — drop header border + padding to avoid the double-line look
-      '[&:has(~[data-slot=modal-body]_[data-slot=tabs-root])]:!tw-border-b-0',
-      '[&:has(~[data-slot=modal-body]_[data-slot=tabs-root])]:!tw-pb-0',
-      'tw-border-neutral-150',
-      'tw-px-1', // 4 px to complement ModalContent and still keep input focus outline visible
-      className,
-    )}
-    {...props}
-  >
-    <div className="tw-flex tw-flex-col">
-      <div className="tw-flex tw-justify-end tw-gap-2">
-        {title && <ModalTitle>{title}</ModalTitle>}
-        {!hideCloseIcon && <ModalCloseIcon />}
-      </div>
-      {description && <ModalDescription>{description}</ModalDescription>}
-    </div>
-
-    {children}
-  </div>
-);

package/src/components/Modal/ModalIcon.tsx

@@ -1,109 +0,0 @@
-import { useState } from 'react';
-import type { ReactNode } from 'react';
-
-import { cn } from '../../utils';
-import { isFAIconValue } from '../../utils/legacyIcon';
-import { Icon } from '../Icon';
-
-type NamedColor = 'orange' | 'blue' | 'red' | 'green' | 'gray' | 'violet';
-
-type IconProps = {
-  color: NamedColor | (string & {});
-  /**
-   * Pass a Lucide icon node. Legacy FontAwesome `"name"` / `[prefix, name]`
-   * string values are still accepted during the C2 deprecation window and
-   * rendered via the legacy `<Icon>` wrapper.
-   */
-  icon: ReactNode;
-  /**
-   * @deprecated FA-icon `spin` pass-through kept only for the legacy
-   * `<Modal.Icon icon="spinner" spin />` callsite during the kbc-ui sweep.
-   * New code should render an animated Lucide loader as the `icon` node.
-   */
-  spin?: boolean;
-  iconUrl?: never;
-  iconAlt?: never;
-};
-
-type ImageProps = {
-  color?: never;
-  iconUrl: string;
-  iconAlt?: string;
-  icon?: never;
-  spin?: never;
-};
-
-/**
- * Discriminated props for `Modal.Icon` — either an `icon` slot (a Lucide icon)
- * with a categorical `color`, or a remote `iconUrl` (renders an `<img>`).
- * The two shapes are mutually exclusive.
- */
-type Props = IconProps | ImageProps;
-
-const NAMED_COLORS = new Set<string>(['orange', 'blue', 'red', 'green', 'gray', 'violet']);
-
-/**
- * Status-coloured icon docked to the top-left of `Modal.Content`. Use the categorical `color`
- * (`red` destructive, `orange` warning, `green` success, `blue` info, `gray` neutral, `violet` agent)
- * to encode meaning. The colour palette is categorical and stays fixed across brand themes.
- */
-export const ModalIcon = (props: Props) => {
-  const [hasImageError, setHasImageError] = useState(false);
-
-  if ('iconUrl' in props && hasImageError) {
-    return null;
-  }
-
-  return (
-    <div
-      className={cn('tw-absolute', 'tw-top-0', 'tw-left-8', 'tw-translate-y-[-50%]', 'tw-size-12')}
-    >
-      {'iconUrl' in props ? (
-        <img
-          src={props.iconUrl}
-          alt={props.iconAlt ?? 'Modal icon'}
-          className="tw-size-full tw-rounded-full tw-object-contain"
-          onError={() => setHasImageError(true)}
-        />
-      ) : (
-        <div
-          className={cn('tw-relative', 'tw-rounded-full', 'tw-size-12', {
-            'tw-bg-warning-500': props.color === 'orange',
-            'tw-bg-secondary-500': props.color === 'blue',
-            'tw-bg-primary-500': props.color === 'green',
-            'tw-bg-error-500': props.color === 'red',
-            'tw-bg-neutral-150': props.color === 'gray',
-            'tw-bg-purple-100': props.color === 'violet',
-          })}
-          style={
-            props.color && !NAMED_COLORS.has(props.color)
-              ? { backgroundColor: props.color }
-              : undefined
-          }
-        >
-          <span
-            className={cn(
-              'tw-absolute',
-              'tw-size-full',
-              'tw-flex',
-              'tw-items-center',
-              'tw-justify-center',
-              'tw-top-1/2',
-              'tw-left-1/2',
-              '-tw-translate-x-1/2',
-              '-tw-translate-y-1/2',
-              {
-                'tw-text-white': props.color !== 'violet',
-                'tw-text-purple-500': props.color === 'violet',
-              },
-              '[&_svg:not([class*="tw-size-"])]:tw-size-6',
-              '[&_svg]:tw-aspect-square',
-            )}
-          >
-            {isFAIconValue(props.icon) ? <Icon icon={props.icon} spin={props.spin} /> : props.icon}
-          </span>
-        </div>
-      )}
-    </div>
-  );
-};

package/src/components/Modal/ModalOverlay.tsx

@@ -1,42 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import { Overlay } from '@radix-ui/react-dialog';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<typeof Overlay> & {
-  disableTransition?: boolean;
-};
-
-export const ModalOverlay = ({
-  ref,
-  className,
-  disableTransition = false,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
-  <Overlay
-    {...props}
-    ref={ref}
-    className={cn(
-      // positioning
-      'tw-fixed',
-      'tw-inset-0',
-      'tw-z-[1051]',
-
-      // background
-      'tw-bg-black/50',
-
-      // opening animation
-      'data-[state=open]:tw-duration-500',
-      'data-[state=open]:tw-fade-in-0',
-
-      // closing animation
-      'data-[state=closed]:tw-duration-500',
-      'data-[state=closed]:tw-fade-out-0',
-      {
-        'data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out': !disableTransition,
-      },
-      className,
-    )}
-    onClick={(event) => event.stopPropagation()}
-  />
-);

package/src/components/Modal/ModalTitle.tsx

@@ -1,12 +0,0 @@
-import type { ComponentProps } from 'react';
-import { Title } from '@radix-ui/react-dialog';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<typeof Title>;
-
-export const ModalTitle = ({ children, className, ...props }: Props) => (
-  <Title {...props} asChild className={cn('tw-flex-1 tw-break-anywhere', className)}>
-    <h3>{children}</h3>
-  </Title>
-);

package/src/components/Modal/index.ts

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

package/src/components/Navbar/Navbar.stories.tsx

@@ -1,191 +0,0 @@
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Bell, ChevronsUpDown, Diamond, Keboola, Search } from '@keboola/design/icons';
-
-import { Navbar } from './Navbar';
-
-type NavbarProps = ComponentProps<typeof Navbar>;
-type Accent = NonNullable<NavbarProps['accent']>;
-
-const accents: Accent[] = ['blue', 'purple', 'orange', 'green'];
-
-export default {
-  component: Navbar,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  args: {
-    accent: 'blue',
-    bordered: false,
-  },
-  argTypes: {
-    accent: {
-      control: { type: 'radio' },
-      options: accents,
-    },
-  },
-  decorators: [
-    (StoryFn) => (
-      <div className="tailwindcss-preflight tw-flex tw-h-svh tw-w-svw tw-flex-col tw-gap-1 tw-bg-neutral-50">
-        <StoryFn />
-        <main className="tw-mx-2 tw-flex tw-h-96 tw-items-center tw-justify-center tw-rounded-2xl tw-bg-white tw-text-4xl">
-          Keboola UI
-        </main>
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof Navbar>;
-
-type Story = StoryObj<typeof Navbar>;
-
-export const Default: Story = {
-  render: (props) => (
-    <Navbar {...props}>
-      <Navbar.Header>
-        <Navbar.MenuItemAdornment variant="icon" asChild>
-          <Keboola className="!tw-size-8 tw-shrink-0 !tw-p-0" />
-        </Navbar.MenuItemAdornment>
-      </Navbar.Header>
-
-      <Navbar.Content>
-        <Navbar.Menu marker="forward-slash">
-          <Navbar.MenuItem>
-            <Navbar.MenuButton variant="emphasized" icon={<Diamond className="tw-size-4" />}>
-              Project
-              <ChevronsUpDown className="tw-size-5" />
-            </Navbar.MenuButton>
-          </Navbar.MenuItem>
-          <Navbar.MenuItem>
-            <Navbar.MenuButton icon={<Diamond className="tw-size-4" />}>
-              Branch
-              <ChevronsUpDown className="tw-size-5" />
-            </Navbar.MenuButton>
-          </Navbar.MenuItem>
-        </Navbar.Menu>
-      </Navbar.Content>
-      <Navbar.Footer>
-        <Navbar.Menu>
-          <Navbar.MenuItem>
-            <Navbar.MenuButton variant="search" icon={<Search className="tw-size-4" />}>
-              Search
-              <Navbar.MenuItemAdornment variant="shortcut">/</Navbar.MenuItemAdornment>
-            </Navbar.MenuButton>
-          </Navbar.MenuItem>
-
-          <Navbar.MenuItem>
-            <Navbar.MenuButton
-              variant="icon"
-              aria-label="Notifications"
-              icon={<Bell className="tw-size-4" />}
-            />
-          </Navbar.MenuItem>
-
-          <Navbar.MenuItem>
-            <Navbar.MenuAvatar />
-          </Navbar.MenuItem>
-        </Navbar.Menu>
-      </Navbar.Footer>
-    </Navbar>
-  ),
-};
-
-const items = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);
-
-export const ContentScrolling: Story = {
-  render: (props) => (
-    <Navbar {...props}>
-      <Navbar.Header>
-        <Navbar.Menu>
-          <Navbar.MenuItem>
-            <Keboola className="tw-mx-2 !tw-size-8 tw-shrink-0 tw-text-secondary-500" />
-          </Navbar.MenuItem>
-        </Navbar.Menu>
-      </Navbar.Header>
-      <Navbar.Content>
-        <Navbar.Menu marker="forward-slash">
-          {items.map((item) => (
-            <Navbar.MenuItem key={item}>
-              <Navbar.MenuButton icon={<Diamond className="tw-size-4" />}>
-                {item}
-                <ChevronsUpDown className="tw-size-5" />
-              </Navbar.MenuButton>
-            </Navbar.MenuItem>
-          ))}
-        </Navbar.Menu>
-      </Navbar.Content>
-      <Navbar.Footer>
-        <Navbar.Menu>
-          <Navbar.MenuItem>
-            <Navbar.MenuButton variant="search">Search keboola</Navbar.MenuButton>
-          </Navbar.MenuItem>
-          <Navbar.MenuItem>
-            <Navbar.MenuButton>JZ</Navbar.MenuButton>
-          </Navbar.MenuItem>
-        </Navbar.Menu>
-      </Navbar.Footer>
-    </Navbar>
-  ),
-};
-
-export const MenuItems: Story = {
-  render: (props) => (
-    <Navbar {...props}>
-      <Navbar.Content>
-        <Navbar.Menu>
-          <Navbar.MenuItem>
-            <Navbar.MenuButton icon={<Diamond className="tw-size-4" />}>Default</Navbar.MenuButton>
-          </Navbar.MenuItem>
-          <Navbar.MenuItem>
-            <Navbar.MenuButton asChild icon={<Diamond className="tw-size-4" />}>
-              <a href="https://www.keboola.com">Default - Anchor</a>
-            </Navbar.MenuButton>
-          </Navbar.MenuItem>
-
-          <Navbar.MenuItem>
-            <Navbar.MenuButton disabled icon={<Diamond className="tw-size-4" />}>
-              Default - Disabled
-            </Navbar.MenuButton>
-          </Navbar.MenuItem>
-
-          <Navbar.MenuItem>
-            <Navbar.MenuButton variant="emphasized" icon={<Diamond className="tw-size-4" />}>
-              Emphasized
-            </Navbar.MenuButton>
-          </Navbar.MenuItem>
-
-          <Navbar.MenuItem>
-            <Navbar.MenuButton
-              variant="emphasized"
-              asChild
-              icon={<Diamond className="tw-size-4" />}
-            >
-              <a href="https://www.keboola.com">Emphasized - Anchor</a>
-            </Navbar.MenuButton>
-          </Navbar.MenuItem>
-
-          <Navbar.MenuItem>
-            <Navbar.MenuButton
-              disabled
-              variant="emphasized"
-              icon={<Diamond className="tw-size-4" />}
-            >
-              Emphasized - Disabled
-            </Navbar.MenuButton>
-          </Navbar.MenuItem>
-
-          <Navbar.MenuItem>
-            <Navbar.MenuButton variant="search">
-              Search
-              <Navbar.MenuItemAdornment variant="shortcut">/</Navbar.MenuItemAdornment>
-            </Navbar.MenuButton>
-          </Navbar.MenuItem>
-
-          <Navbar.MenuItem>
-            <Navbar.MenuAvatar />
-          </Navbar.MenuItem>
-        </Navbar.Menu>
-      </Navbar.Content>
-    </Navbar>
-  ),
-};