@makeswift/runtime 0.28.10-canary.9 → 0.29.0-canary.20

package/dist/esm/components/builtin/Carousel/Carousel.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
   useState,
   useRef,
@@ -13,10 +13,9 @@ import { getBaseBreakpoint } from "@makeswift/controls";
 import { colorToString } from "../../utils/colorToString";
 import { useMediaQuery } from "../../hooks";
 import Image from "../Image";
-import { useStyle } from "../../../runtimes/react/use-style";
-import { cx } from "@emotion/css";
 import { useResponsiveStyle } from "../../utils/responsive-style";
 import { useBreakpoints } from "../../../runtimes/react/hooks/use-breakpoints";
+import { composeStyles, useStyle } from "../../../runtimes/react/css-runtime/hooks/use-style";
 function wrap(min, max, v) {
   const rangeSize = max - min;
   return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
@@ -119,9 +118,9 @@ const Carousel = forwardRef(function Carousel2({
     const intervalId = setInterval(() => isLastPage ? setIndex(0) : paginate(1), delay * 1e3);
     return () => clearInterval(intervalId);
   }, [autoplay, delay, paginate, isLastPage]);
-  const clipMaskClassName = useStyle({ overflow: "hidden" });
-  const pageClassName = useStyle({ position: "relative", width: "100%" });
-  const slideClassName = cx(
+  const clipMaskStyle = useStyle({ overflow: "hidden" });
+  const pageStyle = useStyle({ position: "relative", width: "100%" });
+  const slideStyles = composeStyles(
     useStyle({ display: "flex" }),
     useStyle(
       useResponsiveStyle([responsivePageSize], ([pageSize2 = 1]) => ({
@@ -134,18 +133,18 @@ const Carousel = forwardRef(function Carousel2({
       useResponsiveStyle([slideAlignment], ([alignItems = "center"]) => ({ alignItems }))
     )
   );
-  const reelClassName = cx(
+  const reelStyles = composeStyles(
     useStyle({ display: "flex", position: "relative", flexWrap: "nowrap" }),
     useStyle(
       useResponsiveStyle([gap], ([gap2 = { value: 0, unit: "px" }]) => ({
         margin: `0 ${`${-gap2.value / 2}${gap2.unit}`}`,
-        [`& > ${classSelector(slideClassName)}`]: {
+        [`& > ${classSelector(slideStyles.className)}`]: {
           padding: `0 ${`${gap2.value / 2}${gap2.unit}`}`
         }
       }))
     )
   );
-  const arrowClassName = cx(
+  const { className: arrowClassName, styleElements: arrowStyleElements } = composeStyles(
     useStyle({
       padding: 10,
       borderRadius: "50%",
@@ -169,7 +168,7 @@ const Carousel = forwardRef(function Carousel2({
     ),
     useStyle({ svg: { transition: "transform 0.15s", stroke: "currentcolor" } })
   );
-  const slopClassName = cx(
+  const { className: sharedSlopClassName, styleElements: sharedSlopStyleElements } = composeStyles(
     useStyle({
       position: "absolute",
       top: 0,
@@ -191,8 +190,8 @@ const Carousel = forwardRef(function Carousel2({
       )
     )
   );
-  const leftSlopClassName = cx(
-    slopClassName,
+  const { className: leftSlopClassName, styleElements: leftSlopStyleElements } = composeStyles(
+    sharedSlopClassName,
     useStyle(
       useResponsiveStyle([arrowPosition], ([position = "inside"]) => {
         switch (position) {
@@ -214,8 +213,8 @@ const Carousel = forwardRef(function Carousel2({
       }
     })
   );
-  const rightSlopClassName = cx(
-    slopClassName,
+  const { className: rightSlopClassName, styleElements: rightSlopStyleElements } = composeStyles(
+    sharedSlopClassName,
     useStyle(
       useResponsiveStyle([arrowPosition], ([position = "inside"]) => {
         switch (position) {
@@ -237,7 +236,7 @@ const Carousel = forwardRef(function Carousel2({
       }
     })
   );
-  const dotsClassName = cx(
+  const { className: dotsClassName, styleElements: dotsStyleElements } = composeStyles(
     useStyle({ display: showDots ? "flex" : "none", justifyContent: "center", marginTop: 20 }),
     useStyle(
       useResponsiveStyle(
@@ -248,139 +247,166 @@ const Carousel = forwardRef(function Carousel2({
       )
     )
   );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      className: cx(
-        useStyle({ position: "relative", display: "flex", flexDirection: "column" }),
-        width,
-        margin,
-        useStyle({ "&:focus": { outline: 0 } })
-      ),
-      tabIndex: -1,
-      onKeyDown: (e) => {
-        switch (e.key) {
-          case "ArrowRight":
-            paginate(1);
-            break;
-          case "ArrowLeft":
-            paginate(-1);
-            break;
-          default:
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: useStyle({ position: "relative", height: "100%" }), children: [
-          /* @__PURE__ */ jsx("div", { className: clipMaskClassName, children: /* @__PURE__ */ jsx(motion.div, { ...bindPage(), className: pageClassName, animate: animation, children: /* @__PURE__ */ jsx(
-            motion.div,
-            {
-              className: reelClassName,
-              animate: { x: `${-(100 / pageSize) * startIndex}%` },
-              transition: {
-                x: {
-                  type: "tween",
-                  ease: [0.165, 0.84, 0.44, 1],
-                  duration: 0.5
-                }
-              },
-              children: images.map(({ props: imageProps, key }) => /* @__PURE__ */ jsx(
-                motion.div,
-                {
-                  className: slideClassName,
-                  onMouseDown: (e) => e.preventDefault(),
-                  onClick: (e) => {
-                    if (swipe.current !== 0)
-                      e.preventDefault();
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    Image,
-                    {
-                      width: [
-                        {
-                          deviceId: getBaseBreakpoint(breakpoints).id,
-                          value: { value: 100, unit: "%" }
-                        }
-                      ],
-                      file: imageProps.file,
-                      altText: imageProps.altText,
-                      link: imageProps.link,
-                      border: slideBorder,
-                      borderRadius: slideBorderRadius
-                    }
-                  )
-                },
-                key
-              ))
-            }
-          ) }) }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              onClick: () => paginate(-1),
-              className: leftSlopClassName,
-              hidden: !showArrows || isFirstPage,
-              children: /* @__PURE__ */ jsx("div", { className: arrowClassName, children: /* @__PURE__ */ jsx(LeftChevron, {}) })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              onClick: () => paginate(1),
-              className: rightSlopClassName,
-              hidden: !showArrows || isLastPage,
-              children: /* @__PURE__ */ jsx("div", { className: arrowClassName, children: /* @__PURE__ */ jsx(RightChevron, {}) })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: dotsClassName, children: Array.from({ length: pageCount }).map((_, i) => /* @__PURE__ */ jsx(Dot, { active: i === pageIndex, onClick: () => paginate(i - pageIndex) }, i)) })
-      ]
-    }
+  const { className: containerClassName, styleElements: containerStyleElements } = composeStyles(
+    useStyle({ position: "relative", display: "flex", flexDirection: "column" }),
+    width,
+    margin,
+    useStyle({ "&:focus": { outline: 0 } })
   );
+  const { className: relativePositionDivClassName, styleElement: relativePositionDivStyleElement } = useStyle({
+    position: "relative",
+    height: "100%"
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    containerStyleElements,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: containerClassName,
+        tabIndex: -1,
+        onKeyDown: (e) => {
+          switch (e.key) {
+            case "ArrowRight":
+              paginate(1);
+              break;
+            case "ArrowLeft":
+              paginate(-1);
+              break;
+            default:
+          }
+        },
+        children: [
+          relativePositionDivStyleElement,
+          /* @__PURE__ */ jsxs("div", { className: relativePositionDivClassName, children: [
+            sharedSlopStyleElements,
+            clipMaskStyle.styleElement,
+            /* @__PURE__ */ jsxs("div", { className: clipMaskStyle.className, children: [
+              pageStyle.styleElement,
+              /* @__PURE__ */ jsxs(motion.div, { ...bindPage(), className: pageStyle.className, animate: animation, children: [
+                reelStyles.styleElements,
+                /* @__PURE__ */ jsxs(
+                  motion.div,
+                  {
+                    className: reelStyles.className,
+                    animate: { x: `${-(100 / pageSize) * startIndex}%` },
+                    transition: {
+                      x: {
+                        type: "tween",
+                        ease: [0.165, 0.84, 0.44, 1],
+                        duration: 0.5
+                      }
+                    },
+                    children: [
+                      slideStyles.styleElements,
+                      images.map(({ props: imageProps, key }) => /* @__PURE__ */ jsx(
+                        motion.div,
+                        {
+                          className: slideStyles.className,
+                          onMouseDown: (e) => e.preventDefault(),
+                          onClick: (e) => {
+                            if (swipe.current !== 0)
+                              e.preventDefault();
+                          },
+                          children: /* @__PURE__ */ jsx(
+                            Image,
+                            {
+                              width: [
+                                {
+                                  deviceId: getBaseBreakpoint(breakpoints).id,
+                                  value: { value: 100, unit: "%" }
+                                }
+                              ],
+                              file: imageProps.file,
+                              altText: imageProps.altText,
+                              link: imageProps.link,
+                              border: slideBorder,
+                              borderRadius: slideBorderRadius
+                            }
+                          )
+                        },
+                        key
+                      ))
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            leftSlopStyleElements,
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                onClick: () => paginate(-1),
+                className: leftSlopClassName,
+                hidden: !showArrows || isFirstPage,
+                children: [
+                  arrowStyleElements,
+                  /* @__PURE__ */ jsx("div", { className: arrowClassName, children: /* @__PURE__ */ jsx(LeftChevron, {}) })
+                ]
+              }
+            ),
+            rightSlopStyleElements,
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                onClick: () => paginate(1),
+                className: rightSlopClassName,
+                hidden: !showArrows || isLastPage,
+                children: [
+                  arrowStyleElements,
+                  /* @__PURE__ */ jsx("div", { className: arrowClassName, children: /* @__PURE__ */ jsx(RightChevron, {}) })
+                ]
+              }
+            )
+          ] }),
+          dotsStyleElements,
+          /* @__PURE__ */ jsx("div", { className: dotsClassName, children: Array.from({ length: pageCount }).map((_, i) => /* @__PURE__ */ jsx(Dot, { active: i === pageIndex, onClick: () => paginate(i - pageIndex) }, i)) })
+        ]
+      }
+    )
+  ] });
 });
 var Carousel_default = Carousel;
 function Dot({ className, active, ...restOfProps }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...restOfProps,
-      className: cx(
-        useStyle({
-          position: "relative",
-          margin: "0 6px",
-          borderRadius: "50%",
-          cursor: "pointer",
-          width: 16,
-          height: 16,
-          "&::before, &::after": {
-            content: '""',
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            display: "block",
-            borderRadius: "50%",
-            transition: "all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275)"
-          },
-          "&::before": {
-            boxShadow: "0 0 0 2px currentColor",
-            transform: "translate3d(-50%, -50%, 0)",
-            width: active ? 16 : 10,
-            height: active ? 16 : 10
-          },
-          "&::after": {
-            background: "currentColor",
-            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,
-            width: 10,
-            height: 10
-          },
-          "&:hover::after": {
-            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`
-          }
-        }),
-        className
-      )
-    }
+  const styles = composeStyles(
+    useStyle({
+      position: "relative",
+      margin: "0 6px",
+      borderRadius: "50%",
+      cursor: "pointer",
+      width: 16,
+      height: 16,
+      "&::before, &::after": {
+        content: '""',
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        display: "block",
+        borderRadius: "50%",
+        transition: "all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275)"
+      },
+      "&::before": {
+        boxShadow: "0 0 0 2px currentColor",
+        transform: "translate3d(-50%, -50%, 0)",
+        width: active ? 16 : 10,
+        height: active ? 16 : 10
+      },
+      "&::after": {
+        background: "currentColor",
+        transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,
+        width: 10,
+        height: 10
+      },
+      "&:hover::after": {
+        transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`
+      }
+    }),
+    className
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("div", { ...restOfProps, className: styles.className })
+  ] });
 }
 export {
   Carousel_default as default

package/dist/esm/components/builtin/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  forwardRef,\n  Ref,\n  ComponentPropsWithoutRef,\n} from 'react'\nimport { motion, useAnimation } from 'framer-motion'\nimport { useGesture } from '@use-gesture/react'\n\nimport { getBaseBreakpoint } from '@makeswift/controls'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { type ResponsiveColor } from '../../utils/types'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { useBreakpoints } from '../../../runtimes/react/hooks/use-breakpoints'\nimport {\n  type ResponsiveGapData,\n  type ResponsiveNumberValue,\n  type ResponsiveIconRadioGroupValue,\n  type ImagesData,\n} from '@makeswift/prop-controllers'\n\n// Utility to wrap a value within a range. Pulled from:\n// https://github.com/Popmotion/popmotion/blob/adf681efd8568ada018ce68082dbd585f25c4c7d/packages/popmotion/src/utils/wrap.ts\nfunction wrap(min: number, max: number, v: number): number {\n  const rangeSize = max - min\n  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min\n}\n\nconst LeftChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M7,13,1,7,7,1\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\nconst RightChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M3,1,9,7,3,13\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\ntype Props = {\n  id?: string\n  images?: ImagesData\n  width?: string\n  margin?: string\n  pageSize?: ResponsiveNumberValue\n  step?: ResponsiveNumberValue\n  slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gap?: ResponsiveGapData\n  autoplay?: boolean\n  delay?: number\n  showArrows?: boolean\n  arrowPosition?: ResponsiveIconRadioGroupValue<'inside' | 'center' | 'outside'>\n  arrowColor?: ResponsiveColor | null\n  arrowBackground?: ResponsiveColor | null\n  showDots?: boolean\n  dotColor?: ResponsiveColor | null\n  slideBorder?: string\n  slideBorderRadius?: string\n}\n\nconst SWIPE_THRESHOLD = 20\nconst swipePower = (dx: number, velocity: number) => dx * (1 + velocity)\n\n// constructs a CSS [class selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors),\n// returns a compound class selector if the `classname` string includes multiple class names\nconst classSelector = (classname: string) => `.${classname.split(' ').join('.')}`\n\nconst Carousel = forwardRef(function Carousel(\n  {\n    images = [],\n    width,\n    margin,\n    pageSize: responsivePageSize,\n    step: responsiveStep,\n    gap,\n    slideAlignment,\n    showDots,\n    showArrows,\n    arrowPosition,\n    arrowColor,\n    arrowBackground,\n    dotColor,\n    autoplay = false,\n    delay = 5,\n    slideBorder,\n    slideBorderRadius,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const breakpoints = useBreakpoints()\n  const [index, setIndex] = useState(0)\n  const swipe = useRef(0)\n  const startIndex = wrap(0, images.length, index)\n  const pageSize = useMediaQuery(responsivePageSize) || 1\n  const step = useMediaQuery(responsiveStep) || 1\n  const endIndex = startIndex + pageSize\n  const pageCount = Math.ceil((images.length - pageSize) / step + 1)\n  const pageIndex = Math.ceil(startIndex / step)\n  const isFirstPage = pageIndex === 0\n  const isLastPage = pageIndex === pageCount - 1\n  const paginate = useCallback(\n    (pageDistance: number) => {\n      if (pageDistance === 0) return\n\n      const direction = pageDistance / Math.abs(pageDistance)\n      const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex)\n      const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance))\n\n      setIndex(index + distance)\n    },\n    [images, index, startIndex, endIndex, step],\n  )\n  // @ts-expect-error: `useAnimation` types expect no arguments.\n  const animation = useAnimation({ x: 0, transition: { type: 'spring', stiffness: 100 } })\n  const bindPage = useGesture(\n    {\n      onDrag: ({ movement: [mx], delta: [dx], velocity: [vx] }) => {\n        animation.start({ x: mx })\n        swipe.current = swipePower(dx, vx)\n      },\n      onDragEnd: () => {\n        animation.start({ x: 0 })\n\n        if (swipe.current > SWIPE_THRESHOLD) paginate(1)\n        else if (swipe.current < -SWIPE_THRESHOLD) paginate(-1)\n      },\n    },\n    {\n      drag: {\n        axis: 'x',\n        bounds: { left: 0, right: 0 },\n        rubberband: true,\n      },\n    },\n  )\n\n  useEffect(() => {\n    if (!autoplay || pageSize !== 0) setIndex(0)\n  }, [autoplay, pageSize])\n\n  useEffect(() => {\n    if (!autoplay) return () => {}\n\n    const intervalId = setInterval(() => (isLastPage ? setIndex(0) : paginate(1)), delay * 1000)\n\n    return () => clearInterval(intervalId)\n  }, [autoplay, delay, paginate, isLastPage])\n\n  const clipMaskClassName = useStyle({ overflow: 'hidden' })\n  const pageClassName = useStyle({ position: 'relative', width: '100%' })\n  const slideClassName = cx(\n    useStyle({ display: 'flex' }),\n    useStyle(\n      useResponsiveStyle([responsivePageSize] as const, ([pageSize = 1]) => ({\n        flexBasis: `${100 / pageSize}%`,\n        maxWidth: `${100 / pageSize}%`,\n        minWidth: `${100 / pageSize}%`,\n      })),\n    ),\n    useStyle(\n      useResponsiveStyle([slideAlignment] as const, ([alignItems = 'center']) => ({ alignItems })),\n    ),\n  )\n\n  const reelClassName = cx(\n    useStyle({ display: 'flex', position: 'relative', flexWrap: 'nowrap' }),\n    useStyle(\n      useResponsiveStyle([gap] as const, ([gap = { value: 0, unit: 'px' }]) => ({\n        margin: `0 ${`${-gap.value / 2}${gap.unit}`}`,\n        [`& > ${classSelector(slideClassName)}`]: {\n          padding: `0 ${`${gap.value / 2}${gap.unit}`}`,\n        },\n      })),\n    ),\n  )\n\n  const arrowClassName = cx(\n    useStyle({\n      padding: 10,\n      borderRadius: '50%',\n      outline: 0,\n      border: 0,\n      width: 40,\n      height: 40,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      cursor: 'pointer',\n      userSelect: 'none',\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [arrowBackground] as const,\n        ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => ({\n          background: colorToString(background),\n        }),\n      ),\n    ),\n    useStyle({ svg: { transition: 'transform 0.15s', stroke: 'currentcolor' } }),\n  )\n\n  const slopClassName = cx(\n    useStyle({\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n\n      display: 'flex',\n      '&[hidden]': {\n        display: 'none',\n      },\n\n      alignItems: 'center',\n      cursor: 'pointer',\n      zIndex: 2,\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [arrowColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n\n  const leftSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      useResponsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(-100% - 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(-50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      left: 0,\n\n      [`&:hover > ${classSelector(arrowClassName)}`]: {\n        '& > svg': {\n          transform: 'translateX(-2px)',\n        },\n      },\n    }),\n  )\n\n  const rightSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      useResponsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(-8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(100% + 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      right: 0,\n      [`&:hover > ${classSelector(arrowClassName)}`]: {\n        '& > svg': {\n          transform: 'translateX(2px)',\n        },\n      },\n    }),\n  )\n\n  const dotsClassName = cx(\n    useStyle({ display: showDots ? 'flex' : 'none', justifyContent: 'center', marginTop: 20 }),\n    useStyle(\n      useResponsiveStyle(\n        [dotColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        useStyle({ position: 'relative', display: 'flex', flexDirection: 'column' }),\n        width,\n        margin,\n        useStyle({ '&:focus': { outline: 0 } }),\n      )}\n      tabIndex={-1}\n      onKeyDown={e => {\n        switch (e.key) {\n          case 'ArrowRight':\n            paginate(1)\n            break\n          case 'ArrowLeft':\n            paginate(-1)\n            break\n          default:\n        }\n      }}\n    >\n      {/* NOTE: We set height to 100% here to fix an issue on IE11 where the child height of a flex column extends too far */}\n      <div className={useStyle({ position: 'relative', height: '100%' })}>\n        <div className={clipMaskClassName}>\n          {/* https://github.com/framer/motion/issues/1723 */}\n          {/* @ts-expect-error: React HTMLElement typings conflict with motion components */}\n          <motion.div {...bindPage()} className={pageClassName} animate={animation}>\n            <motion.div\n              // @ts-expect-error: Type error when upgrading to @types/react@19.2.7 and @types/react-dom@19.2.3\n              // Upgrade framer-motion package to fix type error\n              className={reelClassName}\n              animate={{ x: `${-(100 / pageSize) * startIndex}%` }}\n              transition={{\n                x: {\n                  type: 'tween',\n                  ease: [0.165, 0.84, 0.44, 1],\n                  duration: 0.5,\n                },\n              }}\n            >\n              {images.map(({ props: imageProps, key }) => (\n                <motion.div\n                  key={key}\n                  // @ts-expect-error: Type error when upgrading to @types/react@19.2.7 and @types/react-dom@19.2.3\n                  // Upgrade framer-motion package to fix type error\n                  className={slideClassName}\n                  onMouseDown={(e: MouseEvent) => e.preventDefault()}\n                  onClick={(e: MouseEvent) => {\n                    if (swipe.current !== 0) e.preventDefault()\n                  }}\n                >\n                  <Image\n                    width={[\n                      {\n                        deviceId: getBaseBreakpoint(breakpoints).id,\n                        value: { value: 100, unit: '%' },\n                      },\n                    ]}\n                    file={imageProps.file}\n                    altText={imageProps.altText}\n                    link={imageProps.link}\n                    border={slideBorder}\n                    borderRadius={slideBorderRadius}\n                  />\n                </motion.div>\n              ))}\n            </motion.div>\n          </motion.div>\n        </div>\n        <div\n          onClick={() => paginate(-1)}\n          className={leftSlopClassName}\n          hidden={!showArrows || isFirstPage}\n        >\n          <div className={arrowClassName}>\n            <LeftChevron />\n          </div>\n        </div>\n        <div\n          onClick={() => paginate(1)}\n          className={rightSlopClassName}\n          hidden={!showArrows || isLastPage}\n        >\n          <div className={arrowClassName}>\n            <RightChevron />\n          </div>\n        </div>\n      </div>\n      <div className={dotsClassName}>\n        {Array.from({ length: pageCount }).map((_, i) => (\n          <Dot key={i} active={i === pageIndex} onClick={() => paginate(i - pageIndex)} />\n        ))}\n      </div>\n    </div>\n  )\n})\n\nexport default Carousel\n\ntype DotBaseProps = {\n  className?: string\n  active: boolean\n}\n\ntype DotProps = DotBaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof DotBaseProps>\n\nfunction Dot({ className, active, ...restOfProps }: DotProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'relative',\n          margin: '0 6px',\n          borderRadius: '50%',\n          cursor: 'pointer',\n          width: 16,\n          height: 16,\n\n          '&::before, &::after': {\n            content: '\"\"',\n            position: 'absolute',\n            top: '50%',\n            left: '50%',\n            display: 'block',\n            borderRadius: '50%',\n            transition: 'all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n          },\n\n          '&::before': {\n            boxShadow: '0 0 0 2px currentColor',\n            transform: 'translate3d(-50%, -50%, 0)',\n            width: active ? 16 : 10,\n            height: active ? 16 : 10,\n          },\n\n          '&::after': {\n            background: 'currentColor',\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n            width: 10,\n            height: 10,\n          },\n\n          '&:hover::after': {\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n          },\n        }),\n        className,\n      )}\n    />\n  )\n}\n"],"mappings":";AAyCI,cAySE,YAzSF;AAvCJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,QAAQ,oBAAoB;AACrC,SAAS,kBAAkB;AAE3B,SAAS,yBAAyB;AAElC,SAAS,qBAAqB;AAE9B,SAAS,qBAAqB;AAE9B,OAAO,WAAW;AAClB,SAAS,gBAAgB;AACzB,SAAS,UAAU;AACnB,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAU/B,SAAS,KAAK,KAAa,KAAa,GAAmB;AACzD,QAAM,YAAY,MAAM;AACxB,WAAW,IAAI,OAAO,YAAa,aAAa,YAAa;AAC/D;AAEA,MAAM,cAAc,MAClB,oBAAC,SAAI,OAAM,8BAA6B,OAAM,MAAK,QAAO,MAAK,SAAQ,aACrE;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAK;AAAA,IACL,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,aAAY;AAAA;AACd,GACF;AAGF,MAAM,eAAe,MACnB,oBAAC,SAAI,OAAM,8BAA6B,OAAM,MAAK,QAAO,MAAK,SAAQ,aACrE;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAK;AAAA,IACL,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,aAAY;AAAA;AACd,GACF;AAwBF,MAAM,kBAAkB;AACxB,MAAM,aAAa,CAAC,IAAY,aAAqB,MAAM,IAAI;AAI/D,MAAM,gBAAgB,CAAC,cAAsB,IAAI,UAAU,MAAM,GAAG,EAAE,KAAK,GAAG,CAAC;AAE/E,MAAM,WAAW,WAAW,SAASA,UACnC;AAAA,EACE,SAAS,CAAC;AAAA,EACV;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AACF,GACA,KACA;AACA,QAAM,cAAc,eAAe;AACnC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AACpC,QAAM,QAAQ,OAAO,CAAC;AACtB,QAAM,aAAa,KAAK,GAAG,OAAO,QAAQ,KAAK;AAC/C,QAAM,WAAW,cAAc,kBAAkB,KAAK;AACtD,QAAM,OAAO,cAAc,cAAc,KAAK;AAC9C,QAAM,WAAW,aAAa;AAC9B,QAAM,YAAY,KAAK,MAAM,OAAO,SAAS,YAAY,OAAO,CAAC;AACjE,QAAM,YAAY,KAAK,KAAK,aAAa,IAAI;AAC7C,QAAM,cAAc,cAAc;AAClC,QAAM,aAAa,cAAc,YAAY;AAC7C,QAAM,WAAW;AAAA,IACf,CAAC,iBAAyB;AACxB,UAAI,iBAAiB;AAAG;AAExB,YAAM,YAAY,eAAe,KAAK,IAAI,YAAY;AACtD,YAAM,YAAY,YAAY,IAAI,OAAO,MAAM,QAAQ,IAAI,OAAO,MAAM,GAAG,UAAU;AACrF,YAAM,WAAW,YAAY,KAAK,IAAI,UAAU,QAAQ,OAAO,KAAK,IAAI,YAAY,CAAC;AAErF,eAAS,QAAQ,QAAQ;AAAA,IAC3B;AAAA,IACA,CAAC,QAAQ,OAAO,YAAY,UAAU,IAAI;AAAA,EAC5C;AAEA,QAAM,YAAY,aAAa,EAAE,GAAG,GAAG,YAAY,EAAE,MAAM,UAAU,WAAW,IAAI,EAAE,CAAC;AACvF,QAAM,WAAW;AAAA,IACf;AAAA,MACE,QAAQ,CAAC,EAAE,UAAU,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,GAAG,UAAU,CAAC,EAAE,EAAE,MAAM;AAC3D,kBAAU,MAAM,EAAE,GAAG,GAAG,CAAC;AACzB,cAAM,UAAU,WAAW,IAAI,EAAE;AAAA,MACnC;AAAA,MACA,WAAW,MAAM;AACf,kBAAU,MAAM,EAAE,GAAG,EAAE,CAAC;AAExB,YAAI,MAAM,UAAU;AAAiB,mBAAS,CAAC;AAAA,iBACtC,MAAM,UAAU,CAAC;AAAiB,mBAAS,EAAE;AAAA,MACxD;AAAA,IACF;AAAA,IACA;AAAA,MACE,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ,EAAE,MAAM,GAAG,OAAO,EAAE;AAAA,QAC5B,YAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,YAAY,aAAa;AAAG,eAAS,CAAC;AAAA,EAC7C,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,YAAU,MAAM;AACd,QAAI,CAAC;AAAU,aAAO,MAAM;AAAA,MAAC;AAE7B,UAAM,aAAa,YAAY,MAAO,aAAa,SAAS,CAAC,IAAI,SAAS,CAAC,GAAI,QAAQ,GAAI;AAE3F,WAAO,MAAM,cAAc,UAAU;AAAA,EACvC,GAAG,CAAC,UAAU,OAAO,UAAU,UAAU,CAAC;AAE1C,QAAM,oBAAoB,SAAS,EAAE,UAAU,SAAS,CAAC;AACzD,QAAM,gBAAgB,SAAS,EAAE,UAAU,YAAY,OAAO,OAAO,CAAC;AACtE,QAAM,iBAAiB;AAAA,IACrB,SAAS,EAAE,SAAS,OAAO,CAAC;AAAA,IAC5B;AAAA,MACE,mBAAmB,CAAC,kBAAkB,GAAY,CAAC,CAACC,YAAW,CAAC,OAAO;AAAA,QACrE,WAAW,GAAG,MAAMA,SAAQ;AAAA,QAC5B,UAAU,GAAG,MAAMA,SAAQ;AAAA,QAC3B,UAAU,GAAG,MAAMA,SAAQ;AAAA,MAC7B,EAAE;AAAA,IACJ;AAAA,IACA;AAAA,MACE,mBAAmB,CAAC,cAAc,GAAY,CAAC,CAAC,aAAa,QAAQ,OAAO,EAAE,WAAW,EAAE;AAAA,IAC7F;AAAA,EACF;AAEA,QAAM,gBAAgB;AAAA,IACpB,SAAS,EAAE,SAAS,QAAQ,UAAU,YAAY,UAAU,SAAS,CAAC;AAAA,IACtE;AAAA,MACE,mBAAmB,CAAC,GAAG,GAAY,CAAC,CAACC,OAAM,EAAE,OAAO,GAAG,MAAM,KAAK,CAAC,OAAO;AAAA,QACxE,QAAQ,KAAK,GAAG,CAACA,KAAI,QAAQ,CAAC,GAAGA,KAAI,IAAI,EAAE;AAAA,QAC3C,CAAC,OAAO,cAAc,cAAc,CAAC,EAAE,GAAG;AAAA,UACxC,SAAS,KAAK,GAAGA,KAAI,QAAQ,CAAC,GAAGA,KAAI,IAAI,EAAE;AAAA,QAC7C;AAAA,MACF,EAAE;AAAA,IACJ;AAAA,EACF;AAEA,QAAM,iBAAiB;AAAA,IACrB,SAAS;AAAA,MACP,SAAS;AAAA,MACT,cAAc;AAAA,MACd,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,YAAY;AAAA,IACd,CAAC;AAAA,IACD;AAAA,MACE;AAAA,QACE,CAAC,eAAe;AAAA,QAChB,CAAC,CAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,IAAI,GAAG,OAAO,EAAE,CAAC,OAAO;AAAA,UACnF,YAAY,cAAc,UAAU;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,IACA,SAAS,EAAE,KAAK,EAAE,YAAY,mBAAmB,QAAQ,eAAe,EAAE,CAAC;AAAA,EAC7E;AAEA,QAAM,gBAAgB;AAAA,IACpB,SAAS;AAAA,MACP,UAAU;AAAA,MACV,KAAK;AAAA,MACL,QAAQ;AAAA,MAER,SAAS;AAAA,MACT,aAAa;AAAA,QACX,SAAS;AAAA,MACX;AAAA,MAEA,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV,CAAC;AAAA,IACD;AAAA,MACE;AAAA,QACE,CAAC,UAAU;AAAA,QACX,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,OAAO;AAAA,UAC5E,OAAO,cAAc,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,MACE,mBAAmB,CAAC,aAAa,GAAY,CAAC,CAAC,WAAW,QAAQ,MAAM;AACtE,gBAAQ,UAAU;AAAA,UAChB,KAAK;AACH,mBAAO,EAAE,WAAW,kBAAkB;AAAA,UAExC,KAAK;AACH,mBAAO,EAAE,WAAW,gCAAgC;AAAA,UAEtD;AACE,mBAAO,EAAE,WAAW,yBAAyB;AAAA,QACjD;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,MAEN,CAAC,aAAa,cAAc,cAAc,CAAC,EAAE,GAAG;AAAA,QAC9C,WAAW;AAAA,UACT,WAAW;AAAA,QACb;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,qBAAqB;AAAA,IACzB;AAAA,IACA;AAAA,MACE,mBAAmB,CAAC,aAAa,GAAY,CAAC,CAAC,WAAW,QAAQ,MAAM;AACtE,gBAAQ,UAAU;AAAA,UAChB,KAAK;AACH,mBAAO,EAAE,WAAW,mBAAmB;AAAA,UAEzC,KAAK;AACH,mBAAO,EAAE,WAAW,+BAA+B;AAAA,UAErD;AACE,mBAAO,EAAE,WAAW,wBAAwB;AAAA,QAChD;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,CAAC,aAAa,cAAc,cAAc,CAAC,EAAE,GAAG;AAAA,QAC9C,WAAW;AAAA,UACT,WAAW;AAAA,QACb;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,gBAAgB;AAAA,IACpB,SAAS,EAAE,SAAS,WAAW,SAAS,QAAQ,gBAAgB,UAAU,WAAW,GAAG,CAAC;AAAA,IACzF;AAAA,MACE;AAAA,QACE,CAAC,QAAQ;AAAA,QACT,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,OAAO;AAAA,UAC5E,OAAO,cAAc,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,SAAS,EAAE,UAAU,YAAY,SAAS,QAAQ,eAAe,SAAS,CAAC;AAAA,QAC3E;AAAA,QACA;AAAA,QACA,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,CAAC;AAAA,MACxC;AAAA,MACA,UAAU;AAAA,MACV,WAAW,OAAK;AACd,gBAAQ,EAAE,KAAK;AAAA,UACb,KAAK;AACH,qBAAS,CAAC;AACV;AAAA,UACF,KAAK;AACH,qBAAS,EAAE;AACX;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MAGA;AAAA,6BAAC,SAAI,WAAW,SAAS,EAAE,UAAU,YAAY,QAAQ,OAAO,CAAC,GAC/D;AAAA,8BAAC,SAAI,WAAW,mBAGd,8BAAC,OAAO,KAAP,EAAY,GAAG,SAAS,GAAG,WAAW,eAAe,SAAS,WAC7D;AAAA,YAAC,OAAO;AAAA,YAAP;AAAA,cAGC,WAAW;AAAA,cACX,SAAS,EAAE,GAAG,GAAG,EAAE,MAAM,YAAY,UAAU,IAAI;AAAA,cACnD,YAAY;AAAA,gBACV,GAAG;AAAA,kBACD,MAAM;AAAA,kBACN,MAAM,CAAC,OAAO,MAAM,MAAM,CAAC;AAAA,kBAC3B,UAAU;AAAA,gBACZ;AAAA,cACF;AAAA,cAEC,iBAAO,IAAI,CAAC,EAAE,OAAO,YAAY,IAAI,MACpC;AAAA,gBAAC,OAAO;AAAA,gBAAP;AAAA,kBAIC,WAAW;AAAA,kBACX,aAAa,CAAC,MAAkB,EAAE,eAAe;AAAA,kBACjD,SAAS,CAAC,MAAkB;AAC1B,wBAAI,MAAM,YAAY;AAAG,wBAAE,eAAe;AAAA,kBAC5C;AAAA,kBAEA;AAAA,oBAAC;AAAA;AAAA,sBACC,OAAO;AAAA,wBACL;AAAA,0BACE,UAAU,kBAAkB,WAAW,EAAE;AAAA,0BACzC,OAAO,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,wBACjC;AAAA,sBACF;AAAA,sBACA,MAAM,WAAW;AAAA,sBACjB,SAAS,WAAW;AAAA,sBACpB,MAAM,WAAW;AAAA,sBACjB,QAAQ;AAAA,sBACR,cAAc;AAAA;AAAA,kBAChB;AAAA;AAAA,gBArBK;AAAA,cAsBP,CACD;AAAA;AAAA,UACH,GACF,GACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAM,SAAS,EAAE;AAAA,cAC1B,WAAW;AAAA,cACX,QAAQ,CAAC,cAAc;AAAA,cAEvB,8BAAC,SAAI,WAAW,gBACd,8BAAC,eAAY,GACf;AAAA;AAAA,UACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAM,SAAS,CAAC;AAAA,cACzB,WAAW;AAAA,cACX,QAAQ,CAAC,cAAc;AAAA,cAEvB,8BAAC,SAAI,WAAW,gBACd,8BAAC,gBAAa,GAChB;AAAA;AAAA,UACF;AAAA,WACF;AAAA,QACA,oBAAC,SAAI,WAAW,eACb,gBAAM,KAAK,EAAE,QAAQ,UAAU,CAAC,EAAE,IAAI,CAAC,GAAG,MACzC,oBAAC,OAAY,QAAQ,MAAM,WAAW,SAAS,MAAM,SAAS,IAAI,SAAS,KAAjE,CAAoE,CAC/E,GACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,IAAO,mBAAQ;AASf,SAAS,IAAI,EAAE,WAAW,QAAQ,GAAG,YAAY,GAAa;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,SAAS;AAAA,UACP,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,QAAQ;AAAA,UAER,uBAAuB;AAAA,YACrB,SAAS;AAAA,YACT,UAAU;AAAA,YACV,KAAK;AAAA,YACL,MAAM;AAAA,YACN,SAAS;AAAA,YACT,cAAc;AAAA,YACd,YAAY;AAAA,UACd;AAAA,UAEA,aAAa;AAAA,YACX,WAAW;AAAA,YACX,WAAW;AAAA,YACX,OAAO,SAAS,KAAK;AAAA,YACrB,QAAQ,SAAS,KAAK;AAAA,UACxB;AAAA,UAEA,YAAY;AAAA,YACV,YAAY;AAAA,YACZ,WAAW,oCAAoC,SAAS,IAAI,CAAC;AAAA,YAC7D,OAAO;AAAA,YACP,QAAQ;AAAA,UACV;AAAA,UAEA,kBAAkB;AAAA,YAChB,WAAW,oCAAoC,SAAS,IAAI,CAAC;AAAA,UAC/D;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":["Carousel","pageSize","gap"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  forwardRef,\n  Ref,\n  ComponentPropsWithoutRef,\n} from 'react'\nimport { motion, useAnimation } from 'framer-motion'\nimport { useGesture } from '@use-gesture/react'\n\nimport { getBaseBreakpoint } from '@makeswift/controls'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { type ResponsiveColor } from '../../utils/types'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { useBreakpoints } from '../../../runtimes/react/hooks/use-breakpoints'\nimport {\n  type ResponsiveGapData,\n  type ResponsiveNumberValue,\n  type ResponsiveIconRadioGroupValue,\n  type ImagesData,\n} from '@makeswift/prop-controllers'\nimport { composeStyles, useStyle } from '../../../runtimes/react/css-runtime/hooks/use-style'\n\n// Utility to wrap a value within a range. Pulled from:\n// https://github.com/Popmotion/popmotion/blob/adf681efd8568ada018ce68082dbd585f25c4c7d/packages/popmotion/src/utils/wrap.ts\nfunction wrap(min: number, max: number, v: number): number {\n  const rangeSize = max - min\n  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min\n}\n\nconst LeftChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M7,13,1,7,7,1\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\nconst RightChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M3,1,9,7,3,13\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\ntype Props = {\n  id?: string\n  images?: ImagesData\n  width?: string\n  margin?: string\n  pageSize?: ResponsiveNumberValue\n  step?: ResponsiveNumberValue\n  slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gap?: ResponsiveGapData\n  autoplay?: boolean\n  delay?: number\n  showArrows?: boolean\n  arrowPosition?: ResponsiveIconRadioGroupValue<'inside' | 'center' | 'outside'>\n  arrowColor?: ResponsiveColor | null\n  arrowBackground?: ResponsiveColor | null\n  showDots?: boolean\n  dotColor?: ResponsiveColor | null\n  slideBorder?: string\n  slideBorderRadius?: string\n}\n\nconst SWIPE_THRESHOLD = 20\nconst swipePower = (dx: number, velocity: number) => dx * (1 + velocity)\n\n// constructs a CSS [class selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors),\n// returns a compound class selector if the `classname` string includes multiple class names\nconst classSelector = (classname: string) => `.${classname.split(' ').join('.')}`\n\nconst Carousel = forwardRef(function Carousel(\n  {\n    images = [],\n    width,\n    margin,\n    pageSize: responsivePageSize,\n    step: responsiveStep,\n    gap,\n    slideAlignment,\n    showDots,\n    showArrows,\n    arrowPosition,\n    arrowColor,\n    arrowBackground,\n    dotColor,\n    autoplay = false,\n    delay = 5,\n    slideBorder,\n    slideBorderRadius,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const breakpoints = useBreakpoints()\n  const [index, setIndex] = useState(0)\n  const swipe = useRef(0)\n  const startIndex = wrap(0, images.length, index)\n  const pageSize = useMediaQuery(responsivePageSize) || 1\n  const step = useMediaQuery(responsiveStep) || 1\n  const endIndex = startIndex + pageSize\n  const pageCount = Math.ceil((images.length - pageSize) / step + 1)\n  const pageIndex = Math.ceil(startIndex / step)\n  const isFirstPage = pageIndex === 0\n  const isLastPage = pageIndex === pageCount - 1\n  const paginate = useCallback(\n    (pageDistance: number) => {\n      if (pageDistance === 0) return\n\n      const direction = pageDistance / Math.abs(pageDistance)\n      const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex)\n      const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance))\n\n      setIndex(index + distance)\n    },\n    [images, index, startIndex, endIndex, step],\n  )\n  // @ts-expect-error: `useAnimation` types expect no arguments.\n  const animation = useAnimation({ x: 0, transition: { type: 'spring', stiffness: 100 } })\n  const bindPage = useGesture(\n    {\n      onDrag: ({ movement: [mx], delta: [dx], velocity: [vx] }) => {\n        animation.start({ x: mx })\n        swipe.current = swipePower(dx, vx)\n      },\n      onDragEnd: () => {\n        animation.start({ x: 0 })\n\n        if (swipe.current > SWIPE_THRESHOLD) paginate(1)\n        else if (swipe.current < -SWIPE_THRESHOLD) paginate(-1)\n      },\n    },\n    {\n      drag: {\n        axis: 'x',\n        bounds: { left: 0, right: 0 },\n        rubberband: true,\n      },\n    },\n  )\n\n  useEffect(() => {\n    if (!autoplay || pageSize !== 0) setIndex(0)\n  }, [autoplay, pageSize])\n\n  useEffect(() => {\n    if (!autoplay) return () => {}\n\n    const intervalId = setInterval(() => (isLastPage ? setIndex(0) : paginate(1)), delay * 1000)\n\n    return () => clearInterval(intervalId)\n  }, [autoplay, delay, paginate, isLastPage])\n\n  const clipMaskStyle = useStyle({ overflow: 'hidden' })\n  const pageStyle = useStyle({ position: 'relative', width: '100%' })\n  const slideStyles = composeStyles(\n    useStyle({ display: 'flex' }),\n    useStyle(\n      useResponsiveStyle([responsivePageSize] as const, ([pageSize = 1]) => ({\n        flexBasis: `${100 / pageSize}%`,\n        maxWidth: `${100 / pageSize}%`,\n        minWidth: `${100 / pageSize}%`,\n      })),\n    ),\n    useStyle(\n      useResponsiveStyle([slideAlignment] as const, ([alignItems = 'center']) => ({ alignItems })),\n    ),\n  )\n\n  const reelStyles = composeStyles(\n    useStyle({ display: 'flex', position: 'relative', flexWrap: 'nowrap' }),\n    useStyle(\n      useResponsiveStyle([gap] as const, ([gap = { value: 0, unit: 'px' }]) => ({\n        margin: `0 ${`${-gap.value / 2}${gap.unit}`}`,\n        [`& > ${classSelector(slideStyles.className)}`]: {\n          padding: `0 ${`${gap.value / 2}${gap.unit}`}`,\n        },\n      })),\n    ),\n  )\n\n  const { className: arrowClassName, styleElements: arrowStyleElements } = composeStyles(\n    useStyle({\n      padding: 10,\n      borderRadius: '50%',\n      outline: 0,\n      border: 0,\n      width: 40,\n      height: 40,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      cursor: 'pointer',\n      userSelect: 'none',\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [arrowBackground] as const,\n        ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => ({\n          background: colorToString(background),\n        }),\n      ),\n    ),\n    useStyle({ svg: { transition: 'transform 0.15s', stroke: 'currentcolor' } }),\n  )\n\n  const { className: sharedSlopClassName, styleElements: sharedSlopStyleElements } = composeStyles(\n    useStyle({\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n\n      display: 'flex',\n      '&[hidden]': {\n        display: 'none',\n      },\n\n      alignItems: 'center',\n      cursor: 'pointer',\n      zIndex: 2,\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [arrowColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n\n  const { className: leftSlopClassName, styleElements: leftSlopStyleElements } = composeStyles(\n    sharedSlopClassName,\n    useStyle(\n      useResponsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(-100% - 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(-50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      left: 0,\n\n      [`&:hover > ${classSelector(arrowClassName)}`]: {\n        '& > svg': {\n          transform: 'translateX(-2px)',\n        },\n      },\n    }),\n  )\n\n  const { className: rightSlopClassName, styleElements: rightSlopStyleElements } = composeStyles(\n    sharedSlopClassName,\n    useStyle(\n      useResponsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(-8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(100% + 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      right: 0,\n      [`&:hover > ${classSelector(arrowClassName)}`]: {\n        '& > svg': {\n          transform: 'translateX(2px)',\n        },\n      },\n    }),\n  )\n\n  const { className: dotsClassName, styleElements: dotsStyleElements } = composeStyles(\n    useStyle({ display: showDots ? 'flex' : 'none', justifyContent: 'center', marginTop: 20 }),\n    useStyle(\n      useResponsiveStyle(\n        [dotColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n\n  const { className: containerClassName, styleElements: containerStyleElements } = composeStyles(\n    useStyle({ position: 'relative', display: 'flex', flexDirection: 'column' }),\n    width,\n    margin,\n    useStyle({ '&:focus': { outline: 0 } }),\n  )\n  const { className: relativePositionDivClassName, styleElement: relativePositionDivStyleElement } =\n    useStyle({\n      position: 'relative',\n      height: '100%',\n    })\n\n  return (\n    <>\n      {containerStyleElements}\n      <div\n        ref={ref}\n        className={containerClassName}\n        tabIndex={-1}\n        onKeyDown={e => {\n          switch (e.key) {\n            case 'ArrowRight':\n              paginate(1)\n              break\n            case 'ArrowLeft':\n              paginate(-1)\n              break\n            default:\n          }\n        }}\n      >\n        {relativePositionDivStyleElement}\n        {/* NOTE: We set height to 100% here to fix an issue on IE11 where the child height of a flex column extends too far */}\n        <div className={relativePositionDivClassName}>\n          {sharedSlopStyleElements}\n          {clipMaskStyle.styleElement}\n          <div className={clipMaskStyle.className}>\n            {pageStyle.styleElement}\n            {/* https://github.com/framer/motion/issues/1723 */}\n            {/* @ts-expect-error: React HTMLElement typings conflict with motion components */}\n            <motion.div {...bindPage()} className={pageStyle.className} animate={animation}>\n              {reelStyles.styleElements}\n              <motion.div\n                // @ts-expect-error: Type error when upgrading to @types/react@19.2.7 and @types/react-dom@19.2.3\n                // Upgrade framer-motion package to fix type error\n                className={reelStyles.className}\n                animate={{ x: `${-(100 / pageSize) * startIndex}%` }}\n                transition={{\n                  x: {\n                    type: 'tween',\n                    ease: [0.165, 0.84, 0.44, 1],\n                    duration: 0.5,\n                  },\n                }}\n              >\n                {slideStyles.styleElements}\n                {images.map(({ props: imageProps, key }) => (\n                  <motion.div\n                    key={key}\n                    // @ts-expect-error: Type error when upgrading to @types/react@19.2.7 and @types/react-dom@19.2.3\n                    // Upgrade framer-motion package to fix type error\n                    className={slideStyles.className}\n                    onMouseDown={(e: MouseEvent) => e.preventDefault()}\n                    onClick={(e: MouseEvent) => {\n                      if (swipe.current !== 0) e.preventDefault()\n                    }}\n                  >\n                    <Image\n                      width={[\n                        {\n                          deviceId: getBaseBreakpoint(breakpoints).id,\n                          value: { value: 100, unit: '%' },\n                        },\n                      ]}\n                      file={imageProps.file}\n                      altText={imageProps.altText}\n                      link={imageProps.link}\n                      border={slideBorder}\n                      borderRadius={slideBorderRadius}\n                    />\n                  </motion.div>\n                ))}\n              </motion.div>\n            </motion.div>\n          </div>\n          {leftSlopStyleElements}\n          <div\n            onClick={() => paginate(-1)}\n            className={leftSlopClassName}\n            hidden={!showArrows || isFirstPage}\n          >\n            {arrowStyleElements}\n            <div className={arrowClassName}>\n              <LeftChevron />\n            </div>\n          </div>\n          {rightSlopStyleElements}\n          <div\n            onClick={() => paginate(1)}\n            className={rightSlopClassName}\n            hidden={!showArrows || isLastPage}\n          >\n            {arrowStyleElements}\n            <div className={arrowClassName}>\n              <RightChevron />\n            </div>\n          </div>\n        </div>\n        {dotsStyleElements}\n        <div className={dotsClassName}>\n          {Array.from({ length: pageCount }).map((_, i) => (\n            <Dot key={i} active={i === pageIndex} onClick={() => paginate(i - pageIndex)} />\n          ))}\n        </div>\n      </div>\n    </>\n  )\n})\n\nexport default Carousel\n\ntype DotBaseProps = {\n  className?: string\n  active: boolean\n}\n\ntype DotProps = DotBaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof DotBaseProps>\n\nfunction Dot({ className, active, ...restOfProps }: DotProps) {\n  const styles = composeStyles(\n    useStyle({\n      position: 'relative',\n      margin: '0 6px',\n      borderRadius: '50%',\n      cursor: 'pointer',\n      width: 16,\n      height: 16,\n\n      '&::before, &::after': {\n        content: '\"\"',\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        display: 'block',\n        borderRadius: '50%',\n        transition: 'all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n      },\n\n      '&::before': {\n        boxShadow: '0 0 0 2px currentColor',\n        transform: 'translate3d(-50%, -50%, 0)',\n        width: active ? 16 : 10,\n        height: active ? 16 : 10,\n      },\n\n      '&::after': {\n        background: 'currentColor',\n        transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n        width: 10,\n        height: 10,\n      },\n\n      '&:hover::after': {\n        transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n      },\n    }),\n    className,\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <div {...restOfProps} className={styles.className} />\n    </>\n  )\n}\n"],"mappings":"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","names":["Carousel","pageSize","gap"]}