@dust-tt/sparkle 0.5.10 → 0.5.12

package/dist/sparkle.css

@@ -1037,6 +1037,10 @@ select {
   top: 0.25rem;
 }
 
+.s-top-1\.5 {
+  top: 0.375rem;
+}
+
 .s-top-1\/2 {
   top: 50%;
 }
@@ -1481,10 +1485,6 @@ select {
   height: 46%;
 }
 
-.s-h-\[500px\] {
-  height: 500px;
-}
-
 .s-h-\[56\%\] {
   height: 56%;
 }
@@ -1509,6 +1509,10 @@ select {
   height: 76%;
 }
 
+.s-h-\[800px\] {
+  height: 800px;
+}
+
 .s-h-\[98\%\] {
   height: 98%;
 }
@@ -5737,11 +5741,6 @@ select {
     background-color: rgb(238 238 239 / var(--tw-bg-opacity));
   }
 
-  .hover\:s-bg-primary-150:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(223 224 226 / var(--tw-bg-opacity));
-  }
-
   .hover\:s-bg-primary-200:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(211 213 217 / var(--tw-bg-opacity));
@@ -5874,6 +5873,10 @@ select {
     text-underline-offset: 2px;
   }
 
+  .hover\:s-opacity-100:hover {
+    opacity: 1;
+  }
+
   .hover\:s-brightness-110:hover {
     --tw-brightness: brightness(1.1);
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -5988,11 +5991,6 @@ select {
   background-color: rgb(223 224 226 / var(--tw-bg-opacity));
 }
 
-.active\:s-bg-primary-200:active {
-  --tw-bg-opacity: 1;
-  background-color: rgb(211 213 217 / var(--tw-bg-opacity));
-}
-
 .active\:s-bg-primary-300:active {
   --tw-bg-opacity: 1;
   background-color: rgb(178 182 189 / var(--tw-bg-opacity));
@@ -6173,11 +6171,6 @@ select {
     background-color: transparent;
   }
 
-  .disabled\:hover\:s-text-muted-foreground:hover:disabled {
-    --tw-text-opacity: 1;
-    color: rgb(84 93 108 / var(--tw-text-opacity));
-  }
-
   .disabled\:hover\:s-text-primary-400:hover:disabled {
     --tw-text-opacity: 1;
     color: rgb(150 156 165 / var(--tw-text-opacity));
@@ -6206,8 +6199,8 @@ select {
     background-color: rgb(211 213 217 / 0.7);
   }
 
-  .s-group\/menu-item:hover .group-hover\/menu-item\:s-pr-8 {
-    padding-right: 2rem;
+  .s-group\/menu-item:hover .group-hover\/menu-item\:s-pr-7 {
+    padding-right: 1.75rem;
   }
 
   .s-group\/col:hover .group-hover\/col\:s-text-highlight-500 {
@@ -6530,8 +6523,8 @@ select {
   opacity: 1;
 }
 
-.s-group\/menu-item[data-selected=true] .group-data-\[selected\=true\]\/menu-item\:s-pr-8 {
-  padding-right: 2rem;
+.s-group\/menu-item[data-selected=true] .group-data-\[selected\=true\]\/menu-item\:s-pr-7 {
+  padding-right: 1.75rem;
 }
 
 .s-group\/menu-item[data-selected=true] .group-data-\[selected\=true\]\/menu-item\:s-opacity-100 {
@@ -8616,11 +8609,6 @@ select {
     background-color: rgb(28 34 45 / var(--tw-bg-opacity));
   }
 
-  :is(.s-dark .dark\:hover\:s-bg-primary-150-night:hover) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(28 34 45 / var(--tw-bg-opacity));
-  }
-
   :is(.s-dark .dark\:hover\:s-bg-primary-200-night:hover) {
     --tw-bg-opacity: 1;
     background-color: rgb(42 50 65 / var(--tw-bg-opacity));
@@ -8974,11 +8962,6 @@ select {
     background-color: transparent;
   }
 
-  :is(.s-dark .dark\:disabled\:hover\:s-text-muted-foreground-night:hover:disabled) {
-    --tw-text-opacity: 1;
-    color: rgb(150 156 165 / var(--tw-text-opacity));
-  }
-
   :is(.s-dark .dark\:disabled\:hover\:s-text-primary-400-night:hover:disabled) {
     --tw-text-opacity: 1;
     color: rgb(84 93 108 / var(--tw-text-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.5.10",
+  "version": "0.5.12",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/AttachmentChip.tsx

@@ -12,38 +12,43 @@ const attachmentChipOverrides = cn(
   "dark:s-bg-background-night dark:s-text-foreground-night"
 );
 
-type AttachmentChipIconProps = IconProps | DoubleIconProps;
+export type AttachmentChipIconProps = IconProps;
+export type AttachmentChipDoubleIconProps = DoubleIconProps;
 
-function isDoubleIconProps(
-  props: AttachmentChipIconProps
-): props is DoubleIconProps {
-  return "mainIcon" in props;
-}
+type AttachmentChipIconOptions =
+  | { icon?: AttachmentChipIconProps; doubleIcon?: never }
+  | { icon?: never; doubleIcon?: AttachmentChipDoubleIconProps };
 
-interface AttachmentChipBaseProps {
+export type AttachmentChipBaseProps = AttachmentChipIconOptions & {
   label: string;
-  icon?: AttachmentChipIconProps;
   size?: (typeof CHIP_SIZES)[number];
   color?: (typeof CHIP_COLORS)[number];
   className?: string;
   isBusy?: boolean;
   onRemove?: () => void;
-  onClick?: () => void;
-}
+  children?: never;
+};
 
-type AttachmentChipButtonProps = AttachmentChipBaseProps & {
+export type AttachmentChipButtonProps = AttachmentChipBaseProps & {
   href?: never;
+  onClick?: () => void;
 } & {
   [K in keyof Omit<LinkWrapperProps, "children">]?: never;
 };
 
-type AttachmentChipLinkProps = AttachmentChipBaseProps &
-  Omit<LinkWrapperProps, "children">;
+export type AttachmentChipLinkProps = AttachmentChipBaseProps &
+  Omit<LinkWrapperProps, "children" | "href"> & {
+    href: string;
+    onClick?: never;
+  };
 
-type AttachmentChipProps = AttachmentChipButtonProps | AttachmentChipLinkProps;
+export type AttachmentChipProps =
+  | AttachmentChipButtonProps
+  | AttachmentChipLinkProps;
 
 export function AttachmentChip({
   icon,
+  doubleIcon,
   className,
   label,
   size,
@@ -53,14 +58,13 @@ export function AttachmentChip({
   onClick,
   ...linkProps
 }: AttachmentChipProps) {
-  const iconElement = icon && (
+  const chipClassName = cn(attachmentChipOverrides, className);
+  const iconElement = (icon || doubleIcon) && (
     <div className="s-shrink-0">
-      {isDoubleIconProps(icon) ? <DoubleIcon {...icon} /> : <Icon {...icon} />}
+      {doubleIcon ? <DoubleIcon {...doubleIcon} /> : <Icon {...icon} />}
     </div>
   );
 
-  const chipClassName = cn(attachmentChipOverrides, className);
-
   if ("href" in linkProps && linkProps.href) {
     return (
       <Chip

package/src/components/Avatar.tsx

@@ -7,6 +7,7 @@ import { getEmojiAndBackgroundFromUrl } from "@sparkle/lib/avatar/utils";
 import { cn } from "@sparkle/lib/utils";
 
 export const AVATAR_SIZES = [
+  "xxs",
   "xs",
   "sm",
   "md",
@@ -25,6 +26,7 @@ const avatarVariants = cva(
   {
     variants: {
       size: {
+        xxs: "s-h-5 s-w-5",
         xs: "s-h-6 s-w-6",
         sm: "s-h-8 s-w-8",
         md: "s-h-10 s-w-10",
@@ -45,6 +47,11 @@ const avatarVariants = cva(
       },
     },
     compoundVariants: [
+      {
+        rounded: false,
+        size: "xxs",
+        className: "s-rounded",
+      },
       {
         rounded: false,
         size: "xs",
@@ -92,6 +99,7 @@ const avatarVariants = cva(
 const textVariants = cva("s-select-none s-font-semibold", {
   variants: {
     size: {
+      xxs: "s-text-[10px]",
       xs: "s-text-xs",
       sm: "s-text-sm",
       md: "s-text-base",
@@ -254,7 +262,6 @@ interface AvatarStackProps {
   avatars: AvatarProps[];
   nbVisibleItems?: number;
   size?: AvatarStackSizeType;
-  isRounded?: boolean;
   hasMagnifier?: boolean;
   tooltipTriggerAsChild?: boolean;
   orientation?: "horizontal" | "vertical";
@@ -270,7 +277,6 @@ Avatar.Stack = function ({
   avatars,
   nbVisibleItems,
   size = "sm",
-  isRounded = false,
   hasMagnifier = true,
   tooltipTriggerAsChild = false,
   orientation = "horizontal",
@@ -376,14 +382,10 @@ Avatar.Stack = function ({
                       })`,
                     }}
                   >
-                    <Avatar
-                      {...avatarProps}
-                      size={size}
-                      isRounded={isRounded}
-                    />
+                    <Avatar {...avatarProps} size={size} />
                   </div>
                 ) : (
-                  <Avatar {...avatarProps} size={size} isRounded={isRounded} />
+                  <Avatar {...avatarProps} size={size} />
                 )}
               </div>
             ))}
@@ -407,7 +409,6 @@ Avatar.Stack = function ({
                     "+" +
                     String(Number(remainingCount) < 10 ? remainingCount : "")
                   }
-                  isRounded={isRounded}
                   clickable
                 />
               </div>

package/src/components/Card.tsx

@@ -14,7 +14,7 @@ import { cn } from "@sparkle/lib/utils";
 export const CARD_VARIANTS = ["primary", "secondary", "tertiary"] as const;
 export type CardVariantType = (typeof CARD_VARIANTS)[number];
 
-export const CARD_SIZES = ["sm", "md", "lg"] as const;
+export const CARD_SIZES = ["xs", "sm", "md", "lg"] as const;
 export type CardSizeType = (typeof CARD_SIZES)[number];
 
 const interactiveClasses = cn(
@@ -56,6 +56,7 @@ const cardVariants = cva(
         ),
       },
       size: {
+        xs: "s-px-2 s-py-1.5 s-rounded-lg",
         sm: "s-p-3 s-rounded-xl",
         md: "s-p-4 s-rounded-2xl",
         lg: "s-p-5 s-rounded-3xl",

package/src/components/Collapsible.tsx

@@ -97,21 +97,25 @@ const CollapsibleTrigger = React.forwardRef<
         )}
         {...props}
       >
-        <span
-          className={cn(
-            "s-transition-transform s-duration-200",
-            chevronVariants({ variant, disabled })
-          )}
-        >
-          <Icon
-            visual={isOpen ? ChevronDownIcon : ChevronRightIcon}
-            size="sm"
-          />
-        </span>
         {children ? (
           children
         ) : (
-          <span className={labelVariants({ variant, disabled })}>{label}</span>
+          <>
+            <span
+              className={cn(
+                "s-transition-transform s-duration-200",
+                chevronVariants({ variant, disabled })
+              )}
+            >
+              <Icon
+                visual={isOpen ? ChevronDownIcon : ChevronRightIcon}
+                size="sm"
+              />
+            </span>
+            <span className={labelVariants({ variant, disabled })}>
+              {label}
+            </span>
+          </>
         )}
       </CollapsiblePrimitive.Trigger>
     );
@@ -148,7 +152,7 @@ const CollapsibleContent = React.forwardRef<
     )}
     {...props}
   >
-    <div className="s-py-2">{children}</div>
+    {children}
   </CollapsiblePrimitive.Content>
 ));
 CollapsibleContent.displayName = "CollapsibleContent";

package/src/components/DataTable.tsx

@@ -333,9 +333,8 @@ export function DataTable<TData extends TBaseData>({
   );
 }
 
-export interface ScrollableDataTableProps<
-  TData extends TBaseData,
-> extends DataTableProps<TData> {
+export interface ScrollableDataTableProps<TData extends TBaseData>
+  extends DataTableProps<TData> {
   maxHeight?: string | boolean;
   onLoadMore?: () => void;
   isLoading?: boolean;
@@ -872,7 +871,8 @@ interface BaseMenuItem {
 }
 
 interface RegularMenuItem
-  extends BaseMenuItem, Omit<DropdownMenuItemProps, "children" | "label"> {
+  extends BaseMenuItem,
+    Omit<DropdownMenuItemProps, "children" | "label"> {
   kind: "item";
 }
 
@@ -1096,7 +1096,6 @@ DataTable.CellContent = function CellContent({
           avatars={avatarStack.items}
           nbVisibleItems={avatarStack.nbVisibleItems}
           size="xs"
-          isRounded={roundedAvatar ?? false}
         />
       )}
       {icon && (

package/src/components/NavigationList.tsx

@@ -1,4 +1,3 @@
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
@@ -14,8 +13,9 @@ import { Button } from "@sparkle/components/Button";
 import {
   Collapsible,
   CollapsibleContent,
+  CollapsibleTrigger,
 } from "@sparkle/components/Collapsible";
-import { ArrowDownSIcon, ArrowRightSIcon, MoreIcon } from "@sparkle/icons/app";
+import { MoreIcon } from "@sparkle/icons/app";
 import { cn } from "@sparkle/lib/utils";
 
 const NavigationListItemStyles = cva(
@@ -69,12 +69,12 @@ const NavigationList = React.forwardRef<
 NavigationList.displayName = "NavigationList";
 
 interface NavigationListItemProps
-  extends
-    React.HTMLAttributes<HTMLDivElement>,
+  extends React.HTMLAttributes<HTMLDivElement>,
     Omit<LinkWrapperProps, "children" | "className"> {
   selected?: boolean;
   label?: string;
   icon?: React.ComponentType;
+  avatar?: React.ReactNode;
   moreMenu?: React.ReactNode;
   status?: "idle" | "unread" | "blocked";
 }
@@ -89,6 +89,7 @@ const NavigationListItem = React.forwardRef<
       selected,
       label,
       icon,
+      avatar,
       href,
       target,
       rel,
@@ -162,8 +163,9 @@ const NavigationListItem = React.forwardRef<
               />
             )}
             {icon && <Icon visual={icon} size="sm" />}
+            {avatar}
             {label && (
-              <span className="s-grow s-overflow-hidden s-text-ellipsis s-whitespace-nowrap group-hover/menu-item:s-pr-8 group-data-[selected=true]/menu-item:s-pr-8">
+              <span className="s-grow s-overflow-hidden s-text-ellipsis s-whitespace-nowrap group-hover/menu-item:s-pr-7 group-data-[selected=true]/menu-item:s-pr-7">
                 {label}
               </span>
             )}
@@ -176,7 +178,8 @@ const NavigationListItem = React.forwardRef<
 );
 NavigationListItem.displayName = "NavigationListItem";
 
-interface NavigationListItemActionProps extends React.HTMLAttributes<HTMLDivElement> {
+interface NavigationListItemActionProps
+  extends React.HTMLAttributes<HTMLDivElement> {
   showOnHover?: boolean;
 }
 
@@ -189,13 +192,13 @@ const NavigationListItemAction = React.forwardRef<
       ref={ref}
       data-sidebar="menu-action"
       className={cn(
-        "s-absolute s-right-1.5 s-top-1 s-opacity-0 s-transition-opacity",
+        "s-absolute s-right-2 s-top-1.5 s-opacity-0 s-transition-opacity",
         "s-opacity-0 group-focus-within/menu-item:s-opacity-100 group-hover/menu-item:s-opacity-100 group-data-[selected=true]/menu-item:s-opacity-100",
         className
       )}
       {...props}
     >
-      <Button size="mini" icon={MoreIcon} variant="ghost" />
+      <Button size="xmini" icon={MoreIcon} variant="ghost" />
     </div>
   );
 });
@@ -224,96 +227,38 @@ const labelStyles = cva(
   "s-flex s-items-center s-justify-between s-gap-2 s-pt-4 s-pb-2 s-pr-2 s-heading-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis"
 );
 
-interface NavigationListLabelButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  icon?: React.ComponentType;
-  children?: React.ReactNode;
-}
-
-const NavigationListLabelButton = React.forwardRef<
-  HTMLButtonElement,
-  NavigationListLabelButtonProps
->(({ className, icon, children, disabled, ...props }, ref) => {
-  return (
-    <button
-      ref={ref}
-      type="button"
-      disabled={disabled}
-      className={cn(
-        "s-inline-flex s-flex-shrink-0 s-items-center s-justify-center",
-        "s-rounded-md s-transition-colors s-duration-200",
-        "s-text-muted-foreground dark:s-text-muted-foreground-night",
-        "hover:s-text-foreground dark:hover:s-text-foreground-night",
-        "hover:s-bg-primary-150 dark:hover:s-bg-primary-150-night",
-        "active:s-bg-primary-200 dark:active:s-bg-primary-200-night",
-        "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-ring focus-visible:s-ring-offset-1",
-        "disabled:s-cursor-not-allowed disabled:s-opacity-50",
-        "disabled:hover:s-text-muted-foreground dark:disabled:hover:s-text-muted-foreground-night",
-        "disabled:hover:s-bg-transparent dark:disabled:hover:s-bg-transparent",
-        className
-      )}
-      {...props}
-    >
-      {icon ? <Icon visual={icon} size="xs" /> : children}
-    </button>
-  );
-});
-
-NavigationListLabelButton.displayName = "NavigationListLabelButton";
-
 interface NavigationListLabelProps
-  extends
-    React.HTMLAttributes<HTMLDivElement>,
+  extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof variantStyles> {
   label: string;
-  isCollapsible?: boolean;
-  isOpen?: boolean;
   action?: React.ReactNode;
 }
 
 const NavigationListLabel = React.forwardRef<
   HTMLDivElement,
   NavigationListLabelProps
->(
-  (
-    {
-      className,
-      variant,
-      label,
-      isSticky,
-      isCollapsible,
-      isOpen,
-      action,
-      ...props
-    },
-    ref
-  ) => (
-    <div
-      ref={ref}
-      className={cn(
-        labelStyles(),
-        variantStyles({ variant, isSticky }),
-        isCollapsible ? "s-pl-1" : "s-pl-3",
-        className
-      )}
-      {...props}
-    >
-      <div className="s-flex s-items-center s-gap-1 s-overflow-hidden s-text-ellipsis">
-        {isCollapsible && (
-          <NavigationListLabelButton
-            icon={isOpen ? ArrowDownSIcon : ArrowRightSIcon}
-            aria-label={isOpen ? "Collapse section" : "Expand section"}
-          />
-        )}
-        <span className="s-overflow-hidden s-text-ellipsis">{label}</span>
-      </div>
-      {action}
+>(({ className, variant, label, isSticky, action, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      labelStyles(),
+      variantStyles({ variant, isSticky }),
+      "s-pl-3",
+      className
+    )}
+    {...props}
+  >
+    <div className="s-flex s-items-center s-gap-1 s-overflow-hidden s-text-ellipsis">
+      <span className="s-overflow-hidden s-text-ellipsis">{label}</span>
     </div>
-  )
-);
+    {action}
+  </div>
+));
 
 NavigationListLabel.displayName = "NavigationListLabel";
 
-interface NavigationListCollapsibleSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+interface NavigationListCollapsibleSectionProps
+  extends React.HTMLAttributes<HTMLDivElement> {
   label: string;
   action?: React.ReactNode;
   defaultOpen?: boolean;
@@ -322,58 +267,69 @@ interface NavigationListCollapsibleSectionProps extends React.HTMLAttributes<HTM
   children: React.ReactNode;
 }
 
-const NavigationListCollapsibleSection = React.forwardRef<
-  React.ElementRef<typeof Collapsible>,
-  NavigationListCollapsibleSectionProps
->(
-  (
-    {
-      label,
-      action,
-      defaultOpen,
-      open,
-      onOpenChange,
-      children,
-      className,
-      ...props
+const collapseableStyles = cva(
+  cn(
+    "s-py-2 s-mt-2 s-px-2.5",
+    "s-heading-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis ",
+    "s-box-border s-flex s-items-center s-w-full s-gap-1.5",
+    "s-cursor-pointer s-select-none",
+    "s-outline-none s-rounded-xl s-transition-colors s-duration-300",
+    "data-[disabled]:s-pointer-events-none",
+    "data-[disabled]:s-text-muted-foreground dark:data-[disabled]:s-text-muted-foreground-night",
+    "hover:s-text-foreground dark:hover:s-text-foreground-night",
+    "hover:s-bg-primary-100 dark:hover:s-bg-primary-200-night"
+  ),
+  {
+    variants: {
+      state: {
+        active: "active:s-bg-primary-150 dark:active:s-bg-primary-200-night",
+        selected: cn(
+          "s-text-foreground dark:s-text-foreground-night",
+          "s-bg-primary-100 dark:s-bg-primary-200-night"
+        ),
+        unselected:
+          "s-text-muted-foreground dark:s-text-muted-foreground-night",
+      },
+    },
+    defaultVariants: {
+      state: "unselected",
     },
-    ref
-  ) => {
-    const [internalOpen, setInternalOpen] = React.useState(
-      defaultOpen ?? false
-    );
-    const isControlled = open !== undefined;
-    const isOpen = isControlled ? open : internalOpen;
-
-    const handleOpenChange = (newOpen: boolean) => {
-      if (!isControlled) {
-        setInternalOpen(newOpen);
-      }
-      onOpenChange?.(newOpen);
-    };
-
-    return (
-      <Collapsible
-        ref={ref}
-        open={isOpen}
-        onOpenChange={handleOpenChange}
-        className={className}
-        {...props}
-      >
-        <CollapsiblePrimitive.Trigger asChild>
-          <NavigationListLabel
-            label={label}
-            isCollapsible={true}
-            isOpen={isOpen}
-            action={action}
-          />
-        </CollapsiblePrimitive.Trigger>
-        <CollapsibleContent>{children}</CollapsibleContent>
-      </Collapsible>
-    );
   }
 );
 
+const NavigationListCollapsibleSection = React.forwardRef<
+  React.ElementRef<typeof Collapsible>,
+  NavigationListCollapsibleSectionProps
+>(({ label, action, children, className, ...props }) => {
+  return (
+    <Collapsible className={className} {...props}>
+      <div className="s-group/menu-item s-relative">
+        <CollapsibleTrigger>
+          <div className={collapseableStyles({ state: "unselected" })}>
+            {label}
+          </div>
+        </CollapsibleTrigger>
+        {action && (
+          <div
+            className={cn(
+              "s-absolute s-bottom-1 s-right-1.5 s-flex s-gap-1 s-opacity-0 s-transition-opacity",
+              "hover:s-opacity-100 group-focus-within/menu-item:s-opacity-100 group-hover/menu-item:s-opacity-100"
+            )}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            {action}
+          </div>
+        )}
+      </div>
+      <CollapsibleContent>
+        <div className="s-flex s-flex-col s-gap-0.5">{children}</div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+});
+
 NavigationListCollapsibleSection.displayName =
   "NavigationListCollapsibleSection";
 
@@ -383,5 +339,4 @@ export {
   NavigationListItem,
   NavigationListItemAction,
   NavigationListLabel,
-  NavigationListLabelButton,
 };