npm - @hitachivantara/uikit-react-core - Versions diffs - 5.18.4 → 5.19.0 - Mend

@hitachivantara/uikit-react-core 5.18.4 → 5.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

package/dist/cjs/components/Carousel/Carousel.cjs CHANGED Viewed

@@ -3,12 +3,15 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const useCarousel = require("embla-carousel-react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+require("@hitachivantara/uikit-styles");
+const CarouselControls = require("./CarouselControls.cjs");
+const CarouselThumbnails = require("./CarouselThumbnails.cjs");
 const Carousel_styles = require("./Carousel.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Container = require("../Container/Container.cjs");
-const Stack = require("../Stack/Stack.cjs");
-const Typography = require("../Typography/Typography.cjs");
+const useTheme = require("../../hooks/useTheme.cjs");
 const Button = require("../Button/Button.cjs");
+const Typography = require("../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const useCarousel__default = /* @__PURE__ */ _interopDefault(useCarousel);
 const clamp = (num, max, min = 0) => Math.min(Math.max(num, min), max);
@@ -20,24 +23,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.useTheme();
   const {
     classes,
+    css,
     cx
   } = Carousel_styles.useClasses(classesProp);
   const thumbnailsRef = React.useRef(null);
   const [isFullscreen, setIsFullscreen] = React.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__default.default({
     align: "start",
     loop: true,
@@ -89,6 +102,46 @@ const HvCarousel = (props) => {
   const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);
   const showThumbnails = !hideThumbnails && !!renderThumbnail;
   const showDots = showDotsProp ?? numSlides <= 5;
+  const actions = /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    className: cx(classes.actions, actionsPosition === "header" ? css({
+      position: "relative",
+      top: -40,
+      height: 0
+    }) : css({
+      position: "absolute"
+    })),
+    children: [actionsProp, showFullscreen && /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
+      icon: true,
+      variant: "secondaryGhost",
+      onClick: () => setIsFullscreen((curr) => !curr),
+      className: classes.closeButton,
+      children: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, {
+        "aria-label": "Close"
+      }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Fullscreen, {
+        "aria-label": "Fullscreen"
+      })
+    })]
+  });
+  const controls = /* @__PURE__ */ jsxRuntime.jsx(CarouselControls.HvCarouselControls, {
+    classes,
+    showDots,
+    page: selectedIndex,
+    pages: numSlides,
+    canPrevious: canPrev,
+    canNext,
+    onPreviousClick: handlePrevious,
+    onNextClick: handleNext,
+    actions: actionsPosition === "controls" && actions
+  });
+  const thumbnails = showThumbnails && /* @__PURE__ */ jsxRuntime.jsx(CarouselThumbnails.HvCarouselThumbnails, {
+    classes,
+    ref: thumbnailsRef,
+    page: selectedIndex,
+    pages: numSlides,
+    width: thumbnailWidth,
+    onThumbnailClick: (evt, i) => handleScroll(i),
+    renderThumbnail
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs(Container.HvContainer, {
     className: cx(classes.root, className, {
       [classes.xs]: xs,
@@ -99,118 +152,50 @@ const HvCarousel = (props) => {
       variant: "title2",
       className: classes.title,
       children: title
-    }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: classes.actions,
-      children: [showFullscreen && /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
-        icon: true,
-        variant: "secondaryGhost",
-        onClick: () => setIsFullscreen((curr) => !curr),
-        className: classes.closeButton,
-        children: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, {
-          "aria-label": "Close"
-        }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Fullscreen, {
-          "aria-label": "Fullscreen"
-        })
-      }), actions]
-    }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: classes.mainContainer,
-      children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: classes.controls,
-        children: showDots ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-          className: classes.dots,
-          children: Array.from(Array(numSlides)).map((el, index) => /* @__PURE__ */ jsxRuntime.jsx("span", {
-            className: cx(classes.dot, {
-              [classes.dotSelected]: index === selectedIndex
-            })
-          }, `circle-${index}`))
-        }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [/* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
-            icon: true,
-            disabled: !canPrev,
-            variant: "secondaryGhost",
-            "aria-label": "Backwards",
-            onClick: handlePrevious,
-            children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, {
-              iconSize: "XS"
-            })
-          }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-            className: classes.pageCounter,
-            children: `${selectedIndex + 1} / ${numSlides}`
-          }), /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
-            icon: true,
-            disabled: !canNext,
-            variant: "secondaryGhost",
-            "aria-label": "Forwards",
-            onClick: handleNext,
-            children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, {
-              iconSize: "XS"
-            })
-          })]
+    }), actionsPosition === "header" && actions, thumbnailsPosition === "top" && thumbnails, controlsPosition === "top" && controls, /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: cx(classes.main, {
+        [classes.mainXs]: xs,
+        [classes.mainFullscreen]: isFullscreen
+      }),
+      children: [showCounter && /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: classes.counterContainer,
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+          className: classes.counter,
+          children: `${selectedIndex + 1}/${numSlides}`
         })
-      }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: cx(classes.main, {
-          [classes.mainXs]: xs,
-          [classes.mainFullscreen]: isFullscreen
-        }),
-        children: [showCounter && /* @__PURE__ */ jsxRuntime.jsx("div", {
-          className: classes.counterContainer,
-          children: /* @__PURE__ */ jsxRuntime.jsx("span", {
-            className: classes.counter,
-            children: `${selectedIndex + 1}/${numSlides}`
+      }), showSlideControls && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: classes.slideControls,
+        children: [/* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
+          icon: true,
+          disabled: !canPrev,
+          variant: "secondary",
+          "aria-label": "Backwards",
+          onClick: handlePrevious,
+          children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, {
+            iconSize: "XS"
           })
-        }), showSlideControls && /* @__PURE__ */ jsxRuntime.jsxs("div", {
-          className: classes.slideControls,
-          children: [/* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
-            icon: true,
-            disabled: !canPrev,
-            variant: "secondary",
-            "aria-label": "Backwards",
-            onClick: handlePrevious,
-            children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, {
-              iconSize: "XS"
-            })
-          }), /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
-            icon: true,
-            disabled: !canNext,
-            variant: "secondary",
-            "aria-label": "Forwards",
-            onClick: handleNext,
-            children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, {
-              iconSize: "XS"
-            })
-          })]
-        }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-          ref: containerRef,
-          style: {
-            height
-          },
-          className: classes.slidesViewport,
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-            className: classes.slidesContainer,
-            children
+        }), /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
+          icon: true,
+          disabled: !canNext,
+          variant: "secondary",
+          "aria-label": "Forwards",
+          onClick: handleNext,
+          children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, {
+            iconSize: "XS"
           })
         })]
+      }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+        ref: containerRef,
+        style: {
+          height
+        },
+        className: classes.slidesViewport,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: classes.slidesContainer,
+          children
+        })
       })]
-    }), showThumbnails && /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ref: thumbnailsRef,
-      className: classes.panel,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Stack.HvStack, {
-        direction: "row",
-        spacing: "xs",
-        children: Array.from(Array(numSlides)).map((doc, i) => /* @__PURE__ */ jsxRuntime.jsx(Button.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]
   });
 };
 exports.carouselClasses = Carousel_styles.staticClasses;

package/dist/cjs/components/Carousel/Carousel.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Carousel.cjs","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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"}
1	+ {"version":3,"file":"Carousel.cjs","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/cjs/components/Carousel/Carousel.styles.cjs CHANGED Viewed

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

package/dist/cjs/components/Carousel/Carousel.styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Carousel.styles.cjs","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":";;;;~~AAIa~~,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,cAAc;AAAA;AAAA,EAEvEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,eAAe;AAAA,IACfC,iBAAiBC,YAAAA,MAAMC,OAAOC;AAAAA,IAC9BC,QAAQ;AAAA,IACRC,YAAYJ,YAAAA,MAAMK,QAAQ,CAAC;AAAA,IAC3BC,eAAeN,YAAAA,MAAMK,QAAQ,CAAC;AAAA,EAChC;AAAA,EACAE,IAAI;AAAA,IACF,aAAa;AAAA,MACXC,SAAS;AAAA,IACX;AAAA;AAAA,IAEA,WAAW;AAAA,MACTC,UAAU;AAAA,MACVC,KAAK;AAAA,IACP;AAAA,IACA,cAAc;AAAA,MACZA,KAAK;AAAA,IACP;AAAA,IACA,eAAe;AAAA,MACbd,SAASI,YAAAA,MAAMW,SAASC;AAAAA,IAC1B;AAAA,EACF;AAAA,EACAC,YAAY;AAAA,IACVC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRN,UAAU;AAAA,IACVO,OAAO;AAAA,IACPC,QAAQjB,YAAAA,MAAMkB,SAASC;AAAAA,IACvB,aAAa;AAAA,MACXX,SAASR,YAAAA,MAAMK,QAAQ,CAAC,MAAM,IAAI,CAAC;AAAA,IACrC;AAAA,EACF;AAAA,EACAe,OAAO;AAAA,IACLxB,SAAS;AAAA,IACTyB,gBAAgB;AAAA,IAChBC,cAActB,YAAAA,MAAMuB,MAAMhB;AAAAA,EAC5B;AAAA,EACAiB,SAAS;AAAA,IACP5B,SAAS;AAAA,IACTyB,gBAAgB;AAAA,~~IAChBN~~,~~QAAQ~~;AAAA,~~IACRE~~,~~QAAQ;AAAA,IAERR,~~UAAU;AAAA,~~IACVC,KAAKV,YAAAA,MAAMW,SAASc~~;~~AAAAA,EACtB;~~AAAA,~~EACAC~~,aAAa,CAAC;AAAA,EAEdC,eAAe~~;AAAA~~,~~IACb/B,SAAS~~;AAAA,~~IACTE~~,~~eAAeE,YAAAA,MAAMW,SAClBiB;AAAAA,EACL;AAAA,EAEAC,~~UAAU;AAAA,~~IACRjC~~,SAAS;AAAA,IACTC,YAAY;AAAA,~~IACZkB~~,QAAQ;AAAA,IACRM,gBAAgBrB,YAAAA,MAAMW,~~SAASmB~~;AAAAA,IAC/~~B/B~~,iBAAiBC,YAAAA,MAAMW,~~SAASoB~~;AAAAA,IAChCC,~~QAAQhC~~,YAAAA,MAAMW,~~SAASsB~~;AAAAA,IACvBC,~~KAAKlC~~,YAAAA,MAAMuB,MAAMhB;AAAAA,IACjB,gBAAgB;AAAA,MACdc,gBAAgB;AAAA,IAClB;AAAA,EACF;AAAA,~~EACAc~~,aAAa,CAAC;AAAA,EAEdC,MAAM;AAAA,~~IACJ5B~~,SAAS;AAAA,IACTZ,SAAS;AAAA,IACTE,eAAe;AAAA,IACfW,UAAU;AAAA,IACV,0BAA0B;AAAA,~~MACxB4B~~,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACAC,QAAQ,CAAC;AAAA,EACTC,gBAAgB;AAAA,IACdC,WAAW;AAAA,EACb;AAAA,EACAC,kBAAkB;AAAA,~~IAChBhC~~,UAAU;AAAA,IACVC,KAAKV,YAAAA,MAAMuB,MAAMhB;AAAAA,~~IACjBmC~~,~~OAAO1C~~,YAAAA,MAAMuB,~~MAAMoB~~;AAAAA,~~IACnB1B~~,QAAQ;AAAA,IACRrB,SAASI,YAAAA,MAAMW,~~SAASiC~~;AAAAA,EAC1B;AAAA,EACAC,SAAS;AAAA,IACPC,~~OAAO9C~~,YAAAA,MAAMC,~~OAAO8C~~;AAAAA,~~IACpBhD~~,iBAAiBC,YAAAA,MAAMC,~~OAAO+C~~;AAAAA,~~IAC9BxC~~,SAASR,YAAAA,MAAMK,QAAQ,CAAC,GAAG,IAAI,CAAC;AAAA,EAClC;AAAA,~~EACA4C~~,eAAe;AAAA,~~IACbxC~~,UAAU;AAAA,~~IACVyC~~,MAAM;AAAA,~~IACNR~~,OAAO;AAAA,~~IACPhC~~,KAAM;AAAA,IACNF,SAASR,YAAAA,MAAMK,QAAQ,CAAC,GAAG,IAAI,CAAC;AAAA,IAChCT,SAAS;AAAA,IACTE,eAAe;AAAA,IACfD,YAAY;AAAA,IACZwB,gBAAgB;AAAA,~~IAChBgB~~,SAAS;AAAA,IACT,YAAY;AAAA,~~MACVpB~~,QAAQ;AAAA,IACV;AAAA,IACA,kBAAkB;AAAA,~~MAChBoB~~,SAAS;AAAA,IACX;AAAA,EACF;AAAA,~~EACAc~~,gBAAgB;AAAA,IACdC,UAAU;AAAA,EACZ;AAAA,EACAC,iBAAiB;AAAA,~~IACfzD~~,SAAS;AAAA,IACTE,eAAe;AAAA,IACfiB,QAAQ;AAAA,EACV;AAAA,~~EAEAuC~~,MAAM;AAAA,~~IACJ1D~~,SAAS;AAAA,IACTC,YAAY;AAAA,IACZwB,gBAAgB;AAAA,~~IAChBa~~,~~KAAKlC~~,YAAAA,MAAMuB,MAAMhB;AAAAA,IACjBQ,QAAQf,YAAAA,MAAMuB,~~MAAMoB~~;AAAAA,EACtB;AAAA,EACAY,QAAQ,CAAC;AAAA,EACTC,KAAK;AAAA,~~IACH1C~~,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRZ,QAAQH,YAAAA,MAAMuB,MAAMhB;AAAAA,~~IACpBkD~~,cAAc;AAAA,~~IACd1D~~,iBAAiBC,YAAAA,MAAMC,~~OAAOyD~~;AAAAA,EAChC;AAAA,EACAC,aAAa;AAAA,~~IACX7C~~,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRhB,iBAAiBC,YAAAA,MAAMC,~~OAAO2D~~;AAAAA,EAChC;AAAA,EAEAC,OAAO;AAAA,~~IACLjE~~,SAAS;AAAA,IACTkB,OAAO;AAAA,~~IACPgD~~,WAAW;AAAA;AAAA,IACXC,WAAW;AAAA,~~IACXvD~~,SAASR,YAAMK,MAAAA,QAAQ,CAAC,MAAM,OAAO,KAAK,CAAC;AAAA,EAC7C;AAAA,~~EACA2D~~,WAAW;AAAA,~~IACTjD~~,QAAQ;AAAA,IACRP,SAAS;AAAA,IACT,SAAS;AAAA,MACPM,OAAO;AAAA,MACPC,QAAQ;AAAA,~~MACRkD~~,WAAW;AAAA,MACXC,aAAa;AAAA,~~MACb7B~~,SAAS;AAAA,~~MACToB~~,~~cAAczD~~,YAAAA,MAAMW,~~SAASwD~~;AAAAA,IAC/B;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjB,SAAS;AAAA,~~MACPpC~~,~~QAAQhC~~,YAAAA,MAAMW,~~SAAS0D~~;AAAAA,~~MACvBhC~~,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;;;"}
1	+ {"version":3,"file":"Carousel.styles.cjs","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/cjs/components/Carousel/CarouselControls.cjs ADDED Viewed

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

package/dist/cjs/components/Carousel/CarouselControls.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CarouselControls.cjs","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,gBAAWX,WAAAA,aAAa,KAAK;AAErD,QAAMY,gBAAgBT,QAAQ;AAC9B,QAAMU,YAAYT;AAElB,yCACE,OAAA;AAAA,IAAKH,WAAWS,GAAGX,QAAQe,UAAUb,SAAS;AAAA,IAAEc,UAAA,CAC7Cb,WACCc,2BAAAA,IAAA,OAAA;AAAA,MAAKf,WAAWF,QAAQkB;AAAAA,MAAKF,UAC1BG,MAAMC,KAAKD,MAAML,SAAS,CAAC,EAAEO,IAAI,CAACC,IAAIC,UACrCN,2BAAAA,IAAA,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,2BAAAA,KAAAC,qBAAA;AAAA,MAAAX,UAAA,CACEC,2BAAAA,IAACW,iBAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,UAAU,CAACxB;AAAAA,QACXyB,SAAQ;AAAA,QACR,cAAW;AAAA,QACXC,SAASvB;AAAAA,QAAgBO,yCAExBiB,2BAAS;AAAA,UAACC,UAAS;AAAA,QAAA,CAAM;AAAA,MAAA,CAClB,GACVjB,2BAAAA,IAAA,OAAA;AAAA,QAAKf,WAAWF,QAAQmC;AAAAA,QAAYnB,UAChC,GAAEH,gBAAgB,OAAOC;AAAAA,MAAAA,CACxB,GACLG,2BAAAA,IAACW,iBAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,UAAU,CAACvB;AAAAA,QACXwB,SAAQ;AAAA,QACR,cAAW;AAAA,QACXC,SAAStB;AAAAA,QAAYM,yCAEpBoB,0BAAQ;AAAA,UAACF,UAAS;AAAA,QAAA,CAAM;AAAA,MAAA,CACjB,CAAC;AAAA,IACX,CAAA,GAEH1B,OAAO;AAAA,EAAA,CACL;AAET;;"}

package/dist/cjs/components/Carousel/CarouselSlide/CarouselSlide.cjs CHANGED Viewed

@@ -4,6 +4,7 @@ const CarouselSlide_styles = require("./CarouselSlide.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvCarouselSlide = ({
   classes: classesProp = {},
+  className,
   children,
   size: flexBasis = "100%",
   src,
@@ -18,7 +19,7 @@ const HvCarouselSlide = ({
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: cx(css({
       flex: `0 0 ${flexBasis}`
-    }), classes.slide),
+    }), classes.slide, className),
     children: children ?? /* @__PURE__ */ jsxRuntime.jsx("img", {
       className: classes.image,
       src,

package/dist/cjs/components/Carousel/CarouselSlide/CarouselSlide.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CarouselSlide.cjs","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,qBAAAA,~~WAAWT~~,WAAW;AACnD,wCACE,OAAA;AAAA,~~IAAKU~~,~~WAAWF~~,~~GAAGD~~,IAAI;AAAA,~~MAAEI~~,MAAO,~~OAAMR~~;AAAAA,IAAAA,CAAa,~~GAAGJ~~,QAAQa,~~KAAK~~;AAAA,~~IAAEX~~,~~UAClEA~~,~~YACCY~~,2BAAAA,IAAA,OAAA;AAAA,~~MAAKH~~,~~WAAWX~~,QAAQe;AAAAA,~~MAAOV~~;AAAAA,MAAUC;AAAAA,MAAS,GAAKC;AAAAA,IAAAA,CAAQ;AAAA,EAAA,CAE9D;AAET;;"}
1	+ {"version":3,"file":"CarouselSlide.cjs","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,qBAAAA,WAAWV,WAAW;AACnD,wCACE,OAAA;AAAA,IACEC,WAAWQ,GACTD,IAAI;AAAA,MAAEG,MAAO,OAAMP;AAAAA,IAAAA,CAAa,GAChCL,QAAQa,OACRX,SACF;AAAA,IAAEC,UAEDA,YACCW,2BAAAA,IAAA,OAAA;AAAA,MAAKZ,WAAWF,QAAQe;AAAAA,MAAOT;AAAAA,MAAUC;AAAAA,MAAS,GAAKC;AAAAA,IAAAA,CAAQ;AAAA,EAAA,CAE9D;AAET;;"}

package/dist/cjs/components/Carousel/CarouselThumbnail.cjs ADDED Viewed

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("@hitachivantara/uikit-styles");
+const Carousel_styles = require("./Carousel.styles.cjs");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const Button = require("../Button/Button.cjs");
+const HvCarouselThumbnail = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    selected,
+    children,
+    ...others
+  } = props;
+  const {
+    classes,
+    cx
+  } = Carousel_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
+    icon: true,
+    variant: "secondaryGhost",
+    className: cx(classes.thumbnail, {
+      [classes.thumbnailSelected]: selected
+    }),
+    ...others,
+    children
+  });
+};
+exports.HvCarouselThumbnail = HvCarouselThumbnail;
+//# sourceMappingURL=CarouselThumbnail.cjs.map

package/dist/cjs/components/Carousel/CarouselThumbnail.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CarouselThumbnail.cjs","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,gBAAAA,WAAWN,WAAW;AAE9C,wCACGO,OAAAA,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/cjs/components/Carousel/CarouselThumbnails.cjs ADDED Viewed

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

package/dist/cjs/components/Carousel/CarouselThumbnails.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CarouselThumbnails.cjs","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,MAAAA,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,gBAAAA,WAAWT,WAAW;AAE9C,QAAMU,gBAAgBR,QAAQ;AAC9B,QAAMS,YAAYR;AAElB,wCACE,OAAA;AAAA,IAAKL;AAAAA,IAAUG,WAAWO,GAAGT,QAAQa,OAAOX,SAAS;AAAA,IAAE,GAAKM;AAAAA,IAAMM,yCAC/DC,eAAO;AAAA,MAACC,WAAU;AAAA,MAAMC,SAAQ;AAAA,MAAIH,UAClCI,MAAMC,KAAKD,MAAMN,SAAS,CAAC,EAAEQ,IAAI,CAACC,KAAKC,MACtCC,2BAAAA,IAACC,kBAAAA,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;;"}