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

package/dist/use-carousel.d.ts

@@ -13,46 +13,30 @@ type SlidesHandlerOptionType = EmblaOptionsType["watchSlides"];
 type CarouselControl = EmblaCarouselType;
 interface CarouselContext {
     carousel: CarouselControl | undefined;
+    includeGapInSize: boolean;
     indexes: number[];
+    orientation: "horizontal" | "vertical";
     selectedIndex: number;
-    orientation: "vertical" | "horizontal";
-    includeGapInSize: boolean;
     slidesToScroll: number;
-    slideSize: string | number;
-    gap: CSSUIProps["gap"];
     styles: {
-        [key: string]: CSSUIObject;
+        [key: string]: CSSUIObject | undefined;
     };
 }
 declare const CarouselProvider: react.Provider<CarouselContext>;
 declare const useCarouselContext: () => CarouselContext;
-interface UseCarouselProps extends Omit<HTMLUIProps, "onChange" | "draggable" | "gap"> {
-    /**
-     * The index of the carousel slide.
-     */
-    index?: number;
-    /**
-     * The initial index of the carousel slide.
-     *
-     * @default 0
-     */
-    defaultIndex?: number;
-    /**
-     * The callback invoked when carousel slide selected.
-     */
-    onChange?: (index: number) => void;
-    /**
-     * The orientation of the carousel.
-     *
-     * @default 'horizontal'
-     */
-    orientation?: "vertical" | "horizontal";
+interface UseCarouselProps extends Omit<HTMLUIProps, "draggable" | "gap" | "onChange"> {
     /**
      * The alignment of the carousel.
      *
      * @default 'center'
      */
     align?: AlignmentOptionType;
+    /**
+     * If `true`, the carousel will be autoplay.
+     *
+     * @default false
+     */
+    autoplay?: boolean;
     /**
      * Clear leading and trailing empty space that causes excessive scrolling.
      * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.
@@ -61,11 +45,21 @@ interface UseCarouselProps extends Omit<HTMLUIProps, "onChange" | "draggable" |
      */
     containScroll?: ScrollContainOptionType;
     /**
-     * The number of slides that should be scrolled with next or previous buttons.
+     * Ref of the resizable item callback.
+     */
+    controlRef?: RefObject<CarouselControl | undefined>;
+    /**
+     * The initial index of the carousel slide.
      *
-     * @default 1
+     * @default 0
      */
-    slidesToScroll?: number;
+    defaultIndex?: number;
+    /**
+     * The number for the autoplay interval of the carousel.
+     *
+     * @default 4000
+     */
+    delay?: number;
     /**
      * If `true`, momentum scrolling will be enabled.
      *
@@ -78,6 +72,30 @@ interface UseCarouselProps extends Omit<HTMLUIProps, "onChange" | "draggable" |
      * @default true
      */
     draggable?: boolean;
+    /**
+     * Set scroll duration when triggered by any of the API methods.
+     * Higher numbers enables slower scrolling.
+     * Drag interactions are not affected because duration is then determined by the drag force.
+     *
+     * @default 25
+     */
+    duration?: number;
+    /**
+     * The CSS `gap` property.
+     *
+     * @default '4'
+     */
+    gap?: CSSUIProps["gap"];
+    /**
+     * If `true`, gap will be treated as part of the carousel slide size.
+     *
+     * @default true
+     */
+    includeGapInSize?: boolean;
+    /**
+     * The index of the carousel slide.
+     */
+    index?: number;
     /**
      * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.
      *
@@ -91,6 +109,12 @@ interface UseCarouselProps extends Omit<HTMLUIProps, "onChange" | "draggable" |
      * @default true
      */
     loop?: boolean;
+    /**
+     * The orientation of the carousel.
+     *
+     * @default 'horizontal'
+     */
+    orientation?: "horizontal" | "vertical";
     /**
      * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.
      * Note that this option will be ignored if the dragFree option is set to true.
@@ -99,53 +123,23 @@ interface UseCarouselProps extends Omit<HTMLUIProps, "onChange" | "draggable" |
      */
     skipSnaps?: boolean;
     /**
-     * Set scroll duration when triggered by any of the API methods.
-     * Higher numbers enables slower scrolling.
-     * Drag interactions are not affected because duration is then determined by the drag force.
-     *
-     * @default 25
-     */
-    duration?: number;
-    /**
-     * The number for the autoplay interval of the carousel.
+     * The carousel slide width.
      *
-     * @default 4000
+     * @default '100%'
      */
-    delay?: number;
+    slideSize?: CSSUIProps["width"];
     /**
-     * If `true`, the carousel will be autoplay.
+     * The number of slides that should be scrolled with next or previous buttons.
      *
-     * @default false
+     * @default 1
      */
-    autoplay?: boolean;
+    slidesToScroll?: number;
     /**
      * If `true`, autoplay will pause when the mouse entries over.
      *
      * @default true
      */
     stopMouseEnterAutoplay?: boolean;
-    /**
-     * If `true`, gap will be treated as part of the carousel slide size.
-     *
-     * @default true
-     */
-    includeGapInSize?: boolean;
-    /**
-     * The CSS `gap` property.
-     *
-     * @default '4'
-     */
-    gap?: CSSUIProps["gap"];
-    /**
-     * The carousel slide width.
-     *
-     * @default '100%'
-     */
-    slideSize?: string | number;
-    /**
-     * A callback that return the current scroll amount when the carousel is scrolled.
-     */
-    onScrollProgress?: (progress: number) => void;
     /**
      * Enables for scrolling the carousel with mouse and touch interactions.
      * Set this to `false` to disable drag events or pass a custom callback to add your own drag logic.
@@ -168,44 +162,22 @@ interface UseCarouselProps extends Omit<HTMLUIProps, "onChange" | "draggable" |
      */
     watchSlides?: SlidesHandlerOptionType;
     /**
-     * Ref of the resizable item callback.
+     * The callback invoked when carousel slide selected.
      */
-    controlRef?: RefObject<CarouselControl | undefined>;
+    onChange?: (index: number) => void;
+    /**
+     * A callback that return the current scroll amount when the carousel is scrolled.
+     */
+    onScrollProgress?: (progress: number) => void;
 }
-declare const useCarousel: ({ index, defaultIndex, onChange, align, orientation, autoplay, stopMouseEnterAutoplay, loop, duration, delay, slidesToScroll, draggable, dragFree, inViewThreshold, skipSnaps, containScroll, slideSize, includeGapInSize, onScrollProgress, watchDrag, watchResize, watchSlides, controlRef, children, ...rest }: UseCarouselProps) => {
+declare const useCarousel: ({ align, autoplay, children, containScroll, controlRef, defaultIndex, delay, dragFree, draggable, duration, includeGapInSize, index, inViewThreshold, loop, orientation, skipSnaps, slideSize, slidesToScroll, stopMouseEnterAutoplay, watchDrag, watchResize, watchSlides, onChange, onScrollProgress, ...rest }: UseCarouselProps) => {
     carousel: EmblaCarouselType | undefined;
     children: react.ReactNode;
+    includeGapInSize: boolean;
     indexes: number[];
+    orientation: "horizontal" | "vertical";
     selectedIndex: number;
-    orientation: "vertical" | "horizontal";
-    slideSize: string | number;
-    gap: string | number | (string & {}) | {
-        [x: string & {}]: number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | [number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl", number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl"] | undefined;
-        base?: number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | [number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl", number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl"] | undefined;
-        sm?: number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | [number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl", number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl"] | undefined;
-        md?: number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | [number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl", number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl"] | undefined;
-        lg?: number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | [number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl", number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl"] | undefined;
-        xl?: number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | [number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl", number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl"] | undefined;
-        "2xl"?: number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | [number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl", number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl"] | undefined;
-    } | [number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | {
-        [x: string & {}]: number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
-        base?: number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
-        sm?: number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
-        md?: number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
-        lg?: number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
-        xl?: number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
-        "2xl"?: number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
-    }, number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | {
-        [x: string & {}]: number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
-        base?: number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
-        sm?: number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
-        md?: number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
-        lg?: number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
-        xl?: number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
-        "2xl"?: number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "normal" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
-    }];
     slidesToScroll: number;
-    includeGapInSize: boolean;
     getContainerProps: PropGetter<"div", undefined>;
     getSlidesProps: PropGetter<"div", undefined>;
 };
@@ -218,7 +190,7 @@ declare const useCarouselSlide: ({ index }: UseCarouselSlideProps) => {
 };
 type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>;
 interface UseCarouselControlProps extends IconButtonProps {
-    operation: "prev" | "next";
+    operation: "next" | "prev";
 }
 declare const useCarouselControl: ({ operation, ...rest }: UseCarouselControlProps) => {
     getControlProps: PropGetter<"button", undefined>;
@@ -226,9 +198,9 @@ declare const useCarouselControl: ({ operation, ...rest }: UseCarouselControlPro
 type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>;
 declare const useCarouselIndicators: () => {
     indexes: number[];
-    getIndicatorProps: RequiredPropGetter<HTMLProps<"button"> & {
+    getIndicatorProps: RequiredPropGetter<{
         index: number;
-    }, HTMLProps<"button">>;
+    } & HTMLProps<"button">, HTMLProps<"button">>;
 };
 type UseCarouselIndicatorsReturn = ReturnType<typeof useCarouselIndicators>;
 

package/dist/use-carousel.js

@@ -49,51 +49,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
@@ -178,11 +181,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);
       }),
@@ -190,7 +202,7 @@ var useCarousel = ({
         setIsMouseEnter(false);
       })
     }),
-    [containerProps]
+    [containerProps, gap, slideSize, vars]
   );
   const getSlidesProps = (0, import_react.useCallback)(
     (props = {}) => ({
@@ -203,20 +215,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 = {}) => ({
@@ -256,7 +266,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;