@spark-ui/components 13.1.4 → 13.2.0

package/dist/carousel/index.js

@@ -1,1882 +1,2 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/carousel/index.ts
-var carousel_exports = {};
-__export(carousel_exports, {
-  Carousel: () => Carousel2
-});
-module.exports = __toCommonJS(carousel_exports);
-
-// src/carousel/Carousel.tsx
-var import_class_variance_authority = require("class-variance-authority");
-var import_react8 = require("react");
-
-// src/carousel/useCarousel.ts
-var import_react7 = require("react");
-
-// src/carousel/useCarouselVisibility.ts
-var import_react = require("react");
-function useCarouselVisibility(carouselRef) {
-  const slideVisibilityMap = (0, import_react.useRef)(/* @__PURE__ */ new Map());
-  const visibilityObserverRef = (0, import_react.useRef)(null);
-  const visibilityCallbacksRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
-  const createObserverCallback = (0, import_react.useCallback)(() => {
-    return (entries) => {
-      entries.forEach((entry) => {
-        const isVisible = entry.isIntersecting;
-        const element = entry.target;
-        slideVisibilityMap.current.set(element, isVisible);
-        const callback = visibilityCallbacksRef.current.get(element);
-        if (callback) {
-          callback(isVisible);
-        }
-      });
-    };
-  }, []);
-  const getOrCreateObserver = (0, import_react.useCallback)(() => {
-    if (visibilityObserverRef.current) {
-      return visibilityObserverRef.current;
-    }
-    const container = carouselRef.current;
-    if (!container) return null;
-    const observer = new IntersectionObserver(createObserverCallback(), {
-      root: container,
-      threshold: 0.2
-    });
-    visibilityObserverRef.current = observer;
-    return observer;
-  }, [carouselRef, createObserverCallback]);
-  (0, import_react.useEffect)(() => {
-    const observer = getOrCreateObserver();
-    const visibilityMap = slideVisibilityMap.current;
-    const callbacksMap = visibilityCallbacksRef.current;
-    return () => {
-      if (observer) {
-        observer.disconnect();
-        visibilityMap.clear();
-        callbacksMap.clear();
-        visibilityObserverRef.current = null;
-      }
-    };
-  }, [getOrCreateObserver]);
-  const registerSlide = (0, import_react.useCallback)(
-    (element, callback) => {
-      if (!element) return;
-      const observer = getOrCreateObserver();
-      if (!observer) {
-        setTimeout(() => registerSlide(element, callback), 0);
-        return;
-      }
-      const initialVisible = slideVisibilityMap.current.get(element) ?? true;
-      slideVisibilityMap.current.set(element, initialVisible);
-      visibilityCallbacksRef.current.set(element, callback);
-      observer.observe(element);
-      callback(initialVisible);
-    },
-    [getOrCreateObserver]
-  );
-  const unregisterSlide = (0, import_react.useCallback)((element) => {
-    if (!element) return;
-    const observer = visibilityObserverRef.current;
-    if (observer) {
-      observer.unobserve(element);
-    }
-    slideVisibilityMap.current.delete(element);
-    visibilityCallbacksRef.current.delete(element);
-  }, []);
-  const isSlideVisible = (0, import_react.useCallback)((element) => {
-    if (!element) return true;
-    return slideVisibilityMap.current.get(element) ?? true;
-  }, []);
-  return {
-    registerSlide,
-    unregisterSlide,
-    isSlideVisible
-  };
-}
-
-// src/carousel/useEvent.ts
-var import_react2 = require("react");
-function useEvent(callback) {
-  const ref = (0, import_react2.useRef)(() => {
-    throw new Error("Cannot call an event handler while rendering.");
-  });
-  (0, import_react2.useLayoutEffect)(() => {
-    ref.current = callback;
-  });
-  return (0, import_react2.useCallback)((...args) => ref.current?.(...args), []);
-}
-
-// src/carousel/useIsMounted.ts
-var import_react3 = require("react");
-var useIsMounted = () => {
-  const isMounted = (0, import_react3.useRef)(false);
-  (0, import_react3.useEffect)(() => {
-    isMounted.current = true;
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-  return isMounted;
-};
-
-// src/carousel/useScrollEnd.ts
-var import_react4 = require("react");
-function useScrollEnd(scrollRef, callback) {
-  const scrollLeft = (0, import_react4.useRef)(0);
-  const safariTimeout = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
-    const element = scrollRef.current;
-    if (!element) return;
-    const supportsScrollend = "onscrollend" in window;
-    const handleScrollEnd = () => {
-      callback();
-    };
-    const handleSafariScroll = () => {
-      if (safariTimeout.current) {
-        clearTimeout(safariTimeout.current);
-      }
-      if (scrollRef.current) {
-        scrollLeft.current = scrollRef.current.scrollLeft;
-        safariTimeout.current = setTimeout(() => {
-          if (scrollRef.current) {
-            handleScrollEnd();
-          }
-        }, 150);
-      }
-    };
-    if (supportsScrollend) {
-      element.addEventListener("scrollend", handleScrollEnd);
-    } else {
-      element.addEventListener("scroll", handleSafariScroll);
-    }
-    return () => {
-      if (safariTimeout.current) {
-        clearTimeout(safariTimeout.current);
-      }
-      if (supportsScrollend) {
-        element.removeEventListener("scrollend", handleScrollEnd);
-      } else {
-        element.removeEventListener("scroll", handleSafariScroll);
-      }
-    };
-  }, [callback, scrollRef]);
-}
-
-// src/carousel/useSnapPoints.ts
-var import_react6 = require("react");
-
-// src/carousel/useResizeObserver.ts
-var import_react5 = require("react");
-function useResizeObserver(ref, callback) {
-  (0, import_react5.useLayoutEffect)(() => {
-    const element = ref.current;
-    if (!element) return;
-    const observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        callback(entry.contentRect.width);
-      }
-    });
-    observer.observe(element);
-    return () => observer.disconnect();
-  }, [ref, callback]);
-}
-
-// src/carousel/utils.ts
-function getSnapIndices({
-  totalSlides,
-  slidesPerMove,
-  slidesPerPage
-}) {
-  const slideBy = slidesPerMove === "auto" ? slidesPerPage : slidesPerMove;
-  const snapPoints = [];
-  const lastSnapIndex = Math.floor((totalSlides - slidesPerPage) / slideBy) * slideBy;
-  for (let i = 0; i <= lastSnapIndex; i += slideBy) {
-    snapPoints.push(i);
-  }
-  if (snapPoints[snapPoints.length - 1] !== totalSlides - slidesPerPage) {
-    snapPoints.push(totalSlides - slidesPerPage);
-  }
-  return snapPoints;
-}
-function getSlideElements(container) {
-  return container ? Array.from(container.querySelectorAll('[data-part="item"]')) : [];
-}
-function isSnapPoint(slideIndex, {
-  container,
-  slidesPerMove,
-  slidesPerPage
-}) {
-  return getSnapIndices({
-    totalSlides: getSlideElements(container).length,
-    slidesPerPage,
-    slidesPerMove
-  }).includes(slideIndex);
-}
-function getSnapPositions({
-  container,
-  slidesPerMove,
-  slidesPerPage
-}) {
-  if (!container) return [];
-  return getSlideElements(container).filter((_, index) => {
-    return isSnapPoint(index, {
-      slidesPerMove,
-      slidesPerPage,
-      container
-    });
-  }).map((slide) => slide.offsetLeft);
-}
-function computeDotState({
-  dotIndex,
-  pageState,
-  totalPages,
-  maxDots = 5
-}) {
-  if (totalPages <= maxDots) {
-    return dotIndex === pageState ? "active" : "idle";
-  }
-  if (pageState <= Math.floor(maxDots / 2)) {
-    if (dotIndex > maxDots - 1) return "hidden";
-    if (dotIndex === pageState) return "active";
-    if (dotIndex === maxDots - 1) return "edge";
-    return "idle";
-  }
-  if (pageState >= totalPages - Math.ceil(maxDots / 2)) {
-    const startIndex2 = totalPages - maxDots;
-    if (dotIndex < startIndex2) return "hidden";
-    if (dotIndex === pageState) return "active";
-    if (dotIndex === startIndex2) return "edge";
-    return "idle";
-  }
-  const startIndex = pageState - Math.floor(maxDots / 2);
-  const endIndex = pageState + Math.floor(maxDots / 2);
-  if (dotIndex < startIndex || dotIndex > endIndex) return "hidden";
-  if (dotIndex === pageState) return "active";
-  if (dotIndex === startIndex || dotIndex === endIndex) return "edge";
-  return "idle";
-}
-
-// src/carousel/useSnapPoints.ts
-function useSnapPoints(initialSnapPoints = [], {
-  carouselRef,
-  slidesPerMove,
-  slidesPerPage
-}) {
-  const [pageSnapPoints, setPageSnapPoints] = (0, import_react6.useState)(initialSnapPoints);
-  const stableSnapPoints = (0, import_react6.useMemo)(() => pageSnapPoints, [pageSnapPoints]);
-  useResizeObserver(carouselRef, () => {
-    const newSnapPoints = getSnapPositions({
-      slidesPerMove,
-      slidesPerPage,
-      container: carouselRef.current
-    });
-    if (JSON.stringify(pageSnapPoints) !== JSON.stringify(newSnapPoints)) {
-      setPageSnapPoints(newSnapPoints);
-    }
-  });
-  return [stableSnapPoints, setPageSnapPoints];
-}
-
-// src/carousel/useCarousel.ts
-var DATA_SCOPE = "carousel";
-var DIRECTION = "ltr";
-var useCarousel = ({
-  defaultPage,
-  gap = 16,
-  snapType = "mandatory",
-  snapStop = "always",
-  scrollPadding = 0,
-  slidesPerPage = 1,
-  slidesPerMove = "auto",
-  scrollBehavior = "smooth",
-  loop = false,
-  pagePickerInset = false,
-  maxDots = 5,
-  // state control
-  page: controlledPage,
-  onPageChange: onPageChangeProp
-}) => {
-  const carouselId = (0, import_react7.useId)();
-  const [pageState, setPageState] = (0, import_react7.useState)(defaultPage || controlledPage || 0);
-  const carouselRef = (0, import_react7.useRef)(null);
-  const pageIndicatorsRefs = (0, import_react7.useRef)([]);
-  const isMountedRef = useIsMounted();
-  const isMounted = isMountedRef.current;
-  const onPageChange = useEvent(onPageChangeProp);
-  const { registerSlide, unregisterSlide, isSlideVisible } = useCarouselVisibility(carouselRef);
-  const [pageSnapPoints] = useSnapPoints([], {
-    carouselRef,
-    slidesPerMove,
-    slidesPerPage
-  });
-  const canScrollPrev = (0, import_react7.useRef)(loop || pageState > 0);
-  const canScrollNext = (0, import_react7.useRef)(loop || pageState < pageSnapPoints.length - 1);
-  canScrollPrev.current = loop || pageState > 0;
-  canScrollNext.current = loop || pageState < pageSnapPoints.length - 1;
-  const handlePageChange = (0, import_react7.useCallback)(
-    (page) => {
-      if (page !== pageState) {
-        setPageState(page);
-        onPageChange?.(page);
-      }
-    },
-    [onPageChange, pageState]
-  );
-  const scrollTo = (0, import_react7.useCallback)(
-    (page, behavior) => {
-      if (carouselRef.current) {
-        carouselRef.current.scrollTo({
-          left: pageSnapPoints[page],
-          behavior: behavior === "instant" ? "auto" : "smooth"
-        });
-        handlePageChange(page);
-      }
-    },
-    [handlePageChange, pageSnapPoints]
-  );
-  const scrollPrev = (0, import_react7.useCallback)(
-    (cb) => {
-      if (canScrollPrev) {
-        const targetPage = loop && pageState === 0 ? pageSnapPoints.length - 1 : Math.max(pageState - 1, 0);
-        scrollTo(targetPage, scrollBehavior);
-        cb?.(targetPage);
-      }
-    },
-    [loop, pageSnapPoints, pageState, scrollBehavior, scrollTo]
-  );
-  const scrollNext = (0, import_react7.useCallback)(
-    (cb) => {
-      if (canScrollNext) {
-        const targetPage = loop && pageState === pageSnapPoints.length - 1 ? 0 : Math.min(pageState + 1, pageSnapPoints.length - 1);
-        scrollTo(targetPage, scrollBehavior);
-        cb?.(targetPage);
-      }
-    },
-    [loop, pageSnapPoints, pageState, scrollBehavior, scrollTo]
-  );
-  (0, import_react7.useEffect)(() => {
-    if (controlledPage != null) {
-      scrollTo(controlledPage, scrollBehavior);
-    }
-  }, [controlledPage, scrollBehavior, scrollTo]);
-  (0, import_react7.useLayoutEffect)(() => {
-    if (defaultPage != null && !isMounted && carouselRef.current) {
-      const snapPositions = getSnapPositions({
-        container: carouselRef.current,
-        slidesPerMove,
-        slidesPerPage
-      });
-      carouselRef.current.scrollTo({
-        left: snapPositions[defaultPage],
-        behavior: "instant"
-      });
-    }
-  }, [defaultPage, isMounted, slidesPerMove, slidesPerPage]);
-  const syncPageStateWithScrollPosition = (0, import_react7.useCallback)(() => {
-    if (!carouselRef.current || pageSnapPoints.length === 0) return;
-    const { scrollLeft } = carouselRef.current;
-    const distances = pageSnapPoints.map((pagePosition) => Math.abs(scrollLeft - pagePosition));
-    const pageInViewport = distances.indexOf(Math.min(...distances));
-    if (pageInViewport !== -1) {
-      handlePageChange(pageInViewport);
-    }
-  }, [pageSnapPoints, handlePageChange]);
-  useScrollEnd(carouselRef, syncPageStateWithScrollPosition);
-  const contextValue = {
-    ref: carouselRef,
-    pageIndicatorsRefs,
-    // props
-    gap,
-    snapType,
-    snapStop,
-    scrollPadding,
-    slidesPerPage,
-    slidesPerMove,
-    scrollBehavior,
-    loop,
-    pagePickerInset,
-    maxDots,
-    // computed state
-    page: pageState,
-    pageSnapPoints,
-    canScrollNext: canScrollNext.current,
-    canScrollPrev: canScrollPrev.current,
-    scrollTo,
-    scrollPrev,
-    scrollNext,
-    // visibility management
-    registerSlide,
-    unregisterSlide,
-    isSlideVisible,
-    // anatomy
-    getRootProps: () => ({
-      id: `carousel::${carouselId}:`,
-      role: "region",
-      "aria-roledescription": "carousel",
-      "data-scope": DATA_SCOPE,
-      "data-part": "root",
-      "data-orientation": "horizontal",
-      dir: DIRECTION,
-      style: {
-        "--slides-per-page": slidesPerPage,
-        "--slide-spacing": `${gap}px`,
-        "--slide-item-size": "calc(100% / var(--slides-per-page) - var(--slide-spacing) * (var(--slides-per-page) - 1) / var(--slides-per-page))"
-      }
-    }),
-    getControlProps: () => ({
-      "data-scope": DATA_SCOPE,
-      "data-part": "control",
-      "data-orientation": "horizontal"
-    }),
-    getPrevTriggerProps: () => ({
-      id: `carousel::${carouselId}::prev-trigger`,
-      "aria-controls": `carousel::${carouselId}::item-group`,
-      "data-scope": DATA_SCOPE,
-      "data-part": "prev-trigger",
-      "data-orientation": "horizontal",
-      type: "button",
-      dir: DIRECTION,
-      disabled: !canScrollPrev.current,
-      onClick: () => scrollPrev()
-    }),
-    getNextTriggerProps: () => ({
-      id: `carousel::${carouselId}::next-trigger`,
-      "aria-controls": `carousel::${carouselId}::item-group`,
-      "data-scope": DATA_SCOPE,
-      "data-part": "next-trigger",
-      "data-orientation": "horizontal",
-      type: "button",
-      dir: DIRECTION,
-      disabled: !canScrollNext.current,
-      onClick: () => scrollNext()
-    }),
-    getSlidesContainerProps: () => ({
-      id: `carousel::${carouselId}::item-group`,
-      /**
-       * The carousel pattern was originally designed for a single slide.
-       * When there is more than one slide, the aria-live region is set to off to avoid announcing the whole list of slides.
-       * This is not ideal but we keep it for backwards compatibility.
-       *
-       * @see https://www.w3.org/WAI/ARIA/apg/patterns/carousel/#wai-aria-attributes
-       */
-      "aria-live": slidesPerPage > 1 ? "off" : "polite",
-      "data-scope": DATA_SCOPE,
-      "data-part": "item-group",
-      "data-orientation": "horizontal",
-      dir: DIRECTION,
-      tabIndex: 0,
-      style: {
-        display: "grid",
-        gap: "var(--slide-spacing)",
-        scrollSnapType: `x ${snapType}`,
-        gridAutoFlow: "column",
-        scrollbarWidth: "none",
-        gridAutoColumns: "var(--slide-item-size)",
-        overflowX: "auto"
-      },
-      ref: carouselRef
-    }),
-    getSlideProps: ({ index }) => {
-      const isStopPoint = isSnapPoint(index, {
-        container: carouselRef.current,
-        slidesPerMove,
-        slidesPerPage
-      });
-      return {
-        id: `carousel::${carouselId}::item:${index}`,
-        role: "group",
-        "aria-roledescription": "slide",
-        "data-scope": DATA_SCOPE,
-        "data-part": "item",
-        "data-index": index,
-        "data-orientation": "horizontal",
-        dir: DIRECTION,
-        style: {
-          ...isStopPoint && {
-            scrollSnapAlign: "start",
-            scrollSnapStop: snapStop
-          }
-        }
-      };
-    },
-    getIndicatorGroupProps: () => ({
-      role: "radiogroup",
-      id: `carousel::${carouselId}::indicator-group`,
-      "data-scope": DATA_SCOPE,
-      "data-part": "indicator-group",
-      "data-orientation": "horizontal",
-      dir: DIRECTION
-    }),
-    getIndicatorProps: ({ index }) => {
-      const dotState = computeDotState({
-        dotIndex: index,
-        pageState,
-        totalPages: pageSnapPoints.length,
-        maxDots
-      });
-      return {
-        role: "radio",
-        id: `carousel::${carouselId}::indicator:${index}`,
-        "aria-checked": index === pageState,
-        "data-scope": DATA_SCOPE,
-        "data-part": "indicator",
-        "data-orientation": "horizontal",
-        "data-index": index,
-        "data-state": dotState,
-        tabIndex: index === pageState ? 0 : -1,
-        onClick: () => {
-          scrollTo(index, scrollBehavior);
-        },
-        onKeyDown: (event) => {
-          const focusActiveIndicator = (page) => {
-            pageIndicatorsRefs.current[page]?.focus();
-          };
-          if (event.key === "ArrowRight" && canScrollNext) {
-            scrollNext(focusActiveIndicator);
-          } else if (event.key === "ArrowLeft" && canScrollPrev) {
-            scrollPrev(focusActiveIndicator);
-          }
-        }
-      };
-    }
-  };
-  return contextValue;
-};
-
-// src/carousel/Carousel.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var CarouselContext = (0, import_react8.createContext)(null);
-var Carousel = ({
-  className,
-  snapType = "mandatory",
-  snapStop = "always",
-  scrollBehavior = "smooth",
-  slidesPerMove = "auto",
-  pagePickerInset = false,
-  slidesPerPage = 1,
-  loop = false,
-  children,
-  gap = 16,
-  defaultPage,
-  page,
-  onPageChange,
-  maxDots = 5,
-  ...props
-}) => {
-  const carouselApi = useCarousel({
-    defaultPage,
-    slidesPerPage,
-    slidesPerMove,
-    loop,
-    gap,
-    scrollBehavior,
-    snapStop,
-    snapType,
-    page,
-    pagePickerInset,
-    onPageChange,
-    maxDots
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    CarouselContext.Provider,
-    {
-      value: {
-        ...carouselApi,
-        scrollBehavior
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          "data-spark-component": "carousel",
-          className: (0, import_class_variance_authority.cx)("gap-lg relative box-border flex flex-col", className),
-          ...carouselApi.getRootProps(),
-          ...props,
-          children
-        }
-      )
-    }
-  );
-};
-Carousel.displayName = "Carousel";
-var useCarouselContext = () => {
-  const context = (0, import_react8.useContext)(CarouselContext);
-  if (!context) {
-    throw Error("useCarouselContext must be used within a Carousel provider");
-  }
-  return context;
-};
-
-// src/carousel/CarouselControls.tsx
-var import_class_variance_authority2 = require("class-variance-authority");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var CarouselControls = ({ children, className, ...props }) => {
-  const ctx = useCarouselContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "div",
-    {
-      "data-spark-component": "carousel-controls",
-      className: (0, import_class_variance_authority2.cx)(
-        "default:px-lg pointer-events-none absolute inset-0 flex flex-row items-center justify-between",
-        className
-      ),
-      ...ctx.getControlProps(),
-      ...props,
-      children
-    }
-  );
-};
-CarouselControls.displayName = "Carousel.Controls";
-
-// src/carousel/CarouselNextButton.tsx
-var import_ArrowVerticalRight = require("@spark-ui/icons/ArrowVerticalRight");
-
-// src/icon/Icon.tsx
-var import_react10 = require("react");
-
-// src/slot/Slot.tsx
-var import_radix_ui = require("radix-ui");
-var import_react9 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Slottable = import_radix_ui.Slot.Slottable;
-var Slot = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
-};
-var wrapPolymorphicSlot = (asChild, children, callback) => {
-  if (!asChild) return callback(children);
-  return (0, import_react9.isValidElement)(children) ? (0, import_react9.cloneElement)(
-    children,
-    void 0,
-    callback(children.props.children)
-  ) : null;
-};
-
-// src/visually-hidden/VisuallyHidden.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
-  const Component = asChild ? Slot : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    Component,
-    {
-      ...props,
-      ref,
-      style: {
-        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
-        position: "absolute",
-        border: 0,
-        width: 1,
-        height: 1,
-        padding: 0,
-        margin: -1,
-        overflow: "hidden",
-        clip: "rect(0, 0, 0, 0)",
-        whiteSpace: "nowrap",
-        wordWrap: "normal",
-        ...props.style
-      }
-    }
-  );
-};
-VisuallyHidden.displayName = "VisuallyHidden";
-
-// src/icon/Icon.styles.tsx
-var import_internal_utils = require("@spark-ui/internal-utils");
-var import_class_variance_authority3 = require("class-variance-authority");
-var iconStyles = (0, import_class_variance_authority3.cva)(["fill-current shrink-0"], {
-  variants: {
-    /**
-     * Color scheme of the icon.
-     */
-    intent: (0, import_internal_utils.makeVariants)({
-      current: ["text-current"],
-      main: ["text-main"],
-      support: ["text-support"],
-      accent: ["text-accent"],
-      basic: ["text-basic"],
-      success: ["text-success"],
-      alert: ["text-alert"],
-      error: ["text-error"],
-      info: ["text-info"],
-      neutral: ["text-neutral"]
-    }),
-    /**
-     * Sets the size of the icon.
-     */
-    size: (0, import_internal_utils.makeVariants)({
-      current: ["u-current-font-size"],
-      sm: ["w-sz-16", "h-sz-16"],
-      md: ["w-sz-24", "h-sz-24"],
-      lg: ["w-sz-32", "h-sz-32"],
-      xl: ["w-sz-40", "h-sz-40"]
-    })
-  }
-});
-
-// src/icon/Icon.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Icon = ({
-  label,
-  className,
-  size = "current",
-  intent = "current",
-  children,
-  ...others
-}) => {
-  const child = import_react10.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    (0, import_react10.cloneElement)(child, {
-      className: iconStyles({ className, size, intent }),
-      "data-spark-component": "icon",
-      "aria-hidden": "true",
-      focusable: "false",
-      ...others
-    }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VisuallyHidden, { children: label })
-  ] });
-};
-Icon.displayName = "Icon";
-
-// src/button/Button.tsx
-var import_class_variance_authority6 = require("class-variance-authority");
-var import_react11 = require("react");
-
-// src/spinner/Spinner.styles.tsx
-var import_internal_utils2 = require("@spark-ui/internal-utils");
-var import_class_variance_authority4 = require("class-variance-authority");
-var defaultVariants = {
-  intent: "current",
-  size: "current",
-  isBackgroundVisible: false
-};
-var spinnerStyles = (0, import_class_variance_authority4.cva)(
-  ["inline-block", "border-solid", "rounded-full", "border-md", "animate-spin"],
-  {
-    variants: {
-      /**
-       * Use `size` prop to set the size of the spinner. If you want to set the full size for the spinner, don't forget to add a wrapping container with its own size.
-       */
-      size: {
-        current: ["u-current-font-size"],
-        sm: ["w-sz-20", "h-sz-20"],
-        md: ["w-sz-28", "h-sz-28"],
-        full: ["w-full", "h-full"]
-      },
-      /**
-       * Color scheme of the spinner.
-       */
-      intent: (0, import_internal_utils2.makeVariants)({
-        current: ["border-current"],
-        main: ["border-main"],
-        support: ["border-support"],
-        accent: ["border-accent"],
-        basic: ["border-basic"],
-        success: ["border-success"],
-        alert: ["border-alert"],
-        error: ["border-error"],
-        info: ["border-info"],
-        neutral: ["border-neutral"]
-      }),
-      /**
-       * Size of the button.
-       */
-      isBackgroundVisible: {
-        true: ["border-b-neutral-container", "border-l-neutral-container"],
-        false: ["border-b-transparent", "border-l-transparent"]
-      }
-    },
-    defaultVariants
-  }
-);
-
-// src/spinner/Spinner.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Spinner = ({
-  className,
-  size = "current",
-  intent = "current",
-  label,
-  isBackgroundVisible,
-  ref,
-  ...others
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "span",
-    {
-      role: "status",
-      "data-spark-component": "spinner",
-      ref,
-      className: spinnerStyles({ className, size, intent, isBackgroundVisible }),
-      ...others,
-      children: label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VisuallyHidden, { children: label })
-    }
-  );
-};
-
-// src/button/Button.styles.tsx
-var import_internal_utils8 = require("@spark-ui/internal-utils");
-var import_class_variance_authority5 = require("class-variance-authority");
-
-// src/button/variants/filled.ts
-var import_internal_utils3 = require("@spark-ui/internal-utils");
-var filledVariants = [
-  // Main
-  {
-    intent: "main",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-main",
-      "text-on-main",
-      "hover:bg-main-hovered",
-      "enabled:active:bg-main-hovered",
-      "focus-visible:bg-main-hovered"
-    ])
-  },
-  // Support
-  {
-    intent: "support",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-support",
-      "text-on-support",
-      "hover:bg-support-hovered",
-      "enabled:active:bg-support-hovered",
-      "focus-visible:bg-support-hovered"
-    ])
-  },
-  // Accent
-  {
-    intent: "accent",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-accent",
-      "text-on-accent",
-      "hover:bg-accent-hovered",
-      "enabled:active:bg-accent-hovered",
-      "focus-visible:bg-accent-hovered"
-    ])
-  },
-  // Basic
-  {
-    intent: "basic",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-basic",
-      "text-on-basic",
-      "hover:bg-basic-hovered",
-      "enabled:active:bg-basic-hovered",
-      "focus-visible:bg-basic-hovered"
-    ])
-  },
-  // Success
-  {
-    intent: "success",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-success",
-      "text-on-success",
-      "hover:bg-success-hovered",
-      "enabled:active:bg-success-hovered",
-      "focus-visible:bg-success-hovered"
-    ])
-  },
-  // Alert
-  {
-    intent: "alert",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-alert",
-      "text-on-alert",
-      "hover:bg-alert-hovered",
-      "enabled:active:bg-alert-hovered",
-      "focus-visible:bg-alert-hovered"
-    ])
-  },
-  // Danger
-  {
-    intent: "danger",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "text-on-error bg-error",
-      "hover:bg-error-hovered enabled:active:bg-error-hovered",
-      "focus-visible:bg-error-hovered"
-    ])
-  },
-  // Info
-  {
-    intent: "info",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "text-on-error bg-info",
-      "hover:bg-info-hovered enabled:active:bg-info-hovered",
-      "focus-visible:bg-info-hovered"
-    ])
-  },
-  // Neutral
-  {
-    intent: "neutral",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-neutral",
-      "text-on-neutral",
-      "hover:bg-neutral-hovered",
-      "enabled:active:bg-neutral-hovered",
-      "focus-visible:bg-neutral-hovered"
-    ])
-  },
-  // Surface
-  {
-    intent: "surface",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-surface",
-      "text-on-surface",
-      "hover:bg-surface-hovered",
-      "enabled:active:bg-surface-hovered",
-      "focus-visible:bg-surface-hovered"
-    ])
-  },
-  {
-    intent: "surfaceInverse",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-surface-inverse",
-      "text-on-surface-inverse",
-      "hover:bg-surface-inverse-hovered",
-      "enabled:active:bg-surface-inverse-hovered",
-      "focus-visible:bg-surface-inverse-hovered"
-    ])
-  }
-];
-
-// src/button/variants/ghost.ts
-var import_internal_utils4 = require("@spark-ui/internal-utils");
-var ghostVariants = [
-  {
-    intent: "main",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-main-container",
-      "hover:bg-main/dim-5",
-      "enabled:active:bg-main/dim-5",
-      "focus-visible:bg-main/dim-5"
-    ])
-  },
-  {
-    intent: "support",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-support-container",
-      "hover:bg-support/dim-5",
-      "enabled:active:bg-support/dim-5",
-      "focus-visible:bg-support/dim-5"
-    ])
-  },
-  {
-    intent: "accent",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-accent-container",
-      "hover:bg-accent/dim-5",
-      "enabled:active:bg-accent/dim-5",
-      "focus-visible:bg-accent/dim-5"
-    ])
-  },
-  {
-    intent: "basic",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-basic-container",
-      "hover:bg-basic/dim-5",
-      "enabled:active:bg-basic/dim-5",
-      "focus-visible:bg-basic/dim-5"
-    ])
-  },
-  {
-    intent: "success",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-success-container",
-      "hover:bg-success/dim-5",
-      "enabled:active:bg-success/dim-5",
-      "focus-visible:bg-success/dim-5"
-    ])
-  },
-  {
-    intent: "alert",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-alert-container",
-      "hover:bg-alert/dim-5",
-      "enabled:active:bg-alert/dim-5",
-      "focus-visible:bg-alert/dim-5"
-    ])
-  },
-  {
-    intent: "danger",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-error-container",
-      "hover:bg-error/dim-5",
-      "enabled:active:bg-error/dim-5",
-      "focus-visible:bg-error/dim-5"
-    ])
-  },
-  {
-    intent: "info",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-info-container",
-      "hover:bg-info/dim-5",
-      "enabled:active:bg-info/dim-5",
-      "focus-visible:bg-info/dim-5"
-    ])
-  },
-  {
-    intent: "neutral",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-neutral-container",
-      "hover:bg-neutral/dim-5",
-      "enabled:active:bg-neutral/dim-5",
-      "focus-visible:bg-neutral/dim-5"
-    ])
-  },
-  {
-    intent: "surface",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-surface",
-      "hover:bg-surface/dim-5",
-      "enabled:active:bg-surface/dim-5",
-      "focus-visible:bg-surface/dim-5"
-    ])
-  },
-  {
-    intent: "surfaceInverse",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-surface-inverse",
-      "hover:bg-surface-inverse/dim-5",
-      "enabled:active:bg-surface-inverse/dim-5",
-      "focus-visible:bg-surface-inverse/dim-5"
-    ])
-  }
-];
-
-// src/button/variants/outlined.ts
-var import_internal_utils5 = require("@spark-ui/internal-utils");
-var outlinedVariants = [
-  {
-    intent: "main",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-main/dim-5",
-      "enabled:active:bg-main/dim-5",
-      "focus-visible:bg-main/dim-5",
-      "text-main"
-    ])
-  },
-  {
-    intent: "support",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-support/dim-5",
-      "enabled:active:bg-support/dim-5",
-      "focus-visible:bg-support/dim-5",
-      "text-support"
-    ])
-  },
-  {
-    intent: "accent",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-accent/dim-5",
-      "enabled:active:bg-accent/dim-5",
-      "focus-visible:bg-accent/dim-5",
-      "text-accent"
-    ])
-  },
-  {
-    intent: "basic",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-basic/dim-5",
-      "enabled:active:bg-basic/dim-5",
-      "focus-visible:bg-basic/dim-5",
-      "text-basic"
-    ])
-  },
-  {
-    intent: "success",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-success/dim-5",
-      "enabled:active:bg-success/dim-5",
-      "focus-visible:bg-success/dim-5",
-      "text-success"
-    ])
-  },
-  {
-    intent: "alert",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-alert/dim-5",
-      "enabled:active:bg-alert/dim-5",
-      "focus-visible:bg-alert/dim-5",
-      "text-alert"
-    ])
-  },
-  {
-    intent: "danger",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-error/dim-5",
-      "enabled:active:bg-error/dim-5",
-      "focus-visible:bg-error/dim-5",
-      "text-error"
-    ])
-  },
-  {
-    intent: "info",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-info/dim-5",
-      "enabled:active:bg-info/dim-5",
-      "focus-visible:bg-info/dim-5",
-      "text-info"
-    ])
-  },
-  {
-    intent: "neutral",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-neutral/dim-5",
-      "enabled:active:bg-neutral/dim-5",
-      "focus-visible:bg-neutral/dim-5",
-      "text-neutral"
-    ])
-  },
-  {
-    intent: "surface",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-surface/dim-5",
-      "enabled:active:bg-surface/dim-5",
-      "focus-visible:bg-surface/dim-5",
-      "text-surface"
-    ])
-  },
-  {
-    intent: "surfaceInverse",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-surface-inverse/dim-5",
-      "enabled:active:bg-surface-inverse/dim-5",
-      "focus-visible:bg-surface-inverse/dim-5",
-      "text-surface-inverse"
-    ])
-  }
-];
-
-// src/button/variants/tinted.ts
-var import_internal_utils6 = require("@spark-ui/internal-utils");
-var tintedVariants = [
-  {
-    intent: "main",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-main-container",
-      "text-on-main-container",
-      "hover:bg-main-container-hovered",
-      "enabled:active:bg-main-container-hovered",
-      "focus-visible:bg-main-container-hovered"
-    ])
-  },
-  {
-    intent: "support",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-support-container",
-      "text-on-support-container",
-      "hover:bg-support-container-hovered",
-      "enabled:active:bg-support-container-hovered",
-      "focus-visible:bg-support-container-hovered"
-    ])
-  },
-  {
-    intent: "accent",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-accent-container",
-      "text-on-accent-container",
-      "hover:bg-accent-container-hovered",
-      "enabled:active:bg-accent-container-hovered",
-      "focus-visible:bg-accent-container-hovered"
-    ])
-  },
-  {
-    intent: "basic",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-basic-container",
-      "text-on-basic-container",
-      "hover:bg-basic-container-hovered",
-      "enabled:active:bg-basic-container-hovered",
-      "focus-visible:bg-basic-container-hovered"
-    ])
-  },
-  {
-    intent: "success",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-success-container",
-      "text-on-success-container",
-      "hover:bg-success-container-hovered",
-      "enabled:active:bg-success-container-hovered",
-      "focus-visible:bg-success-container-hovered"
-    ])
-  },
-  {
-    intent: "alert",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-alert-container",
-      "text-on-alert-container",
-      "hover:bg-alert-container-hovered",
-      "enabled:active:bg-alert-container-hovered",
-      "focus-visible:bg-alert-container-hovered"
-    ])
-  },
-  {
-    intent: "danger",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-error-container",
-      "text-on-error-container",
-      "hover:bg-error-container-hovered",
-      "enabled:active:bg-error-container-hovered",
-      "focus-visible:bg-error-container-hovered"
-    ])
-  },
-  {
-    intent: "info",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-info-container",
-      "text-on-info-container",
-      "hover:bg-info-container-hovered",
-      "enabled:active:bg-info-container-hovered",
-      "focus-visible:bg-info-container-hovered"
-    ])
-  },
-  {
-    intent: "neutral",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-neutral-container",
-      "text-on-neutral-container",
-      "hover:bg-neutral-container-hovered",
-      "enabled:active:bg-neutral-container-hovered",
-      "focus-visible:bg-neutral-container-hovered"
-    ])
-  },
-  {
-    intent: "surface",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-surface",
-      "text-on-surface",
-      "hover:bg-surface-hovered",
-      "enabled:active:bg-surface-hovered",
-      "focus-visible:bg-surface-hovered"
-    ])
-  },
-  {
-    intent: "surfaceInverse",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-surface-inverse",
-      "text-on-surface-inverse",
-      "hover:bg-surface-inverse-hovered",
-      "enabled:active:bg-surface-inverse-hovered",
-      "focus-visible:bg-surface-inverse-hovered"
-    ])
-  }
-];
-
-// src/button/variants/contrast.ts
-var import_internal_utils7 = require("@spark-ui/internal-utils");
-var contrastVariants = [
-  {
-    intent: "main",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-main-contaier bg-surface",
-      "hover:bg-main-container-hovered",
-      "enabled:active:bg-main-container-hovered",
-      "focus-visible:bg-main-container-hovered"
-    ])
-  },
-  {
-    intent: "support",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-support-container bg-surface",
-      "hover:bg-support-container-hovered",
-      "enabled:active:bg-support-container-hovered",
-      "focus-visible:bg-support-container-hovered"
-    ])
-  },
-  {
-    intent: "accent",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-accent-container bg-surface",
-      "hover:bg-accent-container-hovered",
-      "enabled:active:bg-accent-container-hovered",
-      "focus-visible:bg-accent-container-hovered"
-    ])
-  },
-  {
-    intent: "basic",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-basic-container bg-surface",
-      "hover:bg-basic-container-hovered",
-      "enabled:active:bg-basic-container-hovered",
-      "focus-visible:bg-basic-container-hovered"
-    ])
-  },
-  {
-    intent: "success",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-success-container bg-surface",
-      "hover:bg-success-container-hovered",
-      "enabled:active:bg-success-container-hovered",
-      "focus-visible:bg-success-container-hovered"
-    ])
-  },
-  {
-    intent: "alert",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-alert-container bg-surface",
-      "hover:bg-alert-container-hovered",
-      "enabled:active:bg-alert-container-hovered",
-      "focus-visible:bg-alert-container-hovered"
-    ])
-  },
-  {
-    intent: "danger",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-error-container bg-surface",
-      "hover:bg-error-container-hovered",
-      "enabled:active:bg-error-container-hovered",
-      "focus-visible:bg-error-container-hovered"
-    ])
-  },
-  {
-    intent: "info",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-info-container bg-surface",
-      "hover:bg-info-container-hovered",
-      "enabled:active:bg-info-container-hovered",
-      "focus-visible:bg-info-container-hovered"
-    ])
-  },
-  {
-    intent: "neutral",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-neutral-container bg-surface",
-      "hover:bg-neutral-container-hovered",
-      "enabled:active:bg-neutral-container-hovered",
-      "focus-visible:bg-neutral-container-hovered"
-    ])
-  },
-  {
-    intent: "surface",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-surface bg-surface",
-      "hover:bg-surface-hovered",
-      "enabled:active:bg-surface-hovered",
-      "focus-visible:bg-surface-hovered"
-    ])
-  },
-  {
-    intent: "surfaceInverse",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-surface-inverse bg-surface-inverse",
-      "hover:bg-surface-inverse-hovered",
-      "enabled:active:bg-surface-inverse-hovered",
-      "focus-visible:bg-surface-inverse-hovered"
-    ])
-  }
-];
-
-// src/button/Button.styles.tsx
-var buttonStyles = (0, import_class_variance_authority5.cva)(
-  [
-    "u-shadow-border-transition",
-    "box-border inline-flex items-center justify-center gap-md whitespace-nowrap",
-    "default:px-lg",
-    "text-body-1 font-bold",
-    "focus-visible:u-outline"
-  ],
-  {
-    variants: {
-      /**
-       * Main style of the button.
-       *
-       * - `filled`: Button will be plain.
-       *
-       * - `outlined`: Button will be transparent with an outline.
-       *
-       * - `tinted`: Button will be filled but using a lighter color scheme.
-       *
-       * - `ghost`: Button will look like a link. No borders, plain text.
-       *
-       * - `contrast`: Button will be surface filled. No borders, plain text.
-       *
-       */
-      design: (0, import_internal_utils8.makeVariants)({
-        filled: [],
-        outlined: ["bg-transparent", "border-sm", "border-current"],
-        tinted: [],
-        ghost: ["default:-mx-md px-md hover:bg-main/dim-5"],
-        contrast: []
-      }),
-      underline: {
-        true: ["underline"]
-      },
-      /**
-       * Color scheme of the button.
-       */
-      intent: (0, import_internal_utils8.makeVariants)({
-        main: [],
-        support: [],
-        accent: [],
-        basic: [],
-        success: [],
-        alert: [],
-        danger: [],
-        info: [],
-        neutral: [],
-        surface: [],
-        surfaceInverse: []
-      }),
-      /**
-       * Size of the button.
-       */
-      size: (0, import_internal_utils8.makeVariants)({
-        sm: ["min-w-sz-32", "h-sz-32"],
-        md: ["min-w-sz-44", "h-sz-44"],
-        lg: ["min-w-sz-56", "h-sz-56"]
-      }),
-      /**
-       * Shape of the button.
-       */
-      shape: (0, import_internal_utils8.makeVariants)({
-        rounded: ["rounded-lg"],
-        square: ["rounded-0"],
-        pill: ["rounded-full"]
-      }),
-      /**
-       * Disable the button, preventing user interaction and adding opacity.
-       */
-      disabled: {
-        true: ["cursor-not-allowed", "opacity-dim-3"],
-        false: ["cursor-pointer"]
-      }
-    },
-    compoundVariants: [
-      ...filledVariants,
-      ...outlinedVariants,
-      ...tintedVariants,
-      ...ghostVariants,
-      ...contrastVariants
-    ],
-    defaultVariants: {
-      design: "filled",
-      intent: "main",
-      size: "md",
-      shape: "rounded"
-    }
-  }
-);
-
-// src/button/Button.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var blockedEventHandlers = [
-  "onClick",
-  "onMouseDown",
-  "onMouseUp",
-  "onMouseEnter",
-  "onMouseLeave",
-  "onMouseOver",
-  "onMouseOut",
-  "onKeyDown",
-  "onKeyPress",
-  "onKeyUp",
-  "onSubmit"
-];
-var Button = ({
-  children,
-  design = "filled",
-  disabled = false,
-  intent = "main",
-  isLoading = false,
-  loadingLabel,
-  loadingText,
-  shape = "rounded",
-  size = "md",
-  asChild,
-  className,
-  underline = false,
-  ref,
-  ...others
-}) => {
-  const Component = asChild ? Slot : "button";
-  const shouldNotInteract = !!disabled || isLoading;
-  const disabledEventHandlers = (0, import_react11.useMemo)(() => {
-    const result = {};
-    if (shouldNotInteract) {
-      blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
-    }
-    return result;
-  }, [shouldNotInteract]);
-  const spinnerProps = {
-    size: "current",
-    className: loadingText ? "inline-block" : "absolute",
-    ...loadingLabel && { "aria-label": loadingLabel }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    Component,
-    {
-      "data-spark-component": "button",
-      ...Component === "button" && { type: "button" },
-      ref,
-      className: buttonStyles({
-        className,
-        design,
-        disabled: shouldNotInteract,
-        intent,
-        shape,
-        size,
-        underline
-      }),
-      disabled: !!disabled,
-      "aria-busy": isLoading,
-      "aria-live": isLoading ? "assertive" : "off",
-      ...others,
-      ...disabledEventHandlers,
-      children: wrapPolymorphicSlot(
-        asChild,
-        children,
-        (slotted) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Spinner, { ...spinnerProps }),
-          loadingText && loadingText,
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "div",
-            {
-              "aria-hidden": true,
-              className: (0, import_class_variance_authority6.cx)("gap-md", loadingText ? "hidden" : "inline-flex opacity-0"),
-              children: slotted
-            }
-          )
-        ] }) : slotted
-      )
-    }
-  );
-};
-Button.displayName = "Button";
-
-// src/icon-button/IconButton.styles.tsx
-var import_internal_utils9 = require("@spark-ui/internal-utils");
-var import_class_variance_authority7 = require("class-variance-authority");
-var iconButtonStyles = (0, import_class_variance_authority7.cva)(["pl-0 pr-0"], {
-  variants: {
-    /**
-     * Sets the size of the icon.
-     */
-    size: (0, import_internal_utils9.makeVariants)({
-      sm: ["text-body-1"],
-      md: ["text-body-1"],
-      lg: ["text-display-3"]
-    })
-  }
-});
-
-// src/icon-button/IconButton.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var IconButton = ({
-  design = "filled",
-  disabled = false,
-  intent = "main",
-  shape = "rounded",
-  size = "md",
-  className,
-  ref,
-  ...others
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    Button,
-    {
-      "data-spark-component": "icon-button",
-      ref,
-      className: iconButtonStyles({ size, className }),
-      design,
-      disabled,
-      intent,
-      shape,
-      size,
-      ...others
-    }
-  );
-};
-IconButton.displayName = "IconButton";
-
-// src/carousel/CarouselNextButton.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var CarouselNextButton = ({
-  "aria-label": ariaLabel,
-  ...buttonProps
-}) => {
-  const ctx = useCarouselContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    IconButton,
-    {
-      "data-spark-component": "carousel-next-button",
-      ...ctx.getNextTriggerProps(),
-      intent: "surface",
-      design: "filled",
-      className: "pointer-events-auto cursor-pointer shadow-sm disabled:invisible",
-      "aria-label": ariaLabel,
-      ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_ArrowVerticalRight.ArrowVerticalRight, {}) })
-    }
-  );
-};
-CarouselNextButton.displayName = "Carousel.NextButton";
-
-// src/carousel/CarouselPageIndicator.tsx
-var import_class_variance_authority8 = require("class-variance-authority");
-var import_react12 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var CarouselPageIndicator = ({
-  children,
-  unstyled = false,
-  index,
-  "aria-label": ariaLabel,
-  className,
-  intent = "basic"
-}) => {
-  const ctx = useCarouselContext();
-  const ref = (0, import_react12.useRef)(null);
-  (0, import_react12.useEffect)(() => {
-    if (ctx.pageIndicatorsRefs.current) {
-      ctx.pageIndicatorsRefs.current[index] = ref.current;
-    }
-  });
-  const indicatorProps = ctx.getIndicatorProps({ index });
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    "button",
-    {
-      "data-spark-component": "carousel-page-indicator",
-      ref,
-      ...indicatorProps,
-      "aria-label": ariaLabel,
-      className: (0, import_class_variance_authority8.cx)(
-        {
-          [(0, import_class_variance_authority8.cx)(
-            "border-outline group relative flex justify-center border-0 hover:cursor-pointer",
-            "m-sm rounded-sm transition-all duration-[200ms] ease-linear",
-            "w-sz-8 h-sz-8",
-            "data-[state=active]:w-sz-32 data-[state=active]:h-sz-8",
-            "data-[state=edge]:w-sz-4 data-[state=edge]:h-sz-4",
-            "data-[state=hidden]:m-0 data-[state=hidden]:size-0",
-            intent === "surface" ? "data-[state=active]:bg-surface bg-surface/dim-2" : "data-[state=active]:bg-basic bg-on-surface/dim-2"
-          )]: !unstyled
-          // [dotsStyles]: !unstyled,
-        },
-        className
-      ),
-      children
-    },
-    index
-  );
-};
-CarouselPageIndicator.displayName = "Carousel.PageIndicator";
-
-// src/carousel/CarouselPagePicker.tsx
-var import_class_variance_authority9 = require("class-variance-authority");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var CarouselPagePicker = ({ children, className }) => {
-  const ctx = useCarouselContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    "div",
-    {
-      "data-spark-component": "carousel-page-picker",
-      ...ctx.getIndicatorGroupProps(),
-      className: (0, import_class_variance_authority9.cx)(
-        "flex-wrap items-center justify-center",
-        "default:min-h-sz-16 flex",
-        ctx.pagePickerInset && "bottom-sz-12 absolute inset-x-0",
-        className
-      ),
-      children: ctx.pageSnapPoints.length <= 1 ? null : children({
-        ...ctx,
-        pages: Array.from({ length: ctx.pageSnapPoints.length }, (_, i) => i)
-      })
-    }
-  ) });
-};
-CarouselPagePicker.displayName = "Carousel.PagePicker";
-
-// src/carousel/CarouselPrevButton.tsx
-var import_ArrowVerticalLeft = require("@spark-ui/icons/ArrowVerticalLeft");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var CarouselPrevButton = ({
-  "aria-label": ariaLabel,
-  ...buttonProps
-}) => {
-  const ctx = useCarouselContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    IconButton,
-    {
-      "data-spark-component": "carousel-prev-button",
-      ...ctx.getPrevTriggerProps(),
-      intent: "surface",
-      design: "filled",
-      className: "pointer-events-auto cursor-pointer shadow-sm disabled:invisible",
-      "aria-label": ariaLabel,
-      ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ArrowVerticalLeft.ArrowVerticalLeft, {}) })
-    }
-  );
-};
-CarouselPrevButton.displayName = "Carousel.PrevButton";
-
-// src/carousel/CarouselSlide.tsx
-var import_class_variance_authority10 = require("class-variance-authority");
-var import_react14 = require("react");
-
-// src/carousel/useIsVisible.ts
-var import_react13 = require("react");
-function useIsVisible(elementRef, _parentRef) {
-  const [isVisible, setIsVisible] = (0, import_react13.useState)(true);
-  const ctx = useCarouselContext();
-  (0, import_react13.useEffect)(() => {
-    const el = elementRef.current;
-    if (!el) return;
-    const { registerSlide, unregisterSlide } = ctx;
-    registerSlide(el, setIsVisible);
-    return () => {
-      unregisterSlide(el);
-    };
-  }, [elementRef]);
-  return isVisible;
-}
-
-// src/carousel/CarouselSlide.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var CarouselSlide = ({
-  children,
-  index = 0,
-  totalSlides,
-  className = "",
-  ...props
-}) => {
-  const itemRef = (0, import_react14.useRef)(null);
-  const ctx = useCarouselContext();
-  const isVisible = useIsVisible(itemRef, ctx.ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    "div",
-    {
-      "data-spark-component": "carousel-slide",
-      ref: itemRef,
-      ...ctx.getSlideProps({ index, totalSlides }),
-      className: (0, import_class_variance_authority10.cx)("default:bg-surface relative overflow-hidden", className),
-      "aria-hidden": !isVisible,
-      inert: !isVisible,
-      ...props,
-      children
-    }
-  );
-};
-CarouselSlide.displayName = "Carousel.Slide";
-
-// src/carousel/CarouselSlides.tsx
-var import_class_variance_authority11 = require("class-variance-authority");
-var import_react15 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var CarouselSlides = ({ children, className = "" }) => {
-  const ctx = useCarouselContext();
-  const childrenElements = import_react15.Children.toArray(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    "div",
-    {
-      "data-spark-component": "carousel-slides",
-      ...ctx.getSlidesContainerProps(),
-      className: (0, import_class_variance_authority11.cx)(
-        "focus-visible:u-outline relative w-full",
-        "[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-        className
-      ),
-      children: childrenElements.map(
-        (child, index) => (0, import_react15.isValidElement)(child) ? (0, import_react15.cloneElement)(child, {
-          index,
-          totalSlides: childrenElements.length
-        }) : child
-      )
-    }
-  );
-};
-CarouselSlides.displayName = "Carousel.Slides";
-
-// src/carousel/CarouselViewport.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var CarouselViewport = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "relative flex items-center justify-around p-0", children });
-};
-CarouselViewport.displayName = "Carousel.Viewport";
-
-// src/carousel/index.ts
-var Carousel2 = Object.assign(Carousel, {
-  Controls: CarouselControls,
-  NextButton: CarouselNextButton,
-  PrevButton: CarouselPrevButton,
-  Slide: CarouselSlide,
-  Slides: CarouselSlides,
-  Viewport: CarouselViewport,
-  PagePicker: CarouselPagePicker,
-  PageIndicator: CarouselPageIndicator
-});
-Carousel2.displayName = "Carousel";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Carousel
-});
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),k=require("class-variance-authority"),s=require("react"),se=require("@spark-ui/icons/ArrowVerticalRight"),O=require("../Icon-CF0W0LKr.js"),$=require("../IconButton-D3g86WpZ.js"),oe=require("@spark-ui/icons/ArrowVerticalLeft");function ae(e){const t=s.useRef(new Map),r=s.useRef(null),n=s.useRef(new Map),o=s.useCallback(()=>u=>{u.forEach(d=>{const b=d.isIntersecting,S=d.target;t.current.set(S,b);const h=n.current.get(S);h&&h(b)})},[]),a=s.useCallback(()=>{if(r.current)return r.current;const u=e.current;if(!u)return null;const d=new IntersectionObserver(o(),{root:u,threshold:.2});return r.current=d,d},[e,o]);s.useEffect(()=>{const u=a(),d=t.current,b=n.current;return()=>{u&&(u.disconnect(),d.clear(),b.clear(),r.current=null)}},[a]);const i=s.useCallback((u,d)=>{if(!u)return;const b=a();if(!b){setTimeout(()=>i(u,d),0);return}const S=t.current.get(u)??!0;t.current.set(u,S),n.current.set(u,d),b.observe(u),d(S)},[a]),c=s.useCallback(u=>{if(!u)return;const d=r.current;d&&d.unobserve(u),t.current.delete(u),n.current.delete(u)},[]),g=s.useCallback(u=>u?t.current.get(u)??!0:!0,[]);return{registerSlide:i,unregisterSlide:c,isSlideVisible:g}}function ie(e){const t=s.useRef(()=>{throw new Error("Cannot call an event handler while rendering.")});return s.useLayoutEffect(()=>{t.current=e}),s.useCallback((...r)=>t.current?.(...r),[])}const ce=()=>{const e=s.useRef(!1);return s.useEffect(()=>(e.current=!0,()=>{e.current=!1}),[]),e};function ue(e,t){const r=s.useRef(0),n=s.useRef(null);s.useEffect(()=>{const o=e.current;if(!o)return;const a="onscrollend"in window,i=()=>{t()},c=()=>{n.current&&clearTimeout(n.current),e.current&&(r.current=e.current.scrollLeft,n.current=setTimeout(()=>{e.current&&i()},150))};return a?o.addEventListener("scrollend",i):o.addEventListener("scroll",c),()=>{n.current&&clearTimeout(n.current),a?o.removeEventListener("scrollend",i):o.removeEventListener("scroll",c)}},[t,e])}function le(e,t){s.useLayoutEffect(()=>{const r=e.current;if(!r)return;const n=new ResizeObserver(o=>{for(const a of o)t(a.contentRect.width)});return n.observe(r),()=>n.disconnect()},[e,t])}function de({totalSlides:e,slidesPerMove:t,slidesPerPage:r}){const n=t==="auto"?r:t,o=[],a=Math.floor((e-r)/n)*n;for(let i=0;i<=a;i+=n)o.push(i);return o[o.length-1]!==e-r&&o.push(e-r),o}function q(e){return e?Array.from(e.querySelectorAll('[data-part="item"]')):[]}function _(e,{container:t,slidesPerMove:r,slidesPerPage:n}){return de({totalSlides:q(t).length,slidesPerPage:n,slidesPerMove:r}).includes(e)}function B({container:e,slidesPerMove:t,slidesPerPage:r}){return e?q(e).filter((n,o)=>_(o,{slidesPerMove:t,slidesPerPage:r,container:e})).map(n=>n.offsetLeft):[]}function fe({dotIndex:e,pageState:t,totalPages:r,maxDots:n=5}){if(r<=n)return e===t?"active":"idle";if(t<=Math.floor(n/2))return e>n-1?"hidden":e===t?"active":e===n-1?"edge":"idle";if(t>=r-Math.ceil(n/2)){const i=r-n;return e<i?"hidden":e===t?"active":e===i?"edge":"idle"}const o=t-Math.floor(n/2),a=t+Math.floor(n/2);return e<o||e>a?"hidden":e===t?"active":e===o||e===a?"edge":"idle"}function pe(e=[],{carouselRef:t,slidesPerMove:r,slidesPerPage:n}){const[o,a]=s.useState(e),i=s.useMemo(()=>o,[o]);return le(t,()=>{const c=B({slidesPerMove:r,slidesPerPage:n,container:t.current});JSON.stringify(o)!==JSON.stringify(c)&&a(c)}),[i,a]}const x="carousel",N="ltr",ge=({defaultPage:e,gap:t=16,snapType:r="mandatory",snapStop:n="always",scrollPadding:o=0,slidesPerPage:a=1,slidesPerMove:i="auto",scrollBehavior:c="smooth",loop:g=!1,pagePickerInset:u=!1,maxDots:d=5,page:b,onPageChange:S})=>{const h=s.useId(),[f,I]=s.useState(e||b||0),C=s.useRef(null),M=s.useRef([]),T=ce().current,L=ie(S),{registerSlide:D,unregisterSlide:ee,isSlideVisible:te}=ae(C),[m]=pe([],{carouselRef:C,slidesPerMove:i,slidesPerPage:a}),P=s.useRef(g||f>0),R=s.useRef(g||f<m.length-1);P.current=g||f>0,R.current=g||f<m.length-1;const j=s.useCallback(l=>{l!==f&&(I(l),L?.(l))},[L,f]),y=s.useCallback((l,v)=>{C.current&&(C.current.scrollTo({left:m[l],behavior:v==="instant"?"auto":"smooth"}),j(l))},[j,m]),z=s.useCallback(l=>{if(P){const v=g&&f===0?m.length-1:Math.max(f-1,0);y(v,c),l?.(v)}},[g,m,f,c,y]),A=s.useCallback(l=>{if(R){const v=g&&f===m.length-1?0:Math.min(f+1,m.length-1);y(v,c),l?.(v)}},[g,m,f,c,y]);s.useEffect(()=>{b!=null&&y(b,c)},[b,c,y]),s.useLayoutEffect(()=>{if(e!=null&&!T&&C.current){const l=B({container:C.current,slidesPerMove:i,slidesPerPage:a});C.current.scrollTo({left:l[e],behavior:"instant"})}},[e,T,i,a]);const re=s.useCallback(()=>{if(!C.current||m.length===0)return;const{scrollLeft:l}=C.current,v=m.map(V=>Math.abs(l-V)),E=v.indexOf(Math.min(...v));E!==-1&&j(E)},[m,j]);return ue(C,re),{ref:C,pageIndicatorsRefs:M,gap:t,snapType:r,snapStop:n,scrollPadding:o,slidesPerPage:a,slidesPerMove:i,scrollBehavior:c,loop:g,pagePickerInset:u,maxDots:d,page:f,pageSnapPoints:m,canScrollNext:R.current,canScrollPrev:P.current,scrollTo:y,scrollPrev:z,scrollNext:A,registerSlide:D,unregisterSlide:ee,isSlideVisible:te,getRootProps:()=>({id:`carousel::${h}:`,role:"region","aria-roledescription":"carousel","data-scope":x,"data-part":"root","data-orientation":"horizontal",dir:N,style:{"--slides-per-page":a,"--slide-spacing":`${t}px`,"--slide-item-size":"calc(100% / var(--slides-per-page) - var(--slide-spacing) * (var(--slides-per-page) - 1) / var(--slides-per-page))"}}),getControlProps:()=>({"data-scope":x,"data-part":"control","data-orientation":"horizontal"}),getPrevTriggerProps:()=>({id:`carousel::${h}::prev-trigger`,"aria-controls":`carousel::${h}::item-group`,"data-scope":x,"data-part":"prev-trigger","data-orientation":"horizontal",type:"button",dir:N,disabled:!P.current,onClick:()=>z()}),getNextTriggerProps:()=>({id:`carousel::${h}::next-trigger`,"aria-controls":`carousel::${h}::item-group`,"data-scope":x,"data-part":"next-trigger","data-orientation":"horizontal",type:"button",dir:N,disabled:!R.current,onClick:()=>A()}),getSlidesContainerProps:()=>({id:`carousel::${h}::item-group`,"aria-live":a>1?"off":"polite","data-scope":x,"data-part":"item-group","data-orientation":"horizontal",dir:N,tabIndex:0,style:{display:"grid",gap:"var(--slide-spacing)",scrollSnapType:`x ${r}`,gridAutoFlow:"column",scrollbarWidth:"none",gridAutoColumns:"var(--slide-item-size)",overflowX:"auto"},ref:C}),getSlideProps:({index:l})=>{const v=_(l,{container:C.current,slidesPerMove:i,slidesPerPage:a});return{id:`carousel::${h}::item:${l}`,role:"group","aria-roledescription":"slide","data-scope":x,"data-part":"item","data-index":l,"data-orientation":"horizontal",dir:N,style:{...v&&{scrollSnapAlign:"start",scrollSnapStop:n}}}},getIndicatorGroupProps:()=>({role:"radiogroup",id:`carousel::${h}::indicator-group`,"data-scope":x,"data-part":"indicator-group","data-orientation":"horizontal",dir:N}),getIndicatorProps:({index:l})=>{const v=fe({dotIndex:l,pageState:f,totalPages:m.length,maxDots:d});return{role:"radio",id:`carousel::${h}::indicator:${l}`,"aria-checked":l===f,"data-scope":x,"data-part":"indicator","data-orientation":"horizontal","data-index":l,"data-state":v,tabIndex:l===f?0:-1,onClick:()=>{y(l,c)},onKeyDown:E=>{const V=ne=>{M.current[ne]?.focus()};E.key==="ArrowRight"&&R?A(V):E.key==="ArrowLeft"&&P&&z(V)}}}}},F=s.createContext(null),G=({className:e,snapType:t="mandatory",snapStop:r="always",scrollBehavior:n="smooth",slidesPerMove:o="auto",pagePickerInset:a=!1,slidesPerPage:i=1,loop:c=!1,children:g,gap:u=16,defaultPage:d,page:b,onPageChange:S,maxDots:h=5,...f})=>{const I=ge({defaultPage:d,slidesPerPage:i,slidesPerMove:o,loop:c,gap:u,scrollBehavior:n,snapStop:r,snapType:t,page:b,pagePickerInset:a,onPageChange:S,maxDots:h});return p.jsx(F.Provider,{value:{...I,scrollBehavior:n},children:p.jsx("div",{"data-spark-component":"carousel",className:k.cx("gap-lg relative box-border flex flex-col",e),...I.getRootProps(),...f,children:g})})};G.displayName="Carousel";const w=()=>{const e=s.useContext(F);if(!e)throw Error("useCarouselContext must be used within a Carousel provider");return e},J=({children:e,className:t,...r})=>{const n=w();return p.jsx("div",{"data-spark-component":"carousel-controls",className:k.cx("default:px-lg pointer-events-none absolute inset-0 flex flex-row items-center justify-between",t),...n.getControlProps(),...r,children:e})};J.displayName="Carousel.Controls";const W=({"aria-label":e,...t})=>{const r=w();return p.jsx($.IconButton,{"data-spark-component":"carousel-next-button",...r.getNextTriggerProps(),intent:"surface",design:"filled",className:"pointer-events-auto cursor-pointer shadow-sm disabled:invisible","aria-label":e,...t,children:p.jsx(O.Icon,{children:p.jsx(se.ArrowVerticalRight,{})})})};W.displayName="Carousel.NextButton";const K=({children:e,unstyled:t=!1,index:r,"aria-label":n,className:o,intent:a="basic"})=>{const i=w(),c=s.useRef(null);s.useEffect(()=>{i.pageIndicatorsRefs.current&&(i.pageIndicatorsRefs.current[r]=c.current)});const g=i.getIndicatorProps({index:r});return p.jsx("button",{"data-spark-component":"carousel-page-indicator",ref:c,...g,"aria-label":n,className:k.cx({[k.cx("border-outline group relative flex justify-center border-0 hover:cursor-pointer","m-sm rounded-sm transition-all duration-[200ms] ease-linear","w-sz-8 h-sz-8","data-[state=active]:w-sz-32 data-[state=active]:h-sz-8","data-[state=edge]:w-sz-4 data-[state=edge]:h-sz-4","data-[state=hidden]:m-0 data-[state=hidden]:size-0",a==="surface"?"data-[state=active]:bg-surface bg-surface/dim-2":"data-[state=active]:bg-basic bg-on-surface/dim-2")]:!t},o),children:e},r)};K.displayName="Carousel.PageIndicator";const X=({children:e,className:t})=>{const r=w();return p.jsx(p.Fragment,{children:p.jsx("div",{"data-spark-component":"carousel-page-picker",...r.getIndicatorGroupProps(),className:k.cx("flex-wrap items-center justify-center","default:min-h-sz-16 flex",r.pagePickerInset&&"bottom-sz-12 absolute inset-x-0",t),children:r.pageSnapPoints.length<=1?null:e({...r,pages:Array.from({length:r.pageSnapPoints.length},(n,o)=>o)})})})};X.displayName="Carousel.PagePicker";const H=({"aria-label":e,...t})=>{const r=w();return p.jsx($.IconButton,{"data-spark-component":"carousel-prev-button",...r.getPrevTriggerProps(),intent:"surface",design:"filled",className:"pointer-events-auto cursor-pointer shadow-sm disabled:invisible","aria-label":e,...t,children:p.jsx(O.Icon,{children:p.jsx(oe.ArrowVerticalLeft,{})})})};H.displayName="Carousel.PrevButton";function be(e,t){const[r,n]=s.useState(!0),o=w();return s.useEffect(()=>{const a=e.current;if(!a)return;const{registerSlide:i,unregisterSlide:c}=o;return i(a,n),()=>{c(a)}},[e]),r}const Q=({children:e,index:t=0,totalSlides:r,className:n="",...o})=>{const a=s.useRef(null),i=w(),c=be(a,i.ref);return p.jsx("div",{"data-spark-component":"carousel-slide",ref:a,...i.getSlideProps({index:t,totalSlides:r}),className:k.cx("default:bg-surface relative overflow-hidden",n),"aria-hidden":!c,inert:!c,...o,children:e})};Q.displayName="Carousel.Slide";const U=({children:e,className:t=""})=>{const r=w(),n=s.Children.toArray(e);return p.jsx("div",{"data-spark-component":"carousel-slides",...r.getSlidesContainerProps(),className:k.cx("focus-visible:u-outline relative w-full","[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",t),children:n.map((o,a)=>s.isValidElement(o)?s.cloneElement(o,{index:a,totalSlides:n.length}):o)})};U.displayName="Carousel.Slides";const Y=({children:e})=>p.jsx("div",{className:"relative flex items-center justify-around p-0",children:e});Y.displayName="Carousel.Viewport";const Z=Object.assign(G,{Controls:J,NextButton:W,PrevButton:H,Slide:Q,Slides:U,Viewport:Y,PagePicker:X,PageIndicator:K});Z.displayName="Carousel";exports.Carousel=Z;
+//# sourceMappingURL=index.js.map