@syscore/ui-library 1.1.12 → 1.2.0

package/client/components/icons/UtilityText.tsx

@@ -11,23 +11,23 @@ export function UtilityText({ className }: { className?: string }) {
       <path
         d="M8.75 12.75H0.75"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
         stroke-linejoin="round"
       />
       <path
         d="M10.75 0.75H0.75"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M14.75 6.75H0.75"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   );

package/client/components/ui/accordion.tsx

@@ -12,7 +12,7 @@ const AccordionItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AccordionPrimitive.Item
     ref={ref}
-    className={cn("border-b", className)}
+    className={cn("accordion-item", className)}
     {...props}
   />
 ));
@@ -22,17 +22,14 @@ const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
+  <AccordionPrimitive.Header className="accordion-header">
     <AccordionPrimitive.Trigger
       ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all [&[data-state=open]>svg]:rotate-180",
-        className,
-      )}
+      className={cn("accordion-trigger", className)}
       {...props}
     >
       {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+      <ChevronDown className="accordion-chevron" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));
@@ -44,10 +41,10 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="accordion-content"
     {...props}
   >
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+    <div className={cn("accordion-content-inner", className)}>{children}</div>
   </AccordionPrimitive.Content>
 ));
 

package/client/components/ui/alert-dialog.tsx

@@ -15,10 +15,7 @@ const AlertDialogOverlay = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
+    className={cn("alert-dialog-overlay", className)}
     {...props}
     ref={ref}
   />
@@ -33,10 +30,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogOverlay />
     <AlertDialogPrimitive.Content
       ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 border-green grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className,
-      )}
+      className={cn("alert-dialog-content", className)}
       {...props}
     />
   </AlertDialogPortal>
@@ -48,10 +42,7 @@ const AlertDialogHeader = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className,
-    )}
+    className={cn("alert-dialog-header", className)}
     {...props}
   />
 );
@@ -62,10 +53,7 @@ const AlertDialogFooter = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
+    className={cn("alert-dialog-footer", className)}
     {...props}
   />
 );
@@ -77,7 +65,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold", className)}
+    className={cn("alert-dialog-title", className)}
     {...props}
   />
 ));
@@ -89,7 +77,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("alert-dialog-description", className)}
     {...props}
   />
 ));
@@ -116,7 +104,6 @@ const AlertDialogCancel = React.forwardRef<
     ref={ref}
     className={cn(
       buttonVariants({ variant: "general-secondary" }),
-      "mt-2 sm:mt-0",
       className,
     )}
     {...props}

package/client/components/ui/alert.tsx

@@ -4,13 +4,12 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "alert",
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
-        destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+        default: "alert--default",
+        destructive: "alert--destructive",
       },
     },
     defaultVariants: {
@@ -38,7 +37,7 @@ const AlertTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h5
     ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    className={cn("alert-title", className)}
     {...props}
   />
 ));
@@ -50,7 +49,7 @@ const AlertDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    className={cn("alert-description", className)}
     {...props}
   />
 ));

package/client/components/ui/avatar.tsx

@@ -9,10 +9,7 @@ const Avatar = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className,
-    )}
+    className={cn("avatar", className)}
     {...props}
   />
 ));
@@ -24,7 +21,7 @@ const AvatarImage = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
+    className={cn("avatar-image", className)}
     {...props}
   />
 ));
@@ -36,10 +33,7 @@ const AvatarFallback = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Fallback
     ref={ref}
-    className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className,
-    )}
+    className={cn("avatar-fallback", className)}
     {...props}
   />
 ));

package/client/components/ui/badge.tsx

@@ -4,17 +4,14 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "badge",
   {
     variants: {
       variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
+        default: "badge--default",
+        secondary: "badge--secondary",
+        destructive: "badge--destructive",
+        outline: "badge--outline",
       },
     },
     defaultVariants: {

package/client/components/ui/breadcrumb.tsx

@@ -18,10 +18,7 @@ const BreadcrumbList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ol
     ref={ref}
-    className={cn(
-      "flex flex-wrap items-center gap-1.5 wrap-break-word text-sm text-muted-foreground sm:gap-2.5",
-      className,
-    )}
+    className={cn("breadcrumb-list", className)}
     {...props}
   />
 ));
@@ -33,7 +30,7 @@ const BreadcrumbItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <li
     ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
+    className={cn("breadcrumb-item", className)}
     {...props}
   />
 ));
@@ -50,7 +47,7 @@ const BreadcrumbLink = React.forwardRef<
   return (
     <Comp
       ref={ref}
-      className={cn("transition-colors hover:text-foreground", className)}
+      className={cn("breadcrumb-link", className)}
       {...props}
     />
   );
@@ -66,7 +63,7 @@ const BreadcrumbPage = React.forwardRef<
     role="link"
     aria-disabled="true"
     aria-current="page"
-    className={cn("font-normal text-foreground", className)}
+    className={cn("breadcrumb-page body-small font-medium", className)}
     {...props}
   />
 ));
@@ -80,10 +77,26 @@ const BreadcrumbSeparator = ({
   <li
     role="presentation"
     aria-hidden="true"
-    className={cn("[&>svg]:size-3.5", className)}
+    className={cn("breadcrumb-separator", className)}
     {...props}
   >
-    {children ?? <ChevronRight />}
+    {children ?? (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="5"
+        height="8"
+        viewBox="0 0 5 8"
+        fill="none"
+      >
+        <path
+          d="M0.75 6.75L3.75 3.75L0.75 0.75"
+          stroke="#CBCDD2"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    )}
   </li>
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
@@ -95,10 +108,10 @@ const BreadcrumbEllipsis = ({
   <span
     role="presentation"
     aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    className={cn("breadcrumb-ellipsis", className)}
     {...props}
   >
-    <MoreHorizontal className="h-4 w-4" />
+    <MoreHorizontal className="icon-4" />
     <span className="sr-only">More</span>
   </span>
 );

package/client/components/ui/button.tsx

@@ -3,85 +3,67 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
+import { motion } from "motion/react";
 
 const buttonVariants = cva(
-  "group inline-flex items-center justify-center rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
+  "button",
   {
     variants: {
       variant: {
         // CTA variants
-        "primary-gradient": "text-white hover:opacity-90 btn-primary-gradient",
-        "primary-dark":
-          "bg-cyan-800 text-white hover:bg-cyan-900 focus-visible:ring-cyan-800",
-        "secondary-light":
-          "bg-white border border-gray-200 text-cyan-800 hover:bg-gray-50 focus-visible:ring-gray-200",
-        "tertiary-light":
-          "bg-blue-50 border border-blue-200 text-blue-600 hover:bg-blue-100 focus-visible:ring-blue-200",
+        clear: "button--clear",
+        default: "button--default",
+        "primary-gradient": "button--primary-gradient",
+        "primary-dark": "button--primary-dark",
+        "secondary-light": "button--secondary-light",
+        "tertiary-light": "button--tertiary-light",
         // Utility variants
-        "general-primary":
-          "bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-600",
-        "general-secondary":
-          "bg-white border border-blue-200 text-blue-600 hover:bg-blue-50 focus-visible:ring-blue-200",
-        "general-tertiary":
-          "bg-white border border-gray-200 text-gray-600 hover:bg-gray-50 focus-visible:ring-gray-200",
-        "tooltip-primary":
-          "bg-cyan-300 text-white hover:bg-cyan-400 focus-visible:ring-cyan-300",
-        "tooltip-secondary":
-          "bg-gray-500 text-white hover:bg-gray-600 focus-visible:ring-gray-500",
+        "general-primary": "button--general-primary",
+        "general-secondary": "button--general-secondary",
+        "general-tertiary": "button--general-tertiary",
+        "tooltip-primary": "button--tooltip-primary",
+        "tooltip-secondary": "button--tooltip-secondary",
       },
       size: {
-        xlarge: "h-16 px-10",
-        large: "h-12 px-8",
-        utility: "h-8 px-4",
-        icon: "size-[32px]",
+        xlarge: "button--xlarge",
+        large: "button--large",
+        utility: "button--utility",
+        icon: "button--icon",
       },
     },
-    compoundVariants: [
-      {
-        size: "xlarge",
-        className: "font-semibold",
-      },
-      {
-        size: "large",
-        className: "font-semibold",
-      },
-      {
-        size: "utility",
-        className: "font-semibold",
-      },
-      {
-        size: "icon",
-        className: "p-0 bg-white border border-gray-100 ",
-      },
-    ],
     defaultVariants: {
-      variant: "primary-dark",
+      variant: "default",
       size: "large",
     },
-  },
+  }
 );
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+  extends Omit<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart"
+  >,
+  VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }
 
+const sizeTextClasses: Record<string, string> = {
+  xlarge: "body-large",
+  large: "body-base",
+  utility: "body-small",
+  icon: "",
+};
+
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, children, style, ...props }, ref) => {
-    // Determine body class based on size for text labels
-    const bodyClass =
-      size === "xlarge"
-        ? "body-large"
-        : size === "large"
-          ? "body-base"
-          : size === "utility"
-            ? "body-small"
-            : "";
+    const textClass = sizeTextClasses[size || "large"];
 
     return (
       <button
-        className={cn(buttonVariants({ variant, size }), className)}
+        className={cn(
+          buttonVariants({ variant, size }),
+          className
+        )}
         style={style}
         ref={ref}
         {...props}
@@ -89,11 +71,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {size === "icon" ? (
           children
         ) : (
-          <span className={cn("relative z-10", bodyClass)}>{children}</span>
+          <span className={cn("button-text", textClass)}>
+            {children}
+          </span>
         )}
       </button>
     );
-  },
+  }
 );
 
 Button.displayName = "Button";

package/client/components/ui/calendar.tsx

@@ -16,47 +16,43 @@ function Calendar({
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
+      className={cn("calendar", className)}
       classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
+        months: "calendar-months",
+        month: "calendar-month",
+        caption: "calendar-caption",
+        caption_label: "calendar-caption-label",
+        nav: "calendar-nav",
         nav_button: cn(
           buttonVariants({ variant: "general-secondary" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+          "calendar-nav-button",
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        nav_button_previous: "calendar-nav-button-previous",
+        nav_button_next: "calendar-nav-button-next",
+        table: "calendar-table",
+        head_row: "calendar-head-row",
+        head_cell: "calendar-head-cell",
+        row: "calendar-row",
+        cell: "calendar-cell",
         day: cn(
           buttonVariants({ variant: "general-tertiary" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
+          "calendar-day",
         ),
-        day_range_end: "day-range-end",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+        day_range_end: "calendar-day-range-end",
+        day_selected: "calendar-day-selected",
+        day_today: "calendar-day-today",
+        day_outside: "calendar-day-outside",
+        day_disabled: "calendar-day-disabled",
+        day_range_middle: "calendar-day-range-middle",
+        day_hidden: "calendar-day-hidden",
         ...classNames,
       }}
       components={{
         Chevron: (props) => {
           if (props.orientation === "left") {
-            return <ChevronLeft className="h-4 w-4" />;
+            return <ChevronLeft className="icon-4" />;
           }
-          return <ChevronRight className="h-4 w-4" />;
+          return <ChevronRight className="icon-4" />;
         },
       }}
       {...props}

package/client/components/ui/card.tsx

@@ -8,10 +8,7 @@ const Card = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn(
-      "rounded-lg border border-gray-100 bg-cyan-50  shadow-xs p-6 space-y-6",
-      className,
-    )}
+    className={cn("card", className)}
     {...props}
   />
 ));
@@ -21,7 +18,7 @@ const CardHeader = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("flex flex-col gap-6", className)} {...props} />
+  <div ref={ref} className={cn("card-header", className)} {...props} />
 ));
 CardHeader.displayName = "CardHeader";
 
@@ -31,7 +28,7 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h3
     ref={ref}
-    className={cn("heading-xxsmall text-gray-800", className)}
+    className={cn("card-title heading-xxsmall", className)}
     {...props}
   />
 ));
@@ -43,7 +40,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("body-base text-gray-800", className)}
+    className={cn("card-description body-base", className)}
     {...props}
   />
 ));
@@ -55,7 +52,7 @@ const CardContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("body-base text-gray-800", className)}
+    className={cn("card-content body-base", className)}
     {...props}
   />
 ));
@@ -67,7 +64,7 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center body-base text-gray-800", className)}
+    className={cn("card-footer body-base", className)}
     {...props}
   />
 ));

package/client/components/ui/carousel.tsx

@@ -135,7 +135,7 @@ const Carousel = React.forwardRef<
         <div
           ref={ref}
           onKeyDownCapture={handleKeyDown}
-          className={cn("relative", className)}
+          className={cn("carousel", className)}
           role="region"
           aria-roledescription="carousel"
           {...props}
@@ -155,12 +155,12 @@ const CarouselContent = React.forwardRef<
   const { carouselRef, orientation } = useCarousel();
 
   return (
-    <div ref={carouselRef} className="overflow-hidden">
+    <div ref={carouselRef} className="carousel-viewport">
       <div
         ref={ref}
         className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          "carousel-content",
+          orientation === "horizontal" ? "carousel-content--horizontal" : "carousel-content--vertical",
           className,
         )}
         {...props}
@@ -182,8 +182,8 @@ const CarouselItem = React.forwardRef<
       role="group"
       aria-roledescription="slide"
       className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
+        "carousel-item",
+        orientation === "horizontal" ? "carousel-item--horizontal" : "carousel-item--vertical",
         className,
       )}
       {...props}
@@ -208,17 +208,17 @@ const CarouselPrevious = React.forwardRef<
         variant={variant}
         size={size}
         className={cn(
-          "absolute  h-8 w-8 rounded-full",
+          "carousel-button carousel-button--previous",
           orientation === "horizontal"
-            ? "-left-12 top-1/2 -translate-y-1/2"
-            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+            ? "carousel-button--horizontal"
+            : "carousel-button--vertical",
           className,
         )}
         disabled={!canScrollPrev}
         onClick={scrollPrev}
         {...props}
       >
-        <ArrowLeft className="h-4 w-4" />
+        <ArrowLeft className="icon-4" />
         <span className="sr-only">Previous slide</span>
       </Button>
     );
@@ -242,17 +242,17 @@ const CarouselNext = React.forwardRef<
         variant={variant}
         size={size}
         className={cn(
-          "absolute h-8 w-8 rounded-full",
+          "carousel-button carousel-button--next",
           orientation === "horizontal"
-            ? "-right-12 top-1/2 -translate-y-1/2"
-            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+            ? "carousel-button--horizontal"
+            : "carousel-button--vertical",
           className,
         )}
         disabled={!canScrollNext}
         onClick={scrollNext}
         {...props}
       >
-        <ArrowRight className="h-4 w-4" />
+        <ArrowRight className="icon-4" />
         <span className="sr-only">Next slide</span>
       </Button>
     );