@mantine/carousel 6.0.17 → 7.0.0-alpha.21

package/cjs/get-chevron-rotation.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-chevron-rotation.js","sources":["../src/get-chevron-rotation.ts"],"sourcesContent":["import { CarouselOrientation } from './types';\n\ninterface Options {\n  dir: 'rtl' | 'ltr';\n  orientation: CarouselOrientation;\n  direction: 'next' | 'previous';\n}\n\nexport function getChevronRotation({ dir, orientation, direction }: Options) {\n  if (direction === 'previous') {\n    return orientation === 'horizontal' ? 90 * (dir === 'ltr' ? 1 : -1) : -180;\n  }\n\n  return orientation === 'horizontal' ? 90 * (dir === 'ltr' ? -1 : 1) : 0;\n}\n"],"names":[],"mappings":";;;;AAAO,SAAS,kBAAkB,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE;AACpE,EAAE,IAAI,SAAS,KAAK,UAAU,EAAE;AAChC,IAAI,OAAO,WAAW,KAAK,YAAY,GAAG,EAAE,IAAI,GAAG,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;AAC/E,GAAG;AACH,EAAE,OAAO,WAAW,KAAK,YAAY,GAAG,EAAE,IAAI,GAAG,KAAK,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAC1E;;;;"}
+{"version":3,"file":"get-chevron-rotation.js","sources":["../src/get-chevron-rotation.ts"],"sourcesContent":["interface Options {\n  dir: 'rtl' | 'ltr';\n  orientation: 'horizontal' | 'vertical' | undefined;\n  direction: 'next' | 'previous';\n}\n\nexport function getChevronRotation({ dir, orientation, direction }: Options) {\n  if (direction === 'previous') {\n    return orientation === 'horizontal' ? 90 * (dir === 'ltr' ? 1 : -1) : -180;\n  }\n\n  return orientation === 'horizontal' ? 90 * (dir === 'ltr' ? -1 : 1) : 0;\n}\n"],"names":[],"mappings":";;;;AAAO,SAAS,kBAAkB,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE;AACpE,EAAE,IAAI,SAAS,KAAK,UAAU,EAAE;AAChC,IAAI,OAAO,WAAW,KAAK,YAAY,GAAG,EAAE,IAAI,GAAG,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;AAC/E,GAAG;AACH,EAAE,OAAO,WAAW,KAAK,YAAY,GAAG,EAAE,IAAI,GAAG,KAAK,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAC1E;;;;"}

package/cjs/index.css

@@ -0,0 +1,205 @@
+.m-17884d0f {
+  position: relative;
+}
+
+.m-a2dae653 {
+  height: var(--carousel-height, auto);
+  overflow: hidden;
+}
+
+.m-fcd81474 {
+  display: flex;
+  flex-direction: var(--_container-direction, row);
+  height: var(--carousel-height, auto);
+  margin-right: var(--_container-mr);
+  margin-left: var(--_container-ml);
+  margin-bottom: var(--_container-mb);
+}
+
+[data-include-gap-in-size] .m-fcd81474[data-orientation='vertical'] {
+      --_container-mb: calc(var(--carousel-slide-gap) * -1);
+    }
+
+[data-include-gap-in-size] .m-fcd81474[data-orientation='horizontal'] {
+      --_container-mr: calc(var(--carousel-slide-gap) * -1);
+    }
+
+[dir="rtl"] [data-include-gap-in-size] .m-fcd81474[data-orientation='horizontal'] {
+        --_container-ml: calc(var(--carousel-slide-gap) * -1);
+        --_container-mr: 0;
+}
+
+.m-fcd81474[data-orientation='vertical'] {
+    --_container-direction: column;
+  }
+
+.m-39bc3463 {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+  pointer-events: none;
+  flex-direction: var(--_controls-direction);
+  left: var(--_controls-left);
+  right: var(--_controls-right);
+  top: var(--_controls-top);
+  bottom: var(--_controls-bottom);
+  padding: var(--_controls-padding);
+}
+
+.m-17884d0f[data-orientation='vertical'] .m-39bc3463 {
+    --_controls-left: calc(50% - var(--carousel-control-size) / 2);
+    --_controls-top: 0;
+    --_controls-bottom: 0;
+    --_controls-direction: column;
+    --_controls-padding: var(--carousel-controls-offset) 0;
+  }
+
+.m-17884d0f[data-orientation='horizontal'] .m-39bc3463 {
+    --_controls-left: 0;
+    --_controls-right: 0;
+    --_controls-top: calc(50% - var(--carousel-control-size) / 2);
+    --_controls-direction: row;
+    --_controls-padding: 0 var(--carousel-controls-offset);
+  }
+
+.m-64f58e10 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: var(--carousel-control-size);
+  min-height: var(--carousel-control-size);
+  border-radius: var(--carousel-control-size);
+  pointer-events: all;
+  background-color: var(--mantine-color-white);
+  color: var(--mantine-color-black);
+  box-shadow: var(--mantine-shadow-md);
+  opacity: var(--_control-opacity);
+  border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
+  transition: opacity 100ms ease;
+}
+
+[data-mantine-color-scheme='light'] .m-64f58e10 {
+    --_control-opacity: 0.85;
+}
+
+[data-mantine-color-scheme='dark'] .m-64f58e10 {
+    --_control-opacity: 0.65;
+}
+
+@media (hover: hover) {
+
+  .m-64f58e10:hover {
+    --_control-opacity: 1;
+  }
+}
+
+@media (hover: none) {
+
+  .m-64f58e10:active {
+    --_control-opacity: 1;
+  }
+}
+
+.m-71ea3ab1 {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  gap: calc(0.5rem * var(--mantine-scale));
+  pointer-events: none;
+  flex-direction: var(--_indicators-direction);
+  bottom: var(--_indicators-bottom);
+  left: var(--_indicators-left);
+  right: var(--_indicators-right);
+  top: var(--_indicators-top);
+}
+
+.m-17884d0f[data-orientation='vertical'] .m-71ea3ab1 {
+    --_indicators-bottom: 0;
+    --_indicators-top: 0;
+    --_indicators-right: var(--mantine-spacing-md);
+    --_indicators-direction: column;
+  }
+
+.m-17884d0f[data-orientation='horizontal'] .m-71ea3ab1 {
+    --_indicators-bottom: var(--mantine-spacing-md);
+    --_indicators-left: 0;
+    --_indicators-right: 0;
+    --_indicators-direction: row;
+  }
+
+.m-eae68602 {
+  pointer-events: all;
+  width: var(--_indicator-width);
+  height: var(--_indicator-height);
+  border-radius: var(--mantine-radius-xl);
+  box-shadow: var(--mantine-shadow-sm);
+  opacity: var(--_indicator-opacity, 0.6);
+  background-color: var(--mantine-color-white);
+}
+
+@media (hover: hover) {
+
+  .m-eae68602:hover {
+    --_indicator-opacity: 1;
+  }
+}
+
+@media (hover: none) {
+
+  .m-eae68602:active {
+    --_indicator-opacity: 1;
+  }
+}
+
+.m-eae68602[data-active] {
+    --_indicator-opacity: 1;
+  }
+
+.m-17884d0f[data-orientation='vertical'] .m-eae68602 {
+    --_indicator-width: calc(0.3125rem * var(--mantine-scale));
+    --_indicator-height: calc(1.5625rem * var(--mantine-scale));
+  }
+
+.m-17884d0f[data-orientation='horizontal'] .m-eae68602 {
+    --_indicator-width: calc(1.5625rem * var(--mantine-scale));
+    --_indicator-height: calc(0.3125rem * var(--mantine-scale));
+  }
+
+.m-d98df724 {
+  position: relative;
+  flex: 0 0 var(--carousel-slide-size);
+  padding-right: var(--_slide-pr, 0);
+  padding-left: var(--_slide-pl, 0);
+  padding-bottom: var(--_slide-pb, 0);
+  margin-right: var(--_slide-mr, 0);
+  margin-left: var(--_slide-ml, 0);
+  margin-bottom: var(--_slide-mb, 0);
+}
+
+.m-17884d0f[data-include-gap-in-size] .m-d98df724[data-orientation='vertical'] {
+      --_slide-pb: var(--carousel-slide-gap);
+    }
+
+.m-17884d0f[data-include-gap-in-size] .m-d98df724[data-orientation='horizontal'] {
+      --_slide-pr: var(--carousel-slide-gap);
+    }
+
+[dir="rtl"] .m-17884d0f[data-include-gap-in-size] .m-d98df724[data-orientation='horizontal'] {
+        --_slide-pl: var(--carousel-slide-gap);
+        --_slide-pr: 0;
+}
+
+.m-17884d0f:not([data-include-gap-in-size]) .m-d98df724[data-orientation='vertical'] {
+      --_slide-mb: var(--carousel-slide-gap);
+    }
+
+.m-17884d0f:not([data-include-gap-in-size]) .m-d98df724[data-orientation='horizontal'] {
+      --_slide-mr: var(--carousel-slide-gap);
+    }
+
+[dir="rtl"] .m-17884d0f:not([data-include-gap-in-size]) .m-d98df724[data-orientation='horizontal'] {
+        --_slide-ml: var(--carousel-slide-gap);
+        --_slide-mr: 0;
+}

package/cjs/index.js

@@ -1,12 +1,15 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Carousel = require('./Carousel.js');
 var useAnimationOffsetEffect = require('./use-animation-offset-effect.js');
+var CarouselSlide = require('./CarouselSlide/CarouselSlide.js');
 
 
 
 exports.Carousel = Carousel.Carousel;
 exports.useAnimationOffsetEffect = useAnimationOffsetEffect.useAnimationOffsetEffect;
+exports.CarouselSlide = CarouselSlide.CarouselSlide;
 //# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/cjs/use-animation-offset-effect.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-animation-offset-effect.js","sources":["../src/use-animation-offset-effect.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { Embla } from './types';\n\nexport function useAnimationOffsetEffect(\n  embla: Embla | null | undefined,\n  transitionDuration: number\n) {\n  useEffect(() => {\n    if (embla) {\n      window.setTimeout(() => {\n        embla.reInit();\n      }, transitionDuration);\n    }\n  }, [embla, transitionDuration]);\n}\n"],"names":["useEffect"],"mappings":";;;;;;AACO,SAAS,wBAAwB,CAAC,KAAK,EAAE,kBAAkB,EAAE;AACpE,EAAEA,eAAS,CAAC,MAAM;AAClB,IAAI,IAAI,KAAK,EAAE;AACf,MAAM,MAAM,CAAC,UAAU,CAAC,MAAM;AAC9B,QAAQ,KAAK,CAAC,MAAM,EAAE,CAAC;AACvB,OAAO,EAAE,kBAAkB,CAAC,CAAC;AAC7B,KAAK;AACL,GAAG,EAAE,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC;AAClC;;;;"}
+{"version":3,"file":"use-animation-offset-effect.js","sources":["../src/use-animation-offset-effect.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport type { EmblaCarouselType } from 'embla-carousel-react';\n\nexport function useAnimationOffsetEffect(\n  embla: EmblaCarouselType | null | undefined,\n  transitionDuration: number\n) {\n  useEffect(() => {\n    if (embla) {\n      window.setTimeout(() => {\n        embla.reInit();\n      }, transitionDuration);\n    }\n  }, [embla, transitionDuration]);\n}\n"],"names":["useEffect"],"mappings":";;;;;;AACO,SAAS,wBAAwB,CAAC,KAAK,EAAE,kBAAkB,EAAE;AACpE,EAAEA,eAAS,CAAC,MAAM;AAClB,IAAI,IAAI,KAAK,EAAE;AACf,MAAM,MAAM,CAAC,UAAU,CAAC,MAAM;AAC9B,QAAQ,KAAK,CAAC,MAAM,EAAE,CAAC;AACvB,OAAO,EAAE,kBAAkB,CAAC,CAAC;AAC7B,KAAK;AACL,GAAG,EAAE,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC;AAClC;;;;"}

package/esm/Carousel.context.js

@@ -1,7 +1,8 @@
-import { createSafeContext } from '@mantine/utils';
-import { CAROUSEL_ERRORS } from './Carousel.errors.js';
+import { createSafeContext } from '@mantine/core';
 
-const [CarouselProvider, useCarouselContext] = createSafeContext(CAROUSEL_ERRORS.context);
+const [CarouselProvider, useCarouselContext] = createSafeContext(
+  "Carousel component was not found in tree"
+);
 
 export { CarouselProvider, useCarouselContext };
 //# sourceMappingURL=Carousel.context.js.map

package/esm/Carousel.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.context.js","sources":["../src/Carousel.context.ts"],"sourcesContent":["import { MantineNumberSize, Styles, ClassNames } from '@mantine/core';\nimport { createSafeContext } from '@mantine/utils';\nimport { CAROUSEL_ERRORS } from './Carousel.errors';\nimport { CarouselOrientation, Embla, CarouselBreakpoint } from './types';\nimport type { CarouselStylesNames } from './Carousel';\n\ninterface CarouselContext {\n  embla: Embla;\n  slideSize: string | number;\n  slideGap: MantineNumberSize;\n  orientation: CarouselOrientation;\n  includeGapInSize: boolean;\n  breakpoints: CarouselBreakpoint[];\n  classNames: ClassNames<CarouselStylesNames>;\n  styles: Styles<CarouselStylesNames>;\n  unstyled: boolean;\n  variant: string;\n}\n\nexport const [CarouselProvider, useCarouselContext] = createSafeContext<CarouselContext>(\n  CAROUSEL_ERRORS.context\n);\n"],"names":[],"mappings":";;;AAEY,MAAC,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,GAAG,iBAAiB,CAAC,eAAe,CAAC,OAAO;;;;"}
+{"version":3,"file":"Carousel.context.js","sources":["../src/Carousel.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '@mantine/core';\nimport type { CarouselFactory } from './Carousel';\n\ninterface CarouselContextValue {\n  getStyles: GetStylesApi<CarouselFactory>;\n  orientation: 'horizontal' | 'vertical' | undefined;\n}\n\nexport const [CarouselProvider, useCarouselContext] = createSafeContext<CarouselContextValue>(\n  'Carousel component was not found in tree'\n);\n"],"names":[],"mappings":";;AACY,MAAC,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,GAAG,iBAAiB;AACvE,EAAE,0CAA0C;AAC5C;;;;"}

package/esm/Carousel.js

@@ -1,13 +1,16 @@
-import { useComponentDefaultProps, UnstyledButton, Box, ChevronIcon } from '@mantine/core';
+import React, { useState, useCallback, useEffect, Children } from 'react';
+import { createVarsResolver, rem, getSpacing, factory, useProps, useStyles, useRandomClassName, useDirection, UnstyledButton, Box, AccordionChevron } from '@mantine/core';
 import { clamp } from '@mantine/hooks';
 import useEmblaCarousel from 'embla-carousel-react';
-import React, { forwardRef, useState, useCallback, useEffect, Children } from 'react';
+import { getChevronRotation } from './get-chevron-rotation.js';
 import { CarouselProvider } from './Carousel.context.js';
-import useStyles from './Carousel.styles.js';
 import { CarouselSlide } from './CarouselSlide/CarouselSlide.js';
-import { getChevronRotation } from './get-chevron-rotation.js';
+import { CarouselVariables } from './CarouselVariables/CarouselVariables.js';
+import classes from './Carousel.module.css.js';
 
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -23,6 +26,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -56,21 +60,33 @@ const defaultProps = {
   containScroll: "",
   withKeyboardEvents: true
 };
-const _Carousel = forwardRef((props, ref) => {
-  const _a = useComponentDefaultProps("Carousel", defaultProps, props), {
-    children,
+const varsResolver = createVarsResolver(
+  (_, { height, controlSize, controlsOffset }) => ({
+    root: {
+      "--carousel-height": rem(height),
+      "--carousel-control-size": rem(controlSize),
+      "--carousel-controls-offset": getSpacing(controlsOffset)
+    }
+  })
+);
+const Carousel = factory((_props, ref) => {
+  const props = useProps("Carousel", defaultProps, _props);
+  const _a = props, {
+    classNames,
     className,
+    style,
+    styles,
+    unstyled,
+    vars,
+    children,
     getEmblaApi,
     onNextSlide,
     onPreviousSlide,
     onSlideChange,
-    nextControlLabel,
-    previousControlLabel,
+    nextControlProps,
+    previousControlProps,
     controlSize,
     controlsOffset,
-    classNames,
-    styles,
-    unstyled,
     slideSize,
     slideGap,
     orientation,
@@ -89,25 +105,25 @@ const _Carousel = forwardRef((props, ref) => {
     plugins,
     nextControlIcon,
     previousControlIcon,
-    breakpoints,
     skipSnaps,
     containScroll,
-    withKeyboardEvents,
-    variant
+    withKeyboardEvents
   } = _a, others = __objRest(_a, [
-    "children",
+    "classNames",
     "className",
+    "style",
+    "styles",
+    "unstyled",
+    "vars",
+    "children",
     "getEmblaApi",
     "onNextSlide",
     "onPreviousSlide",
     "onSlideChange",
-    "nextControlLabel",
-    "previousControlLabel",
+    "nextControlProps",
+    "previousControlProps",
     "controlSize",
     "controlsOffset",
-    "classNames",
-    "styles",
-    "unstyled",
     "slideSize",
     "slideGap",
     "orientation",
@@ -126,27 +142,41 @@ const _Carousel = forwardRef((props, ref) => {
     "plugins",
     "nextControlIcon",
     "previousControlIcon",
-    "breakpoints",
     "skipSnaps",
     "containScroll",
-    "withKeyboardEvents",
-    "variant"
+    "withKeyboardEvents"
   ]);
-  const { classes, cx, theme } = useStyles({ controlSize, controlsOffset, orientation, height, includeGapInSize, breakpoints, slideGap }, { name: "Carousel", classNames, styles, unstyled, variant });
-  const [emblaRefElement, embla] = useEmblaCarousel({
-    axis: orientation === "horizontal" ? "x" : "y",
-    direction: orientation === "horizontal" ? theme.dir : void 0,
-    startIndex: initialSlide,
-    loop,
-    align,
-    slidesToScroll,
-    draggable,
-    dragFree,
-    speed,
-    inViewThreshold,
-    skipSnaps,
-    containScroll
-  }, plugins);
+  const getStyles = useStyles({
+    name: "Carousel",
+    classes,
+    props,
+    className,
+    style,
+    classNames,
+    styles,
+    unstyled,
+    vars,
+    varsResolver
+  });
+  const responsiveClassName = useRandomClassName();
+  const { dir } = useDirection();
+  const [emblaRefElement, embla] = useEmblaCarousel(
+    {
+      axis: orientation === "horizontal" ? "x" : "y",
+      direction: orientation === "horizontal" ? dir : void 0,
+      startIndex: initialSlide,
+      loop,
+      align,
+      slidesToScroll,
+      draggable,
+      dragFree,
+      speed,
+      inViewThreshold,
+      skipSnaps,
+      containScroll
+    },
+    plugins
+  );
   const [selected, setSelected] = useState(0);
   const [slidesCount, setSlidesCount] = useState(0);
   const handleScroll = useCallback((index) => embla && embla.scrollTo(index), [embla]);
@@ -165,18 +195,21 @@ const _Carousel = forwardRef((props, ref) => {
     embla == null ? void 0 : embla.scrollNext();
     onNextSlide == null ? void 0 : onNextSlide();
   }, [embla]);
-  const handleKeydown = useCallback((event) => {
-    if (withKeyboardEvents) {
-      if (event.key === "ArrowRight") {
-        event.preventDefault();
-        handleNext();
+  const handleKeydown = useCallback(
+    (event) => {
+      if (withKeyboardEvents) {
+        if (event.key === "ArrowRight") {
+          event.preventDefault();
+          handleNext();
+        }
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          handlePrevious();
+        }
       }
-      if (event.key === "ArrowLeft") {
-        event.preventDefault();
-        handlePrevious();
-      }
-    }
-  }, [embla]);
+    },
+    [embla]
+  );
   useEffect(() => {
     if (embla) {
       getEmblaApi == null ? void 0 : getEmblaApi(embla);
@@ -193,78 +226,78 @@ const _Carousel = forwardRef((props, ref) => {
     if (embla) {
       embla.reInit();
       setSlidesCount(embla.scrollSnapList().length);
-      setSelected((currentSelected) => clamp(currentSelected, 0, Children.toArray(children).length - 1));
+      setSelected(
+        (currentSelected) => clamp(currentSelected, 0, Children.toArray(children).length - 1)
+      );
     }
   }, [Children.toArray(children).length, slidesToScroll]);
   const canScrollPrev = (embla == null ? void 0 : embla.canScrollPrev()) || false;
   const canScrollNext = (embla == null ? void 0 : embla.canScrollNext()) || false;
-  const indicators = Array(slidesCount).fill(0).map((_, index) => /* @__PURE__ */ React.createElement(UnstyledButton, {
-    key: index,
-    "data-active": index === selected || void 0,
-    className: classes.indicator,
-    "aria-hidden": true,
-    tabIndex: -1,
-    onClick: () => handleScroll(index)
-  }));
-  return /* @__PURE__ */ React.createElement(CarouselProvider, {
-    value: {
-      slideGap,
-      slideSize,
-      embla,
-      orientation,
-      includeGapInSize,
-      breakpoints,
-      classNames,
-      styles,
-      unstyled,
-      variant
-    }
-  }, /* @__PURE__ */ React.createElement(Box, __spreadValues({
-    className: cx(classes.root, className),
-    ref,
-    onKeyDownCapture: handleKeydown
-  }, others), /* @__PURE__ */ React.createElement("div", {
-    className: classes.viewport,
-    ref: emblaRefElement
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: classes.container
-  }, children)), withIndicators && /* @__PURE__ */ React.createElement("div", {
-    className: classes.indicators
-  }, indicators), withControls && /* @__PURE__ */ React.createElement("div", {
-    className: classes.controls
-  }, /* @__PURE__ */ React.createElement(UnstyledButton, {
-    onClick: handlePrevious,
-    className: classes.control,
-    "aria-label": previousControlLabel,
-    "data-inactive": !canScrollPrev || void 0,
-    tabIndex: canScrollPrev ? 0 : -1
-  }, typeof previousControlIcon !== "undefined" ? previousControlIcon : /* @__PURE__ */ React.createElement(ChevronIcon, {
-    style: {
-      transform: `rotate(${getChevronRotation({
-        dir: theme.dir,
-        orientation,
-        direction: "previous"
-      })}deg)`
-    }
-  })), /* @__PURE__ */ React.createElement(UnstyledButton, {
-    onClick: handleNext,
-    className: classes.control,
-    "aria-label": nextControlLabel,
-    "data-inactive": !canScrollNext || void 0,
-    tabIndex: canScrollNext ? 0 : -1
-  }, typeof nextControlIcon !== "undefined" ? nextControlIcon : /* @__PURE__ */ React.createElement(ChevronIcon, {
-    style: {
-      transform: `rotate(${getChevronRotation({
-        dir: theme.dir,
-        orientation,
-        direction: "next"
-      })}deg)`
-    }
-  })))));
+  const indicators = Array(slidesCount).fill(0).map((_, index) => /* @__PURE__ */ React.createElement(
+    UnstyledButton,
+    __spreadProps(__spreadValues({}, getStyles("indicator")), {
+      key: index,
+      "data-active": index === selected || void 0,
+      "aria-hidden": true,
+      tabIndex: -1,
+      onClick: () => handleScroll(index)
+    })
+  ));
+  return /* @__PURE__ */ React.createElement(CarouselProvider, { value: { getStyles, orientation } }, /* @__PURE__ */ React.createElement(CarouselVariables, __spreadProps(__spreadValues({}, props), { selector: `.${responsiveClassName}` })), /* @__PURE__ */ React.createElement(
+    Box,
+    __spreadProps(__spreadValues(__spreadValues({
+      ref
+    }, getStyles("root", { className: responsiveClassName })), others), {
+      mod: { orientation, "include-gap-in-size": includeGapInSize },
+      onKeyDownCapture: handleKeydown
+    }),
+    /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, getStyles("viewport")), { ref: emblaRefElement }), /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, getStyles("container")), { "data-orientation": orientation }), children)),
+    withIndicators && /* @__PURE__ */ React.createElement("div", __spreadValues({}, getStyles("indicators")), indicators),
+    withControls && /* @__PURE__ */ React.createElement("div", __spreadValues({}, getStyles("controls")), /* @__PURE__ */ React.createElement(
+      UnstyledButton,
+      __spreadProps(__spreadValues(__spreadValues({}, previousControlProps), getStyles("control")), {
+        onClick: handlePrevious,
+        "data-inactive": !canScrollPrev || void 0,
+        tabIndex: canScrollPrev ? 0 : -1
+      }),
+      typeof previousControlIcon !== "undefined" ? previousControlIcon : /* @__PURE__ */ React.createElement(
+        AccordionChevron,
+        {
+          style: {
+            transform: `rotate(${getChevronRotation({
+              dir,
+              orientation,
+              direction: "previous"
+            })}deg)`
+          }
+        }
+      )
+    ), /* @__PURE__ */ React.createElement(
+      UnstyledButton,
+      __spreadProps(__spreadValues(__spreadValues({
+        onClick: handleNext
+      }, getStyles("control")), nextControlProps), {
+        "data-inactive": !canScrollNext || void 0,
+        tabIndex: canScrollNext ? 0 : -1
+      }),
+      typeof nextControlIcon !== "undefined" ? nextControlIcon : /* @__PURE__ */ React.createElement(
+        AccordionChevron,
+        {
+          style: {
+            transform: `rotate(${getChevronRotation({
+              dir,
+              orientation,
+              direction: "next"
+            })}deg)`
+          }
+        }
+      )
+    ))
+  ));
 });
-_Carousel.Slide = CarouselSlide;
-_Carousel.displayName = "@mantine/carousel/Carousel";
-const Carousel = _Carousel;
+Carousel.classes = classes;
+Carousel.displayName = "@mantine/core/Carousel";
+Carousel.Slide = CarouselSlide;
 
-export { Carousel, _Carousel };
+export { Carousel };
 //# sourceMappingURL=Carousel.js.map