@hitachivantara/uikit-react-core 5.18.4 → 5.19.0

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

@@ -1,13 +1,16 @@
 import { useRef, useState, Children, useCallback, useEffect } from "react";
 import useCarousel from "embla-carousel-react";
 import { Close, Fullscreen, Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
+import "@hitachivantara/uikit-styles";
+import { HvCarouselControls } from "./CarouselControls.js";
+import { HvCarouselThumbnails } from "./CarouselThumbnails.js";
 import { useClasses } from "./Carousel.styles.js";
 import { staticClasses } from "./Carousel.styles.js";
-import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { HvContainer } from "../Container/Container.js";
-import { HvStack } from "../Stack/Stack.js";
-import { HvTypography } from "../Typography/Typography.js";
+import { useTheme } from "../../hooks/useTheme.js";
 import { HvButton } from "../Button/Button.js";
+import { HvTypography } from "../Typography/Typography.js";
 const clamp = (num, max, min = 0) => Math.min(Math.max(num, min), max);
 const HvCarousel = (props) => {
   const {
@@ -17,24 +20,34 @@ const HvCarousel = (props) => {
     thumbnailWidth = 90,
     title,
     children,
-    actions,
+    actions: actionsProp,
     xs,
     showDots: showDotsProp,
     showCounter: showCounterProp,
     showSlideControls,
     showFullscreen: showFullscreenProp,
     hideThumbnails: hideThumbnailsProp,
+    controlsPosition: controlsPositionProp,
+    thumbnailsPosition: thumbnailsPositionProp,
     carouselOptions,
     renderThumbnail,
     onChange,
     ...others
   } = props;
+  const {
+    activeTheme
+  } = useTheme();
   const {
     classes,
+    css,
     cx
   } = useClasses(classesProp);
   const thumbnailsRef = useRef(null);
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const isDs3 = (activeTheme == null ? void 0 : activeTheme.name) === "ds3";
+  const actionsPosition = isDs3 ? "header" : "controls";
+  const controlsPosition = controlsPositionProp ?? (isDs3 ? "bottom" : "top");
+  const thumbnailsPosition = thumbnailsPositionProp ?? "bottom";
   const [containerRef, controller] = useCarousel({
     align: "start",
     loop: true,
@@ -86,6 +99,46 @@ const HvCarousel = (props) => {
   const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);
   const showThumbnails = !hideThumbnails && !!renderThumbnail;
   const showDots = showDotsProp ?? numSlides <= 5;
+  const actions = /* @__PURE__ */ jsxs("div", {
+    className: cx(classes.actions, actionsPosition === "header" ? css({
+      position: "relative",
+      top: -40,
+      height: 0
+    }) : css({
+      position: "absolute"
+    })),
+    children: [actionsProp, showFullscreen && /* @__PURE__ */ jsx(HvButton, {
+      icon: true,
+      variant: "secondaryGhost",
+      onClick: () => setIsFullscreen((curr) => !curr),
+      className: classes.closeButton,
+      children: isFullscreen ? /* @__PURE__ */ jsx(Close, {
+        "aria-label": "Close"
+      }) : /* @__PURE__ */ jsx(Fullscreen, {
+        "aria-label": "Fullscreen"
+      })
+    })]
+  });
+  const controls = /* @__PURE__ */ jsx(HvCarouselControls, {
+    classes,
+    showDots,
+    page: selectedIndex,
+    pages: numSlides,
+    canPrevious: canPrev,
+    canNext,
+    onPreviousClick: handlePrevious,
+    onNextClick: handleNext,
+    actions: actionsPosition === "controls" && actions
+  });
+  const thumbnails = showThumbnails && /* @__PURE__ */ jsx(HvCarouselThumbnails, {
+    classes,
+    ref: thumbnailsRef,
+    page: selectedIndex,
+    pages: numSlides,
+    width: thumbnailWidth,
+    onThumbnailClick: (evt, i) => handleScroll(i),
+    renderThumbnail
+  });
   return /* @__PURE__ */ jsxs(HvContainer, {
     className: cx(classes.root, className, {
       [classes.xs]: xs,
@@ -96,118 +149,50 @@ const HvCarousel = (props) => {
       variant: "title2",
       className: classes.title,
       children: title
-    }), /* @__PURE__ */ jsxs("div", {
-      className: classes.actions,
-      children: [showFullscreen && /* @__PURE__ */ jsx(HvButton, {
-        icon: true,
-        variant: "secondaryGhost",
-        onClick: () => setIsFullscreen((curr) => !curr),
-        className: classes.closeButton,
-        children: isFullscreen ? /* @__PURE__ */ jsx(Close, {
-          "aria-label": "Close"
-        }) : /* @__PURE__ */ jsx(Fullscreen, {
-          "aria-label": "Fullscreen"
-        })
-      }), actions]
-    }), /* @__PURE__ */ jsxs("div", {
-      className: classes.mainContainer,
-      children: [/* @__PURE__ */ jsx("div", {
-        className: classes.controls,
-        children: showDots ? /* @__PURE__ */ jsx("div", {
-          className: classes.dots,
-          children: Array.from(Array(numSlides)).map((el, index) => /* @__PURE__ */ jsx("span", {
-            className: cx(classes.dot, {
-              [classes.dotSelected]: index === selectedIndex
-            })
-          }, `circle-${index}`))
-        }) : /* @__PURE__ */ jsxs(Fragment, {
-          children: [/* @__PURE__ */ jsx(HvButton, {
-            icon: true,
-            disabled: !canPrev,
-            variant: "secondaryGhost",
-            "aria-label": "Backwards",
-            onClick: handlePrevious,
-            children: /* @__PURE__ */ jsx(Backwards, {
-              iconSize: "XS"
-            })
-          }), /* @__PURE__ */ jsx("div", {
-            className: classes.pageCounter,
-            children: `${selectedIndex + 1} / ${numSlides}`
-          }), /* @__PURE__ */ jsx(HvButton, {
-            icon: true,
-            disabled: !canNext,
-            variant: "secondaryGhost",
-            "aria-label": "Forwards",
-            onClick: handleNext,
-            children: /* @__PURE__ */ jsx(Forwards, {
-              iconSize: "XS"
-            })
-          })]
+    }), actionsPosition === "header" && actions, thumbnailsPosition === "top" && thumbnails, controlsPosition === "top" && controls, /* @__PURE__ */ jsxs("div", {
+      className: cx(classes.main, {
+        [classes.mainXs]: xs,
+        [classes.mainFullscreen]: isFullscreen
+      }),
+      children: [showCounter && /* @__PURE__ */ jsx("div", {
+        className: classes.counterContainer,
+        children: /* @__PURE__ */ jsx("span", {
+          className: classes.counter,
+          children: `${selectedIndex + 1}/${numSlides}`
         })
-      }), /* @__PURE__ */ jsxs("div", {
-        className: cx(classes.main, {
-          [classes.mainXs]: xs,
-          [classes.mainFullscreen]: isFullscreen
-        }),
-        children: [showCounter && /* @__PURE__ */ jsx("div", {
-          className: classes.counterContainer,
-          children: /* @__PURE__ */ jsx("span", {
-            className: classes.counter,
-            children: `${selectedIndex + 1}/${numSlides}`
+      }), showSlideControls && /* @__PURE__ */ jsxs("div", {
+        className: classes.slideControls,
+        children: [/* @__PURE__ */ jsx(HvButton, {
+          icon: true,
+          disabled: !canPrev,
+          variant: "secondary",
+          "aria-label": "Backwards",
+          onClick: handlePrevious,
+          children: /* @__PURE__ */ jsx(Backwards, {
+            iconSize: "XS"
           })
-        }), showSlideControls && /* @__PURE__ */ jsxs("div", {
-          className: classes.slideControls,
-          children: [/* @__PURE__ */ jsx(HvButton, {
-            icon: true,
-            disabled: !canPrev,
-            variant: "secondary",
-            "aria-label": "Backwards",
-            onClick: handlePrevious,
-            children: /* @__PURE__ */ jsx(Backwards, {
-              iconSize: "XS"
-            })
-          }), /* @__PURE__ */ jsx(HvButton, {
-            icon: true,
-            disabled: !canNext,
-            variant: "secondary",
-            "aria-label": "Forwards",
-            onClick: handleNext,
-            children: /* @__PURE__ */ jsx(Forwards, {
-              iconSize: "XS"
-            })
-          })]
-        }), /* @__PURE__ */ jsx("div", {
-          ref: containerRef,
-          style: {
-            height
-          },
-          className: classes.slidesViewport,
-          children: /* @__PURE__ */ jsx("div", {
-            className: classes.slidesContainer,
-            children
+        }), /* @__PURE__ */ jsx(HvButton, {
+          icon: true,
+          disabled: !canNext,
+          variant: "secondary",
+          "aria-label": "Forwards",
+          onClick: handleNext,
+          children: /* @__PURE__ */ jsx(Forwards, {
+            iconSize: "XS"
           })
         })]
+      }), /* @__PURE__ */ jsx("div", {
+        ref: containerRef,
+        style: {
+          height
+        },
+        className: classes.slidesViewport,
+        children: /* @__PURE__ */ jsx("div", {
+          className: classes.slidesContainer,
+          children
+        })
       })]
-    }), showThumbnails && /* @__PURE__ */ jsx("div", {
-      ref: thumbnailsRef,
-      className: classes.panel,
-      children: /* @__PURE__ */ jsx(HvStack, {
-        direction: "row",
-        spacing: "xs",
-        children: Array.from(Array(numSlides)).map((doc, i) => /* @__PURE__ */ jsx(HvButton, {
-          icon: true,
-          variant: "secondaryGhost",
-          style: {
-            width: thumbnailWidth
-          },
-          className: cx(classes.thumbnail, {
-            [classes.thumbnailSelected]: i === selectedIndex
-          }),
-          onClick: () => handleScroll(i),
-          children: renderThumbnail(i)
-        }, `button-${i}`))
-      })
-    })]
+    }), controlsPosition === "bottom" && controls, thumbnailsPosition === "bottom" && thumbnails]
   });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sources":["../../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  Children,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport useCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\nimport {\n  Backwards,\n  Forwards,\n  Close,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { HvButton, HvContainer, HvStack, HvTypography } from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\nimport { ExtractNames } from \"@core/utils\";\n\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\n\nconst clamp = (num: number, max: number, min = 0) =>\n  Math.min(Math.max(num, min), max);\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselProps\n  extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselClasses;\n  /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */\n  height?: CSSProperties[\"height\"];\n  /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */\n  thumbnailWidth?: CSSProperties[\"width\"];\n  /** Title of the carousel */\n  title?: React.ReactNode;\n  /** Content slides to be displayed. @see `<HvCarouselSlide />` */\n  children?: React.ReactNode;\n  /** Custom content to render in the actions area */\n  actions?: React.ReactNode;\n  /** Whether Carousel is in \"xs mode\" - to use in embedded contexts */\n  xs?: boolean;\n  /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */\n  showDots?: boolean;\n  /** Whether to show the counter on the top-right corner of the active slide */\n  showCounter?: boolean;\n  /** Whether to show the back/forwards buttons over the active slide */\n  showSlideControls?: boolean;\n  /** Whether to enable the fullscreen toggle button */\n  showFullscreen?: boolean;\n  /** Whether to hide the thumbnails. Hidden by default in \"xs\" mode */\n  hideThumbnails?: boolean;\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: EmblaOptionsType;\n  /** */\n  renderThumbnail?: (index: number) => React.ReactNode;\n  /** The callback fired when the active slide changes. */\n  onChange?: (index: number) => void;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n  const {\n    className,\n    classes: classesProp,\n    height: heightProp = \"auto\",\n    thumbnailWidth = 90,\n    title,\n    children,\n    actions,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    ...others\n  } = props;\n  const { classes, cx } = useClasses(classesProp);\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const [containerRef, controller] = useCarousel({\n    align: \"start\",\n    loop: true,\n    ...carouselOptions,\n  });\n\n  const [selectedIndex, setSelectedIndex] = useState(\n    carouselOptions?.startIndex ?? 0\n  );\n\n  const numSlides = Children.count(children);\n\n  const handlePrevious = useCallback(() => {\n    controller?.scrollPrev();\n  }, [controller]);\n\n  const handleNext = useCallback(() => {\n    controller?.scrollNext();\n  }, [controller]);\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = useCallback(() => {\n    if (!controller) return;\n\n    const slideIndex = controller.selectedScrollSnap();\n    setSelectedIndex(slideIndex);\n\n    // scroll to thumbnail button\n    thumbnailsRef.current\n      ?.querySelectorAll(\"button\")\n      ?.[slideIndex]?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n      });\n\n    onChange?.(slideIndex);\n  }, [controller, onChange]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller, handleSelect]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n  }, [numSlides, controller]);\n\n  const canPrev = controller?.canScrollPrev() ?? false;\n  const canNext = controller?.canScrollNext() ?? false;\n  const showTitle = !!title && (!xs || isFullscreen);\n  const showFullscreen = showFullscreenProp ?? xs;\n  const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n  const showCounter = xs;\n  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n  const showThumbnails = !hideThumbnails && !!renderThumbnail;\n  const showDots = showDotsProp ?? numSlides <= 5;\n\n  return (\n    <HvContainer\n      className={cx(classes.root, className, {\n        [classes.xs]: xs,\n        [classes.fullscreen]: isFullscreen,\n      })}\n      {...others}\n    >\n      {showTitle && (\n        <HvTypography variant=\"title2\" className={classes.title}>\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.actions}>\n        {showFullscreen && (\n          <HvButton\n            icon\n            variant=\"secondaryGhost\"\n            onClick={() => setIsFullscreen((curr) => !curr)}\n            className={classes.closeButton}\n          >\n            {isFullscreen ? (\n              <Close aria-label=\"Close\" />\n            ) : (\n              <Fullscreen aria-label=\"Fullscreen\" />\n            )}\n          </HvButton>\n        )}\n        {actions}\n      </div>\n\n      <div className={classes.mainContainer}>\n        <div className={classes.controls}>\n          {showDots ? (\n            <div className={classes.dots}>\n              {Array.from(Array(numSlides)).map((el, index) => (\n                <span\n                  key={`circle-${index}`}\n                  className={cx(classes.dot, {\n                    [classes.dotSelected]: index === selectedIndex,\n                  })}\n                />\n              ))}\n            </div>\n          ) : (\n            <>\n              <HvButton\n                icon\n                disabled={!canPrev}\n                variant=\"secondaryGhost\"\n                aria-label=\"Backwards\"\n                onClick={handlePrevious}\n              >\n                <Backwards iconSize=\"XS\" />\n              </HvButton>\n              <div className={classes.pageCounter}>\n                {`${selectedIndex + 1} / ${numSlides}`}\n              </div>\n              <HvButton\n                icon\n                disabled={!canNext}\n                variant=\"secondaryGhost\"\n                aria-label=\"Forwards\"\n                onClick={handleNext}\n              >\n                <Forwards iconSize=\"XS\" />\n              </HvButton>\n            </>\n          )}\n        </div>\n\n        <div\n          className={cx(classes.main, {\n            [classes.mainXs]: xs,\n            [classes.mainFullscreen]: isFullscreen,\n          })}\n        >\n          {showCounter && (\n            <div className={classes.counterContainer}>\n              <span className={classes.counter}>\n                {`${selectedIndex + 1}/${numSlides}`}\n              </span>\n            </div>\n          )}\n\n          {showSlideControls && (\n            <div className={classes.slideControls}>\n              <HvButton\n                icon\n                disabled={!canPrev}\n                variant=\"secondary\"\n                aria-label=\"Backwards\"\n                onClick={handlePrevious}\n              >\n                <Backwards iconSize=\"XS\" />\n              </HvButton>\n              <HvButton\n                icon\n                disabled={!canNext}\n                variant=\"secondary\"\n                aria-label=\"Forwards\"\n                onClick={handleNext}\n              >\n                <Forwards iconSize=\"XS\" />\n              </HvButton>\n            </div>\n          )}\n\n          <div\n            ref={containerRef}\n            style={{ height }}\n            className={classes.slidesViewport}\n          >\n            <div className={classes.slidesContainer}>{children}</div>\n          </div>\n        </div>\n      </div>\n\n      {showThumbnails && (\n        <div ref={thumbnailsRef} className={classes.panel}>\n          <HvStack direction=\"row\" spacing=\"xs\">\n            {Array.from(Array(numSlides)).map((doc, i) => (\n              <HvButton\n                icon\n                variant=\"secondaryGhost\"\n                key={`button-${i}`}\n                style={{ width: thumbnailWidth }}\n                className={cx(classes.thumbnail, {\n                  [classes.thumbnailSelected]: i === selectedIndex,\n                })}\n                onClick={() => handleScroll(i)}\n              >\n                {renderThumbnail(i)}\n              </HvButton>\n            ))}\n          </HvStack>\n        </div>\n      )}\n    </HvContainer>\n  );\n};\n"],"names":["clamp","num","max","min","Math","HvCarousel","props","className","classes","classesProp","height","heightProp","thumbnailWidth","title","children","actions","xs","showDots","showDotsProp","showCounter","showCounterProp","showSlideControls","showFullscreen","showFullscreenProp","hideThumbnails","hideThumbnailsProp","carouselOptions","renderThumbnail","onChange","others","cx","useClasses","thumbnailsRef","useRef","isFullscreen","setIsFullscreen","useState","containerRef","controller","useCarousel","align","loop","selectedIndex","setSelectedIndex","startIndex","numSlides","Children","count","handlePrevious","useCallback","scrollPrev","handleNext","scrollNext","handleScroll","index","scrollTo","handleSelect","slideIndex","selectedScrollSnap","current","querySelectorAll","scrollIntoView","behavior","block","useEffect","on","off","reInit","currentIndex","canPrev","canScrollPrev","canNext","canScrollNext","showTitle","showThumbnails","HvContainer","root","fullscreen","_jsx","HvTypography","variant","_jsxs","HvButton","icon","onClick","curr","closeButton","Close","Fullscreen","mainContainer","controls","dots","Array","from","map","el","dot","dotSelected","_Fragment","disabled","Backwards","iconSize","pageCounter","Forwards","main","mainXs","mainFullscreen","counterContainer","counter","slideControls","ref","style","slidesViewport","slidesContainer","panel","HvStack","direction","spacing","doc","i","width","thumbnail","thumbnailSelected"],"mappings":"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"}
+{"version":3,"file":"Carousel.js","sources":["../../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  Children,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport useCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\nimport {\n  Backwards,\n  Forwards,\n  Close,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n  HvContainer,\n  HvTypography,\n  useTheme,\n} from \"../..\";\n\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\n\nconst clamp = (num: number, max: number, min = 0) =>\n  Math.min(Math.max(num, min), max);\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselProps\n  extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselClasses;\n  /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */\n  height?: CSSProperties[\"height\"];\n  /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */\n  thumbnailWidth?: CSSProperties[\"width\"];\n  /** Title of the carousel */\n  title?: React.ReactNode;\n  /** Content slides to be displayed. @see `<HvCarouselSlide />` */\n  children?: React.ReactNode;\n  /** Custom content to render in the actions area */\n  actions?: React.ReactNode;\n  /** Whether Carousel is in \"xs mode\" - to use in embedded contexts */\n  xs?: boolean;\n  /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */\n  showDots?: boolean;\n  /** Whether to show the counter on the top-right corner of the active slide */\n  showCounter?: boolean;\n  /** Whether to show the back/forwards buttons over the active slide */\n  showSlideControls?: boolean;\n  /** Whether to enable the fullscreen toggle button */\n  showFullscreen?: boolean;\n  /** Whether to hide the thumbnails. Hidden by default in \"xs\" mode */\n  hideThumbnails?: boolean;\n  controlsPosition?: \"top\" | \"bottom\";\n  thumbnailsPosition?: \"top\" | \"bottom\";\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: EmblaOptionsType;\n  /** */\n  renderThumbnail?: (index: number) => React.ReactNode;\n  /** The callback fired when the active slide changes. */\n  onChange?: (index: number) => void;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n  const {\n    className,\n    classes: classesProp,\n    height: heightProp = \"auto\",\n    thumbnailWidth = 90,\n    title,\n    children,\n    actions: actionsProp,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    controlsPosition: controlsPositionProp,\n    thumbnailsPosition: thumbnailsPositionProp,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    ...others\n  } = props;\n  const { activeTheme } = useTheme();\n  const { classes, css, cx } = useClasses(classesProp);\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const isDs3 = activeTheme?.name === \"ds3\";\n  const actionsPosition = isDs3 ? \"header\" : \"controls\";\n  const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n  const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n  const [containerRef, controller] = useCarousel({\n    align: \"start\",\n    loop: true,\n    ...carouselOptions,\n  });\n\n  const [selectedIndex, setSelectedIndex] = useState(\n    carouselOptions?.startIndex ?? 0\n  );\n\n  const numSlides = Children.count(children);\n\n  const handlePrevious = useCallback(() => {\n    controller?.scrollPrev();\n  }, [controller]);\n\n  const handleNext = useCallback(() => {\n    controller?.scrollNext();\n  }, [controller]);\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = useCallback(() => {\n    if (!controller) return;\n\n    const slideIndex = controller.selectedScrollSnap();\n    setSelectedIndex(slideIndex);\n\n    // scroll to thumbnail button\n    thumbnailsRef.current\n      ?.querySelectorAll(\"button\")\n      ?.[slideIndex]?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n      });\n\n    onChange?.(slideIndex);\n  }, [controller, onChange]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller, handleSelect]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n  }, [numSlides, controller]);\n\n  const canPrev = controller?.canScrollPrev() ?? false;\n  const canNext = controller?.canScrollNext() ?? false;\n  const showTitle = !!title && (!xs || isFullscreen);\n  const showFullscreen = showFullscreenProp ?? xs;\n  const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n  const showCounter = xs;\n  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n  const showThumbnails = !hideThumbnails && !!renderThumbnail;\n  const showDots = showDotsProp ?? numSlides <= 5;\n\n  const actions = (\n    <div\n      className={cx(\n        classes.actions,\n        actionsPosition === \"header\"\n          ? css({ position: \"relative\", top: -40, height: 0 })\n          : css({ position: \"absolute\" })\n      )}\n    >\n      {actionsProp}\n      {showFullscreen && (\n        <HvButton\n          icon\n          variant=\"secondaryGhost\"\n          onClick={() => setIsFullscreen((curr) => !curr)}\n          className={classes.closeButton}\n        >\n          {isFullscreen ? (\n            <Close aria-label=\"Close\" />\n          ) : (\n            <Fullscreen aria-label=\"Fullscreen\" />\n          )}\n        </HvButton>\n      )}\n    </div>\n  );\n\n  const controls = (\n    <HvCarouselControls\n      classes={classes}\n      showDots={showDots}\n      page={selectedIndex}\n      pages={numSlides}\n      canPrevious={canPrev}\n      canNext={canNext}\n      onPreviousClick={handlePrevious}\n      onNextClick={handleNext}\n      actions={actionsPosition === \"controls\" && actions}\n    />\n  );\n\n  const thumbnails = showThumbnails && (\n    <HvCarouselThumbnails\n      classes={classes}\n      ref={thumbnailsRef}\n      page={selectedIndex}\n      pages={numSlides}\n      width={thumbnailWidth}\n      onThumbnailClick={(evt, i) => handleScroll(i)}\n      renderThumbnail={renderThumbnail}\n    />\n  );\n\n  return (\n    <HvContainer\n      className={cx(classes.root, className, {\n        [classes.xs]: xs,\n        [classes.fullscreen]: isFullscreen,\n      })}\n      {...others}\n    >\n      {showTitle && (\n        <HvTypography variant=\"title2\" className={classes.title}>\n          {title}\n        </HvTypography>\n      )}\n\n      {actionsPosition === \"header\" && actions}\n      {thumbnailsPosition === \"top\" && thumbnails}\n      {controlsPosition === \"top\" && controls}\n      <div\n        className={cx(classes.main, {\n          [classes.mainXs]: xs,\n          [classes.mainFullscreen]: isFullscreen,\n        })}\n      >\n        {showCounter && (\n          <div className={classes.counterContainer}>\n            <span className={classes.counter}>\n              {`${selectedIndex + 1}/${numSlides}`}\n            </span>\n          </div>\n        )}\n\n        {showSlideControls && (\n          <div className={classes.slideControls}>\n            <HvButton\n              icon\n              disabled={!canPrev}\n              variant=\"secondary\"\n              aria-label=\"Backwards\"\n              onClick={handlePrevious}\n            >\n              <Backwards iconSize=\"XS\" />\n            </HvButton>\n            <HvButton\n              icon\n              disabled={!canNext}\n              variant=\"secondary\"\n              aria-label=\"Forwards\"\n              onClick={handleNext}\n            >\n              <Forwards iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        )}\n\n        <div\n          ref={containerRef}\n          style={{ height }}\n          className={classes.slidesViewport}\n        >\n          <div className={classes.slidesContainer}>{children}</div>\n        </div>\n      </div>\n      {controlsPosition === \"bottom\" && controls}\n      {thumbnailsPosition === \"bottom\" && thumbnails}\n    </HvContainer>\n  );\n};\n"],"names":["clamp","num","max","min","Math","HvCarousel","props","className","classes","classesProp","height","heightProp","thumbnailWidth","title","children","actions","actionsProp","xs","showDots","showDotsProp","showCounter","showCounterProp","showSlideControls","showFullscreen","showFullscreenProp","hideThumbnails","hideThumbnailsProp","controlsPosition","controlsPositionProp","thumbnailsPosition","thumbnailsPositionProp","carouselOptions","renderThumbnail","onChange","others","activeTheme","useTheme","css","cx","useClasses","thumbnailsRef","useRef","isFullscreen","setIsFullscreen","useState","isDs3","name","actionsPosition","containerRef","controller","useCarousel","align","loop","selectedIndex","setSelectedIndex","startIndex","numSlides","Children","count","handlePrevious","useCallback","scrollPrev","handleNext","scrollNext","handleScroll","index","scrollTo","handleSelect","slideIndex","selectedScrollSnap","current","querySelectorAll","scrollIntoView","behavior","block","useEffect","on","off","reInit","currentIndex","canPrev","canScrollPrev","canNext","canScrollNext","showTitle","showThumbnails","position","top","HvButton","icon","variant","onClick","curr","closeButton","_jsx","Close","Fullscreen","controls","HvCarouselControls","page","pages","canPrevious","onPreviousClick","onNextClick","thumbnails","HvCarouselThumbnails","ref","width","onThumbnailClick","evt","i","HvContainer","root","fullscreen","HvTypography","_jsxs","main","mainXs","mainFullscreen","counterContainer","counter","slideControls","disabled","Backwards","iconSize","Forwards","style","slidesViewport","slidesContainer"],"mappings":"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"}

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

@@ -48,19 +48,15 @@ const {
   actions: {
     display: "flex",
     justifyContent: "flex-end",
-    height: 0,
-    zIndex: 1,
-    position: "relative",
-    top: theme.carousel.actionsOffsetTop
+    right: 0,
+    position: "relative"
   },
   closeButton: {},
-  mainContainer: {
-    display: "flex",
-    flexDirection: theme.carousel.mainContainerFlexDirection
-  },
+  mainContainer: {},
   controls: {
     display: "flex",
     alignItems: "center",
+    position: "relative",
     height: 32,
     justifyContent: theme.carousel.controlsJustifyContent,
     backgroundColor: theme.carousel.controlsBackgroundColor,

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.styles.js","sources":["../../../../src/components/Carousel/Carousel.styles.ts"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCarousel\", {\n  /** Styles applied to the component root class. */\n  root: {\n    display: \"flex\",\n    alignItems: \"stretch\",\n    flexDirection: \"column\",\n    backgroundColor: theme.colors.atmo1,\n    margin: 0,\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n  },\n  xs: {\n    \"&:not(._)\": {\n      padding: 0,\n    },\n    // put dots on top of Slide\n    \"& $dots\": {\n      position: \"relative\",\n      top: \"-40px\",\n    },\n    \"& $actions\": {\n      top: 0,\n    },\n    \"& $controls\": {\n      display: theme.carousel.xsControlsDisplay,\n    },\n  },\n  fullscreen: {\n    width: \"100vw\",\n    height: \"100vh\",\n    position: \"fixed\",\n    inset: 0,\n    zIndex: theme.zIndices.modal,\n    \"&:not(._)\": {\n      padding: theme.spacing([\"xs\", \"xl\"]),\n    },\n  },\n  title: {\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    marginBottom: theme.space.xs,\n  },\n  actions: {\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    height: 0,\n    zIndex: 1,\n\n    position: \"relative\",\n    top: theme.carousel.actionsOffsetTop,\n  },\n  closeButton: {},\n\n  mainContainer: {\n    display: \"flex\",\n    flexDirection: theme.carousel\n      .mainContainerFlexDirection as CSSProperties[\"flexDirection\"],\n  },\n\n  controls: {\n    display: \"flex\",\n    alignItems: \"center\",\n    height: 32,\n    justifyContent: theme.carousel.controlsJustifyContent,\n    backgroundColor: theme.carousel.controlsBackgroundColor,\n    border: theme.carousel.controlsBorder,\n    gap: theme.space.xs,\n    \"&:has($dots)\": {\n      justifyContent: \"center\",\n    },\n  },\n  pageCounter: {},\n\n  main: {\n    padding: 0,\n    display: \"flex\",\n    flexDirection: \"column\",\n    position: \"relative\",\n    \"&:hover $slideControls\": {\n      opacity: 1,\n    },\n  },\n  mainXs: {},\n  mainFullscreen: {\n    maxHeight: \"80vh\",\n  },\n  counterContainer: {\n    position: \"absolute\",\n    top: theme.space.xs,\n    right: theme.space.md,\n    zIndex: 1,\n    display: theme.carousel.counterContainerDisplay,\n  },\n  counter: {\n    color: theme.colors.base_light,\n    backgroundColor: theme.colors.base_dark,\n    padding: theme.spacing([0, \"sm\"]),\n  },\n  slideControls: {\n    position: \"absolute\",\n    left: 0,\n    right: 0,\n    top: `calc(50% - (32px / 2))`,\n    padding: theme.spacing([0, \"sm\"]),\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    opacity: 0,\n    \"& button\": {\n      zIndex: 1,\n    },\n    \"&:focus-within\": {\n      opacity: 1,\n    },\n  },\n  slidesViewport: {\n    overflow: \"hidden\",\n  },\n  slidesContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    height: \"100%\",\n  },\n\n  dots: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: theme.space.xs,\n    height: theme.space.md,\n  },\n  dotsXs: {},\n  dot: {\n    width: 5,\n    height: 5,\n    margin: theme.space.xs,\n    borderRadius: \"50%\",\n    backgroundColor: theme.colors.atmo4,\n  },\n  dotSelected: {\n    width: 10,\n    height: 10,\n    backgroundColor: theme.colors.secondary_80,\n  },\n\n  panel: {\n    display: \"flex\",\n    width: \"100%\",\n    overflowX: \"auto\", // \"hidden\",\n    overflowY: \"hidden\",\n    padding: theme.spacing([\"xs\", \"2px\", \"2px\"]),\n  },\n  thumbnail: {\n    height: \"unset\",\n    padding: 0,\n    \"& img\": {\n      width: \"100%\",\n      height: \"100%\",\n      textAlign: \"center\",\n      aspectRatio: \"16/9\",\n      opacity: \"50%\",\n      borderRadius: theme.carousel.thumbnailBorderRadius,\n    },\n  },\n  thumbnailSelected: {\n    \"& img\": {\n      border: theme.carousel.thumbnailSelectedBorder,\n      opacity: \"100%\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","flexDirection","backgroundColor","theme","colors","atmo1","margin","paddingTop","spacing","paddingBottom","xs","padding","position","top","carousel","xsControlsDisplay","fullscreen","width","height","inset","zIndex","zIndices","modal","title","justifyContent","marginBottom","space","actions","actionsOffsetTop","closeButton","mainContainer","mainContainerFlexDirection","controls","controlsJustifyContent","controlsBackgroundColor","border","controlsBorder","gap","pageCounter","main","opacity","mainXs","mainFullscreen","maxHeight","counterContainer","right","md","counterContainerDisplay","counter","color","base_light","base_dark","slideControls","left","slidesViewport","overflow","slidesContainer","dots","dotsXs","dot","borderRadius","atmo4","dotSelected","secondary_80","panel","overflowX","overflowY","thumbnail","textAlign","aspectRatio","thumbnailBorderRadius","thumbnailSelected","thumbnailSelectedBorder"],"mappings":"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"}
+{"version":3,"file":"Carousel.styles.js","sources":["../../../../src/components/Carousel/Carousel.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCarousel\", {\n  /** Styles applied to the component root class. */\n  root: {\n    display: \"flex\",\n    alignItems: \"stretch\",\n    flexDirection: \"column\",\n    backgroundColor: theme.colors.atmo1,\n    margin: 0,\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n  },\n  xs: {\n    \"&:not(._)\": {\n      padding: 0,\n    },\n    // put dots on top of Slide\n    \"& $dots\": {\n      position: \"relative\",\n      top: \"-40px\",\n    },\n    \"& $actions\": {\n      top: 0,\n    },\n    \"& $controls\": {\n      display: theme.carousel.xsControlsDisplay,\n    },\n  },\n  fullscreen: {\n    width: \"100vw\",\n    height: \"100vh\",\n    position: \"fixed\",\n    inset: 0,\n    zIndex: theme.zIndices.modal,\n    \"&:not(._)\": {\n      padding: theme.spacing([\"xs\", \"xl\"]),\n    },\n  },\n  title: {\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    marginBottom: theme.space.xs,\n  },\n  actions: {\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    right: 0,\n\n    position: \"relative\",\n  },\n  closeButton: {},\n\n  mainContainer: {},\n\n  controls: {\n    display: \"flex\",\n    alignItems: \"center\",\n    position: \"relative\",\n    height: 32,\n    justifyContent: theme.carousel.controlsJustifyContent,\n    backgroundColor: theme.carousel.controlsBackgroundColor,\n    border: theme.carousel.controlsBorder,\n    gap: theme.space.xs,\n    \"&:has($dots)\": {\n      justifyContent: \"center\",\n    },\n  },\n  pageCounter: {},\n\n  main: {\n    padding: 0,\n    display: \"flex\",\n    flexDirection: \"column\",\n    position: \"relative\",\n    \"&:hover $slideControls\": {\n      opacity: 1,\n    },\n  },\n  mainXs: {},\n  mainFullscreen: {\n    maxHeight: \"80vh\",\n  },\n  counterContainer: {\n    position: \"absolute\",\n    top: theme.space.xs,\n    right: theme.space.md,\n    zIndex: 1,\n    display: theme.carousel.counterContainerDisplay,\n  },\n  counter: {\n    color: theme.colors.base_light,\n    backgroundColor: theme.colors.base_dark,\n    padding: theme.spacing([0, \"sm\"]),\n  },\n  slideControls: {\n    position: \"absolute\",\n    left: 0,\n    right: 0,\n    top: `calc(50% - (32px / 2))`,\n    padding: theme.spacing([0, \"sm\"]),\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    opacity: 0,\n    \"& button\": {\n      zIndex: 1,\n    },\n    \"&:focus-within\": {\n      opacity: 1,\n    },\n  },\n  slidesViewport: {\n    overflow: \"hidden\",\n  },\n  slidesContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    height: \"100%\",\n  },\n\n  dots: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: theme.space.xs,\n    height: theme.space.md,\n  },\n  dotsXs: {},\n  dot: {\n    width: 5,\n    height: 5,\n    margin: theme.space.xs,\n    borderRadius: \"50%\",\n    backgroundColor: theme.colors.atmo4,\n  },\n  dotSelected: {\n    width: 10,\n    height: 10,\n    backgroundColor: theme.colors.secondary_80,\n  },\n\n  panel: {\n    display: \"flex\",\n    width: \"100%\",\n    overflowX: \"auto\", // \"hidden\",\n    overflowY: \"hidden\",\n    padding: theme.spacing([\"xs\", \"2px\", \"2px\"]),\n  },\n  thumbnail: {\n    height: \"unset\",\n    padding: 0,\n    \"& img\": {\n      width: \"100%\",\n      height: \"100%\",\n      textAlign: \"center\",\n      aspectRatio: \"16/9\",\n      opacity: \"50%\",\n      borderRadius: theme.carousel.thumbnailBorderRadius,\n    },\n  },\n  thumbnailSelected: {\n    \"& img\": {\n      border: theme.carousel.thumbnailSelectedBorder,\n      opacity: \"100%\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","flexDirection","backgroundColor","theme","colors","atmo1","margin","paddingTop","spacing","paddingBottom","xs","padding","position","top","carousel","xsControlsDisplay","fullscreen","width","height","inset","zIndex","zIndices","modal","title","justifyContent","marginBottom","space","actions","right","closeButton","mainContainer","controls","controlsJustifyContent","controlsBackgroundColor","border","controlsBorder","gap","pageCounter","main","opacity","mainXs","mainFullscreen","maxHeight","counterContainer","md","counterContainerDisplay","counter","color","base_light","base_dark","slideControls","left","slidesViewport","overflow","slidesContainer","dots","dotsXs","dot","borderRadius","atmo4","dotSelected","secondary_80","panel","overflowX","overflowY","thumbnail","textAlign","aspectRatio","thumbnailBorderRadius","thumbnailSelected","thumbnailSelectedBorder"],"mappings":"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"}

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

@@ -0,0 +1,62 @@
+import { Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
+import { useClasses } from "./Carousel.styles.js";
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { HvButton } from "../Button/Button.js";
+const HvCarouselControls = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    showDots,
+    page,
+    pages,
+    canPrevious,
+    canNext,
+    actions,
+    onPreviousClick,
+    onNextClick
+  } = props;
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp, false);
+  const selectedIndex = page || 0;
+  const numSlides = pages;
+  return /* @__PURE__ */ jsxs("div", {
+    className: cx(classes.controls, className),
+    children: [showDots ? /* @__PURE__ */ jsx("div", {
+      className: classes.dots,
+      children: Array.from(Array(numSlides)).map((el, index) => /* @__PURE__ */ jsx("span", {
+        className: cx(classes.dot, {
+          [classes.dotSelected]: index === selectedIndex
+        })
+      }, `circle-${index}`))
+    }) : /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(HvButton, {
+        icon: true,
+        disabled: !canPrevious,
+        variant: "secondaryGhost",
+        "aria-label": "Backwards",
+        onClick: onPreviousClick,
+        children: /* @__PURE__ */ jsx(Backwards, {
+          iconSize: "XS"
+        })
+      }), /* @__PURE__ */ jsx("div", {
+        className: classes.pageCounter,
+        children: `${selectedIndex + 1} / ${numSlides}`
+      }), /* @__PURE__ */ jsx(HvButton, {
+        icon: true,
+        disabled: !canNext,
+        variant: "secondaryGhost",
+        "aria-label": "Forwards",
+        onClick: onNextClick,
+        children: /* @__PURE__ */ jsx(Forwards, {
+          iconSize: "XS"
+        })
+      })]
+    }), actions]
+  });
+};
+export {
+  HvCarouselControls
+};
+//# sourceMappingURL=CarouselControls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselControls.js","sources":["../../../../src/components/Carousel/CarouselControls.tsx"],"sourcesContent":["import { MouseEventHandler, ReactNode } from \"react\";\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\nimport { HvBaseProps } from \"@core/types\";\nimport { HvButton, HvPaginationProps } from \"..\";\nimport { HvCarouselClasses, HvCarouselProps } from \".\";\nimport { useClasses } from \"./Carousel.styles\";\n\ninterface HvCarouselControlsProps\n  extends HvBaseProps<HTMLDivElement>,\n    Pick<HvPaginationProps, \"page\" | \"pages\" | \"canPrevious\" | \"canNext\">,\n    Pick<HvCarouselProps, \"showDots\"> {\n  classes?: HvCarouselClasses;\n  actions?: ReactNode;\n  onPreviousClick?: MouseEventHandler<HTMLButtonElement>;\n  onNextClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const HvCarouselControls = (props: HvCarouselControlsProps) => {\n  const {\n    classes: classesProp,\n    className,\n    showDots,\n    page,\n    pages,\n    canPrevious,\n    canNext,\n    actions,\n    onPreviousClick,\n    onNextClick,\n  } = props;\n  const { classes, cx } = useClasses(classesProp, false);\n\n  const selectedIndex = page || 0;\n  const numSlides = pages;\n\n  return (\n    <div className={cx(classes.controls, className)}>\n      {showDots ? (\n        <div className={classes.dots}>\n          {Array.from(Array(numSlides)).map((el, index) => (\n            <span\n              key={`circle-${index}`}\n              className={cx(classes.dot, {\n                [classes.dotSelected]: index === selectedIndex,\n              })}\n            />\n          ))}\n        </div>\n      ) : (\n        <>\n          <HvButton\n            icon\n            disabled={!canPrevious}\n            variant=\"secondaryGhost\"\n            aria-label=\"Backwards\"\n            onClick={onPreviousClick}\n          >\n            <Backwards iconSize=\"XS\" />\n          </HvButton>\n          <div className={classes.pageCounter}>\n            {`${selectedIndex + 1} / ${numSlides}`}\n          </div>\n          <HvButton\n            icon\n            disabled={!canNext}\n            variant=\"secondaryGhost\"\n            aria-label=\"Forwards\"\n            onClick={onNextClick}\n          >\n            <Forwards iconSize=\"XS\" />\n          </HvButton>\n        </>\n      )}\n      {actions}\n    </div>\n  );\n};\n"],"names":["HvCarouselControls","props","classes","classesProp","className","showDots","page","pages","canPrevious","canNext","actions","onPreviousClick","onNextClick","cx","useClasses","selectedIndex","numSlides","controls","children","_jsx","dots","Array","from","map","el","index","dot","dotSelected","_jsxs","_Fragment","HvButton","icon","disabled","variant","onClick","Backwards","iconSize","pageCounter","Forwards"],"mappings":";;;;AAiBaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EACEX,IAAAA;AACE,QAAA;AAAA,IAAEC;AAAAA,IAASW;AAAAA,EAAAA,IAAOC,WAAWX,aAAa,KAAK;AAErD,QAAMY,gBAAgBT,QAAQ;AAC9B,QAAMU,YAAYT;AAElB,8BACE,OAAA;AAAA,IAAKH,WAAWS,GAAGX,QAAQe,UAAUb,SAAS;AAAA,IAAEc,UAAA,CAC7Cb,WACCc,oBAAA,OAAA;AAAA,MAAKf,WAAWF,QAAQkB;AAAAA,MAAKF,UAC1BG,MAAMC,KAAKD,MAAML,SAAS,CAAC,EAAEO,IAAI,CAACC,IAAIC,UACrCN,oBAAA,QAAA;AAAA,QAEEf,WAAWS,GAAGX,QAAQwB,KAAK;AAAA,UACzB,CAACxB,QAAQyB,WAAW,GAAGF,UAAUV;AAAAA,QAAAA,CAClC;AAAA,MAAE,GAHG,UAASU,OAIhB,CACF;AAAA,IAAA,CACE,IAELG,qBAAAC,UAAA;AAAA,MAAAX,UAAA,CACEC,oBAACW,UAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,UAAU,CAACxB;AAAAA,QACXyB,SAAQ;AAAA,QACR,cAAW;AAAA,QACXC,SAASvB;AAAAA,QAAgBO,8BAExBiB,WAAS;AAAA,UAACC,UAAS;AAAA,QAAA,CAAM;AAAA,MAAA,CAClB,GACVjB,oBAAA,OAAA;AAAA,QAAKf,WAAWF,QAAQmC;AAAAA,QAAYnB,UAChC,GAAEH,gBAAgB,OAAOC;AAAAA,MAAAA,CACxB,GACLG,oBAACW,UAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,UAAU,CAACvB;AAAAA,QACXwB,SAAQ;AAAA,QACR,cAAW;AAAA,QACXC,SAAStB;AAAAA,QAAYM,8BAEpBoB,UAAQ;AAAA,UAACF,UAAS;AAAA,QAAA,CAAM;AAAA,MAAA,CACjB,CAAC;AAAA,IACX,CAAA,GAEH1B,OAAO;AAAA,EAAA,CACL;AAET;"}

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

@@ -2,6 +2,7 @@ import { useClasses } from "./CarouselSlide.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 const HvCarouselSlide = ({
   classes: classesProp = {},
+  className,
   children,
   size: flexBasis = "100%",
   src,
@@ -16,7 +17,7 @@ const HvCarouselSlide = ({
   return /* @__PURE__ */ jsx("div", {
     className: cx(css({
       flex: `0 0 ${flexBasis}`
-    }), classes.slide),
+    }), classes.slide, className),
     children: children ?? /* @__PURE__ */ jsx("img", {
       className: classes.image,
       src,

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

@@ -1 +1 @@
-{"version":3,"file":"CarouselSlide.js","sources":["../../../../../src/components/Carousel/CarouselSlide/CarouselSlide.tsx"],"sourcesContent":["import { ImgHTMLAttributes } from \"react\";\nimport { ExtractNames } from \"@core/utils\";\nimport { useClasses } from \"./CarouselSlide.styles\";\n\nexport type HvCarouselSlideClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselSlideProps\n  extends ImgHTMLAttributes<HTMLImageElement> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselSlideClasses;\n  /** The width of the Slide. Defaults to `100%` */\n  size?: string;\n  /** Content of a slide to be displayed */\n  children?: React.ReactNode;\n}\n\n/**\n * A container to use as `children` of `HvCarousel`.\n * Pass `img` props directly to it, or `children` for any custom content\n */\nexport const HvCarouselSlide = ({\n  classes: classesProp = {},\n  children,\n  size: flexBasis = \"100%\",\n  src,\n  alt,\n  ...props\n}: HvCarouselSlideProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n  return (\n    <div className={cx(css({ flex: `0 0 ${flexBasis}` }), classes.slide)}>\n      {children ?? (\n        <img className={classes.image} src={src} alt={alt} {...props} />\n      )}\n    </div>\n  );\n};\n"],"names":["HvCarouselSlide","classes","classesProp","children","size","flexBasis","src","alt","props","css","cx","useClasses","className","flex","slide","_jsx","image"],"mappings":";;AAoBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,SAASC,cAAc,CAAC;AAAA,EACxBC;AAAAA,EACAC,MAAMC,YAAY;AAAA,EAClBC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiB,MAAM;AACpB,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AACnD,6BACE,OAAA;AAAA,IAAKU,WAAWF,GAAGD,IAAI;AAAA,MAAEI,MAAO,OAAMR;AAAAA,IAAAA,CAAa,GAAGJ,QAAQa,KAAK;AAAA,IAAEX,UAClEA,YACCY,oBAAA,OAAA;AAAA,MAAKH,WAAWX,QAAQe;AAAAA,MAAOV;AAAAA,MAAUC;AAAAA,MAAS,GAAKC;AAAAA,IAAAA,CAAQ;AAAA,EAAA,CAE9D;AAET;"}
+{"version":3,"file":"CarouselSlide.js","sources":["../../../../../src/components/Carousel/CarouselSlide/CarouselSlide.tsx"],"sourcesContent":["import { ImgHTMLAttributes } from \"react\";\nimport { ExtractNames } from \"@core/utils\";\nimport { useClasses } from \"./CarouselSlide.styles\";\n\nexport type HvCarouselSlideClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselSlideProps\n  extends ImgHTMLAttributes<HTMLImageElement> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselSlideClasses;\n  /** The width of the Slide. Defaults to `100%` */\n  size?: string;\n  /** Content of a slide to be displayed */\n  children?: React.ReactNode;\n}\n\n/**\n * A container to use as `children` of `HvCarousel`.\n * Pass `img` props directly to it, or `children` for any custom content\n */\nexport const HvCarouselSlide = ({\n  classes: classesProp = {},\n  className,\n  children,\n  size: flexBasis = \"100%\",\n  src,\n  alt,\n  ...props\n}: HvCarouselSlideProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n  return (\n    <div\n      className={cx(\n        css({ flex: `0 0 ${flexBasis}` }),\n        classes.slide,\n        className\n      )}\n    >\n      {children ?? (\n        <img className={classes.image} src={src} alt={alt} {...props} />\n      )}\n    </div>\n  );\n};\n"],"names":["HvCarouselSlide","classes","classesProp","className","children","size","flexBasis","src","alt","props","css","cx","useClasses","flex","slide","_jsx","image"],"mappings":";;AAoBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,SAASC,cAAc,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC,MAAMC,YAAY;AAAA,EAClBC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiB,MAAM;AACpB,QAAA;AAAA,IAAER;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AACnD,6BACE,OAAA;AAAA,IACEC,WAAWQ,GACTD,IAAI;AAAA,MAAEG,MAAO,OAAMP;AAAAA,IAAAA,CAAa,GAChCL,QAAQa,OACRX,SACF;AAAA,IAAEC,UAEDA,YACCW,oBAAA,OAAA;AAAA,MAAKZ,WAAWF,QAAQe;AAAAA,MAAOT;AAAAA,MAAUC;AAAAA,MAAS,GAAKC;AAAAA,IAAAA,CAAQ;AAAA,EAAA,CAE9D;AAET;"}

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

@@ -0,0 +1,30 @@
+import "@hitachivantara/uikit-styles";
+import { useClasses } from "./Carousel.styles.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { HvButton } from "../Button/Button.js";
+const HvCarouselThumbnail = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    selected,
+    children,
+    ...others
+  } = props;
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(HvButton, {
+    icon: true,
+    variant: "secondaryGhost",
+    className: cx(classes.thumbnail, {
+      [classes.thumbnailSelected]: selected
+    }),
+    ...others,
+    children
+  });
+};
+export {
+  HvCarouselThumbnail
+};
+//# sourceMappingURL=CarouselThumbnail.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselThumbnail.js","sources":["../../../../src/components/Carousel/CarouselThumbnail.tsx"],"sourcesContent":["import { HvButton, HvButtonProps } from \"../..\";\nimport { useClasses } from \"./Carousel.styles\";\n\ninterface HvCarouselThumbnailProps extends HvButtonProps {\n  selected?: boolean;\n}\n\nexport const HvCarouselThumbnail = (props: HvCarouselThumbnailProps) => {\n  const {\n    classes: classesProp,\n    className,\n    selected,\n    children,\n    ...others\n  } = props;\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <HvButton\n      icon\n      variant=\"secondaryGhost\"\n      className={cx(classes.thumbnail, {\n        [classes.thumbnailSelected]: selected,\n      })}\n      {...others}\n    >\n      {children}\n    </HvButton>\n  );\n};\n"],"names":["HvCarouselThumbnail","props","classes","classesProp","className","selected","children","others","cx","useClasses","HvButton","icon","variant","thumbnail","thumbnailSelected"],"mappings":";;;;AAOaA,MAAAA,sBAAsBA,CAACC,UAAoC;AAChE,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EACDN,IAAAA;AACE,QAAA;AAAA,IAAEC;AAAAA,IAASM;AAAAA,EAAAA,IAAOC,WAAWN,WAAW;AAE9C,6BACGO,UAAQ;AAAA,IACPC,MAAI;AAAA,IACJC,SAAQ;AAAA,IACRR,WAAWI,GAAGN,QAAQW,WAAW;AAAA,MAC/B,CAACX,QAAQY,iBAAiB,GAAGT;AAAAA,IAAAA,CAC9B;AAAA,IAAE,GACCE;AAAAA,IAAMD;AAAAA,EAAAA,CAGF;AAEd;"}

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

@@ -0,0 +1,44 @@
+import { forwardRef } from "react";
+import { useClasses } from "./Carousel.styles.js";
+import { HvCarouselThumbnail } from "./CarouselThumbnail.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { HvStack } from "../Stack/Stack.js";
+const HvCarouselThumbnails = forwardRef((props, ref) => {
+  const {
+    classes: classesProp,
+    className,
+    page,
+    pages,
+    width,
+    renderThumbnail,
+    onThumbnailClick,
+    ...others
+  } = props;
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
+  const selectedIndex = page || 0;
+  const numSlides = pages;
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    className: cx(classes.panel, className),
+    ...others,
+    children: /* @__PURE__ */ jsx(HvStack, {
+      direction: "row",
+      spacing: "xs",
+      children: Array.from(Array(numSlides)).map((doc, i) => /* @__PURE__ */ jsx(HvCarouselThumbnail, {
+        style: {
+          width
+        },
+        selected: i === selectedIndex,
+        onClick: (event) => onThumbnailClick == null ? void 0 : onThumbnailClick(event, i),
+        children: renderThumbnail == null ? void 0 : renderThumbnail(i)
+      }, `thumbnail-${i}`))
+    })
+  });
+});
+export {
+  HvCarouselThumbnails
+};
+//# sourceMappingURL=CarouselThumbnails.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselThumbnails.js","sources":["../../../../src/components/Carousel/CarouselThumbnails.tsx"],"sourcesContent":["import { CSSProperties, MouseEvent, forwardRef } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { HvPaginationProps, HvStack } from \"..\";\nimport { HvCarouselClasses, HvCarouselProps } from \".\";\nimport { useClasses } from \"./Carousel.styles\";\nimport { HvCarouselThumbnail } from \"./CarouselThumbnail\";\n\ninterface HvCarouselThumbnailsProps\n  extends HvBaseProps<HTMLDivElement, \"children\">,\n    Pick<HvPaginationProps, \"page\" | \"pages\" | \"canPrevious\" | \"canNext\">,\n    Pick<HvCarouselProps, \"showDots\" | \"renderThumbnail\"> {\n  width?: CSSProperties[\"width\"];\n  classes?: HvCarouselClasses;\n  onThumbnailClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    index: number\n  ) => void;\n}\n\nexport const HvCarouselThumbnails = forwardRef<\n  HTMLDivElement,\n  HvCarouselThumbnailsProps\n>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    page,\n    pages,\n    width,\n    renderThumbnail,\n    onThumbnailClick,\n    ...others\n  } = props;\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectedIndex = page || 0;\n  const numSlides = pages;\n\n  return (\n    <div ref={ref} className={cx(classes.panel, className)} {...others}>\n      <HvStack direction=\"row\" spacing=\"xs\">\n        {Array.from(Array(numSlides)).map((doc, i) => (\n          <HvCarouselThumbnail\n            key={`thumbnail-${i}`}\n            style={{ width }}\n            selected={i === selectedIndex}\n            onClick={(event) => onThumbnailClick?.(event, i)}\n          >\n            {renderThumbnail?.(i)}\n          </HvCarouselThumbnail>\n        ))}\n      </HvStack>\n    </div>\n  );\n});\n"],"names":["HvCarouselThumbnails","forwardRef","props","ref","classes","classesProp","className","page","pages","width","renderThumbnail","onThumbnailClick","others","cx","useClasses","selectedIndex","numSlides","panel","children","HvStack","direction","spacing","Array","from","map","doc","i","_jsx","HvCarouselThumbnail","style","selected","onClick","event"],"mappings":";;;;;AAmBO,MAAMA,uBAAuBC,WAGlC,CAACC,OAAOC,QAAQ;AACV,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EACDV,IAAAA;AACE,QAAA;AAAA,IAAEE;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AAE9C,QAAMU,gBAAgBR,QAAQ;AAC9B,QAAMS,YAAYR;AAElB,6BACE,OAAA;AAAA,IAAKL;AAAAA,IAAUG,WAAWO,GAAGT,QAAQa,OAAOX,SAAS;AAAA,IAAE,GAAKM;AAAAA,IAAMM,8BAC/DC,SAAO;AAAA,MAACC,WAAU;AAAA,MAAMC,SAAQ;AAAA,MAAIH,UAClCI,MAAMC,KAAKD,MAAMN,SAAS,CAAC,EAAEQ,IAAI,CAACC,KAAKC,MACtCC,oBAACC,qBAAmB;AAAA,QAElBC,OAAO;AAAA,UAAEpB;AAAAA,QAAM;AAAA,QACfqB,UAAUJ,MAAMX;AAAAA,QAChBgB,SAAUC,CAAAA,UAAUrB,qDAAmBqB,OAAON;AAAAA,QAAGR,UAEhDR,mDAAkBgB;AAAAA,MAAE,GALf,aAAYA,GAMC,CACtB;AAAA,IAAA,CACM;AAAA,EAAA,CACN;AAET,CAAC;"}