@salt-ds/embla-carousel 0.0.0-snapshot-20250627090641 → 0.1.0

package/dist-es/CarouselAutoplayIndicator.js

@@ -14,67 +14,77 @@ const sizeAndStrokeWidthMapping = {
   low: { size: 14, strokeWidth: 2 },
   touch: { size: 16, strokeWidth: 2 }
 };
-const CarouselAutoplayIndicator = forwardRef(({ className, duration, slideIndex, isPlaying, children, ...props }, ref) => {
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "salt-carousel-autoplay-indicator",
-    css: css_248z,
-    window: targetWindow
-  });
-  const barRef = useRef(null);
-  const animationFrameId = useRef(null);
-  const density = useDensity();
-  const { size, strokeWidth } = sizeAndStrokeWidthMapping[density];
-  const radius = (size - strokeWidth) / 2;
-  const circumference = 2 * Math.PI * radius;
-  useEffect(() => {
-    if (barRef.current) {
-      animationFrameId.current = requestAnimationFrame(() => {
-        if (!barRef.current) {
-          return;
-        }
-        barRef.current.style.animation = "none";
-        barRef.current.style.strokeDashoffset = `${circumference}`;
+const CarouselAutoplayIndicator = forwardRef(
+  ({
+    className,
+    duration,
+    slideIndex,
+    isPlaying,
+    isPaused = false,
+    children,
+    ...props
+  }, ref) => {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-carousel-autoplay-indicator",
+      css: css_248z,
+      window: targetWindow
+    });
+    const barRef = useRef(null);
+    const animationFrameId = useRef(null);
+    const density = useDensity();
+    const { size, strokeWidth } = sizeAndStrokeWidthMapping[density];
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    useEffect(() => {
+      if (barRef.current) {
         animationFrameId.current = requestAnimationFrame(() => {
           if (!barRef.current) {
             return;
           }
-          barRef.current.style.animation = `indicatorAnimation ${duration}ms linear`;
-          barRef.current.style.animationPlayState = isPlaying ? "running" : "paused";
+          barRef.current.style.animation = "none";
+          barRef.current.style.strokeDashoffset = `${circumference}`;
+          animationFrameId.current = requestAnimationFrame(() => {
+            if (!barRef.current) {
+              return;
+            }
+            barRef.current.style.animation = `indicatorAnimation ${duration}ms linear`;
+            barRef.current.style.animationPlayState = isPaused ? "paused" : isPlaying ? "running" : "paused";
+          });
         });
-      });
-    }
-    return () => {
-      if (animationFrameId.current !== null) {
-        cancelAnimationFrame(animationFrameId.current);
-        animationFrameId.current = null;
       }
-    };
-  }, [circumference, duration, slideIndex, isPlaying]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      style: {
-        width: size,
-        height: size,
-        // @ts-ignore
-        "--salt-carousel-svg-circumference": circumference
-      },
-      className: clsx(withBaseName(), className),
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        CarouselAutoplayIndicatorSVG,
-        {
-          size,
-          strokeWidth,
-          barRef,
-          radius
+      return () => {
+        if (animationFrameId.current !== null) {
+          cancelAnimationFrame(animationFrameId.current);
+          animationFrameId.current = null;
         }
-      )
-    }
-  );
-});
+      };
+    }, [circumference, duration, slideIndex, isPlaying, isPaused]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        style: {
+          width: size,
+          height: size,
+          // @ts-ignore
+          "--carousel-svg-circumference": circumference
+        },
+        className: clsx(withBaseName(), className),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          CarouselAutoplayIndicatorSVG,
+          {
+            size,
+            strokeWidth,
+            barRef,
+            radius
+          }
+        )
+      }
+    );
+  }
+);
 
 export { CarouselAutoplayIndicator };
 //# sourceMappingURL=CarouselAutoplayIndicator.js.map

package/dist-es/CarouselAutoplayIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselAutoplayIndicator.js","sources":["../src/CarouselAutoplayIndicator.tsx"],"sourcesContent":["import { makePrefixer, useDensity } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"classnames\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  useEffect,\n  useRef,\n} from \"react\";\nimport carouselAutoplayIndicator from \"./CarouselAutoplayIndicator.css\";\nimport { CarouselAutoplayIndicatorSVG } from \"./CarouselAutoplayIndicatorSVG\";\n\nexport interface CarouselAutoplayIndicatorProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Duration of each slide in milliseconds.\n   */\n  duration: number;\n  /**\n   * Index of slide currently displayed.\n   */\n  slideIndex: number;\n  /**\n   * If `true`, the indicator is animated to visualize the time until the next slide.\n   */\n  isPlaying: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltCarouselAutoplayIndicator\");\n\nconst sizeAndStrokeWidthMapping = {\n  high: { size: 10, strokeWidth: 2 },\n  medium: { size: 12, strokeWidth: 2 },\n  low: { size: 14, strokeWidth: 2 },\n  touch: { size: 16, strokeWidth: 2 },\n};\n\nexport const CarouselAutoplayIndicator = forwardRef<\n  HTMLDivElement,\n  CarouselAutoplayIndicatorProps\n>(({ className, duration, slideIndex, isPlaying, children, ...props }, ref) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-carousel-autoplay-indicator\",\n    css: carouselAutoplayIndicator,\n    window: targetWindow,\n  });\n\n  const barRef = useRef<SVGCircleElement | null>(null);\n  const animationFrameId = useRef<number | null>(null);\n\n  const density = useDensity();\n  const { size, strokeWidth } = sizeAndStrokeWidthMapping[density];\n  const radius = (size - strokeWidth) / 2;\n  const circumference = 2 * Math.PI * radius;\n\n  useEffect(() => {\n    if (barRef.current) {\n      animationFrameId.current = requestAnimationFrame(() => {\n        if (!barRef.current) {\n          return;\n        }\n        barRef.current.style.animation = \"none\"; // Reset animation\n        barRef.current.style.strokeDashoffset = `${circumference}`;\n        animationFrameId.current = requestAnimationFrame(() => {\n          if (!barRef.current) {\n            return;\n          }\n          barRef.current.style.animation = `indicatorAnimation ${duration}ms linear`;\n          barRef.current.style.animationPlayState = isPlaying\n            ? \"running\"\n            : \"paused\";\n        });\n      });\n    }\n\n    return () => {\n      if (animationFrameId.current !== null) {\n        cancelAnimationFrame(animationFrameId.current);\n        animationFrameId.current = null;\n      }\n    };\n  }, [circumference, duration, slideIndex, isPlaying]);\n\n  return (\n    <div\n      ref={ref}\n      style={{\n        width: size,\n        height: size,\n        // @ts-ignore\n        \"--salt-carousel-svg-circumference\": circumference,\n      }}\n      className={clsx(withBaseName(), className)}\n      {...props}\n    >\n      <CarouselAutoplayIndicatorSVG\n        size={size}\n        strokeWidth={strokeWidth}\n        barRef={barRef}\n        radius={radius}\n      />\n    </div>\n  );\n});\n"],"names":["carouselAutoplayIndicator"],"mappings":"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"}
+{"version":3,"file":"CarouselAutoplayIndicator.js","sources":["../src/CarouselAutoplayIndicator.tsx"],"sourcesContent":["import { makePrefixer, useDensity } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"classnames\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  useEffect,\n  useRef,\n} from \"react\";\nimport carouselAutoplayIndicator from \"./CarouselAutoplayIndicator.css\";\nimport { CarouselAutoplayIndicatorSVG } from \"./CarouselAutoplayIndicatorSVG\";\n\nexport interface CarouselAutoplayIndicatorProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Duration of each slide in milliseconds.\n   */\n  duration: number;\n  /**\n   * Index of slide currently displayed.\n   */\n  slideIndex: number;\n  /**\n   * If `true`, the indicator is animated to visualize the time until the next slide.\n   */\n  isPlaying: boolean;\n  /**\n   * If `true`, the animation is paused.\n   */\n  isPaused?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltCarouselAutoplayIndicator\");\n\nconst sizeAndStrokeWidthMapping = {\n  high: { size: 10, strokeWidth: 2 },\n  medium: { size: 12, strokeWidth: 2 },\n  low: { size: 14, strokeWidth: 2 },\n  touch: { size: 16, strokeWidth: 2 },\n};\n\nexport const CarouselAutoplayIndicator = forwardRef<\n  HTMLDivElement,\n  CarouselAutoplayIndicatorProps\n>(\n  (\n    {\n      className,\n      duration,\n      slideIndex,\n      isPlaying,\n      isPaused = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-autoplay-indicator\",\n      css: carouselAutoplayIndicator,\n      window: targetWindow,\n    });\n\n    const barRef = useRef<SVGCircleElement>(null);\n    const animationFrameId = useRef<number | null>(null);\n\n    const density = useDensity();\n    const { size, strokeWidth } = sizeAndStrokeWidthMapping[density];\n    const radius = (size - strokeWidth) / 2;\n    const circumference = 2 * Math.PI * radius;\n\n    useEffect(() => {\n      if (barRef.current) {\n        animationFrameId.current = requestAnimationFrame(() => {\n          if (!barRef.current) {\n            return;\n          }\n          barRef.current.style.animation = \"none\"; // Reset animation\n          barRef.current.style.strokeDashoffset = `${circumference}`;\n          animationFrameId.current = requestAnimationFrame(() => {\n            if (!barRef.current) {\n              return;\n            }\n            barRef.current.style.animation = `indicatorAnimation ${duration}ms linear`;\n            barRef.current.style.animationPlayState = isPaused\n              ? \"paused\"\n              : isPlaying\n                ? \"running\"\n                : \"paused\";\n          });\n        });\n      }\n\n      return () => {\n        if (animationFrameId.current !== null) {\n          cancelAnimationFrame(animationFrameId.current);\n          animationFrameId.current = null;\n        }\n      };\n    }, [circumference, duration, slideIndex, isPlaying, isPaused]);\n\n    return (\n      <div\n        ref={ref}\n        style={{\n          width: size,\n          height: size,\n          // @ts-ignore\n          \"--carousel-svg-circumference\": circumference,\n        }}\n        className={clsx(withBaseName(), className)}\n        {...props}\n      >\n        <CarouselAutoplayIndicatorSVG\n          size={size}\n          strokeWidth={strokeWidth}\n          barRef={barRef}\n          radius={radius}\n        />\n      </div>\n    );\n  },\n);\n"],"names":["carouselAutoplayIndicator"],"mappings":"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"}

package/dist-es/CarouselAutoplayIndicatorSVG.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselAutoplayIndicatorSVG.js","sources":["../src/CarouselAutoplayIndicatorSVG.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport clsx from \"classnames\";\nimport { type SVGAttributes, forwardRef } from \"react\";\nconst withBaseName = makePrefixer(\"saltCarouselAutoplayIndicatorSVG\");\n\nexport interface CarouselAutoplayIndicatorSVGProps\n  extends SVGAttributes<SVGSVGElement> {\n  /**\n   * Class name to apply to the SVG element.\n   */\n  className?: string;\n  /**\n   * Ref to attach to progress indicator element\n   */\n  barRef: React.Ref<SVGCircleElement>;\n  /**\n   * Size of the SVG in pixels.\n   */\n  size: number;\n  /**\n   * Stroke width of the progress indicator in pixels.\n   */\n  strokeWidth: number;\n  /**\n   * Radius of the progress indicator circle.\n   */\n  radius: number;\n}\n\nexport const CarouselAutoplayIndicatorSVG = forwardRef<\n  SVGSVGElement,\n  CarouselAutoplayIndicatorSVGProps\n>(\n  (\n    {\n      barRef,\n      className,\n      radius,\n      size,\n      strokeWidth,\n    }: CarouselAutoplayIndicatorSVGProps,\n    ref,\n  ) => {\n    return (\n      <svg\n        className={clsx(withBaseName(), className)}\n        width={size}\n        height={size}\n        aria-hidden\n        ref={ref}\n      >\n        <circle\n          className={withBaseName(\"track\")}\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          strokeWidth={strokeWidth}\n        />\n        <circle\n          ref={barRef}\n          className={withBaseName(\"bar\")}\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          strokeWidth={strokeWidth}\n        />\n      </svg>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;AAGA,MAAM,YAAA,GAAe,aAAa,kCAAkC,CAAA;AA0B7D,MAAM,4BAA+B,GAAA,UAAA;AAAA,EAI1C,CACE;AAAA,IACE,MAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,KAEF,GACG,KAAA;AACH,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,KAAO,EAAA,IAAA;AAAA,QACP,MAAQ,EAAA,IAAA;AAAA,QACR,aAAW,EAAA,IAAA;AAAA,QACX,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,IAAI,IAAO,GAAA,CAAA;AAAA,cACX,IAAI,IAAO,GAAA,CAAA;AAAA,cACX,CAAG,EAAA,MAAA;AAAA,cACH;AAAA;AAAA,WACF;AAAA,0BACA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,GAAK,EAAA,MAAA;AAAA,cACL,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,cAC7B,IAAI,IAAO,GAAA,CAAA;AAAA,cACX,IAAI,IAAO,GAAA,CAAA;AAAA,cACX,CAAG,EAAA,MAAA;AAAA,cACH;AAAA;AAAA;AACF;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}
+{"version":3,"file":"CarouselAutoplayIndicatorSVG.js","sources":["../src/CarouselAutoplayIndicatorSVG.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport clsx from \"classnames\";\nimport { type Ref, type SVGAttributes, forwardRef } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltCarouselAutoplayIndicatorSVG\");\n\nexport interface CarouselAutoplayIndicatorSVGProps\n  extends SVGAttributes<SVGSVGElement> {\n  /**\n   * Class name to apply to the SVG element.\n   */\n  className?: string;\n  /**\n   * Ref to attach to progress indicator element\n   */\n  barRef: Ref<SVGCircleElement>;\n  /**\n   * Size of the SVG in pixels.\n   */\n  size: number;\n  /**\n   * Stroke width of the progress indicator in pixels.\n   */\n  strokeWidth: number;\n  /**\n   * Radius of the progress indicator circle.\n   */\n  radius: number;\n}\n\nexport const CarouselAutoplayIndicatorSVG = forwardRef<\n  SVGSVGElement,\n  CarouselAutoplayIndicatorSVGProps\n>(\n  (\n    {\n      barRef,\n      className,\n      radius,\n      size,\n      strokeWidth,\n    }: CarouselAutoplayIndicatorSVGProps,\n    ref,\n  ) => {\n    return (\n      <svg\n        className={clsx(withBaseName(), className)}\n        width={size}\n        height={size}\n        aria-hidden\n        ref={ref}\n      >\n        <circle\n          className={withBaseName(\"track\")}\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          strokeWidth={strokeWidth}\n        />\n        <circle\n          ref={barRef}\n          className={withBaseName(\"bar\")}\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          strokeWidth={strokeWidth}\n        />\n      </svg>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;AAIA,MAAM,YAAA,GAAe,aAAa,kCAAkC,CAAA;AA0B7D,MAAM,4BAA+B,GAAA,UAAA;AAAA,EAI1C,CACE;AAAA,IACE,MAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,KAEF,GACG,KAAA;AACH,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,KAAO,EAAA,IAAA;AAAA,QACP,MAAQ,EAAA,IAAA;AAAA,QACR,aAAW,EAAA,IAAA;AAAA,QACX,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,IAAI,IAAO,GAAA,CAAA;AAAA,cACX,IAAI,IAAO,GAAA,CAAA;AAAA,cACX,CAAG,EAAA,MAAA;AAAA,cACH;AAAA;AAAA,WACF;AAAA,0BACA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,GAAK,EAAA,MAAA;AAAA,cACL,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,cAC7B,IAAI,IAAO,GAAA,CAAA;AAAA,cACX,IAAI,IAAO,GAAA,CAAA;AAAA,cACX,CAAG,EAAA,MAAA;AAAA,cACH;AAAA;AAAA;AACF;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}

package/dist-es/CarouselCard.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltCarouselCard {\n  display: flex;\n  transform: translate3d(0, 0, 0);\n  flex: 0 0 var(--saltCarousel-slide-size);\n  min-width: 0;\n  padding-left: var(--saltCarousel-slide-spacing);\n  box-sizing: border-box;\n}\n\n.saltCarouselCard-content {\n  display: flex;\n  user-select: none;\n  overflow: hidden;\n  flex-direction: column;\n  gap: var(--salt-spacing-200);\n  flex-grow: 1;\n}\n\n.saltCarouselCard-body {\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  gap: var(--salt-spacing-200);\n  flex-grow: 1;\n  padding: 0 var(--salt-spacing-200) var(--salt-spacing-200) var(--salt-spacing-200);\n}\n\n.saltCarouselCard-content h2,\n.saltCarouselCard-content h3 {\n  margin: 0;\n}\n\n.saltCarouselCard[data-visibility=\"off-screen\"] a {\n  visibility: hidden;\n}\n\n.saltCarouselCard-bordered {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border-radius: var(--salt-palette-corner, 0);\n}\n";
+var css_248z = ".saltCarouselCard {\n  display: flex;\n  transform: translate3d(0, 0, 0);\n  flex: 0 0 var(--carousel-slide-size);\n  min-width: 0;\n  padding-left: var(--carousel-slide-spacing);\n  box-sizing: border-box;\n}\n\n.saltCarouselCard-content {\n  display: flex;\n  user-select: none;\n  overflow: hidden;\n  flex-direction: column;\n  gap: var(--salt-spacing-200);\n  flex-grow: 1;\n}\n\n.saltCarouselCard-body {\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  gap: var(--salt-spacing-200);\n  flex-grow: 1;\n  padding: 0 var(--salt-spacing-200) var(--salt-spacing-200) var(--salt-spacing-200);\n}\n\n.saltCarouselCard-content h2,\n.saltCarouselCard-content h3 {\n  margin: 0;\n}\n\n.saltCarouselCard[data-visibility=\"off-screen\"] a {\n  visibility: hidden;\n}\n\n.saltCarouselCard-bordered {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border-radius: var(--salt-palette-corner, 0);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=CarouselCard.css.js.map

package/dist-es/CarouselCard.js

@@ -11,7 +11,7 @@ const CarouselCard = forwardRef(
   function CarouselCard2({ actions, appearance, children, className, header, media, ...rest }, ref) {
     const targetWindow = useWindow();
     useComponentCssInjection({
-      testId: "salt-carousel-slide",
+      testId: "salt-carousel-card",
       css: css_248z,
       window: targetWindow
     });

package/dist-es/CarouselCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselCard.js","sources":["../src/CarouselCard.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentProps, type ReactNode, forwardRef } from \"react\";\nimport saltCarouselCardCss from \"./CarouselCard.css\";\n\nconst withBaseName = makePrefixer(\"saltCarouselCard\");\n\n/**\n * Props for the CarouselCard component.\n */\nexport interface CarouselCardProps extends ComponentProps<\"div\"> {\n  /**\n   * Actions to be displayed in the content footer.\n   * This can include buttons or any other interactive elements.\n   */\n  actions?: ReactNode;\n\n  /**\n   * Media content to be displayed inside the slide.\n   * This could include images, videos, etc., that are visually prominent.\n   * It differs from children in that media is intended to be the main visual element of the slide.\n   */\n  media?: ReactNode;\n\n  /**\n   * The appearance of the slide. Options are 'bordered', and 'transparent'.\n   * 'transparent' is the default value.\n   **/\n  appearance?: \"bordered\" | \"transparent\";\n\n  /**\n   * Header content to be displayed at the top of the slide.\n   * This can be text or any other React node.\n   */\n  header?: ReactNode;\n\n  /**\n   * Carousel slide id.\n   * This can be used to uniquely identify the slide.\n   */\n  id?: string;\n}\n\nexport const CarouselCard = forwardRef<HTMLDivElement, CarouselCardProps>(\n  function CarouselCard(\n    { actions, appearance, children, className, header, media, ...rest },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-slide\",\n      css: saltCarouselCardCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        role=\"tabpanel\"\n        aria-roledescription=\"slide\"\n        className={clsx(withBaseName(), className)}\n        {...rest}\n        ref={ref}\n      >\n        <div\n          className={clsx(withBaseName(\"content\"), {\n            [withBaseName(\"bordered\")]: appearance === \"bordered\",\n          })}\n        >\n          {media}\n          {children && (\n            <div className={withBaseName(\"body\")}>\n              <div>{header}</div>\n              <div>{children}</div>\n              {actions}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["CarouselCard","saltCarouselCardCss"],"mappings":";;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAsC7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAAA,CACP,EAAE,OAAA,EAAS,UAAY,EAAA,QAAA,EAAU,SAAW,EAAA,MAAA,EAAQ,KAAO,EAAA,GAAG,IAAK,EAAA,EACnE,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,UAAA;AAAA,QACL,sBAAqB,EAAA,OAAA;AAAA,QACrB,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,kBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,SAAS,CAAG,EAAA;AAAA,cACvC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAe,KAAA;AAAA,aAC5C,CAAA;AAAA,YAEA,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cACA,4BACE,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,MAAM,CACjC,EAAA,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,SAAK,QAAO,EAAA,MAAA,EAAA,CAAA;AAAA,gCACb,GAAA,CAAC,SAAK,QAAS,EAAA,CAAA;AAAA,gBACd;AAAA,eACH,EAAA;AAAA;AAAA;AAAA;AAEJ;AAAA,KACF;AAAA;AAGN;;;;"}
+{"version":3,"file":"CarouselCard.js","sources":["../src/CarouselCard.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentProps, type ReactNode, forwardRef } from \"react\";\nimport saltCarouselCardCss from \"./CarouselCard.css\";\n\nconst withBaseName = makePrefixer(\"saltCarouselCard\");\n\n/**\n * Props for the CarouselCard component.\n */\nexport interface CarouselCardProps extends ComponentProps<\"div\"> {\n  /**\n   * Actions to be displayed in the content footer.\n   * This can include buttons or any other interactive elements.\n   */\n  actions?: ReactNode;\n\n  /**\n   * Media content to be displayed inside the slide.\n   * This could include images, videos, etc., that are visually prominent.\n   * It differs from children in that media is intended to be the main visual element of the slide.\n   */\n  media?: ReactNode;\n\n  /**\n   * The appearance of the slide. Options are 'bordered', and 'transparent'.\n   * 'transparent' is the default value.\n   **/\n  appearance?: \"bordered\" | \"transparent\";\n\n  /**\n   * Header content to be displayed at the top of the slide.\n   * This can be text or any other React node.\n   */\n  header?: ReactNode;\n\n  /**\n   * Carousel slide id.\n   * This can be used to uniquely identify the slide.\n   */\n  id?: string;\n}\n\nexport const CarouselCard = forwardRef<HTMLDivElement, CarouselCardProps>(\n  function CarouselCard(\n    { actions, appearance, children, className, header, media, ...rest },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-card\",\n      css: saltCarouselCardCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        role=\"tabpanel\"\n        aria-roledescription=\"slide\"\n        className={clsx(withBaseName(), className)}\n        {...rest}\n        ref={ref}\n      >\n        <div\n          className={clsx(withBaseName(\"content\"), {\n            [withBaseName(\"bordered\")]: appearance === \"bordered\",\n          })}\n        >\n          {media}\n          {children && (\n            <div className={withBaseName(\"body\")}>\n              <div>{header}</div>\n              <div>{children}</div>\n              {actions}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["CarouselCard","saltCarouselCardCss"],"mappings":";;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAsC7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAAA,CACP,EAAE,OAAA,EAAS,UAAY,EAAA,QAAA,EAAU,SAAW,EAAA,MAAA,EAAQ,KAAO,EAAA,GAAG,IAAK,EAAA,EACnE,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,UAAA;AAAA,QACL,sBAAqB,EAAA,OAAA;AAAA,QACrB,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,kBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,SAAS,CAAG,EAAA;AAAA,cACvC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAe,KAAA;AAAA,aAC5C,CAAA;AAAA,YAEA,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cACA,4BACE,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,MAAM,CACjC,EAAA,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,SAAK,QAAO,EAAA,MAAA,EAAA,CAAA;AAAA,gCACb,GAAA,CAAC,SAAK,QAAS,EAAA,CAAA;AAAA,gBACd;AAAA,eACH,EAAA;AAAA;AAAA;AAAA;AAEJ;AAAA,KACF;AAAA;AAGN;;;;"}

package/dist-es/CarouselNextButton.js

@@ -1,18 +1,15 @@
 import { jsx } from 'react/jsx-runtime';
 import { useIcon, Button } from '@salt-ds/core';
-import { forwardRef, useCallback } from 'react';
+import { forwardRef } from 'react';
 import { usePrevNextButtons } from './usePrevNextButtons.js';
 
 const CarouselNextButton = forwardRef(function CarouselNextButton2({ className, onClick, ...rest }, ref) {
   const { NextIcon } = useIcon();
   const { nextBtnDisabled, onNextButtonClick } = usePrevNextButtons();
-  const handleClick = useCallback(
-    (event) => {
-      onNextButtonClick();
-      onClick == null ? void 0 : onClick(event);
-    },
-    [onNextButtonClick, onClick]
-  );
+  const handleClick = (event) => {
+    onNextButtonClick();
+    onClick == null ? void 0 : onClick(event);
+  };
   return /* @__PURE__ */ jsx(
     Button,
     {

package/dist-es/CarouselNextButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselNextButton.js","sources":["../src/CarouselNextButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, useIcon } from \"@salt-ds/core\";\nimport { type MouseEventHandler, forwardRef, useCallback } from \"react\";\nimport { usePrevNextButtons } from \"./usePrevNextButtons\";\n\n/**\n * Props for the CarouselNextButton component.\n */\nexport interface CarouselNextButtonProps extends ButtonProps {}\n\nexport const CarouselNextButton = forwardRef<\n  HTMLButtonElement,\n  CarouselNextButtonProps\n>(function CarouselNextButton({ className, onClick, ...rest }, ref) {\n  const { NextIcon } = useIcon();\n  const { nextBtnDisabled, onNextButtonClick } = usePrevNextButtons();\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (event) => {\n      onNextButtonClick();\n      onClick?.(event);\n    },\n    [onNextButtonClick, onClick],\n  );\n\n  return (\n    <Button\n      onClick={handleClick}\n      disabled={nextBtnDisabled}\n      focusableWhenDisabled\n      appearance=\"bordered\"\n      sentiment=\"neutral\"\n      aria-label=\"Next slide\"\n      ref={ref}\n      {...rest}\n    >\n      <NextIcon aria-hidden />\n    </Button>\n  );\n});\n"],"names":["CarouselNextButton"],"mappings":";;;;;AASa,MAAA,kBAAA,GAAqB,UAGhC,CAAA,SAASA,mBAAmB,CAAA,EAAE,WAAW,OAAS,EAAA,GAAG,IAAK,EAAA,EAAG,GAAK,EAAA;AAClE,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,OAAQ,EAAA;AAC7B,EAAA,MAAM,EAAE,eAAA,EAAiB,iBAAkB,EAAA,GAAI,kBAAmB,EAAA;AAElE,EAAA,MAAM,WAAoD,GAAA,WAAA;AAAA,IACxD,CAAC,KAAU,KAAA;AACT,MAAkB,iBAAA,EAAA;AAClB,MAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,KACZ;AAAA,IACA,CAAC,mBAAmB,OAAO;AAAA,GAC7B;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,WAAA;AAAA,MACT,QAAU,EAAA,eAAA;AAAA,MACV,qBAAqB,EAAA,IAAA;AAAA,MACrB,UAAW,EAAA,UAAA;AAAA,MACX,SAAU,EAAA,SAAA;AAAA,MACV,YAAW,EAAA,YAAA;AAAA,MACX,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,GACxB;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CarouselNextButton.js","sources":["../src/CarouselNextButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, useIcon } from \"@salt-ds/core\";\nimport { type MouseEventHandler, forwardRef } from \"react\";\nimport { usePrevNextButtons } from \"./usePrevNextButtons\";\n\n/**\n * Props for the CarouselNextButton component.\n */\nexport interface CarouselNextButtonProps\n  extends Omit<ButtonProps, \"variant\" | \"loading\" | \"loadingAnnouncement\"> {}\n\nexport const CarouselNextButton = forwardRef<\n  HTMLButtonElement,\n  CarouselNextButtonProps\n>(function CarouselNextButton({ className, onClick, ...rest }, ref) {\n  const { NextIcon } = useIcon();\n  const { nextBtnDisabled, onNextButtonClick } = usePrevNextButtons();\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    onNextButtonClick();\n    onClick?.(event);\n  };\n\n  return (\n    <Button\n      onClick={handleClick}\n      disabled={nextBtnDisabled}\n      focusableWhenDisabled\n      appearance=\"bordered\"\n      sentiment=\"neutral\"\n      aria-label=\"Next slide\"\n      ref={ref}\n      {...rest}\n    >\n      <NextIcon aria-hidden />\n    </Button>\n  );\n});\n"],"names":["CarouselNextButton"],"mappings":";;;;;AAUa,MAAA,kBAAA,GAAqB,UAGhC,CAAA,SAASA,mBAAmB,CAAA,EAAE,WAAW,OAAS,EAAA,GAAG,IAAK,EAAA,EAAG,GAAK,EAAA;AAClE,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,OAAQ,EAAA;AAC7B,EAAA,MAAM,EAAE,eAAA,EAAiB,iBAAkB,EAAA,GAAI,kBAAmB,EAAA;AAElE,EAAM,MAAA,WAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,IAAkB,iBAAA,EAAA;AAClB,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,WAAA;AAAA,MACT,QAAU,EAAA,eAAA;AAAA,MACV,qBAAqB,EAAA,IAAA;AAAA,MACrB,UAAW,EAAA,UAAA;AAAA,MACX,SAAU,EAAA,SAAA;AAAA,MACV,YAAW,EAAA,YAAA;AAAA,MACX,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,GACxB;AAEJ,CAAC;;;;"}

package/dist-es/CarouselPreviousButton.js

@@ -1,18 +1,15 @@
 import { jsx } from 'react/jsx-runtime';
 import { useIcon, Button } from '@salt-ds/core';
-import { forwardRef, useCallback } from 'react';
+import { forwardRef } from 'react';
 import { usePrevNextButtons } from './usePrevNextButtons.js';
 
 const CarouselPreviousButton = forwardRef(function CarouselPreviousButton2({ className, onClick, ...rest }, ref) {
   const { PreviousIcon } = useIcon();
   const { prevBtnDisabled, onPrevButtonClick } = usePrevNextButtons();
-  const handleClick = useCallback(
-    (event) => {
-      onPrevButtonClick();
-      onClick == null ? void 0 : onClick(event);
-    },
-    [onPrevButtonClick, onClick]
-  );
+  const handleClick = (event) => {
+    onPrevButtonClick();
+    onClick == null ? void 0 : onClick(event);
+  };
   return /* @__PURE__ */ jsx(
     Button,
     {

package/dist-es/CarouselPreviousButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselPreviousButton.js","sources":["../src/CarouselPreviousButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, useIcon } from \"@salt-ds/core\";\nimport { type MouseEventHandler, forwardRef, useCallback } from \"react\";\nimport { usePrevNextButtons } from \"./usePrevNextButtons\";\n\n/**\n * Props for the CarouselPreviousButton component.\n */\nexport interface CarouselPreviousButtonProps extends ButtonProps {}\n\nexport const CarouselPreviousButton = forwardRef<\n  HTMLButtonElement,\n  CarouselPreviousButtonProps\n>(function CarouselPreviousButton({ className, onClick, ...rest }, ref) {\n  const { PreviousIcon } = useIcon();\n  const { prevBtnDisabled, onPrevButtonClick } = usePrevNextButtons();\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (event) => {\n      onPrevButtonClick();\n      onClick?.(event);\n    },\n    [onPrevButtonClick, onClick],\n  );\n\n  return (\n    <Button\n      onClick={handleClick}\n      disabled={prevBtnDisabled}\n      focusableWhenDisabled\n      appearance=\"bordered\"\n      sentiment=\"neutral\"\n      aria-label=\"Previous slide\"\n      ref={ref}\n      {...rest}\n    >\n      <PreviousIcon aria-hidden />\n    </Button>\n  );\n});\n"],"names":["CarouselPreviousButton"],"mappings":";;;;;AASa,MAAA,sBAAA,GAAyB,UAGpC,CAAA,SAASA,uBAAuB,CAAA,EAAE,WAAW,OAAS,EAAA,GAAG,IAAK,EAAA,EAAG,GAAK,EAAA;AACtE,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,OAAQ,EAAA;AACjC,EAAA,MAAM,EAAE,eAAA,EAAiB,iBAAkB,EAAA,GAAI,kBAAmB,EAAA;AAElE,EAAA,MAAM,WAAoD,GAAA,WAAA;AAAA,IACxD,CAAC,KAAU,KAAA;AACT,MAAkB,iBAAA,EAAA;AAClB,MAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,KACZ;AAAA,IACA,CAAC,mBAAmB,OAAO;AAAA,GAC7B;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,WAAA;AAAA,MACT,QAAU,EAAA,eAAA;AAAA,MACV,qBAAqB,EAAA,IAAA;AAAA,MACrB,UAAW,EAAA,UAAA;AAAA,MACX,SAAU,EAAA,SAAA;AAAA,MACV,YAAW,EAAA,gBAAA;AAAA,MACX,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,GAC5B;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CarouselPreviousButton.js","sources":["../src/CarouselPreviousButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, useIcon } from \"@salt-ds/core\";\nimport { type MouseEventHandler, forwardRef } from \"react\";\nimport { usePrevNextButtons } from \"./usePrevNextButtons\";\n\n/**\n * Props for the CarouselPreviousButton component.\n */\nexport interface CarouselPreviousButtonProps\n  extends Omit<ButtonProps, \"variant\" | \"loading\" | \"loadingAnnouncement\"> {}\n\nexport const CarouselPreviousButton = forwardRef<\n  HTMLButtonElement,\n  CarouselPreviousButtonProps\n>(function CarouselPreviousButton({ className, onClick, ...rest }, ref) {\n  const { PreviousIcon } = useIcon();\n  const { prevBtnDisabled, onPrevButtonClick } = usePrevNextButtons();\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    onPrevButtonClick();\n    onClick?.(event);\n  };\n\n  return (\n    <Button\n      onClick={handleClick}\n      disabled={prevBtnDisabled}\n      focusableWhenDisabled\n      appearance=\"bordered\"\n      sentiment=\"neutral\"\n      aria-label=\"Previous slide\"\n      ref={ref}\n      {...rest}\n    >\n      <PreviousIcon aria-hidden />\n    </Button>\n  );\n});\n"],"names":["CarouselPreviousButton"],"mappings":";;;;;AAUa,MAAA,sBAAA,GAAyB,UAGpC,CAAA,SAASA,uBAAuB,CAAA,EAAE,WAAW,OAAS,EAAA,GAAG,IAAK,EAAA,EAAG,GAAK,EAAA;AACtE,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,OAAQ,EAAA;AACjC,EAAA,MAAM,EAAE,eAAA,EAAiB,iBAAkB,EAAA,GAAI,kBAAmB,EAAA;AAElE,EAAM,MAAA,WAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,IAAkB,iBAAA,EAAA;AAClB,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,WAAA;AAAA,MACT,QAAU,EAAA,eAAA;AAAA,MACV,qBAAqB,EAAA,IAAA;AAAA,MACrB,UAAW,EAAA,UAAA;AAAA,MACX,SAAU,EAAA,SAAA;AAAA,MACV,YAAW,EAAA,gBAAA;AAAA,MACX,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,GAC5B;AAEJ,CAAC;;;;"}

package/dist-es/CarouselProgressLabel.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltCarouselTabList.saltText {\n  font-weight: var(--salt-palette-text-body-fontWeight-strong);\n}\n";
+var css_248z = ".saltCarouselTabList.saltText {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=CarouselProgressLabel.css.js.map

package/dist-es/CarouselProgressLabel.js

@@ -3,7 +3,7 @@ import { makePrefixer, Text } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useCarouselContext } from './CarouselContext.js';
 import css_248z from './CarouselProgressLabel.css.js';
 
@@ -23,34 +23,34 @@ function CarouselProgressLabel({
   const { emblaApi } = useCarouselContext();
   const [currentSlide, setCurrentSlide] = useState("");
   const [totalSlides, setTotalSlides] = useState(0);
-  const handleSettle = useCallback((emblaApi2) => {
-    const slideIndexInView = (emblaApi2 == null ? void 0 : emblaApi2.selectedScrollSnap()) ?? 0;
-    const numberOfSlides = (emblaApi2 == null ? void 0 : emblaApi2.slideNodes().length) ?? 0;
-    const scrollSnaps = (emblaApi2 == null ? void 0 : emblaApi2.scrollSnapList()) ?? [];
-    const slidesPerTransition = numberOfSlides ? Math.ceil(numberOfSlides / scrollSnaps.length) : 0;
-    const startSlideNumber = Math.min(
-      slideIndexInView * slidesPerTransition + 1,
-      numberOfSlides - (slidesPerTransition - 1)
-    );
-    const endSlideNumber = Math.min(
-      startSlideNumber + slidesPerTransition - 1,
-      numberOfSlides
-    );
-    if (startSlideNumber === endSlideNumber) {
-      setCurrentSlide(startSlideNumber.toString(10));
-    } else {
-      setCurrentSlide(`${startSlideNumber}-${endSlideNumber}`);
-    }
-    setTotalSlides(numberOfSlides);
-  }, []);
   useEffect(() => {
+    const handleSelect = (emblaApi2) => {
+      const slideIndexInView = (emblaApi2 == null ? void 0 : emblaApi2.selectedScrollSnap()) ?? 0;
+      const numberOfSlides = (emblaApi2 == null ? void 0 : emblaApi2.slideNodes().length) ?? 0;
+      const scrollSnaps = (emblaApi2 == null ? void 0 : emblaApi2.scrollSnapList()) ?? [];
+      const slidesPerTransition = numberOfSlides ? Math.ceil(numberOfSlides / scrollSnaps.length) : 0;
+      const startSlideNumber = Math.min(
+        slideIndexInView * slidesPerTransition + 1,
+        numberOfSlides - (slidesPerTransition - 1)
+      );
+      const endSlideNumber = Math.min(
+        startSlideNumber + slidesPerTransition - 1,
+        numberOfSlides
+      );
+      if (startSlideNumber === endSlideNumber) {
+        setCurrentSlide(startSlideNumber.toString(10));
+      } else {
+        setCurrentSlide(`${startSlideNumber}-${endSlideNumber}`);
+      }
+      setTotalSlides(numberOfSlides);
+    };
     if (!emblaApi) return;
-    emblaApi.on("init", handleSettle).on("reInit", handleSettle).on("settle", handleSettle);
-    handleSettle(emblaApi);
+    emblaApi.on("init", handleSelect).on("reInit", handleSelect).on("select", handleSelect);
+    handleSelect(emblaApi);
     return () => {
-      emblaApi.off("init", handleSettle).off("reInit", handleSettle).off("settle", handleSettle);
+      emblaApi.off("init", handleSelect).off("reInit", handleSelect).off("select", handleSelect);
     };
-  }, [emblaApi, handleSettle]);
+  }, [emblaApi]);
   return /* @__PURE__ */ jsxs(Text, { className: clsx(withBaseName(), className), ...props, children: [
     "Slide ",
     currentSlide,

package/dist-es/CarouselProgressLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselProgressLabel.js","sources":["../src/CarouselProgressLabel.tsx"],"sourcesContent":["import { Text, type TextProps, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { EmblaCarouselType } from \"embla-carousel\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport carouselProgressLabelCss from \"./CarouselProgressLabel.css\";\n\n/**\n * Props for the CarouselProgressLabel component.\n */\nexport interface CarouselProgressLabelProps extends TextProps<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCarouselTabList\");\n\nexport function CarouselProgressLabel({\n  className,\n  styleAs = \"label\",\n  children,\n  ...props\n}: CarouselProgressLabelProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-carousel-progress-label\",\n    css: carouselProgressLabelCss,\n    window: targetWindow,\n  });\n\n  const { emblaApi } = useCarouselContext();\n\n  const [currentSlide, setCurrentSlide] = useState(\"\");\n  const [totalSlides, setTotalSlides] = useState(0);\n\n  const handleSettle = useCallback((emblaApi: EmblaCarouselType) => {\n    const slideIndexInView = emblaApi?.selectedScrollSnap() ?? 0;\n    const numberOfSlides = emblaApi?.slideNodes().length ?? 0;\n    const scrollSnaps = emblaApi?.scrollSnapList() ?? [];\n    const slidesPerTransition = numberOfSlides\n      ? Math.ceil(numberOfSlides / scrollSnaps.length)\n      : 0;\n    const startSlideNumber = Math.min(\n      slideIndexInView * slidesPerTransition + 1,\n      numberOfSlides - (slidesPerTransition - 1),\n    );\n    const endSlideNumber = Math.min(\n      startSlideNumber + slidesPerTransition - 1,\n      numberOfSlides,\n    );\n\n    if (startSlideNumber === endSlideNumber) {\n      setCurrentSlide(startSlideNumber.toString(10));\n    } else {\n      setCurrentSlide(`${startSlideNumber}-${endSlideNumber}`);\n    }\n    setTotalSlides(numberOfSlides);\n  }, []);\n\n  useEffect(() => {\n    if (!emblaApi) return;\n    emblaApi\n      .on(\"init\", handleSettle)\n      .on(\"reInit\", handleSettle)\n      .on(\"settle\", handleSettle);\n    handleSettle(emblaApi);\n    // Cleanup listener on component unmount\n    return () => {\n      emblaApi\n        .off(\"init\", handleSettle)\n        .off(\"reInit\", handleSettle)\n        .off(\"settle\", handleSettle);\n    };\n  }, [emblaApi, handleSettle]);\n\n  return (\n    <Text className={clsx(withBaseName(), className)} {...props}>\n      Slide {currentSlide} of {totalSlides}\n    </Text>\n  );\n}\n"],"names":["carouselProgressLabelCss","emblaApi"],"mappings":";;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA;AAEhD,SAAS,qBAAsB,CAAA;AAAA,EACpC,SAAA;AAAA,EACA,OAAU,GAAA,OAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAA+B,EAAA;AAC7B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,8BAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,kBAAmB,EAAA;AAExC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,EAAE,CAAA;AACnD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,CAAC,CAAA;AAEhD,EAAM,MAAA,YAAA,GAAe,WAAY,CAAA,CAACC,SAAgC,KAAA;AAChE,IAAA,MAAM,gBAAmBA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,kBAAwB,EAAA,KAAA,CAAA;AAC3D,IAAA,MAAM,cAAiBA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,aAAa,MAAU,KAAA,CAAA;AACxD,IAAA,MAAM,WAAcA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,qBAAoB,EAAC;AACnD,IAAA,MAAM,sBAAsB,cACxB,GAAA,IAAA,CAAK,KAAK,cAAiB,GAAA,WAAA,CAAY,MAAM,CAC7C,GAAA,CAAA;AACJ,IAAA,MAAM,mBAAmB,IAAK,CAAA,GAAA;AAAA,MAC5B,mBAAmB,mBAAsB,GAAA,CAAA;AAAA,MACzC,kBAAkB,mBAAsB,GAAA,CAAA;AAAA,KAC1C;AACA,IAAA,MAAM,iBAAiB,IAAK,CAAA,GAAA;AAAA,MAC1B,mBAAmB,mBAAsB,GAAA,CAAA;AAAA,MACzC;AAAA,KACF;AAEA,IAAA,IAAI,qBAAqB,cAAgB,EAAA;AACvC,MAAgB,eAAA,CAAA,gBAAA,CAAiB,QAAS,CAAA,EAAE,CAAC,CAAA;AAAA,KACxC,MAAA;AACL,MAAA,eAAA,CAAgB,CAAG,EAAA,gBAAgB,CAAI,CAAA,EAAA,cAAc,CAAE,CAAA,CAAA;AAAA;AAEzD,IAAA,cAAA,CAAe,cAAc,CAAA;AAAA,GAC/B,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,QAAU,EAAA;AACf,IACG,QAAA,CAAA,EAAA,CAAG,MAAQ,EAAA,YAAY,CACvB,CAAA,EAAA,CAAG,UAAU,YAAY,CAAA,CACzB,EAAG,CAAA,QAAA,EAAU,YAAY,CAAA;AAC5B,IAAA,YAAA,CAAa,QAAQ,CAAA;AAErB,IAAA,OAAO,MAAM;AACX,MACG,QAAA,CAAA,GAAA,CAAI,MAAQ,EAAA,YAAY,CACxB,CAAA,GAAA,CAAI,UAAU,YAAY,CAAA,CAC1B,GAAI,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA,KAC/B;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,YAAY,CAAC,CAAA;AAE3B,EACE,uBAAA,IAAA,CAAC,QAAK,SAAW,EAAA,IAAA,CAAK,cAAgB,EAAA,SAAS,CAAI,EAAA,GAAG,KAAO,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACpD,YAAA;AAAA,IAAa,MAAA;AAAA,IAAK;AAAA,GAC3B,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CarouselProgressLabel.js","sources":["../src/CarouselProgressLabel.tsx"],"sourcesContent":["import { Text, type TextProps, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { EmblaCarouselType } from \"embla-carousel\";\nimport { useEffect, useState } from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport carouselProgressLabelCss from \"./CarouselProgressLabel.css\";\n\n/**\n * Props for the CarouselProgressLabel component.\n */\nexport interface CarouselProgressLabelProps extends TextProps<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCarouselTabList\");\n\nexport function CarouselProgressLabel({\n  className,\n  styleAs = \"label\",\n  children,\n  ...props\n}: CarouselProgressLabelProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-carousel-progress-label\",\n    css: carouselProgressLabelCss,\n    window: targetWindow,\n  });\n\n  const { emblaApi } = useCarouselContext();\n\n  const [currentSlide, setCurrentSlide] = useState(\"\");\n  const [totalSlides, setTotalSlides] = useState(0);\n\n  useEffect(() => {\n    const handleSelect = (emblaApi: EmblaCarouselType) => {\n      const slideIndexInView = emblaApi?.selectedScrollSnap() ?? 0;\n      const numberOfSlides = emblaApi?.slideNodes().length ?? 0;\n      const scrollSnaps = emblaApi?.scrollSnapList() ?? [];\n      const slidesPerTransition = numberOfSlides\n        ? Math.ceil(numberOfSlides / scrollSnaps.length)\n        : 0;\n      const startSlideNumber = Math.min(\n        slideIndexInView * slidesPerTransition + 1,\n        numberOfSlides - (slidesPerTransition - 1),\n      );\n      const endSlideNumber = Math.min(\n        startSlideNumber + slidesPerTransition - 1,\n        numberOfSlides,\n      );\n\n      if (startSlideNumber === endSlideNumber) {\n        setCurrentSlide(startSlideNumber.toString(10));\n      } else {\n        setCurrentSlide(`${startSlideNumber}-${endSlideNumber}`);\n      }\n      setTotalSlides(numberOfSlides);\n    };\n\n    if (!emblaApi) return;\n    emblaApi\n      .on(\"init\", handleSelect)\n      .on(\"reInit\", handleSelect)\n      .on(\"select\", handleSelect);\n    handleSelect(emblaApi);\n    // Cleanup listener on component unmount\n    return () => {\n      emblaApi\n        .off(\"init\", handleSelect)\n        .off(\"reInit\", handleSelect)\n        .off(\"select\", handleSelect);\n    };\n  }, [emblaApi]);\n\n  return (\n    <Text className={clsx(withBaseName(), className)} {...props}>\n      Slide {currentSlide} of {totalSlides}\n    </Text>\n  );\n}\n"],"names":["carouselProgressLabelCss","emblaApi"],"mappings":";;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA;AAEhD,SAAS,qBAAsB,CAAA;AAAA,EACpC,SAAA;AAAA,EACA,OAAU,GAAA,OAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAA+B,EAAA;AAC7B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,8BAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,kBAAmB,EAAA;AAExC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,EAAE,CAAA;AACnD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,CAAC,CAAA;AAEhD,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,YAAA,GAAe,CAACC,SAAgC,KAAA;AACpD,MAAA,MAAM,gBAAmBA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,kBAAwB,EAAA,KAAA,CAAA;AAC3D,MAAA,MAAM,cAAiBA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,aAAa,MAAU,KAAA,CAAA;AACxD,MAAA,MAAM,WAAcA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,qBAAoB,EAAC;AACnD,MAAA,MAAM,sBAAsB,cACxB,GAAA,IAAA,CAAK,KAAK,cAAiB,GAAA,WAAA,CAAY,MAAM,CAC7C,GAAA,CAAA;AACJ,MAAA,MAAM,mBAAmB,IAAK,CAAA,GAAA;AAAA,QAC5B,mBAAmB,mBAAsB,GAAA,CAAA;AAAA,QACzC,kBAAkB,mBAAsB,GAAA,CAAA;AAAA,OAC1C;AACA,MAAA,MAAM,iBAAiB,IAAK,CAAA,GAAA;AAAA,QAC1B,mBAAmB,mBAAsB,GAAA,CAAA;AAAA,QACzC;AAAA,OACF;AAEA,MAAA,IAAI,qBAAqB,cAAgB,EAAA;AACvC,QAAgB,eAAA,CAAA,gBAAA,CAAiB,QAAS,CAAA,EAAE,CAAC,CAAA;AAAA,OACxC,MAAA;AACL,QAAA,eAAA,CAAgB,CAAG,EAAA,gBAAgB,CAAI,CAAA,EAAA,cAAc,CAAE,CAAA,CAAA;AAAA;AAEzD,MAAA,cAAA,CAAe,cAAc,CAAA;AAAA,KAC/B;AAEA,IAAA,IAAI,CAAC,QAAU,EAAA;AACf,IACG,QAAA,CAAA,EAAA,CAAG,MAAQ,EAAA,YAAY,CACvB,CAAA,EAAA,CAAG,UAAU,YAAY,CAAA,CACzB,EAAG,CAAA,QAAA,EAAU,YAAY,CAAA;AAC5B,IAAA,YAAA,CAAa,QAAQ,CAAA;AAErB,IAAA,OAAO,MAAM;AACX,MACG,QAAA,CAAA,GAAA,CAAI,MAAQ,EAAA,YAAY,CACxB,CAAA,GAAA,CAAI,UAAU,YAAY,CAAA,CAC1B,GAAI,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA,KAC/B;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EACE,uBAAA,IAAA,CAAC,QAAK,SAAW,EAAA,IAAA,CAAK,cAAgB,EAAA,SAAS,CAAI,EAAA,GAAG,KAAO,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACpD,YAAA;AAAA,IAAa,MAAA;AAAA,IAAK;AAAA,GAC3B,EAAA,CAAA;AAEJ;;;;"}

package/dist-es/CarouselSlides.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltCarouselSlides {\n  overflow: hidden;\n}\n.saltCarouselSlides-container {\n  display: flex;\n  touch-action: pan-y pinch-zoom;\n  margin-left: calc(var(--saltCarousel-slide-spacing) * -1);\n}\n";
+var css_248z = ".saltCarouselSlides {\n  overflow: hidden;\n}\n.saltCarouselSlides-container {\n  display: flex;\n  touch-action: pan-y pinch-zoom;\n  margin-left: calc(var(--carousel-slide-spacing) * -1);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=CarouselSlides.css.js.map

package/dist-es/CarouselSlides.js

@@ -3,13 +3,14 @@ import { makePrefixer, useForkRef } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useRef, useEffect } from 'react';
 import { useCarouselContext } from './CarouselContext.js';
 import css_248z from './CarouselSlides.css.js';
+import { createCustomSettle } from './createCustomSettle.js';
 
 const withBaseName = makePrefixer("saltCarouselSlides");
 const CarouselSlides = forwardRef(
-  function CarouselSlides2({ children, className, onKeyDown, ...rest }, propRef) {
+  function CarouselSlides2({ children, className, onKeyDown, ...rest }, ref) {
     const targetWindow = useWindow();
     useComponentCssInjection({
       testId: "salt-carousel-slides",
@@ -17,7 +18,34 @@ const CarouselSlides = forwardRef(
       window: targetWindow
     });
     const { emblaApi, emblaRef } = useCarouselContext();
-    const ref = useForkRef(propRef, emblaRef);
+    const carouselRef = useForkRef(ref, emblaRef);
+    const usingArrowNavigation = useRef();
+    useEffect(() => {
+      const handleSettle = (emblaApi2) => {
+        if (!usingArrowNavigation.current) {
+          return;
+        }
+        const slideIndexInView = (emblaApi2 == null ? void 0 : emblaApi2.selectedScrollSnap()) ?? 0;
+        const snappedSlide = emblaApi2.slideNodes()[slideIndexInView];
+        if (snappedSlide) {
+          const focusableElements = snappedSlide.querySelectorAll(
+            'a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])'
+          );
+          if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+          }
+        }
+        usingArrowNavigation.current = false;
+      };
+      if (!emblaApi) {
+        return;
+      }
+      const scrollCallback = createCustomSettle(handleSettle);
+      emblaApi.on("scroll", scrollCallback);
+      return () => {
+        emblaApi.off("scroll", scrollCallback);
+      };
+    }, [emblaApi]);
     const handleKeyDown = (event) => {
       if (event.repeat) {
         return;
@@ -26,11 +54,13 @@ const CarouselSlides = forwardRef(
         case "ArrowLeft": {
           event.preventDefault();
           emblaApi == null ? void 0 : emblaApi.scrollPrev();
+          usingArrowNavigation.current = true;
           break;
         }
         case "ArrowRight": {
           event.preventDefault();
           emblaApi == null ? void 0 : emblaApi.scrollNext();
+          usingArrowNavigation.current = true;
           break;
         }
       }
@@ -40,7 +70,7 @@ const CarouselSlides = forwardRef(
       "div",
       {
         onKeyDown: handleKeyDown,
-        ref,
+        ref: carouselRef,
         className: clsx(withBaseName(), className),
         ...rest,
         children: /* @__PURE__ */ jsx("div", { className: withBaseName("container"), children })

package/dist-es/CarouselSlides.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselSlides.js","sources":["../src/CarouselSlides.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type Ref,\n  forwardRef,\n} from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport carouselSlidesCss from \"./CarouselSlides.css\";\n\n/**\n * Props for the CarouselSlides component.\n */\nexport interface CarouselSlidesProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCarouselSlides\");\n\nexport const CarouselSlides = forwardRef<HTMLDivElement, CarouselSlidesProps>(\n  function CarouselSlides(\n    { children, className, onKeyDown, ...rest },\n    propRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-slides\",\n      css: carouselSlidesCss,\n      window: targetWindow,\n    });\n    const { emblaApi, emblaRef } = useCarouselContext();\n\n    const ref = useForkRef(propRef, emblaRef) as Ref<HTMLDivElement>;\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.repeat) {\n        return;\n      }\n      switch (event.key) {\n        case \"ArrowLeft\": {\n          event.preventDefault();\n          emblaApi?.scrollPrev();\n          break;\n        }\n        case \"ArrowRight\": {\n          event.preventDefault();\n          emblaApi?.scrollNext();\n          break;\n        }\n      }\n      onKeyDown?.(event);\n    };\n\n    return (\n      <div\n        onKeyDown={handleKeyDown}\n        ref={ref}\n        className={clsx(withBaseName(), className)}\n        {...rest}\n      >\n        <div className={withBaseName(\"container\")}>{children}</div>\n      </div>\n    );\n  },\n);\n"],"names":["CarouselSlides","carouselSlidesCss"],"mappings":";;;;;;;;;AAkBA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAE/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,gBACP,EAAE,QAAA,EAAU,WAAW,SAAW,EAAA,GAAG,IAAK,EAAA,EAC1C,OACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAE,QAAA,EAAU,QAAS,EAAA,GAAI,kBAAmB,EAAA;AAElD,IAAM,MAAA,GAAA,GAAM,UAAW,CAAA,OAAA,EAAS,QAAQ,CAAA;AAExC,IAAM,MAAA,aAAA,GAAgB,CAAC,KAAyC,KAAA;AAC9D,MAAA,IAAI,MAAM,MAAQ,EAAA;AAChB,QAAA;AAAA;AAEF,MAAA,QAAQ,MAAM,GAAK;AAAA,QACjB,KAAK,WAAa,EAAA;AAChB,UAAA,KAAA,CAAM,cAAe,EAAA;AACrB,UAAU,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,UAAA,EAAA;AACV,UAAA;AAAA;AACF,QACA,KAAK,YAAc,EAAA;AACjB,UAAA,KAAA,CAAM,cAAe,EAAA;AACrB,UAAU,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,UAAA,EAAA;AACV,UAAA;AAAA;AACF;AAEF,MAAY,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,KAAA,CAAA;AAAA,KACd;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,aAAA;AAAA,QACX,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEJ,8BAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,WAAW,GAAI,QAAS,EAAA;AAAA;AAAA,KACvD;AAAA;AAGN;;;;"}
+{"version":3,"file":"CarouselSlides.js","sources":["../src/CarouselSlides.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { EmblaCarouselType } from \"embla-carousel\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  forwardRef,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport carouselSlidesCss from \"./CarouselSlides.css\";\nimport { createCustomSettle } from \"./createCustomSettle\";\n\n/**\n * Props for the CarouselSlides component.\n */\nexport interface CarouselSlidesProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCarouselSlides\");\n\nexport const CarouselSlides = forwardRef<HTMLDivElement, CarouselSlidesProps>(\n  function CarouselSlides({ children, className, onKeyDown, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-slides\",\n      css: carouselSlidesCss,\n      window: targetWindow,\n    });\n    const { emblaApi, emblaRef } = useCarouselContext();\n\n    const carouselRef = useForkRef<HTMLDivElement>(ref, emblaRef);\n\n    const usingArrowNavigation = useRef<boolean>();\n\n    useEffect(() => {\n      const handleSettle = (emblaApi: EmblaCarouselType) => {\n        if (!usingArrowNavigation.current) {\n          return;\n        }\n        const slideIndexInView = emblaApi?.selectedScrollSnap() ?? 0;\n        const snappedSlide = emblaApi.slideNodes()[slideIndexInView];\n        if (snappedSlide) {\n          const focusableElements = snappedSlide.querySelectorAll<HTMLElement>(\n            'a, button, input, textarea, select, [tabindex]:not([tabindex=\"-1\"])',\n          );\n          if (focusableElements.length > 0) {\n            focusableElements[0].focus();\n          }\n        }\n        usingArrowNavigation.current = false;\n      };\n\n      if (!emblaApi) {\n        return;\n      }\n      const scrollCallback = createCustomSettle(handleSettle);\n      emblaApi.on(\"scroll\", scrollCallback);\n      // Cleanup listener on component unmount\n      return () => {\n        emblaApi.off(\"scroll\", scrollCallback);\n      };\n    }, [emblaApi]);\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.repeat) {\n        return;\n      }\n      switch (event.key) {\n        case \"ArrowLeft\": {\n          event.preventDefault();\n          emblaApi?.scrollPrev();\n          usingArrowNavigation.current = true;\n          break;\n        }\n        case \"ArrowRight\": {\n          event.preventDefault();\n          emblaApi?.scrollNext();\n          usingArrowNavigation.current = true;\n          break;\n        }\n      }\n      onKeyDown?.(event);\n    };\n\n    return (\n      <div\n        onKeyDown={handleKeyDown}\n        ref={carouselRef}\n        className={clsx(withBaseName(), className)}\n        {...rest}\n      >\n        <div className={withBaseName(\"container\")}>{children}</div>\n      </div>\n    );\n  },\n);\n"],"names":["CarouselSlides","carouselSlidesCss","emblaApi"],"mappings":"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"}

package/dist-es/CarouselTab.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltCarouselTab {\n  position: relative;\n  width: var(--salt-size-selectable);\n  height: var(--salt-size-selectable);\n  border: none;\n  box-shadow: inset 0 0 0 var(--salt-size-border) var(--salt-selectable-borderColor);\n  -webkit-tap-highlight-color: var(--salt-selectable-borderColor-hover);\n  -webkit-appearance: none;\n  appearance: none;\n  background-color: transparent;\n  touch-action: manipulation;\n  display: inline-flex;\n  text-decoration: none;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--salt-palette-corner-strongest);\n  transition: box-shadow var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltCarouselTab:after {\n  content: \"\";\n  position: absolute;\n  width: var(--salt-size-selectable);\n  height: var(--salt-size-selectable);\n  border-radius: 50%;\n  background-color: transparent;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.saltCarouselTab:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--salt-selectable-background-hover);\n  border-color: var(--salt-selectable-borderColor-hover);\n}\n\n.saltCarouselTab-selected {\n  box-shadow: inset 0 0 0 var(--salt-size-selectable) var(--salt-selectable-borderColor-selected);\n}\n";
+var css_248z = ".saltCarouselTab {\n  position: relative;\n  width: var(--salt-size-selectable);\n  height: var(--salt-size-selectable);\n  border: none;\n  box-shadow: inset 0 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor);\n  -webkit-tap-highlight-color: var(--salt-selectable-borderColor-hover);\n  -webkit-appearance: none;\n  appearance: none;\n  background-color: transparent;\n  touch-action: manipulation;\n  display: inline-flex;\n  text-decoration: none;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--salt-palette-corner-strongest);\n  transition: box-shadow var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltCarouselTab:after {\n  content: \"\";\n  position: absolute;\n  width: var(--salt-size-selectable);\n  height: var(--salt-size-selectable);\n  border-radius: 50%;\n  background-color: transparent;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.saltCarouselTab:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--salt-selectable-background-hover);\n  border-color: var(--salt-selectable-borderColor-hover);\n}\n\n.saltCarouselTab-selected {\n  box-shadow: inset 0 0 0 var(--salt-size-selectable) var(--salt-selectable-borderColor-selected);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=CarouselTab.css.js.map

package/dist-es/CarouselTab.js

@@ -3,27 +3,23 @@ import { makePrefixer } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { forwardRef, useState, useCallback, useEffect } from 'react';
+import { forwardRef, useState, useEffect } from 'react';
 import css_248z from './CarouselTab.css.js';
 
 const withBaseName = makePrefixer("saltCarouselTab");
 const useCarouselTab = (emblaApi) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [scrollSnaps, setScrollSnaps] = useState([]);
-  const handleClick = useCallback(
-    (index) => {
-      if (!emblaApi) return;
-      emblaApi.scrollTo(index);
-    },
-    [emblaApi]
-  );
-  const handleInit = useCallback((emblaApi2) => {
-    setScrollSnaps(emblaApi2.scrollSnapList());
-  }, []);
-  const handleSelect = useCallback((emblaApi2) => {
-    setSelectedIndex(emblaApi2.selectedScrollSnap());
-  }, []);
+  const handleClick = (index) => {
+    emblaApi == null ? void 0 : emblaApi.scrollTo(index);
+  };
   useEffect(() => {
+    const handleInit = (emblaApi2) => {
+      setScrollSnaps(emblaApi2.scrollSnapList());
+    };
+    const handleSelect = (emblaApi2) => {
+      setSelectedIndex(emblaApi2.selectedScrollSnap());
+    };
     if (!emblaApi) return;
     handleInit(emblaApi);
     handleSelect(emblaApi);
@@ -31,9 +27,9 @@ const useCarouselTab = (emblaApi) => {
     return () => {
       emblaApi.off("init", handleInit);
       emblaApi.off("reInit", handleInit);
-      emblaApi.off("settle", handleSelect);
+      emblaApi.off("select", handleSelect);
     };
-  }, [emblaApi, handleInit, handleSelect]);
+  }, [emblaApi]);
   return {
     selectedIndex,
     scrollSnaps,

package/dist-es/CarouselTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselTab.js","sources":["../src/CarouselTab.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { EmblaCarouselType } from \"embla-carousel\";\nimport {\n  type ComponentPropsWithRef,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useState,\n} from \"react\";\nimport carouselTabCss from \"./CarouselTab.css\";\n\n/**\n * Type definition for the UseCarouselTab hook.\n * Provides state and handlers for tablist navigation in a carousel.\n */\ntype UseCarouselTabProps = {\n  /**\n   * The index of the currently selected slide.\n   */\n  selectedIndex: number;\n\n  /**\n   * An array of scroll snap positions for the carousel slides.\n   */\n  scrollSnaps: number[];\n\n  /**\n   * Handler function for clicking a tab button to navigate to a specific slide.\n   *\n   * @param index - The index of the slide to navigate to.\n   */\n  onClick: (index: number) => void;\n};\n\nconst withBaseName = makePrefixer(\"saltCarouselTab\");\n\nexport const useCarouselTab = (\n  emblaApi: EmblaCarouselType | undefined,\n): UseCarouselTabProps => {\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);\n\n  const handleClick = useCallback(\n    (index: number) => {\n      if (!emblaApi) return;\n      emblaApi.scrollTo(index);\n    },\n    [emblaApi],\n  );\n\n  const handleInit = useCallback((emblaApi: EmblaCarouselType) => {\n    setScrollSnaps(emblaApi.scrollSnapList());\n  }, []);\n\n  const handleSelect = useCallback((emblaApi: EmblaCarouselType) => {\n    setSelectedIndex(emblaApi.selectedScrollSnap());\n  }, []);\n\n  useEffect(() => {\n    if (!emblaApi) return;\n\n    handleInit(emblaApi);\n    handleSelect(emblaApi);\n    emblaApi\n      .on(\"init\", handleInit)\n      .on(\"reInit\", handleInit)\n      .on(\"select\", handleSelect);\n    // Cleanup listener on component unmount\n    return () => {\n      emblaApi.off(\"init\", handleInit);\n      emblaApi.off(\"reInit\", handleInit);\n      emblaApi.off(\"settle\", handleSelect);\n    };\n  }, [emblaApi, handleInit, handleSelect]);\n\n  return {\n    selectedIndex,\n    scrollSnaps,\n    onClick: handleClick,\n  };\n};\n\n/**\n * Props for the CarouselTab component.\n */\nexport interface CarouselTabProps extends ComponentPropsWithRef<\"button\"> {\n  /**\n   * Is the selected slide\n   */\n  selected?: boolean;\n}\n\nexport const CarouselTab = forwardRef<HTMLButtonElement, CarouselTabProps>(\n  function CarouselTab(\n    { children, className, selected = false, ...rest },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-tab\",\n      css: carouselTabCss,\n      window: targetWindow,\n    });\n\n    return (\n      <button\n        className={clsx(\n          withBaseName(),\n          { [withBaseName(\"selected\")]: selected },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["emblaApi","CarouselTab","carouselTabCss"],"mappings":";;;;;;;;AAqCA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA;AAEtC,MAAA,cAAA,GAAiB,CAC5B,QACwB,KAAA;AACxB,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,CAAC,CAAA;AACpD,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,QAAA,CAAmB,EAAE,CAAA;AAE3D,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,KAAkB,KAAA;AACjB,MAAA,IAAI,CAAC,QAAU,EAAA;AACf,MAAA,QAAA,CAAS,SAAS,KAAK,CAAA;AAAA,KACzB;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAM,MAAA,UAAA,GAAa,WAAY,CAAA,CAACA,SAAgC,KAAA;AAC9D,IAAeA,cAAAA,CAAAA,SAAAA,CAAS,gBAAgB,CAAA;AAAA,GAC1C,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,YAAA,GAAe,WAAY,CAAA,CAACA,SAAgC,KAAA;AAChE,IAAiBA,gBAAAA,CAAAA,SAAAA,CAAS,oBAAoB,CAAA;AAAA,GAChD,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,QAAU,EAAA;AAEf,IAAA,UAAA,CAAW,QAAQ,CAAA;AACnB,IAAA,YAAA,CAAa,QAAQ,CAAA;AACrB,IACG,QAAA,CAAA,EAAA,CAAG,MAAQ,EAAA,UAAU,CACrB,CAAA,EAAA,CAAG,UAAU,UAAU,CAAA,CACvB,EAAG,CAAA,QAAA,EAAU,YAAY,CAAA;AAE5B,IAAA,OAAO,MAAM;AACX,MAAS,QAAA,CAAA,GAAA,CAAI,QAAQ,UAAU,CAAA;AAC/B,MAAS,QAAA,CAAA,GAAA,CAAI,UAAU,UAAU,CAAA;AACjC,MAAS,QAAA,CAAA,GAAA,CAAI,UAAU,YAAY,CAAA;AAAA,KACrC;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,UAAA,EAAY,YAAY,CAAC,CAAA;AAEvC,EAAO,OAAA;AAAA,IACL,aAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAS,EAAA;AAAA,GACX;AACF;AAYO,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASC,YACP,CAAA,EAAE,QAAU,EAAA,SAAA,EAAW,WAAW,KAAO,EAAA,GAAG,IAAK,EAAA,EACjD,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,EAAE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAS,EAAA;AAAA,UACvC;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"CarouselTab.js","sources":["../src/CarouselTab.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { EmblaCarouselType } from \"embla-carousel\";\nimport {\n  type ComponentPropsWithRef,\n  forwardRef,\n  useEffect,\n  useState,\n} from \"react\";\nimport carouselTabCss from \"./CarouselTab.css\";\n\n/**\n * Type definition for the UseCarouselTab hook.\n * Provides state and handlers for tablist navigation in a carousel.\n */\ntype UseCarouselTabProps = {\n  /**\n   * The index of the currently selected slide.\n   */\n  selectedIndex: number;\n\n  /**\n   * An array of scroll snap positions for the carousel slides.\n   */\n  scrollSnaps: number[];\n\n  /**\n   * Handler function for clicking a tab button to navigate to a specific slide.\n   *\n   * @param index - The index of the slide to navigate to.\n   */\n  onClick: (index: number) => void;\n};\n\nconst withBaseName = makePrefixer(\"saltCarouselTab\");\n\nexport const useCarouselTab = (\n  emblaApi: EmblaCarouselType | undefined,\n): UseCarouselTabProps => {\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);\n\n  const handleClick = (index: number) => {\n    emblaApi?.scrollTo(index);\n  };\n\n  useEffect(() => {\n    const handleInit = (emblaApi: EmblaCarouselType) => {\n      setScrollSnaps(emblaApi.scrollSnapList());\n    };\n\n    const handleSelect = (emblaApi: EmblaCarouselType) => {\n      setSelectedIndex(emblaApi.selectedScrollSnap());\n    };\n\n    if (!emblaApi) return;\n\n    handleInit(emblaApi);\n    handleSelect(emblaApi);\n    emblaApi\n      .on(\"init\", handleInit)\n      .on(\"reInit\", handleInit)\n      .on(\"select\", handleSelect);\n    // Cleanup listener on component unmount\n    return () => {\n      emblaApi.off(\"init\", handleInit);\n      emblaApi.off(\"reInit\", handleInit);\n      emblaApi.off(\"select\", handleSelect);\n    };\n  }, [emblaApi]);\n\n  return {\n    selectedIndex,\n    scrollSnaps,\n    onClick: handleClick,\n  };\n};\n\n/**\n * Props for the CarouselTab component.\n */\nexport interface CarouselTabProps extends ComponentPropsWithRef<\"button\"> {\n  /**\n   * Is the selected slide\n   */\n  selected?: boolean;\n}\n\nexport const CarouselTab = forwardRef<HTMLButtonElement, CarouselTabProps>(\n  function CarouselTab(\n    { children, className, selected = false, ...rest },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-tab\",\n      css: carouselTabCss,\n      window: targetWindow,\n    });\n\n    return (\n      <button\n        className={clsx(\n          withBaseName(),\n          { [withBaseName(\"selected\")]: selected },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["emblaApi","CarouselTab","carouselTabCss"],"mappings":";;;;;;;;AAoCA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA;AAEtC,MAAA,cAAA,GAAiB,CAC5B,QACwB,KAAA;AACxB,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,CAAC,CAAA;AACpD,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,QAAA,CAAmB,EAAE,CAAA;AAE3D,EAAM,MAAA,WAAA,GAAc,CAAC,KAAkB,KAAA;AACrC,IAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,QAAS,CAAA,KAAA,CAAA;AAAA,GACrB;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,UAAA,GAAa,CAACA,SAAgC,KAAA;AAClD,MAAeA,cAAAA,CAAAA,SAAAA,CAAS,gBAAgB,CAAA;AAAA,KAC1C;AAEA,IAAM,MAAA,YAAA,GAAe,CAACA,SAAgC,KAAA;AACpD,MAAiBA,gBAAAA,CAAAA,SAAAA,CAAS,oBAAoB,CAAA;AAAA,KAChD;AAEA,IAAA,IAAI,CAAC,QAAU,EAAA;AAEf,IAAA,UAAA,CAAW,QAAQ,CAAA;AACnB,IAAA,YAAA,CAAa,QAAQ,CAAA;AACrB,IACG,QAAA,CAAA,EAAA,CAAG,MAAQ,EAAA,UAAU,CACrB,CAAA,EAAA,CAAG,UAAU,UAAU,CAAA,CACvB,EAAG,CAAA,QAAA,EAAU,YAAY,CAAA;AAE5B,IAAA,OAAO,MAAM;AACX,MAAS,QAAA,CAAA,GAAA,CAAI,QAAQ,UAAU,CAAA;AAC/B,MAAS,QAAA,CAAA,GAAA,CAAI,UAAU,UAAU,CAAA;AACjC,MAAS,QAAA,CAAA,GAAA,CAAI,UAAU,YAAY,CAAA;AAAA,KACrC;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAO,OAAA;AAAA,IACL,aAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAS,EAAA;AAAA,GACX;AACF;AAYO,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASC,YACP,CAAA,EAAE,QAAU,EAAA,SAAA,EAAW,WAAW,KAAO,EAAA,GAAG,IAAK,EAAA,EACjD,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,EAAE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAS,EAAA;AAAA,UACvC;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}