@evenicanpm/storefront-core 1.0.3 → 1.0.5

package/src/cms/blocks/components/hero-carousel/index.tsx

@@ -0,0 +1,48 @@
+// Template: Market1
+// This component works best with cutout product images
+import React from "react";
+import { Box, Container } from "@mui/material";
+
+// GLOBAL CUSTOM COMPONENTS
+import { Carousel } from "@evenicanpm/storefront-core/src/components-v2/carousel/index";
+import CarouselCard1 from "@evenicanpm/storefront-core/src/components-v2/carousel-cards/carousel-card-1/index";
+
+import { getImageUrl } from "@/cms/endpoints";
+import { HeroCarouselBlock, Slide } from "@/cms/blocks/interfaces";
+
+export default function HeroCarousel(data: HeroCarouselBlock) {
+  return (
+    <Box sx={{ backgroundColor: "white" }}>
+      <Container className="pt-2 pb-2">
+        <Carousel slidesToShow={1} autoplay={true} arrows={false} dots={true}>
+          {data.Slides.map((data: Slide, ind: number) => (
+            <CarouselCard1 key={ind}>
+              <CarouselCard1.Info>
+                <CarouselCard1.Title title={data?.heading} />
+                <CarouselCard1.Description description={data?.description} />
+                <CarouselCard1.Button
+                  buttonLink={
+                    data?.linkToPage?.slug
+                      ? `/pages/${data?.linkToPage?.slug}`
+                      : data?.linkToProduct?.sku
+                        ? `/product/${data?.linkToProduct?.sku}`
+                        : ""
+                  }
+                  buttonText={data?.buttonText}
+                />
+              </CarouselCard1.Info>
+
+              <CarouselCard1.Image
+                imgUrl={
+                  data?.image?.formats
+                    ? getImageUrl(data?.image?.formats)
+                    : data?.image?.url
+                }
+              />
+            </CarouselCard1>
+          ))}
+        </Carousel>
+      </Container>
+    </Box>
+  );
+}

package/src/cms/blocks/{Components/Hero.tsx → components/hero.tsx}

@@ -4,7 +4,7 @@ import Image from "next/image";
 import { Box, Container, Button, Typography } from "@mui/material";
 
 import cmsEndPoints from "@/cms/endpoints";
-import { HeroSectionBlock } from "../interfaces";
+import { HeroSectionBlock } from "@/cms/blocks/interfaces";
 
 const sxBanner = {
   position: "relative",

package/src/cms/blocks/{Components/Image.tsx → components/image.tsx}

@@ -3,7 +3,7 @@ import NextImage from "next/image";
 import { getImageUrl } from "@/cms/endpoints";
 import { sizes } from "@/cms/endpoints";
 import { Container, Paper } from "@mui/material";
-import { Media } from "../interfaces";
+import { Media } from "@/cms/blocks/interfaces";
 
 interface Props {
   media: Media;

package/src/cms/blocks/components/product-carousel/index.tsx

@@ -0,0 +1,88 @@
+"use client";
+import React from "react";
+import { Light } from "@/cms/blocks/icons/index";
+import { Box } from "@mui/system";
+import { Carousel } from "@evenicanpm/storefront-core/src/components-v2/carousel/index";
+import { Section } from "@evenicanpm/storefront-core/src/components-v2/section";
+
+// CMS
+import ProductCard from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/product-card";
+import { getImageUrl } from "@/cms/endpoints";
+import getProductByIds from "@/services/product/queries/get-product-by-ids";
+import { SimpleProduct } from "@msdyn365-commerce/retail-proxy";
+import { Product, ProductCarouselBlock } from "@/cms/blocks/interfaces";
+
+type CombinedProduct = Product & SimpleProduct;
+
+export default function ProductCarousel(data: ProductCarouselBlock) {
+  const { data: e4Products = [], error } = getProductByIds.useData({
+    id: data?.products?.map((product: Product) => product.sku),
+  });
+
+  if (error || !e4Products.length) {
+    return null;
+  }
+
+  const combinedData: CombinedProduct[] = data?.products
+    ?.map((product: Product) => {
+      const e4Product = e4Products?.find(
+        (e4Product: SimpleProduct) => product.sku === e4Product.ItemId,
+      );
+      if (!e4Product) return null;
+      return {
+        ...e4Product,
+        ...product,
+        id: e4Product.RecordId,
+      };
+    })
+    .filter(Boolean) as CombinedProduct[];
+
+  const responsive = [
+    { breakpoint: 3000, settings: { slidesToShow: 4 } },
+    { breakpoint: 1279, settings: { slidesToShow: 4 } },
+    { breakpoint: 959, settings: { slidesToShow: 3 } },
+    { breakpoint: 650, settings: { slidesToShow: 2 } },
+    { breakpoint: 500, settings: { slidesToShow: 1 } },
+  ];
+
+  return (
+    <Section>
+      <Section.Header>
+        <Section.Header.Title
+          icon={<Light color="primary" />}
+          title={data?.heading}
+        />
+      </Section.Header>
+      <Carousel responsive={responsive} height={445} autoplay={true}>
+        {combinedData?.map((item: CombinedProduct) => (
+          <Box pb={0.6} key={item.id}>
+            <ProductCard
+              product={{
+                id: item?.RecordId,
+                title: item?.Name ?? "",
+                price: item?.Price,
+                rating: 0,
+                imgUrl: getImageUrl(item?.image?.[0]?.formats ?? {}),
+                discount: 0,
+                slug: item?.ItemId ?? "",
+              }}
+            >
+              <ProductCard.Image />
+              <ProductCard.Body>
+                <ProductCard.Info>
+                  <ProductCard.Title />
+                  <ProductCard.Rating />
+                  <ProductCard.Price />
+                </ProductCard.Info>
+                <ProductCard.Actions>
+                  <ProductCard.QuantityButtons />
+                  <ProductCard.HoverActions />
+                </ProductCard.Actions>
+              </ProductCard.Body>
+            </ProductCard>
+          </Box>
+        ))}
+      </Carousel>
+    </Section>
+  );
+}

package/src/cms/blocks/{Components/ProductSectionFullWidth → components/product-section-fullwidth}/index.tsx

@@ -3,14 +3,14 @@ import NextLink from "next/link";
 import Image from "next/image";
 
 // Icons
-import { getIcon } from "../../Icons/index";
+import { getIcon } from "@/cms/blocks/icons/index";
 
 // Components
 import Grid from "@mui/material/Grid2";
 import HoverBox from "@evenicanpm/storefront-core/src/components-v2/HoverBox";
 import { H4 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
-import { SectionCreator } from "@evenicanpm/storefront-core/src/components-v2/section-header/index";
+import { Section } from "@evenicanpm/storefront-core/src/components-v2/section";
 
 // Utils
 import { currency } from "@/lib/lib";
@@ -25,7 +25,7 @@ import {
   Product,
   ProductSectionFullWidthBlock,
   ProductWrapper,
-} from "../../interfaces";
+} from "@/cms/blocks/interfaces";
 import { SimpleProduct } from "@msdyn365-commerce/retail-proxy";
 
 type CombinedProduct = Product & SimpleProduct;
@@ -59,7 +59,11 @@ export default async function ProductSectionFullWidth(
   const Icon = getIcon(data?.icon);
 
   return (
-    <SectionCreator icon={<Icon />} title={data.heading} seeMoreLink="#">
+    <Section>
+      <Section.Header>
+        <Section.Header.Title title={data.heading} icon={<Icon />} />
+        <Section.Header.SeeMoreLink link="#" />
+      </Section.Header>
       {/* seeMoreLink should be updated when general product page is built */}
       <BazaarCard sx={{ padding: "20px" }}>
         <Grid container spacing={3}>
@@ -98,6 +102,6 @@ export default async function ProductSectionFullWidth(
           ))}
         </Grid>
       </BazaarCard>
-    </SectionCreator>
+    </Section>
   );
 }

package/src/cms/blocks/{Components/Seo → components/seo}/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import cmsEndPoints from "@/cms/endpoints";
 import { Helmet } from "react-helmet-async";
-import { MetaItem, SeoPageData } from "../../interfaces";
+import { MetaItem, SeoPageData } from "@/cms/blocks/interfaces";
 
 // SEO Component to be populated
 // Included in storefront repo to ensure correct import of react-helmet-async,

package/src/cms/blocks/{Components/Services → components/services}/index.tsx

@@ -2,11 +2,11 @@ import React from "react";
 import Grid from "@mui/material/Grid2";
 import Container from "@mui/material/Container";
 // LOCAL CUSTOM COMPONENTS
-import ServiceCard from "./service-card";
+import ServiceCard from "@/cms/blocks/components/services/service-card";
 import {
   ServicesBlock,
   ServiceCard as ServiceCardItem,
-} from "../../interfaces";
+} from "@/cms/blocks/interfaces";
 
 export default function Services(data: ServicesBlock) {
   return (

package/src/cms/blocks/{Components/Services → components/services}/service-card.tsx

@@ -7,7 +7,7 @@ import Card from "@mui/material/Card";
 import styled from "@mui/material/styles/styled";
 
 // CUSTOM ICON COMPONENTS
-import { getIcon } from "../../Icons/index";
+import { getIcon } from "@/cms/blocks/icons/index";
 
 // GLOBAL CUSTOM COMPONENTS
 import {

package/src/cms/blocks/components/shared/product-grid.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+// GLOBAL CUSTOM COMPONENTS
+import { Section } from "@evenicanpm/storefront-core/src/components-v2/section";
+import ProductCard from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/index";
+// CUSTOM DATA MODEL
+
+interface Product {
+  id: number;
+  title: string;
+  price: number;
+  rating: number;
+  thumbnail: string;
+  discount?: number;
+  slug: string;
+  uom: string;
+}
+
+type Props = { products: Product[]; heading: string };
+
+export default function ProductGridList({ products, heading }: Props) {
+  return (
+    <Box flex="1 1 0">
+      <Section>
+        <Section.Header>
+          <Section.Header.Title title={heading} />
+          <Section.Header.SeeMoreLink link="#" />
+        </Section.Header>
+        <Grid container spacing={3}>
+          {products.map((item) => (
+            <Grid size={{ lg: 4, sm: 6, xs: 12 }} key={item.id}>
+              <ProductCard
+                product={{
+                  id: item?.id,
+                  title: item?.title ?? "",
+                  price: item?.price,
+                  rating: item.rating ?? 0,
+                  imgUrl: item.thumbnail ?? "",
+                  discount: item.discount ?? 0,
+                  slug: item?.slug ?? "",
+                }}
+              >
+                <ProductCard.Image />
+                <ProductCard.Body>
+                  <ProductCard.Info>
+                    <ProductCard.Title />
+                    <ProductCard.Rating />
+                    <ProductCard.Price />
+                  </ProductCard.Info>
+                  <ProductCard.Actions>
+                    <ProductCard.QuantityButtons />
+                    <ProductCard.HoverActions />
+                  </ProductCard.Actions>
+                </ProductCard.Body>
+              </ProductCard>
+            </Grid>
+          ))}
+        </Grid>
+      </Section>
+    </Box>
+  );
+}

package/src/cms/blocks/{Icons → icons}/index.ts

@@ -3,13 +3,13 @@ import { SvgIconTypeMap } from "@mui/material/SvgIcon";
 
 type IconComponent = OverridableComponent<SvgIconTypeMap<unknown, "svg">>;
 
-import Category from "./Components/Category";
-import DottedStar from "./Components/DottedStar";
-import GiftBox from "./Components/GiftBox";
-import Light from "./Components/Light";
-import NewArrival from "./Components/NewArrival";
-import RankBadge from "./Components/RankBadge";
-import FallbackIcon from "./Components/FallbackIcon";
+import Category from "@/cms/blocks/icons/components/category";
+import DottedStar from "@/cms/blocks/icons/components/dotted-star";
+import GiftBox from "@/cms/blocks/icons/components/gift-box";
+import Light from "@/cms/blocks/icons/components/light";
+import NewArrival from "@/cms/blocks/icons/components/new-arrival";
+import RankBadge from "@/cms/blocks/icons/components/rank-badge";
+import FallbackIcon from "@/cms/blocks/icons/components/fallback-icon";
 
 export { Category };
 export { DottedStar };

package/src/cms/blocks/index.tsx

@@ -1,16 +1,16 @@
 // From scratch components
-export { default as BrandLogosScroller } from "./Components/BrandLogosScroller";
-export { default as CategoryCard } from "./Components/CategoryCard";
-export { default as FeaturedCategories } from "./Components/FeaturedCategories";
-export { default as FeaturedProducts } from "./Components/FeaturedProducts";
-export { default as FeaturePill } from "./Components/FeaturePill";
-export { default as Footer } from "./Components/Footer";
-export { default as Hero } from "./Components/Hero";
-export { default as MediaCard } from "./Components/MediaCard";
-export { default as RichText } from "./Components/RichText";
-export { default as Image } from "./Components/Image";
-export { default as HeroCarousel } from "./Components/HeroCarousel/index";
-export { default as Services } from "./Components/Services/index";
-export { default as ProductCarousel } from "./Components/ProductCarousel/index";
-export { default as ProductSectionFullWidth } from "./Components/ProductSectionFullWidth/index";
-export { default as CategoryCarousel } from "./Components/CategoryCarousel/index";
+export { default as BrandLogosScroller } from "@/cms/blocks/components/brand-logos-scroller";
+export { default as CategoryCard } from "@/cms/blocks/components/category-card";
+export { default as FeaturedCategories } from "@/cms/blocks/components/featured-categories";
+export { default as FeaturedProducts } from "@/cms/blocks/components/featured-products";
+export { default as FeaturePill } from "@/cms/blocks/components/feature-pill";
+export { default as Footer } from "@/cms/blocks/components/footer";
+export { default as Hero } from "@/cms/blocks/components/hero";
+export { default as MediaCard } from "@/cms/blocks/components/media-card";
+export { default as RichText } from "@/cms/blocks/components/rich-text";
+export { default as Image } from "@/cms/blocks/components/image";
+export { default as HeroCarousel } from "@/cms/blocks/components/hero-carousel/index";
+export { default as Services } from "@/cms/blocks/components/services/index";
+export { default as ProductCarousel } from "@/cms/blocks/components/product-carousel/index";
+export { default as ProductSectionFullWidth } from "@/cms/blocks/components/product-section-fullwidth/index";
+export { default as CategoryCarousel } from "@/cms/blocks/components/category-carousel/index";

package/src/cms/blog.ts

@@ -1,6 +1,6 @@
-import cms from "./endpoints";
+import cms from "@/cms/endpoints";
 import { type BlocksContent } from "@strapi/blocks-react-renderer";
-import { Formats } from "./interfaces/productData";
+import { Formats } from "@/cms/interfaces/product-data";
 
 export interface Blogs {
   data: Array<{

package/src/cms/endpoints.ts

@@ -1,4 +1,4 @@
-import { Formats } from "./interfaces/productData";
+import { Formats } from "@/cms/interfaces/product-data";
 
 const apiKeys = {
   pages: "/cms/pages",

package/src/cms/interfaces/navigation.ts

@@ -40,13 +40,13 @@ export interface CmsNavRelated {
 }
 
 export interface CmsNavItem {
-  title: string;
-  menuAttached: boolean;
-  path: string;
-  type: "INTERNAL" | "EXTERNAL";
-  uiRouterKey: string;
-  slug: string;
-  related: CmsNavRelated | null;
-  external: boolean;
-  items: CmsNavItem[];
+  title?: string;
+  menuAttached?: boolean;
+  path?: string;
+  type?: "INTERNAL" | "EXTERNAL" | "WRAPPER";
+  uiRouterKey?: string;
+  slug?: string;
+  related?: CmsNavRelated | null;
+  external?: boolean;
+  items?: CmsNavItem[];
 }

package/src/cms/pages.ts

@@ -1,4 +1,4 @@
-import cmsEndPoints from "./endpoints";
+import cmsEndPoints from "@/cms/endpoints";
 
 // TODO -> No types should be in CMS folder -> setup strapi codegen
 export interface Pages {

package/src/components/_components/wishlist/add-to-wishlist-dialog.tsx

@@ -7,7 +7,7 @@ import { MdFavorite } from "react-icons/md";
 import DashboardHeader from "./components/dashboard-header";
 import CreateWishlistButton from "./components/create-wishlist-button";
 import WishlistModalItem from "./components/wishlist-modal-item";
-import NoRecords from "./components/no-records";
+import NoRecords from "@evenicanpm/storefront-core/src/components-v2/no-records";
 // API
 import {
   CopyCartToWishlistInput,

package/src/components/_components/wishlist/remove-from-wishlist-dialog.tsx

@@ -6,7 +6,7 @@ import { MdFavorite } from "react-icons/md";
 // Global Custom components
 import DashboardHeader from "./components/dashboard-header";
 import WishlistModalItem from "./components/wishlist-modal-item";
-import NoRecords from "./components/no-records";
+import NoRecords from "@evenicanpm/storefront-core/src/components-v2/no-records";
 // API
 import getWishlists from "@/api-manager/services/user/queries/get-wishlists";
 import {

package/src/components/_components/wishlist-modal/add-to-wishlist-dialog.tsx

@@ -7,7 +7,7 @@ import { MdFavorite } from "react-icons/md";
 import DashboardHeader from "../../../pages/account/dashboard-header";
 import CreateWishlistButton from "../../../pages/account/wishlist/create-wishlist-button";
 import WishlistModalItem from "./wishlist-modal-item";
-import NoRecords from "../../../pages/account/no-records";
+import NoRecords from "@evenicanpm/storefront-core/src/components-v2/no-records";
 // API
 import {
   CopyCartToWishlistInput,

package/src/components/_components/wishlist-modal/remove-from-wishlist-dialog.tsx

@@ -6,7 +6,7 @@ import { MdFavorite } from "react-icons/md";
 // Global Custom components
 import DashboardHeader from "../../../pages/account/dashboard-header";
 import WishlistModalItem from "./wishlist-modal-item";
-import NoRecords from "../../../pages/account/no-records";
+import NoRecords from "@evenicanpm/storefront-core/src/components-v2/no-records";
 // API
 import getWishlists from "@/api-manager/services/user/queries/get-wishlists";
 import {

package/src/components-v2/BazaarMenu.tsx

@@ -19,6 +19,7 @@ export default function BazaarMenu({
   handler,
   options,
   direction = "left",
+  sx,
   ...props
 }: Props) {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
@@ -38,6 +39,7 @@ export default function BazaarMenu({
         open={open !== undefined ? open : !!anchorEl}
         anchorOrigin={{ vertical: "bottom", horizontal: direction }}
         transformOrigin={{ vertical: "top", horizontal: direction }}
+        sx={sx}
         {...props}
       >
         {options(handleClose)}

package/src/components-v2/BazaarTextField.tsx

@@ -1,7 +1,7 @@
 import Box, { BoxProps } from "@mui/material/Box";
 import TextField, { TextFieldProps } from "@mui/material/TextField";
 // CUSTOM COMPONENT
-import { H6 } from "./Typography";
+import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 
 // ==============================================================
 type Props = TextFieldProps & BoxProps;

package/src/components-v2/DropZone.tsx

@@ -6,7 +6,10 @@ import Divider from "@mui/material/Divider";
 // DROPZONE
 import { Accept, FileRejection, useDropzone } from "react-dropzone";
 // LOCAL CUSTOM COMPONENT
-import { H5, Small } from "./Typography";
+import {
+  H5,
+  Small,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { useTranslations } from "next-intl";
 
 // ========================================================

package/src/components-v2/ImageWithFallback.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect } from "react";
 import { ImageProps } from "next/image";
-import LazyImage from "./LazyImage";
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
 
 export interface ImageWithFallbackProps extends ImageProps {
   fallbackSrc?: string;

package/src/components-v2/accordion/index.ts

@@ -1 +1 @@
-export { default as AccordionHeader } from "./accordion-header";
+export { default as AccordionHeader } from "@evenicanpm/storefront-core/src/components-v2/accordion/accordion-header";

package/src/components-v2/carousel/carousel.tsx

@@ -1,68 +1,102 @@
 "use client";
 
-import { PropsWithChildren, forwardRef } from "react";
+import React, { forwardRef, PropsWithChildren } from "react";
 import { SxProps, Theme, useTheme } from "@mui/material/styles";
-import SlickCarousel, { Settings } from "react-slick";
 import Slider from "react-slick";
-// LOCAL CUSTOM COMPONENTS
-import CarouselDots from "./components/carousel-dots";
-import CarouselArrows from "./components/carousel-arrows";
-// SLICK CAROUSEL CSS
+import { Settings, CustomArrowProps } from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
-// STYLED COMPONENT
-import { RootStyle } from "./styles/index";
+import { createArrows } from "@evenicanpm/storefront-core/src/components-v2/carousel/components/carousel-arrows";
+import { createDots } from "@evenicanpm/storefront-core/src/components-v2/carousel/components/carousel-dots";
+import { RootStyle } from "@evenicanpm/storefront-core/src/components-v2/carousel/styles/index";
 
-// ==============================================================
-interface Props extends PropsWithChildren, Settings {
+type ArrowConfig = {
+  sx?: SxProps<Theme>;
+  // optionally allow custom components:
+  NextArrow?: React.ComponentType<CustomArrowProps & { sx?: SxProps<Theme> }>;
+  PrevArrow?: React.ComponentType<CustomArrowProps & { sx?: SxProps<Theme> }>;
+};
+
+type DotConfig = {
   dotColor?: string;
-  spaceBetween?: number;
-  dotStyles?: SxProps<Theme>;
+  sx?: SxProps<Theme>;
+};
+
+export interface CarouselProps
+  extends PropsWithChildren<Omit<Settings, "arrows" | "dots">> {
+  arrows?: boolean | ArrowConfig;
+  dots?: boolean | DotConfig;
+
+  // backward-compatible convenience props
   arrowStyles?: SxProps<Theme>;
-  dots?: boolean;
-  arrows?: boolean;
-  slidesToShow?: number;
+  dotColor?: string;
+  dotStyles?: SxProps<Theme>;
+
+  // layout helpers
+  spaceBetween?: number;
   height?: number;
-  autoplay?: boolean;
-  autoplaySpeed?: number;
 }
-// ==============================================================
 
-const Carousel = forwardRef<Slider, Props>((props, ref) => {
+const Carousel = forwardRef<Slider, CarouselProps>((props, ref) => {
+  const theme = useTheme();
+
   const {
-    dotColor,
     children,
-    arrowStyles,
-    dots = false,
-    arrows = true,
-    slidesToShow = 4,
     spaceBetween = 10,
-    dotStyles = { mt: 4 },
     height = 400,
     autoplay = false,
     autoplaySpeed = 3000,
+    arrowStyles,
+    dotColor,
+    dotStyles,
+    arrows,
+    dots,
     ...others
   } = props;
 
-  const theme = useTheme();
-
-  const settings: Settings = {
-    dots,
-    arrows,
-    slidesToShow,
+  // base settings from others (these come from props or react-slick Settings)
+  const baseSettings: Settings = {
+    rtl: theme.direction === "rtl",
     autoplay,
     autoplaySpeed,
-    rtl: theme.direction === "rtl",
-    ...CarouselArrows(arrowStyles),
-    ...CarouselDots({ dotColor, sx: dotStyles }),
     ...others,
   };
 
+  // compute final settings
+  const finalSettings: Settings = { ...baseSettings };
+
+  // ---- arrows handling ----
+  // Priority:
+  // 1. arrows prop is object -> use its config
+  // 2. arrowStyles prop provided -> use default arrow components with that sx
+  // 3. arrows === true -> let react-slick render default arrows (no custom nextArrow/prevArrow)
+  if (typeof arrows === "object") {
+    Object.assign(finalSettings, createArrows(arrows));
+  } else if (arrowStyles) {
+    Object.assign(finalSettings, createArrows({ sx: arrowStyles }));
+  } else if (arrows === true) {
+    finalSettings.arrows = true;
+  } else {
+    finalSettings.arrows = Boolean(arrows); // false or undefined -> false
+  }
+
+  // ---- dots handling ----
+  if (typeof dots === "object") {
+    Object.assign(finalSettings, createDots(dots));
+  } else if (dotColor || dotStyles) {
+    Object.assign(
+      finalSettings,
+      createDots({ dotColor: dotColor, sx: dotStyles }),
+    );
+  } else {
+    finalSettings.dots = Boolean(dots);
+  }
+
   return (
     <RootStyle space={spaceBetween} sx={{ height, paddingBottom: "25px" }}>
-      <SlickCarousel ref={ref} {...settings}>
+      <Slider ref={ref} {...finalSettings}>
         {children}
-      </SlickCarousel>
+      </Slider>
     </RootStyle>
   );
 });