@yamada-ui/carousel 2.0.7-next-20241005220055 → 2.0.7

package/dist/{chunk-LV5JHVV6.mjs → chunk-WSTWB7CV.mjs}

@@ -2,27 +2,26 @@
 import {
   CarouselControlNext,
   CarouselControlPrev
-} from "./chunk-T3LMURPY.mjs";
+} from "./chunk-PEXGWNKB.mjs";
 import {
   CarouselIndicators
-} from "./chunk-W6XPFRNI.mjs";
+} from "./chunk-UTOIPGGP.mjs";
 import {
   CarouselSlide
-} from "./chunk-OQNU22B2.mjs";
+} from "./chunk-CXXL47SC.mjs";
 import {
   CarouselProvider,
   useCarousel,
   useCarouselContext
-} from "./chunk-LRO4RIBJ.mjs";
+} from "./chunk-SYCPZC2C.mjs";
 
 // src/carousel.tsx
 import {
-  ui,
   forwardRef,
-  useComponentMultiStyle,
-  omitThemeProps
+  omitThemeProps,
+  ui,
+  useComponentMultiStyle
 } from "@yamada-ui/core";
-import { useToken } from "@yamada-ui/use-token";
 import { useValue } from "@yamada-ui/use-value";
 import {
   cx,
@@ -36,7 +35,6 @@ import { cloneElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Carousel = forwardRef(
   ({ h, height, minH, minHeight, ...props }, ref) => {
-    var _a, _b;
     const orientation = useValue(props.orientation);
     const align = useValue(props.align);
     const autoplay = useValue(props.autoplay);
@@ -51,43 +49,37 @@ var Carousel = forwardRef(
     const skipSnaps = useValue(props.skipSnaps);
     const containScroll = useValue(props.containScroll);
     const includeGapInSize = useValue(props.includeGapInSize);
-    const _gap = useValue(props.gap);
-    const gap = (_a = useToken("spaces", _gap)) != null ? _a : _gap;
-    const _slideSize = useValue(props.slideSize);
-    const slideSize = (_b = useToken("sizes", _slideSize)) != null ? _b : _slideSize;
     const [styles, mergedProps] = useComponentMultiStyle("Carousel", {
       ...props,
-      orientation,
       align,
       autoplay,
-      stopMouseEnterAutoplay,
-      loop,
-      duration,
+      containScroll,
       delay,
-      slidesToScroll,
-      draggable,
       dragFree,
+      draggable,
+      duration,
+      includeGapInSize,
       inViewThreshold,
+      loop,
+      orientation,
       skipSnaps,
-      containScroll,
-      includeGapInSize,
-      gap,
-      slideSize
+      slidesToScroll,
+      stopMouseEnterAutoplay
     });
     const {
       className,
-      innerProps,
       withControls = true,
-      controlProps,
-      controlPrevProps,
-      controlNextProps,
       withIndicators = true,
+      controlNextProps,
+      controlPrevProps,
+      controlProps,
       indicatorsProps,
+      innerProps,
       ...computedProps
     } = omitThemeProps(mergedProps);
     const computedWithControls = useValue(withControls);
     const computedWithIndicators = useValue(withIndicators);
-    const { getContainerProps, getSlidesProps, children, ...rest } = useCarousel({
+    const { children, getContainerProps, getSlidesProps, ...rest } = useCarousel({
       ...computedProps
     });
     const validChildren = getValidChildren(children);
@@ -114,17 +106,18 @@ var Carousel = forwardRef(
     const cloneSlideChildren = slideChildren.map(
       (child, index) => cloneElement(child, { index })
     );
+    const css = {
+      h: "fit-content",
+      position: "relative",
+      ...styles.container
+    };
     h != null ? h : h = height;
     minH != null ? minH : minH = minHeight;
     return /* @__PURE__ */ jsx(CarouselProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ jsxs(
       ui.div,
       {
         className: cx("ui-carousel", className),
-        __css: {
-          position: "relative",
-          h: "fit-content",
-          ...styles.container
-        },
+        __css: css,
         ...getContainerProps({}, ref),
         children: [
           customCarouselControlPrev != null ? customCarouselControlPrev : computedWithControls ? /* @__PURE__ */ jsx(CarouselControlPrev, { ...controlProps, ...controlPrevProps }) : null,
@@ -150,20 +143,19 @@ Carousel.displayName = "Carousel";
 Carousel.__ui__ = "Carousel";
 var CarouselSlides = forwardRef(
   ({ ...rest }, ref) => {
-    const css = { w: "100%", h: "fit-content", overflow: "hidden" };
+    const css = { h: "fit-content", overflow: "hidden", w: "100%" };
     return /* @__PURE__ */ jsx(ui.div, { ref, className: "ui-carousel__sliders", __css: css, children: /* @__PURE__ */ jsx(CarouselSlidesInner, { ...rest }) });
   }
 );
 CarouselSlides.displayName = "CarouselSlides";
 CarouselSlides.__ui__ = "CarouselSlides";
 var CarouselSlidesInner = ({ ...rest }) => {
-  const { orientation, includeGapInSize, gap, styles } = useCarouselContext();
+  const { includeGapInSize, orientation, styles } = useCarouselContext();
   const css = {
     display: "flex",
     flexDirection: orientation === "vertical" ? "column" : "row",
     ...styles.inner,
     ...includeGapInSize ? {
-      vars: [{ name: "gap", token: "spaces", value: gap }],
       [orientation === "vertical" ? "mb" : "mr"]: "calc($gap * -1)"
     } : {}
   };
@@ -175,4 +167,4 @@ CarouselSlidesInner.__ui__ = "CarouselSlidesInner";
 export {
   Carousel
 };
-//# sourceMappingURL=chunk-LV5JHVV6.mjs.map
+//# sourceMappingURL=chunk-WSTWB7CV.mjs.map

package/dist/chunk-WSTWB7CV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/carousel.tsx"],"sourcesContent":["import type {\n  CSSUIObject,\n  CSSUIProps,\n  FC,\n  HTMLUIProps,\n  ThemeProps,\n  Token,\n} from \"@yamada-ui/core\"\nimport type { CarouselControlProps } from \"./carousel-control\"\nimport type { CarouselIndicatorsProps } from \"./carousel-indicators\"\nimport type {\n  AlignmentOptionType,\n  ScrollContainOptionType,\n  SlidesInViewOptionsType,\n  UseCarouselProps,\n} from \"./use-carousel\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n  cx,\n  filterUndefined,\n  findChild,\n  getValidChildren,\n  omitChildren,\n  pickChildren,\n} from \"@yamada-ui/utils\"\nimport { cloneElement } from \"react\"\nimport { CarouselControlNext, CarouselControlPrev } from \"./carousel-control\"\nimport { CarouselIndicators } from \"./carousel-indicators\"\nimport { CarouselSlide } from \"./carousel-slide\"\nimport {\n  CarouselProvider,\n  useCarousel,\n  useCarouselContext,\n} from \"./use-carousel\"\n\ninterface CarouselOptions {\n  /**\n   * The alignment of the carousel.\n   *\n   * @default 'center'\n   */\n  align?: Token<AlignmentOptionType>\n  /**\n   * If `true`, the carousel will be autoplay.\n   *\n   * @default false\n   */\n  autoplay?: Token<boolean>\n  /**\n   * Clear leading and trailing empty space that causes excessive scrolling.\n   * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n   *\n   * @default ''\n   */\n  containScroll?: Token<ScrollContainOptionType>\n  /**\n   * The number for the autoplay interval of the carousel.\n   *\n   * @default 4000\n   */\n  delay?: Token<number>\n  /**\n   * If `true`, momentum scrolling will be enabled.\n   *\n   * @default false\n   */\n  dragFree?: Token<boolean>\n  /**\n   * If `true`, carousel can be scrolled with mouse and touch interactions.\n   *\n   * @default true\n   */\n  draggable?: Token<boolean>\n  /**\n   * Set scroll duration when triggered by any of the API methods.\n   * Higher numbers enables slower scrolling.\n   * Drag interactions are not affected because duration is then determined by the drag force.\n   *\n   * @default 25\n   */\n  duration?: Token<number>\n  /**\n   * If `true`, gap will be treated as part of the carousel slide size.\n   *\n   * @default true\n   */\n  includeGapInSize?: Token<boolean>\n  /**\n   * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n   *\n   * @default 0\n   */\n  inViewThreshold?: Token<SlidesInViewOptionsType>\n  /**\n   * If `true`, infinite looping.\n   * Automatically falls back to false if slide content isn't enough to loop.\n   *\n   * @default true\n   */\n  loop?: Token<boolean>\n  /**\n   * The orientation of the carousel.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Token<\"horizontal\" | \"vertical\">\n  /**\n   * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n   * Note that this option will be ignored if the dragFree option is set to true.\n   *\n   * @default false\n   */\n  skipSnaps?: Token<boolean>\n  /**\n   * The CSS `width` property.\n   */\n  slideSize?: CSSUIProps[\"width\"]\n  /**\n   * The number of slides that should be scrolled with next or previous buttons.\n   *\n   * @default 1\n   */\n  slidesToScroll?: Token<number>\n  /**\n   * If `true`, autoplay will pause when the mouse entries over.\n   *\n   * @default true\n   */\n  stopMouseEnterAutoplay?: Token<boolean>\n  /**\n   * If `true`, display the carousel control buttons.\n   *\n   * @default true\n   */\n  withControls?: Token<boolean>\n  /**\n   * If `true`, display the carousel indicator buttons.\n   *\n   * @default true\n   */\n  withIndicators?: Token<boolean>\n  /**\n   * Props for next of the carousel control element.\n   */\n  controlNextProps?: CarouselControlProps\n  /**\n   * Props for previous of the carousel control element.\n   */\n  controlPrevProps?: CarouselControlProps\n  /**\n   * Props for carousel control element.\n   */\n  controlProps?: CarouselControlProps\n  /**\n   * Props for carousel indicators element.\n   */\n  indicatorsProps?: CarouselIndicatorsProps\n  /**\n   * Props for carousel inner element.\n   */\n  innerProps?: HTMLUIProps\n}\n\nexport interface CarouselProps\n  extends ThemeProps<\"Carousel\">,\n    Omit<HTMLUIProps, \"draggable\" | \"onChange\">,\n    Pick<\n      UseCarouselProps,\n      | \"controlRef\"\n      | \"defaultIndex\"\n      | \"index\"\n      | \"onChange\"\n      | \"onScrollProgress\"\n      | \"watchDrag\"\n      | \"watchResize\"\n      | \"watchSlides\"\n    >,\n    CarouselOptions {}\n\n/**\n * `Carousel` is a component that displays multiple elements like a slideshow.\n *\n * @see Docs https://yamada-ui.com/components/data-display/carousel\n */\nexport const Carousel = forwardRef<CarouselProps, \"div\">(\n  ({ h, height, minH, minHeight, ...props }, ref) => {\n    const orientation = useValue(props.orientation)\n    const align = useValue(props.align)\n    const autoplay = useValue(props.autoplay)\n    const stopMouseEnterAutoplay = useValue(props.stopMouseEnterAutoplay)\n    const loop = useValue(props.loop)\n    const duration = useValue(props.duration)\n    const delay = useValue(props.delay)\n    const slidesToScroll = useValue(props.slidesToScroll)\n    const draggable = useValue(props.draggable)\n    const dragFree = useValue(props.dragFree)\n    const inViewThreshold = useValue(props.inViewThreshold)\n    const skipSnaps = useValue(props.skipSnaps)\n    const containScroll = useValue(props.containScroll)\n    const includeGapInSize = useValue(props.includeGapInSize)\n\n    const [styles, mergedProps] = useComponentMultiStyle(\"Carousel\", {\n      ...props,\n      align,\n      autoplay,\n      containScroll,\n      delay,\n      dragFree,\n      draggable,\n      duration,\n      includeGapInSize,\n      inViewThreshold,\n      loop,\n      orientation,\n      skipSnaps,\n      slidesToScroll,\n      stopMouseEnterAutoplay,\n    })\n    const {\n      className,\n      withControls = true,\n      withIndicators = true,\n      controlNextProps,\n      controlPrevProps,\n      controlProps,\n      indicatorsProps,\n      innerProps,\n      ...computedProps\n    } = omitThemeProps(mergedProps)\n\n    const computedWithControls = useValue(withControls)\n    const computedWithIndicators = useValue(withIndicators)\n\n    const { children, getContainerProps, getSlidesProps, ...rest } =\n      useCarousel({\n        ...computedProps,\n      })\n\n    const validChildren = getValidChildren(children)\n\n    const customCarouselControlPrev = findChild(\n      validChildren,\n      CarouselControlPrev,\n    )\n    const customCarouselControlNext = findChild(\n      validChildren,\n      CarouselControlNext,\n    )\n    const customCarouselIndicators = findChild(\n      validChildren,\n      CarouselIndicators,\n    )\n    const slideChildren = pickChildren(validChildren, CarouselSlide)\n    const otherChildren = omitChildren(\n      validChildren,\n      CarouselControlPrev,\n      CarouselControlNext,\n      CarouselIndicators,\n      CarouselSlide,\n    )\n\n    const cloneSlideChildren = slideChildren.map((child, index) =>\n      cloneElement(child, { index }),\n    )\n\n    const css: CSSUIObject = {\n      h: \"fit-content\",\n      position: \"relative\",\n      ...styles.container,\n    }\n\n    h ??= height\n    minH ??= minHeight\n\n    return (\n      <CarouselProvider value={{ styles, ...rest }}>\n        <ui.div\n          className={cx(\"ui-carousel\", className)}\n          __css={css}\n          {...getContainerProps({}, ref)}\n        >\n          {customCarouselControlPrev ??\n            (computedWithControls ? (\n              <CarouselControlPrev {...controlProps} {...controlPrevProps} />\n            ) : null)}\n          {customCarouselControlNext ??\n            (computedWithControls ? (\n              <CarouselControlNext {...controlProps} {...controlNextProps} />\n            ) : null)}\n\n          <CarouselSlides\n            {...getSlidesProps({\n              ...filterUndefined({ h, minH }),\n              ...innerProps,\n            })}\n          >\n            {cloneSlideChildren}\n          </CarouselSlides>\n\n          {customCarouselIndicators ??\n            (computedWithIndicators ? (\n              <CarouselIndicators {...indicatorsProps} />\n            ) : null)}\n\n          {otherChildren}\n        </ui.div>\n      </CarouselProvider>\n    )\n  },\n)\n\nCarousel.displayName = \"Carousel\"\nCarousel.__ui__ = \"Carousel\"\n\ninterface CarouselSlidesProps extends HTMLUIProps {}\n\nconst CarouselSlides = forwardRef<CarouselSlidesProps, \"div\">(\n  ({ ...rest }, ref) => {\n    const css: CSSUIObject = { h: \"fit-content\", overflow: \"hidden\", w: \"100%\" }\n\n    return (\n      <ui.div ref={ref} className=\"ui-carousel__sliders\" __css={css}>\n        <CarouselSlidesInner {...rest} />\n      </ui.div>\n    )\n  },\n)\n\nCarouselSlides.displayName = \"CarouselSlides\"\nCarouselSlides.__ui__ = \"CarouselSlides\"\n\ninterface CarouselSlidesInnerProps extends HTMLUIProps {}\n\nconst CarouselSlidesInner: FC<CarouselSlidesInnerProps> = ({ ...rest }) => {\n  const { includeGapInSize, orientation, styles } = useCarouselContext()\n\n  const css: CSSUIObject = {\n    display: \"flex\",\n    flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n    ...styles.inner,\n    ...(includeGapInSize\n      ? {\n          [orientation === \"vertical\" ? \"mb\" : \"mr\"]: \"calc($gap * -1)\",\n        }\n      : {}),\n  }\n\n  return (\n    <ui.div className=\"ui-carousel__sliders__inner\" __css={css} {...rest} />\n  )\n}\n\nCarouselSlidesInner.displayName = \"CarouselSlidesInner\"\nCarouselSlidesInner.__ui__ = \"CarouselSlidesInner\"\n"],"mappings":"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","names":[]}

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 export { Carousel, CarouselProps } from './carousel.mjs';
-export { CarouselSlide, CarouselSlideProps } from './carousel-slide.mjs';
 export { CarouselControlNext, CarouselControlPrev, CarouselControlProps } from './carousel-control.mjs';
 export { CarouselIndicators, CarouselIndicatorsProps } from './carousel-indicators.mjs';
+export { CarouselSlide, CarouselSlideProps } from './carousel-slide.mjs';
 export { CarouselControl } from './use-carousel.mjs';
 import '@yamada-ui/core';
 import '@yamada-ui/button';

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { Carousel, CarouselProps } from './carousel.js';
-export { CarouselSlide, CarouselSlideProps } from './carousel-slide.js';
 export { CarouselControlNext, CarouselControlPrev, CarouselControlProps } from './carousel-control.js';
 export { CarouselIndicators, CarouselIndicatorsProps } from './carousel-indicators.js';
+export { CarouselSlide, CarouselSlideProps } from './carousel-slide.js';
 export { CarouselControl } from './use-carousel.js';
 import '@yamada-ui/core';
 import '@yamada-ui/button';

package/dist/index.js

@@ -41,7 +41,6 @@ module.exports = __toCommonJS(src_exports);
 
 // src/carousel.tsx
 var import_core5 = require("@yamada-ui/core");
-var import_use_token = require("@yamada-ui/use-token");
 var import_use_value = require("@yamada-ui/use-value");
 var import_utils5 = require("@yamada-ui/utils");
 var import_react3 = require("react");
@@ -63,51 +62,54 @@ var [CarouselProvider, useCarouselContext] = (0, import_utils.createContext)({
   errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in "<Carousel />"`
 });
 var useCarousel = ({
-  index,
-  defaultIndex = 0,
-  onChange,
   align = "center",
-  orientation = "horizontal",
   autoplay = false,
-  stopMouseEnterAutoplay = true,
-  loop = true,
-  duration = 25,
+  children,
+  containScroll = false,
+  controlRef,
+  defaultIndex = 0,
   delay = 4e3,
-  slidesToScroll = 1,
-  draggable = true,
   dragFree = false,
+  draggable = true,
+  duration = 25,
+  includeGapInSize = true,
+  index,
   inViewThreshold = 0,
+  loop = true,
+  orientation = "horizontal",
   skipSnaps = false,
-  containScroll = false,
   slideSize = "100%",
-  includeGapInSize = true,
-  onScrollProgress,
+  slidesToScroll = 1,
+  stopMouseEnterAutoplay = true,
   watchDrag = draggable,
   watchResize = true,
   watchSlides = true,
-  controlRef,
-  children,
+  onChange,
+  onScrollProgress,
   ...rest
 }) => {
-  const [{ gap = "fallback(4, 1rem)", ...containerProps }, slidesProps] = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
+  const [
+    { gap = "fallback(4, 1rem)", ...containerProps },
+    { vars, ...slidesProps }
+  ] = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
   const [selectedIndex, setSelectedIndex] = (0, import_use_controllable_state.useControllableState)({
-    value: index,
     defaultValue: defaultIndex,
+    value: index,
     onChange
   });
   const isVertical = orientation === "vertical";
   const [carouselRef, carousel] = (0, import_embla_carousel_react.default)(
     {
-      axis: isVertical ? "y" : "x",
-      startIndex: defaultIndex,
-      loop,
       align,
-      slidesToScroll,
-      duration,
+      axis: isVertical ? "y" : "x",
+      containScroll,
       dragFree,
+      duration,
       inViewThreshold,
+      loop,
       skipSnaps,
-      containScroll,
+      slidesToScroll,
+      startIndex: defaultIndex,
       watchDrag,
       watchResize,
       watchSlides
@@ -192,11 +194,20 @@ var useCarousel = ({
       };
     }
   }, [carousel, onScroll]);
+  (0, import_utils.useUpdateEffect)(() => {
+    if (!carousel) return;
+    if (index === void 0) return;
+    carousel.scrollTo(index);
+  }, [index]);
   const getContainerProps = (0, import_react.useCallback)(
     (props = {}, ref = null) => ({
       ...containerProps,
       ...props,
       ref,
+      vars: (0, import_core.mergeVars)(vars, [
+        { name: "gap", token: "spaces", value: gap },
+        { name: "slideSize", token: "sizes", value: slideSize }
+      ]),
       onMouseEnter: (0, import_utils.handlerAll)(props.onMouseEnter, () => {
         setIsMouseEnter(true);
       }),
@@ -204,7 +215,7 @@ var useCarousel = ({
         setIsMouseEnter(false);
       })
     }),
-    [containerProps]
+    [containerProps, gap, slideSize, vars]
   );
   const getSlidesProps = (0, import_react.useCallback)(
     (props = {}) => ({
@@ -217,20 +228,18 @@ var useCarousel = ({
   return {
     carousel,
     children,
+    includeGapInSize,
     indexes,
-    selectedIndex,
     orientation,
-    slideSize,
-    gap,
+    selectedIndex,
     slidesToScroll,
-    includeGapInSize,
     getContainerProps,
     getSlidesProps
   };
 };
 var useCarouselSlide = ({ index }) => {
   const { selectedIndex, slidesToScroll } = useCarouselContext();
-  index = Math.floor((index != null ? index : 0) / (slidesToScroll != null ? slidesToScroll : 1));
+  index = Math.floor((index != null ? index : 0) / slidesToScroll);
   const isSelected = index === selectedIndex;
   const getSlideProps = (0, import_react.useCallback)(
     (props = {}) => ({
@@ -270,7 +279,7 @@ var useCarouselControl = ({
   return { getControlProps };
 };
 var useCarouselIndicators = () => {
-  const { selectedIndex, carousel, indexes } = useCarouselContext();
+  const { carousel, indexes, selectedIndex } = useCarouselContext();
   const onClick = (0, import_react.useCallback)(
     (ev, index) => {
       if (!carousel) return;
@@ -305,7 +314,6 @@ var CarouselControlPrev = (0, import_core2.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       CarouselControl,
       {
-        operation: "prev",
         className: (0, import_utils2.cx)("ui-carousel__control--prev", className),
         "aria-label": "Go to previous slide",
         icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -317,6 +325,7 @@ var CarouselControlPrev = (0, import_core2.forwardRef)(
             }
           }
         ),
+        operation: "prev",
         ...getControlProps(rest, ref)
       }
     );
@@ -331,7 +340,6 @@ var CarouselControlNext = (0, import_core2.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       CarouselControl,
       {
-        operation: "next",
         className: (0, import_utils2.cx)("ui-carousel__control--next", className),
         "aria-label": "Go to next slide",
         icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -343,6 +351,7 @@ var CarouselControlNext = (0, import_core2.forwardRef)(
             }
           }
         ),
+        operation: "next",
         ...getControlProps(rest, ref)
       }
     );
@@ -380,13 +389,13 @@ var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var CarouselIndicators = (0, import_core3.forwardRef)(
   ({ className, component, ...rest }, ref) => {
-    const { selectedIndex, orientation, styles } = useCarouselContext();
+    const { orientation, selectedIndex, styles } = useCarouselContext();
     const { indexes, getIndicatorProps } = useCarouselIndicators();
     const css = {
-      position: "absolute",
-      zIndex: "fallback(kurillin, 9)",
       display: "flex",
       justifyContent: "center",
+      position: "absolute",
+      zIndex: "fallback(kurillin, 9)",
       ...styles.indicators,
       ...orientation === "vertical" ? { flexDirection: "column" } : { flexDirection: "row" }
     };
@@ -428,8 +437,8 @@ var CarouselIndicator = ({
     import_core3.ui.button,
     {
       type: "button",
-      tabIndex: -1,
       className: (0, import_utils3.cx)("ui-carousel__indicators__indicator", className),
+      tabIndex: -1,
       __css: css,
       ...rest
     }
@@ -444,13 +453,13 @@ var import_utils4 = require("@yamada-ui/utils");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var CarouselSlide = (0, import_core4.forwardRef)(
   ({ className, size, ...rest }, ref) => {
-    const { slideSize, includeGapInSize, orientation, gap } = useCarouselContext();
+    const { includeGapInSize, orientation } = useCarouselContext();
     const { getSlideProps } = useCarouselSlide(rest);
-    size != null ? size : size = slideSize;
+    size != null ? size : size = "$slideSize";
     const css = {
-      position: "relative",
       flex: `0 0 ${size}`,
-      ...includeGapInSize ? { [orientation === "vertical" ? "pb" : "pr"]: gap } : { [orientation === "vertical" ? "mb" : "mr"]: gap }
+      position: "relative",
+      ...includeGapInSize ? { [orientation === "vertical" ? "pb" : "pr"]: "$gap" } : { [orientation === "vertical" ? "mb" : "mr"]: "$gap" }
     };
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_core4.ui.div,
@@ -472,8 +481,7 @@ var CarouselSlideInner = (0, import_core4.forwardRef)(
       {
         ref,
         className: "ui-carousel__slide__inner",
-        w: "100%",
-        h: "100%",
+        boxSize: "100%",
         ...rest
       }
     );
@@ -486,7 +494,6 @@ CarouselSlideInner.__ui__ = "CarouselSlideInner";
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var Carousel = (0, import_core5.forwardRef)(
   ({ h, height, minH, minHeight, ...props }, ref) => {
-    var _a, _b;
     const orientation = (0, import_use_value.useValue)(props.orientation);
     const align = (0, import_use_value.useValue)(props.align);
     const autoplay = (0, import_use_value.useValue)(props.autoplay);
@@ -501,43 +508,37 @@ var Carousel = (0, import_core5.forwardRef)(
     const skipSnaps = (0, import_use_value.useValue)(props.skipSnaps);
     const containScroll = (0, import_use_value.useValue)(props.containScroll);
     const includeGapInSize = (0, import_use_value.useValue)(props.includeGapInSize);
-    const _gap = (0, import_use_value.useValue)(props.gap);
-    const gap = (_a = (0, import_use_token.useToken)("spaces", _gap)) != null ? _a : _gap;
-    const _slideSize = (0, import_use_value.useValue)(props.slideSize);
-    const slideSize = (_b = (0, import_use_token.useToken)("sizes", _slideSize)) != null ? _b : _slideSize;
     const [styles, mergedProps] = (0, import_core5.useComponentMultiStyle)("Carousel", {
       ...props,
-      orientation,
       align,
       autoplay,
-      stopMouseEnterAutoplay,
-      loop,
-      duration,
+      containScroll,
       delay,
-      slidesToScroll,
-      draggable,
       dragFree,
+      draggable,
+      duration,
+      includeGapInSize,
       inViewThreshold,
+      loop,
+      orientation,
       skipSnaps,
-      containScroll,
-      includeGapInSize,
-      gap,
-      slideSize
+      slidesToScroll,
+      stopMouseEnterAutoplay
     });
     const {
       className,
-      innerProps,
       withControls = true,
-      controlProps,
-      controlPrevProps,
-      controlNextProps,
       withIndicators = true,
+      controlNextProps,
+      controlPrevProps,
+      controlProps,
       indicatorsProps,
+      innerProps,
       ...computedProps
     } = (0, import_core5.omitThemeProps)(mergedProps);
     const computedWithControls = (0, import_use_value.useValue)(withControls);
     const computedWithIndicators = (0, import_use_value.useValue)(withIndicators);
-    const { getContainerProps, getSlidesProps, children, ...rest } = useCarousel({
+    const { children, getContainerProps, getSlidesProps, ...rest } = useCarousel({
       ...computedProps
     });
     const validChildren = (0, import_utils5.getValidChildren)(children);
@@ -564,17 +565,18 @@ var Carousel = (0, import_core5.forwardRef)(
     const cloneSlideChildren = slideChildren.map(
       (child, index) => (0, import_react3.cloneElement)(child, { index })
     );
+    const css = {
+      h: "fit-content",
+      position: "relative",
+      ...styles.container
+    };
     h != null ? h : h = height;
     minH != null ? minH : minH = minHeight;
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       import_core5.ui.div,
       {
         className: (0, import_utils5.cx)("ui-carousel", className),
-        __css: {
-          position: "relative",
-          h: "fit-content",
-          ...styles.container
-        },
+        __css: css,
         ...getContainerProps({}, ref),
         children: [
           customCarouselControlPrev != null ? customCarouselControlPrev : computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselControlPrev, { ...controlProps, ...controlPrevProps }) : null,
@@ -600,20 +602,19 @@ Carousel.displayName = "Carousel";
 Carousel.__ui__ = "Carousel";
 var CarouselSlides = (0, import_core5.forwardRef)(
   ({ ...rest }, ref) => {
-    const css = { w: "100%", h: "fit-content", overflow: "hidden" };
+    const css = { h: "fit-content", overflow: "hidden", w: "100%" };
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core5.ui.div, { ref, className: "ui-carousel__sliders", __css: css, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselSlidesInner, { ...rest }) });
   }
 );
 CarouselSlides.displayName = "CarouselSlides";
 CarouselSlides.__ui__ = "CarouselSlides";
 var CarouselSlidesInner = ({ ...rest }) => {
-  const { orientation, includeGapInSize, gap, styles } = useCarouselContext();
+  const { includeGapInSize, orientation, styles } = useCarouselContext();
   const css = {
     display: "flex",
     flexDirection: orientation === "vertical" ? "column" : "row",
     ...styles.inner,
     ...includeGapInSize ? {
-      vars: [{ name: "gap", token: "spaces", value: gap }],
       [orientation === "vertical" ? "mb" : "mr"]: "calc($gap * -1)"
     } : {}
   };