@uipath/apollo-vertex 2.0.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-vertex",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "UiPath Apollo Vertex design system components",
   "license": "MIT",
   "keywords": [

package/skills/use-vertex-components/SKILL.md

@@ -2,12 +2,11 @@
 name: use-vertex-components
 description: >
   Build all new UI from @uipath/apollo-vertex components instead of writing
-  new ones. Covers which Vertex component to use for common needs (buttons,
-  forms, dialogs, tables, page headers, empty states, charts, toasts), how to
-  adapt them with variants, className and composition, and what not to do:
-  hand-rolled primitives, raw Radix or other UI libraries, or copied shadcn
-  code. Load before building or changing any UI in an app that uses Apollo
-  Vertex.
+  new ones. Covers how to adapt them with variants, className and
+  composition, and what not to do: hand-rolled primitives, raw Radix or other
+  UI libraries, or copied shadcn code. Load before building or changing any
+  UI in an app that uses Apollo Vertex, together with
+  vertex-component-catalog to pick the component.
 metadata:
   type: core
   library: '@uipath/apollo-vertex'
@@ -41,23 +40,9 @@ components.
 
 ## Pick the component
 
-| Need | Use |
-| --- | --- |
-| Actions | `Button`, `ButtonGroup`, `Toggle`, `ToggleGroup` |
-| Text and choice inputs | `Input`, `InputGroup`, `Textarea`, `Select`, `Combobox`, `Checkbox`, `RadioGroup`, `Switch`, `Slider`, `InputOTP` |
-| Dates | `DatePicker`, `Calendar` |
-| Form layout, labels and errors | `Field`, `FieldGroup`, `FieldLabel`, `FieldDescription`, `FieldError`, `Label` |
-| Multi-step forms | `FormWizard`, `Stepper` |
-| Overlays | `Dialog`, `AlertDialog`, `Sheet`, `Drawer`, `Popover`, `HoverCard`, `Tooltip` |
-| Menus | `DropdownMenu`, `ContextMenu`, `Menubar`, `Command`, `NavigationMenu` |
-| Page structure | `PageHeader`, `Breadcrumb`, `Tabs`, `Card`, `Separator`, `ResizablePanelGroup`, `ScrollArea`, `Sidebar` |
-| Lists and tables | `DataTable` with `useDataTable`, `Table`, `Item`, `Pagination` |
-| Status and feedback | `Badge`, `Alert`, `Toaster`, `Progress`, `Spinner`, `Skeleton`, `Empty` |
-| Metrics and charts | `MetricCard`, plus `BarChart`, `LineChart`, `KpiChart` and the other charts |
-| AI content | `AiMark`, `AiGlow`, `AiCaveat`, `ConfidenceSignal`, `FeedbackVoteWidget` |
-| Misc | `Avatar`, `Accordion`, `Collapsible`, `Carousel`, `TimelineRowLayout`, `Kbd`, `AspectRatio` |
-
-Import all of them from `@uipath/apollo-vertex`.
+Load the `vertex-component-catalog` skill to choose the component. It lists
+every documented Vertex component by need, with its exports, when to use it
+and what to use instead. Import all of them from `@uipath/apollo-vertex`.
 
 ## Adapting a component
 

package/skills/vertex-component-catalog/SKILL.md

@@ -0,0 +1,213 @@
+---
+name: vertex-component-catalog
+description: >
+  Catalog of every documented @uipath/apollo-vertex component and pattern,
+  grouped by need (actions, inputs, forms, overlays, menus, layout, data
+  display, feedback, charts), with the names to import, when to use each one
+  and which component to use instead. Load when choosing which Vertex
+  component to build a screen, form, dialog, table or state from.
+metadata:
+  type: core
+  library: '@uipath/apollo-vertex'
+sources:
+  - 'UiPath/apollo-ui:apps/apollo-vertex/content/docs/components/*.mdx'
+  - 'UiPath/apollo-ui:apps/apollo-vertex/content/docs/components/meta.json'
+  - 'UiPath/apollo-ui:apps/apollo-vertex/content/docs/patterns/*.mdx'
+  - 'UiPath/apollo-ui:apps/apollo-vertex/content/docs/patterns/meta.json'
+  - 'UiPath/apollo-ui:packages/apollo-vertex/entries/index.ts'
+---
+
+<!-- Generated by apps/apollo-vertex/scripts/generate-component-skill.ts from the
+docs pages. Do not edit by hand. -->
+
+# Apollo Vertex component catalog
+
+Import every name below from `@uipath/apollo-vertex`. Follow the
+`use-vertex-components` skill for how to use and adapt them.
+
+## Actions
+
+- **Button**: Displays a button or a component that looks like a button. Exports: `Button`, `buttonVariants`.
+  - Use when the user triggers an action, such as submitting a form, saving or opening a dialog.
+  - Avoid when the control turns a setting on or off. Use **Switch** instead.
+  - Avoid when the user picks one of a few modes or views. Use **Toggle Group** instead.
+- **Button Group**: Groups multiple buttons together with proper styling and spacing. Exports: `ButtonGroup`, `ButtonGroupSeparator`, `ButtonGroupText`, `buttonGroupVariants`.
+- **Toggle**: A two-state button that can be either on or off. Exports: `Toggle`, `toggleVariants`.
+- **Toggle Group**: A set of two-state buttons that can be toggled on or off. Exports: `ToggleGroup`, `ToggleGroupItem`.
+
+## Inputs
+
+- **Input**: Displays a form input field or a component that looks like an input field. Exports: `Input`.
+- **Input Group**: Groups input elements with addons and buttons. Exports: `InputGroup`, `InputGroupAddon`, `InputGroupButton`, `InputGroupInput`, `InputGroupText`, `InputGroupTextarea`.
+- **Textarea**: Displays a form textarea or a component that looks like a textarea. Exports: `Textarea`.
+- **Select**: Displays a list of options for the user to pick from—triggered by a button. Exports: `Select`, `SelectContent`, `SelectGroup`, `SelectItem`, `SelectLabel`, `SelectScrollDownButton`, `SelectScrollUpButton`, `SelectSeparator`, `SelectTrigger`, `SelectValue`.
+- **Combobox**: An autocomplete input with a filterable list, supporting single and multi-select with badges. Exports: `Combobox`, `ComboboxBadge`, `ComboboxBadgeList`, `ComboboxContent`, `ComboboxEmpty`, `ComboboxGroup`, `ComboboxInput`, `ComboboxItem`, `ComboboxList`, `ComboboxTrigger`.
+- **Checkbox**: A control that allows the user to toggle between checked and not checked. Exports: `Checkbox`.
+- **Radio Group**: A set of checkable buttons—known as radio buttons—where no more than one can be checked. Exports: `RadioGroup`, `RadioGroupItem`.
+- **Switch**: A control that allows the user to toggle between on and off. Exports: `Switch`.
+- **Slider**: An input where the user selects a value from within a given range. Exports: `Slider`.
+- **Input OTP**: Accessible one-time password component with copy paste functionality. Exports: `InputOTP`, `InputOTPGroup`, `InputOTPSeparator`, `InputOTPSlot`.
+- **Calendar**: A date field component that allows users to enter and edit dates. Exports: `Calendar`, `CalendarDayButton`.
+- **Date Picker**: A date picker component that allows users to select a date from a calendar popover. Exports: `DatePicker`.
+- **Filter Dropdown**: A versatile filter dropdown supporting multi-select, single-select, built-in search, and optional TanStack Table column integration. Use it in data table toolbars or as a standalone page-level filter. Exports: `FilterDropdown`.
+
+## Forms
+
+- **Form**: Exports: `CheckboxField`, `FormFieldError`, `RadioGroupField`, `SelectField`, `SubmitButton`, `SwitchField`, `TextareaField`, `TextField`, `useAppForm`, `useFieldContext`, `useFormContext`, `useTranslatedErrors`, `withForm`.
+- **Field**: A form field component with label, input, and description. Exports: `Field`, `FieldContent`, `FieldDescription`, `FieldError`, `FieldGroup`, `FieldLabel`, `FieldLegend`, `FieldSeparator`, `FieldSet`, `FieldTitle`.
+- **Label**: Renders an accessible label associated with controls. Exports: `Label`.
+- **Form Wizard**: Exports: `FormWizard`, `FormWizardNav`, `FormWizardStep`, `FormWizardSteps`, `getVisibleSteps`, `useFormWizard`, `useFormWizardContext`.
+
+## Overlays
+
+- **Dialog**: A modal dialog that appears in front of app content to provide critical information. Exports: `Dialog`, `DialogClose`, `DialogContent`, `DialogDescription`, `DialogFooter`, `DialogHeader`, `DialogOverlay`, `DialogPortal`, `DialogTitle`, `DialogTrigger`.
+  - Use when the user must finish or dismiss a short, focused task before returning to the page, such as a small form or a single choice.
+  - Avoid when the content is a long form or a record's details, or the user needs to keep the page in view. Use **Sheet** instead.
+  - Avoid when the user confirms a destructive or irreversible action. Use **Alert Dialog** instead.
+  - Avoid when the content is a few extra controls or details anchored to a trigger. Use **Popover** instead.
+
+    ```tsx
+    import {
+      Button,
+      Dialog,
+      DialogContent,
+      DialogDescription,
+      DialogFooter,
+      DialogHeader,
+      DialogTitle,
+      DialogTrigger,
+    } from "@uipath/apollo-vertex";
+
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Rename</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Rename invoice</DialogTitle>
+          <DialogDescription>Everyone in the workspace sees the new name.</DialogDescription>
+        </DialogHeader>
+        {/* form fields */}
+        <DialogFooter>
+          <Button type="submit">Save</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+    ```
+
+- **Alert Dialog**: A modal dialog that interrupts the user with important content and expects a response. Exports: `AlertDialog`, `AlertDialogAction`, `AlertDialogCancel`, `AlertDialogContent`, `AlertDialogDescription`, `AlertDialogFooter`, `AlertDialogHeader`, `AlertDialogOverlay`, `AlertDialogPortal`, `AlertDialogTitle`, `AlertDialogTrigger`.
+  - Use when the user must confirm or cancel an action that is destructive or cannot be undone, such as deleting a record.
+  - Avoid when the dialog holds a form or other content beyond a confirm or cancel choice. Use **Dialog** instead.
+- **Sheet**: Extends the Dialog component to display content that complements the main content. Exports: `Sheet`, `SheetClose`, `SheetContent`, `SheetDescription`, `SheetFooter`, `SheetHeader`, `SheetTitle`, `SheetTrigger`.
+  - Use when the user views or edits a record, a long form, filters or settings in a side panel while the page stays in context.
+  - Avoid when the task is short and needs the user's full attention. Use **Dialog** instead.
+  - Avoid when the panel is for small screens and should slide up from the bottom and be dismissed with a swipe. Use **Drawer** instead.
+- **Drawer**: A drawer component that slides in from the edge of the screen. Exports: `Drawer`, `DrawerClose`, `DrawerContent`, `DrawerDescription`, `DrawerFooter`, `DrawerHeader`, `DrawerOverlay`, `DrawerPortal`, `DrawerTitle`, `DrawerTrigger`.
+  - Use when the screen is small and the panel should slide up from the bottom edge and close with a swipe.
+  - Avoid when the layout is for desktop and needs a side panel for details or a form. Use **Sheet** instead.
+- **Popover**: Displays rich content in a portal, triggered by a button. Exports: `Popover`, `PopoverAnchor`, `PopoverContent`, `PopoverTrigger`.
+- **Hover Card**: For sighted users to preview content available behind a link. Exports: `HoverCard`, `HoverCardContent`, `HoverCardTrigger`.
+- **Tooltip**: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. Exports: `Tooltip`, `TooltipContent`, `TooltipProvider`, `TooltipTrigger`.
+
+## Menus
+
+- **Dropdown Menu**: Displays a menu to the user triggered by a button. Exports: `DropdownMenu`, `DropdownMenuCheckboxItem`, `DropdownMenuContent`, `DropdownMenuGroup`, `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuPortal`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuSeparator`, `DropdownMenuShortcut`, `DropdownMenuSub`, `DropdownMenuSubContent`, `DropdownMenuSubTrigger`, `DropdownMenuTrigger`.
+- **Context Menu**: Displays a menu to the user triggered by a right-click or long-press. Exports: `ContextMenu`, `ContextMenuCheckboxItem`, `ContextMenuContent`, `ContextMenuGroup`, `ContextMenuItem`, `ContextMenuLabel`, `ContextMenuPortal`, `ContextMenuRadioGroup`, `ContextMenuRadioItem`, `ContextMenuSeparator`, `ContextMenuShortcut`, `ContextMenuSub`, `ContextMenuSubContent`, `ContextMenuSubTrigger`, `ContextMenuTrigger`.
+- **Menubar**: A visually persistent menu common in desktop applications. Exports: `Menubar`, `MenubarCheckboxItem`, `MenubarContent`, `MenubarGroup`, `MenubarItem`, `MenubarLabel`, `MenubarMenu`, `MenubarPortal`, `MenubarRadioGroup`, `MenubarRadioItem`, `MenubarSeparator`, `MenubarShortcut`, `MenubarSub`, `MenubarSubContent`, `MenubarSubTrigger`, `MenubarTrigger`.
+- **Command**: Fast, composable, unstyled command menu for React. Exports: `Command`, `CommandDialog`, `CommandEmpty`, `CommandGroup`, `CommandInput`, `CommandItem`, `CommandList`, `CommandSeparator`, `CommandShortcut`.
+- **Navigation Menu**: A collection of links for navigating websites. Exports: `NavigationMenu`, `NavigationMenuContent`, `NavigationMenuIndicator`, `NavigationMenuItem`, `NavigationMenuLink`, `NavigationMenuList`, `NavigationMenuTrigger`, `navigationMenuTriggerStyle`, `NavigationMenuViewport`.
+
+## Layout and navigation
+
+- **Card**: Exports: `Card`, `CardAction`, `CardContent`, `CardDescription`, `CardFooter`, `CardHeader`, `CardTitle`, `cardVariants`, `GLASS_CLASSES`.
+- **Tabs**: A set of layered sections of content—known as tab panels—that are displayed one at a time. Exports: `Tabs`, `TabsContent`, `TabsList`, `TabsTrigger`.
+- **Breadcrumb**: Displays the path to the current resource using a hierarchy of links. Exports: `Breadcrumb`, `BreadcrumbEllipsis`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbList`, `BreadcrumbPage`, `BreadcrumbSeparator`.
+- **Sidebar**: A composable, themeable and customizable sidebar component. Exports: `Sidebar`, `SidebarContent`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupAction`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarInput`, `SidebarInset`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `sidebarMenuButtonVariants`, `SidebarMenuItem`, `SidebarMenuSkeleton`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarRail`, `SidebarSeparator`, `SidebarTrigger`, `useSidebar`.
+- **Accordion**: A vertically stacked set of interactive headings that each reveal a section of content. Exports: `Accordion`, `AccordionContent`, `AccordionItem`, `AccordionTrigger`.
+- **Collapsible**: An interactive component which expands/collapses a panel. Exports: `Collapsible`, `CollapsibleContent`, `CollapsibleTrigger`.
+- **Separator**: Visually or semantically separates content. Exports: `Separator`.
+- **Resizable**: Accessible resizable panel groups and layouts with keyboard support. Exports: `ResizableHandle`, `ResizablePanel`, `ResizablePanelGroup`.
+- **Scroll Area**: Augments native scroll functionality for custom, cross-browser styling. Exports: `ScrollArea`, `ScrollBar`.
+- **Aspect Ratio**: Displays content within a desired ratio. Exports: `AspectRatio`.
+
+## Data display
+
+- **Data Table**: A data table built on TanStack Table with sorting, filtering, pagination and row selection. Exports: `DataTable`, `DataTableCell`, `DataTableColumnHeader`, `dataTableFacetedFilterFn`, `dataTableGlobalFilterFn`, `DataTablePagination`, `DataTableRow`, `DataTableSearch`, `DataTableSkeleton`, `DataTableToolbar`, `DataTableViewOptions`, `useDataTable`, `useEntityColumns`, `useEntityDataTable`.
+  - Use when a list of records needs sorting, filtering, search, pagination, row selection or column visibility.
+  - Avoid when the data is a small, static table with no interaction. Use **Table** instead.
+
+    ```tsx
+    import { type ColumnDef, DataTable, useDataTable } from "@uipath/apollo-vertex";
+
+    const columns: ColumnDef<Invoice>[] = [
+      { accessorKey: "number", header: "Number" },
+      { accessorKey: "amount", header: "Amount" },
+    ];
+
+    function InvoicesTable({ data }: { data: Invoice[] }) {
+      const tableState = useDataTable({ data, columns, storageKey: "invoices" });
+      return <DataTable {...tableState} />;
+    }
+    ```
+
+- **Table**: A responsive table component for displaying data. Exports: `Table`, `TableBody`, `TableCaption`, `TableCell`, `TableFooter`, `TableHead`, `TableHeader`, `TableRow`.
+  - Use when the data is small and static, such as a summary or a comparison, and needs no sorting, filtering or pagination.
+  - Avoid when users sort, filter, search, page through or select rows. Use **Data Table** instead.
+- **Pagination**: Pagination with page navigation, next and previous links. Exports: `Pagination`, `PaginationContent`, `PaginationEllipsis`, `PaginationItem`, `PaginationLink`, `PaginationNext`, `PaginationPrevious`.
+- **Item**: A versatile list item component for displaying content in lists. Exports: `Item`, `ItemActions`, `ItemContent`, `ItemDescription`, `ItemFooter`, `ItemGroup`, `ItemHeader`, `ItemMedia`, `ItemSeparator`, `ItemTitle`.
+- **Timeline**: Primitives for building an activity timeline: a status marker (the dot) and the row layout (the connecting line and dot slot a row sits in). Together they render a mixed trail of human and agent steps, without knowing anything about your domain. Exports: `TimelineMarker`, `TimelineRowLayout`.
+- **Avatar**: An image element with a fallback for representing the user. Exports: `Avatar`, `AvatarFallback`, `AvatarImage`.
+- **Badge**: Displays a badge or a component that looks like a badge. Exports: `Badge`, `badgeVariants`.
+- **Kbd**: The keyboard key component is used to display keyboard shortcuts. Exports: `Kbd`, `KbdGroup`.
+- **Carousel**: A carousel with motion and swipe built using Embla. Exports: `Carousel`, `CarouselContent`, `CarouselItem`, `CarouselNext`, `CarouselPrevious`.
+
+## Feedback
+
+- **Alert**: Displays a callout for user attention. Exports: `Alert`, `AlertDescription`, `AlertTitle`, `alertVariants`.
+  - Use when feedback must stay visible in context, such as validation errors, warnings or a blocking error.
+  - Use when the user must act on the message, or the system raised it without a user action. With no related UI to anchor it to, show it as a persistent full-width banner below the main header.
+  - Avoid when the message only confirms that an action the user just took succeeded. Use **Sonner** instead.
+- **Sonner**: An opinionated toast component for React. Exports: `apolloToastClassNames`, `Toaster`.
+  - Use when the message briefly confirms an action the user just took and asks nothing of them, such as "Changes saved".
+  - Avoid when the message is a blocking error or a validation error, needs user input, or was raised by the system without a user action. Use **Alert** instead.
+
+    ```tsx
+    // Render <Toaster /> once in the root layout. toast comes from the sonner package.
+    import { Toaster } from "@uipath/apollo-vertex";
+    import { toast } from "sonner";
+
+    <Toaster />
+
+    toast.success("Changes saved", { description: "Your updates have been applied." });
+    ```
+
+- **Empty**: An empty state component for when there is no data to display. Exports: `Empty`, `EmptyContent`, `EmptyDescription`, `EmptyHeader`, `EmptyMedia`, `EmptyTitle`.
+  - Use when a list, table, search result or page has nothing to show. Say why it is empty and offer the next action when there is one.
+  - Avoid when the content is still loading. Use **Skeleton** instead.
+  - Avoid when loading the content failed. Use **Alert** instead.
+- **Skeleton**: Use to show a placeholder while content is loading. Exports: `Skeleton`.
+- **Spinner**: A loading spinner component to indicate loading state. Exports: `Spinner`.
+- **Progress**: Displays an indicator showing the completion progress of a task. Exports: `Progress`.
+- **Confidence Signal**: A single chip for communicating AI confidence — used everywhere the system needs to say "can you act on this, or should you pause?" Exports: `ConfidenceSignal`, `SignalBars`.
+
+## Charts
+
+- **Chart**: Beautiful charts using Recharts with consistent theming and styling. Exports: `ChartContainer`, `ChartLegend`, `ChartLegendContent`, `ChartStyle`, `ChartTooltip`, `ChartTooltipContent`.
+- **Line Chart**: A time-series line chart over a datetime dimension. Exports: `LineChart`, `LineChartWithAdapter`.
+- **Multi-Line Chart**: Two metrics on a shared datetime axis with independent left and right Y axes. Exports: `MultiLineChart`, `MultiLineChartWithAdapter`.
+- **Bar Chart**: A metric broken down by a categorical dimension. Exports: `BarChart`, `BarChartWithAdapter`.
+- **Distribution Chart**: A histogram over a numeric or datetime dimension. Bins are computed by the adapter and rendered as bars. Exports: `DistributionChart`, `DistributionChartWithAdapter`.
+- **KPI Chart**: A single scalar metric. No dimension, no breakdown — just a label and a formatted value. Exports: `KpiChart`, `KpiChartWithAdapter`.
+- **Table Chart**: A sortable table of entity rows. Use for record-level views — no aggregation, just listing. Exports: `TableChart`, `TableChartWithAdapter`.
+
+## Utilities
+
+- **Feature Flags**: A generic feature flag system with a provider pattern, reactive hook, and guard components. Designed for Proteus SDK integration but supports any backend via adapters. Exports: `createProteusProvider`, `FeatureFlagContext`, `FeatureFlagGuard`, `FeatureFlagProvider`, `ProtectedFeatureRoute`, `useFeatureFlag`, `useFeatureFlagProvider`.
+
+## Patterns
+
+- **AI Chat**: Exports: `AiChat`, `AiChatEmptyState`, `AutopilotGradientIcon`, `CHOICES_TOOL_PROMPT`, `createAgentHubConnection`, `createConversationalAgentConnection`, `createDataFabricBarTool`, `createDataFabricDistributionTool`, `createDataFabricKpiTool`, `createDataFabricLineTool`, `createDataFabricMultiLineTool`, `createDataFabricTableTool`, `dataFabricBarClient`, `dataFabricDistributionClient`, `dataFabricKpiClient`, `dataFabricLineClient`, `dataFabricMultiLineClient`, `dataFabricTableClient`, `generateEntityFieldsDocs`, `NoDataMessage`, `presentChoicesClient`, `renderChoices`.
+- **Feedback Vote Widget**: Exports: `FeedbackVoteWidget`.
+- **Metric Card**: Displays a labeled metric with a value, optional trend direction, and percentage change badge. Includes a skeleton loading state for consistent UX during data fetches. Exports: `MetricCard`, `MetricCardSkeleton`.
+- **Page Header**: A compound page header with back navigation, title, metadata fields, and collapsible action buttons that automatically overflow into a dropdown when space is tight. Exports: `PageHeader`, `PageHeaderActions`, `PageHeaderActionsOverflow`, `PageHeaderBackButton`, `PageHeaderCollapsibleActions`, `PageHeaderContent`, `PageHeaderDescription`, `PageHeaderField`, `PageHeaderFieldLabel`, `PageHeaderFieldValue`, `PageHeaderNav`, `PageHeaderTitle`, `PageHeaderTitleGroup`, `pageHeaderTitleVariants`, `pageHeaderVariants`.
+- **Shell**: A component with a collapsible sidebar, theme and language toggles, and optional OAuth2 authentication. Exports: `ApolloShell`, `AuthContext`, `GroupMembershipGuard`, `LocaleProvider`, `MembershipDenied`, `Role`, `ShellAuthProvider`, `ShellLayout`, `ShellLogin`, `ShellSidebar`, `ShellUserProvider`, `STALE_TIME_MS`, `ThemeProvider`, `useAccessToken`, `useAuth`, `useGroupId`, `useGroupMembers`, `useIsGroupMember`, `useTheme`, `useUser`, `VerifyingMembership`.