@hitachivantara/uikit-react-core 5.27.6 → 5.27.7

package/dist/cjs/components/Card/Header/Header.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.cjs","sources":["../../../../../src/components/Card/Header/Header.tsx"],"sourcesContent":["import MuiCardHeader, {\n  CardHeaderProps as MuiCardHeaderProps,\n} from \"@mui/material/CardHeader\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Header.styles\";\n\nexport { staticClasses as cardHeaderClasses };\n\nexport type HvCardHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardHeaderProps\n  extends Omit<MuiCardHeaderProps, \"classes\">,\n    HvBaseProps<HTMLDivElement, \"title\"> {\n  /** The renderable content inside the title slot of the header. */\n  title: React.ReactNode;\n  /** The renderable content inside the subheader slot of the header. */\n  subheader?: React.ReactNode;\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** The function that will be executed when this section is clicked. */\n  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardHeaderClasses;\n}\n\nexport const HvCardHeader = ({\n  classes: classesProp,\n  className,\n  title,\n  subheader,\n  icon,\n  onClick,\n  ...others\n}: HvCardHeaderProps) => {\n  const { activeTheme } = useTheme();\n  const { classes, css, cx } = useClasses(classesProp);\n\n  return (\n    <MuiCardHeader\n      title={title}\n      subheader={subheader}\n      action={icon}\n      onClick={onClick}\n      className={cx(classes.root, className)}\n      classes={{\n        title: cx(\n          css({\n            ...activeTheme?.typography[activeTheme?.card.titleVariant],\n          }),\n          {\n            [classes.titleShort]: icon,\n            [classes.title]: !icon,\n          }\n        ),\n        subheader: cx(\n          css({\n            ...activeTheme?.typography[activeTheme?.card.subheaderVariant],\n            color: activeTheme?.card.subheaderColor,\n          }),\n          classes.subheader\n        ),\n        action: classes.action,\n        content: classes.content,\n      }}\n      {...others}\n    />\n  );\n};\n"],"names":["HvCardHeader","classes","classesProp","className","title","subheader","icon","onClick","others","activeTheme","useTheme","css","cx","useClasses","MuiCardHeader","action","root","typography","card","titleVariant","titleShort","subheaderVariant","color","subheaderColor","content"],"mappings":";;;;;;;;AA6BO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACc,MAAM;AACjB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS,SAAA;AAC3B,QAAA;AAAA,IAAET;AAAAA,IAASU;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,cAAAA,WAAWX,WAAW;AAEnD,wCACGY,uBAAAA,SAAa;AAAA,IACZV;AAAAA,IACAC;AAAAA,IACAU,QAAQT;AAAAA,IACRC;AAAAA,IACAJ,WAAWS,GAAGX,QAAQe,MAAMb,SAAS;AAAA,IACrCF,SAAS;AAAA,MACPG,OAAOQ,GACLD,IAAI;AAAA,QACF,GAAGF,2CAAaQ,WAAWR,2CAAaS,KAAKC;AAAAA,MAAY,CAC1D,GACD;AAAA,QACE,CAAClB,QAAQmB,UAAU,GAAGd;AAAAA,QACtB,CAACL,QAAQG,KAAK,GAAG,CAACE;AAAAA,MAAAA,CAEtB;AAAA,MACAD,WAAWO,GACTD,IAAI;AAAA,QACF,GAAGF,2CAAaQ,WAAWR,2CAAaS,KAAKG;AAAAA,QAC7CC,OAAOb,2CAAaS,KAAKK;AAAAA,MAAAA,CAC1B,GACDtB,QAAQI,SACV;AAAA,MACAU,QAAQd,QAAQc;AAAAA,MAChBS,SAASvB,QAAQuB;AAAAA,IACnB;AAAA,IAAE,GACEhB;AAAAA,EAAAA,CACL;AAEL;;;"}
+{"version":3,"file":"Header.cjs","sources":["../../../../../src/components/Card/Header/Header.tsx"],"sourcesContent":["import MuiCardHeader, {\n  CardHeaderProps as MuiCardHeaderProps,\n} from \"@mui/material/CardHeader\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Header.styles\";\n\nexport { staticClasses as cardHeaderClasses };\n\nexport type HvCardHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardHeaderProps\n  extends Omit<MuiCardHeaderProps, \"classes\">,\n    HvBaseProps<HTMLDivElement, \"title\"> {\n  /** The renderable content inside the title slot of the header. */\n  title: React.ReactNode;\n  /** The renderable content inside the subheader slot of the header. */\n  subheader?: React.ReactNode;\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** The function that will be executed when this section is clicked. */\n  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardHeaderClasses;\n}\n\nexport const HvCardHeader = ({\n  classes: classesProp,\n  className,\n  title,\n  subheader,\n  icon,\n  onClick,\n  ...others\n}: HvCardHeaderProps) => {\n  const { activeTheme } = useTheme();\n  const { classes, css, cx } = useClasses(classesProp);\n\n  return (\n    <MuiCardHeader\n      title={title}\n      subheader={subheader}\n      action={icon}\n      onClick={onClick}\n      className={cx(classes.root, className)}\n      classes={{\n        title: cx(\n          css({\n            ...activeTheme?.typography[activeTheme?.card.titleVariant],\n          }),\n          {\n            [classes.titleShort]: icon,\n            [classes.title]: !icon,\n          }\n        ),\n        subheader: cx(\n          css({\n            ...activeTheme?.typography[activeTheme?.card.subheaderVariant],\n            color: activeTheme?.card.subheaderColor,\n          }),\n          classes.subheader\n        ),\n        action: classes.action,\n        content: classes.content,\n      }}\n      {...others}\n    />\n  );\n};\n"],"names":["HvCardHeader","classes","classesProp","className","title","subheader","icon","onClick","others","activeTheme","useTheme","css","cx","useClasses","jsx","MuiCardHeader","root","typography","card","titleVariant","titleShort","subheaderVariant","color","subheaderColor","action","content"],"mappings":";;;;;;;;AA6BO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACc,MAAM;AACjB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS,SAAA;AAC3B,QAAA;AAAA,IAAET;AAAAA,IAASU;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,cAAAA,WAAWX,WAAW;AAEnD,SACGY,2BAAAA,IAAAC,uBAAAA,SAAA,EACC,OACA,WACA,QAAQT,MACR,SACA,WAAWM,GAAGX,QAAQe,MAAMb,SAAS,GACrC,SAAS;AAAA,IACPC,OAAOQ,GACLD,IAAI;AAAA,MACF,GAAGF,2CAAaQ,WAAWR,2CAAaS,KAAKC;AAAAA,IAAY,CAC1D,GACD;AAAA,MACE,CAAClB,QAAQmB,UAAU,GAAGd;AAAAA,MACtB,CAACL,QAAQG,KAAK,GAAG,CAACE;AAAAA,IAAAA,CAEtB;AAAA,IACAD,WAAWO,GACTD,IAAI;AAAA,MACF,GAAGF,2CAAaQ,WAAWR,2CAAaS,KAAKG;AAAAA,MAC7CC,OAAOb,2CAAaS,KAAKK;AAAAA,IAAAA,CAC1B,GACDtB,QAAQI,SACV;AAAA,IACAmB,QAAQvB,QAAQuB;AAAAA,IAChBC,SAASxB,QAAQwB;AAAAA,EAAAA,GAEfjB,GAAAA,OACJ,CAAA;AAEN;;;"}

package/dist/cjs/components/Card/Media/Media.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const MuiCardMedia = require("@mui/material/CardMedia");
 const Media_styles = require("./Media.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiCardMedia__default = /* @__PURE__ */ _interopDefault(MuiCardMedia);
 const HvCardMedia = ({
@@ -17,19 +17,10 @@ const HvCardMedia = ({
   const {
     classes
   } = Media_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx(MuiCardMedia__default.default, {
-    id,
-    classes: {
-      root: classes.root,
-      media: classes.media
-    },
-    className,
-    role: "img",
-    title,
-    onClick,
-    ...others,
-    children
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiCardMedia__default.default, { id, classes: {
+    root: classes.root,
+    media: classes.media
+  }, className, role: "img", title, onClick, ...others, children });
 };
 exports.cardMediaClasses = Media_styles.staticClasses;
 exports.HvCardMedia = HvCardMedia;

package/dist/cjs/components/Card/Media/Media.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Media.cjs","sources":["../../../../../src/components/Card/Media/Media.tsx"],"sourcesContent":["import MuiCardMedia, {\n  CardMediaProps as MuiCardMediaProps,\n} from \"@mui/material/CardMedia\";\n\nimport { ImgHTMLAttributes } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Media.styles\";\n\nexport { staticClasses as cardMediaClasses };\n\nexport type HvCardMediaClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardMediaProps\n  extends Omit<MuiCardMediaProps, \"classes\">,\n    ImgHTMLAttributes<HTMLDivElement>,\n    HvBaseProps<HTMLDivElement, \"onClick\" | \"title\"> {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** The title of the media. */\n  title?: string;\n  /** The function that will be executed when this section is clicked. */\n  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n  /** The component used for the root node. Either a string to use a HTML element or a component. */\n  component?: React.ElementType;\n  /** The image to display. */\n  image?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardMediaClasses;\n}\n\nexport const HvCardMedia = ({\n  id,\n  classes: classesProp,\n  className,\n  children,\n  title,\n  onClick,\n  ...others\n}: HvCardMediaProps) => {\n  const { classes } = useClasses(classesProp);\n  return (\n    <MuiCardMedia\n      id={id}\n      classes={{\n        root: classes.root,\n        media: classes.media,\n      }}\n      className={className}\n      role=\"img\"\n      title={title}\n      onClick={onClick}\n      {...others}\n    >\n      {children}\n    </MuiCardMedia>\n  );\n};\n"],"names":["HvCardMedia","id","classes","classesProp","className","children","title","onClick","others","useClasses","MuiCardMedia","root","media","role"],"mappings":";;;;;;;AAiCO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACa,MAAM;AAChB,QAAA;AAAA,IAAEN;AAAAA,EAAAA,IAAYO,aAAAA,WAAWN,WAAW;AAC1C,wCACGO,sBAAAA,SAAY;AAAA,IACXT;AAAAA,IACAC,SAAS;AAAA,MACPS,MAAMT,QAAQS;AAAAA,MACdC,OAAOV,QAAQU;AAAAA,IACjB;AAAA,IACAR;AAAAA,IACAS,MAAK;AAAA,IACLP;AAAAA,IACAC;AAAAA,IAAiB,GACbC;AAAAA,IAAMH;AAAAA,EAAAA,CAGE;AAElB;;;"}
+{"version":3,"file":"Media.cjs","sources":["../../../../../src/components/Card/Media/Media.tsx"],"sourcesContent":["import MuiCardMedia, {\n  CardMediaProps as MuiCardMediaProps,\n} from \"@mui/material/CardMedia\";\n\nimport { ImgHTMLAttributes } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Media.styles\";\n\nexport { staticClasses as cardMediaClasses };\n\nexport type HvCardMediaClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardMediaProps\n  extends Omit<MuiCardMediaProps, \"classes\">,\n    ImgHTMLAttributes<HTMLDivElement>,\n    HvBaseProps<HTMLDivElement, \"onClick\" | \"title\"> {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** The title of the media. */\n  title?: string;\n  /** The function that will be executed when this section is clicked. */\n  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n  /** The component used for the root node. Either a string to use a HTML element or a component. */\n  component?: React.ElementType;\n  /** The image to display. */\n  image?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardMediaClasses;\n}\n\nexport const HvCardMedia = ({\n  id,\n  classes: classesProp,\n  className,\n  children,\n  title,\n  onClick,\n  ...others\n}: HvCardMediaProps) => {\n  const { classes } = useClasses(classesProp);\n  return (\n    <MuiCardMedia\n      id={id}\n      classes={{\n        root: classes.root,\n        media: classes.media,\n      }}\n      className={className}\n      role=\"img\"\n      title={title}\n      onClick={onClick}\n      {...others}\n    >\n      {children}\n    </MuiCardMedia>\n  );\n};\n"],"names":["HvCardMedia","id","classes","classesProp","className","children","title","onClick","others","useClasses","jsx","MuiCardMedia","root","media"],"mappings":";;;;;;;AAiCO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACa,MAAM;AAChB,QAAA;AAAA,IAAEN;AAAAA,EAAAA,IAAYO,aAAAA,WAAWN,WAAW;AAExC,SAAAO,+BAACC,sBAAAA,SACC,EAAA,IACA,SAAS;AAAA,IACPC,MAAMV,QAAQU;AAAAA,IACdC,OAAOX,QAAQW;AAAAA,EAAAA,GAEjB,WACA,MAAK,OACL,OACA,SACIL,GAAAA,QAEHH,SACH,CAAA;AAEJ;;;"}

package/dist/cjs/components/Carousel/Carousel.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const useCarousel = require("embla-carousel-react");
@@ -8,7 +9,6 @@ const useTheme = require("../../hooks/useTheme.cjs");
 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 Button = require("../Button/Button.cjs");
 const Container = require("../Container/Container.cjs");
 const Tooltip = require("../Tooltip/Tooltip.cjs");
@@ -103,99 +103,42 @@ 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(Tooltip.HvTooltip, {
-      title: isFullscreen ? "Close" : "Fullscreen",
-      children: /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
-        icon: true,
-        onClick: () => setIsFullscreen((curr) => !curr),
-        className: classes.closeButton,
-        children: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.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,
-      [classes.fullscreen]: isFullscreen
-    }),
-    ...others,
-    children: [showTitle && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
-      variant: "title2",
-      className: classes.title,
-      children: title
-    }), 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}`
-        })
-      }), 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
-        })
-      })]
-    }), controlsPosition === "bottom" && controls, thumbnailsPosition === "bottom" && thumbnails]
-  });
+  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(Tooltip.HvTooltip, { title: isFullscreen ? "Close" : "Fullscreen", children: /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { icon: true, onClick: () => setIsFullscreen((curr) => !curr), className: classes.closeButton, children: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.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,
+    [classes.fullscreen]: isFullscreen
+  }), ...others, children: [
+    showTitle && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "title2", className: classes.title, children: title }),
+    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}` }) }),
+      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 }) })
+    ] }),
+    controlsPosition === "bottom" && controls,
+    thumbnailsPosition === "bottom" && thumbnails
+  ] });
 };
 exports.carouselClasses = Carousel_styles.staticClasses;
 exports.HvCarousel = HvCarousel;

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

@@ -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 { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport useCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\n\nimport {\n  Backwards,\n  Forwards,\n  Close,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvContainer } from \"@core/components/Container\";\nimport { ExtractNames } from \"@core/utils/classes\";\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  /** Controls position. */\n  controlsPosition?: \"top\" | \"bottom\";\n  /** Thumbnails position. */\n  thumbnailsPosition?: \"top\" | \"bottom\";\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: EmblaOptionsType;\n  /** Function that renders the thumbnail.  */\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  } = useDefaultProps(\"HvCarousel\", 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        <HvTooltip title={isFullscreen ? \"Close\" : \"Fullscreen\"}>\n          <HvButton\n            icon\n            onClick={() => setIsFullscreen((curr) => !curr)}\n            className={classes.closeButton}\n          >\n            {isFullscreen ? <Close /> : <Fullscreen />}\n          </HvButton>\n        </HvTooltip>\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","useDefaultProps","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","HvTooltip","HvButton","icon","onClick","curr","closeButton","_jsx","Close","Fullscreen","controls","HvCarouselControls","page","pages","canPrevious","onPreviousClick","onNextClick","thumbnails","HvCarouselThumbnails","ref","width","onThumbnailClick","evt","i","HvContainer","root","fullscreen","HvTypography","variant","_jsxs","main","mainXs","mainFullscreen","counterContainer","counter","slideControls","disabled","Backwards","iconSize","Forwards","style","slidesViewport","slidesContainer"],"mappings":"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"}
+{"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 { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport useCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\n\nimport {\n  Backwards,\n  Forwards,\n  Close,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvContainer } from \"@core/components/Container\";\nimport { ExtractNames } from \"@core/utils/classes\";\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  /** Controls position. */\n  controlsPosition?: \"top\" | \"bottom\";\n  /** Thumbnails position. */\n  thumbnailsPosition?: \"top\" | \"bottom\";\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: EmblaOptionsType;\n  /** Function that renders the thumbnail.  */\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  } = useDefaultProps(\"HvCarousel\", 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        <HvTooltip title={isFullscreen ? \"Close\" : \"Fullscreen\"}>\n          <HvButton\n            icon\n            onClick={() => setIsFullscreen((curr) => !curr)}\n            className={classes.closeButton}\n          >\n            {isFullscreen ? <Close /> : <Fullscreen />}\n          </HvButton>\n        </HvTooltip>\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","useDefaultProps","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","jsx","HvTooltip","HvButton","curr","closeButton","Close","Fullscreen","controls","HvCarouselControls","thumbnails","HvCarouselThumbnails","evt","i","HvContainer","root","fullscreen","HvTypography","jsxs","main","mainXs","mainFullscreen","counterContainer","counter","slideControls","Backwards","Forwards","slidesViewport","slidesContainer"],"mappings":"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"}

package/dist/cjs/components/Carousel/CarouselControls.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 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 {
@@ -24,38 +24,16 @@ const HvCarouselControls = (props) => {
   } = 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,
-        "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,
-        "aria-label": "Forwards",
-        onClick: onNextClick,
-        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, {
-          iconSize: "XS"
-        })
-      })]
-    }), actions]
-  });
+  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, "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, "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

@@ -1 +1 @@
-{"version":3,"file":"CarouselControls.cjs","sources":["../../../../src/components/Carousel/CarouselControls.tsx"],"sourcesContent":["import { MouseEventHandler, ReactNode } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvPaginationProps } from \"@core/components/Pagination\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses } from \"./Carousel.styles\";\n\ninterface HvCarouselControlsProps\n  extends HvBaseProps<HTMLDivElement>,\n    Pick<HvPaginationProps, \"page\" | \"pages\" | \"canPrevious\" | \"canNext\"> {\n  showDots?: boolean;\n  classes?: ExtractNames<typeof useClasses>;\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  } = useDefaultProps(\"HvCarouselControls\", 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            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            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","useDefaultProps","cx","useClasses","selectedIndex","numSlides","controls","children","_jsx","dots","Array","from","map","el","index","dot","dotSelected","_jsxs","_Fragment","HvButton","icon","disabled","onClick","Backwards","iconSize","pageCounter","Forwards"],"mappings":";;;;;;;AAsBaA,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,EAAAA,IACEC,gBAAgB,gBAAA,sBAAsBZ,KAAK;AACzC,QAAA;AAAA,IAAEC;AAAAA,IAASY;AAAAA,EAAAA,IAAOC,gBAAWZ,WAAAA,aAAa,KAAK;AAErD,QAAMa,gBAAgBV,QAAQ;AAC9B,QAAMW,YAAYV;AAElB,yCACE,OAAA;AAAA,IAAKH,WAAWU,GAAGZ,QAAQgB,UAAUd,SAAS;AAAA,IAAEe,UAAA,CAC7Cd,WACCe,2BAAAA,IAAA,OAAA;AAAA,MAAKhB,WAAWF,QAAQmB;AAAAA,MAAKF,UAC1BG,MAAMC,KAAKD,MAAML,SAAS,CAAC,EAAEO,IAAI,CAACC,IAAIC,UACrCN,2BAAAA,IAAA,QAAA;AAAA,QAEEhB,WAAWU,GAAGZ,QAAQyB,KAAK;AAAA,UACzB,CAACzB,QAAQ0B,WAAW,GAAGF,UAAUV;AAAAA,QAAAA,CAClC;AAAA,MAHK,GAAA,UAASU,KAAM,EAItB,CACF;AAAA,IAAA,CACE,IAELG,2BAAAA,KAAAC,qBAAA;AAAA,MAAAX,UAAA,CACEC,2BAAAA,IAACW,iBAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,UAAU,CAACzB;AAAAA,QACX,cAAW;AAAA,QACX0B,SAASvB;AAAAA,QAAgBQ,yCAExBgB,2BAAS;AAAA,UAACC,UAAS;AAAA,QAAA,CAAM;AAAA,MAAA,CAClB,GACVhB,2BAAAA,IAAA,OAAA;AAAA,QAAKhB,WAAWF,QAAQmC;AAAAA,QAAYlB,UAChC,GAAEH,gBAAgB,CAAE,MAAKC,SAAU;AAAA,MAAA,CAClC,GACLG,2BAAAA,IAACW,iBAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,UAAU,CAACxB;AAAAA,QACX,cAAW;AAAA,QACXyB,SAAStB;AAAAA,QAAYO,yCAEpBmB,0BAAQ;AAAA,UAACF,UAAS;AAAA,QAAA,CAAM;AAAA,MAAA,CACjB,CAAC;AAAA,IACX,CAAA,GAEH1B,OAAO;AAAA,EAAA,CACL;AAET;;"}
+{"version":3,"file":"CarouselControls.cjs","sources":["../../../../src/components/Carousel/CarouselControls.tsx"],"sourcesContent":["import { MouseEventHandler, ReactNode } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvPaginationProps } from \"@core/components/Pagination\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses } from \"./Carousel.styles\";\n\ninterface HvCarouselControlsProps\n  extends HvBaseProps<HTMLDivElement>,\n    Pick<HvPaginationProps, \"page\" | \"pages\" | \"canPrevious\" | \"canNext\"> {\n  showDots?: boolean;\n  classes?: ExtractNames<typeof useClasses>;\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  } = useDefaultProps(\"HvCarouselControls\", 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            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            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","useDefaultProps","cx","useClasses","selectedIndex","numSlides","controls","jsx","dots","Array","from","map","el","index","dot","dotSelected","jsxs","Fragment","HvButton","Backwards","pageCounter","Forwards"],"mappings":";;;;;;;AAsBaA,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,EAAAA,IACEC,gBAAgB,gBAAA,sBAAsBZ,KAAK;AACzC,QAAA;AAAA,IAAEC;AAAAA,IAASY;AAAAA,EAAAA,IAAOC,gBAAWZ,WAAAA,aAAa,KAAK;AAErD,QAAMa,gBAAgBV,QAAQ;AAC9B,QAAMW,YAAYV;AAElB,yCACG,OAAI,EAAA,WAAWO,GAAGZ,QAAQgB,UAAUd,SAAS,GAC3CC,UAAAA;AAAAA,IACC,WAAAc,2BAAA,IAAC,SAAI,WAAWjB,QAAQkB,MACrBC,UAAMC,MAAAA,KAAKD,MAAMJ,SAAS,CAAC,EAAEM,IAAI,CAACC,IAAIC,UACrCN,2BAAA,IAAC,UAEC,WAAWL,GAAGZ,QAAQwB,KAAK;AAAA,MACzB,CAACxB,QAAQyB,WAAW,GAAGF,UAAUT;AAAAA,IAClC,CAAA,KAHK,UAASS,KAAM,EAGlB,CAEN,EACH,CAAA,IAGEG,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,MAAAV,2BAAA,IAACW,OACC,UAAA,EAAA,MAAI,MACJ,UAAU,CAACtB,aACX,cAAW,aACX,SAASG,iBAET,UAAAQ,+BAACY,gBAAAA,WAAU,EAAA,UAAS,KAAI,CAAA,GAC1B;AAAA,MACAZ,2BAAAA,IAAC,OAAI,EAAA,WAAWjB,QAAQ8B,aACpB,aAAEhB,gBAAgB,CAAE,MAAKC,SAAU,GACvC,CAAA;AAAA,MACCE,2BAAA,IAAAW,OAAA,UAAA,EACC,MAAI,MACJ,UAAU,CAACrB,SACX,cAAW,YACX,SAASG,aAET,UAAAO,+BAACc,gBAAAA,UAAS,EAAA,UAAS,KAAI,CAAA,GACzB;AAAA,IAAA,GACF;AAAA,IAEDvB;AAAAA,EACH,EAAA,CAAA;AAEJ;;"}

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const CarouselSlide_styles = require("./CarouselSlide.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const CarouselSlide_styles = require("./CarouselSlide.styles.cjs");
 const HvCarouselSlide = ({
   classes: classesProp,
   className,
@@ -16,17 +16,9 @@ const HvCarouselSlide = ({
     css,
     cx
   } = CarouselSlide_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: cx(css({
-      flex: `0 0 ${flexBasis}`
-    }), classes.slide, className),
-    children: children ?? /* @__PURE__ */ jsxRuntime.jsx("img", {
-      className: classes.image,
-      src,
-      alt,
-      ...props
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(css({
+    flex: `0 0 ${flexBasis}`
+  }), classes.slide, className), children: children ?? /* @__PURE__ */ jsxRuntime.jsx("img", { className: classes.image, src, alt, ...props }) });
 };
 exports.HvCarouselSlide = HvCarouselSlide;
 //# sourceMappingURL=CarouselSlide.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"CarouselSlide.cjs","sources":["../../../../../src/components/Carousel/CarouselSlide/CarouselSlide.tsx"],"sourcesContent":["import { ImgHTMLAttributes } from \"react\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\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":";;;;AAsBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,SAASC;AAAAA,EACTC;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,SAAU;AAAA,IAAA,CAAG,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;;"}
+{"version":3,"file":"CarouselSlide.cjs","sources":["../../../../../src/components/Carousel/CarouselSlide/CarouselSlide.tsx"],"sourcesContent":["import { ImgHTMLAttributes } from \"react\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\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","jsx","flex","slide","image"],"mappings":";;;;AAsBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,SAASC;AAAAA,EACTC;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,SACGW,2BAAA,IAAA,OAAA,EACC,WAAWF,GACTD,IAAI;AAAA,IAAEI,MAAO,OAAMR,SAAU;AAAA,EAAA,CAAG,GAChCL,QAAQc,OACRZ,SACF,GAECC,UACC,YAAAS,2BAAAA,IAAC,OAAI,EAAA,WAAWZ,QAAQe,OAAO,KAAU,KAAcP,GAAAA,OACxD,EACH,CAAA;AAEJ;;"}

package/dist/cjs/components/Carousel/CarouselThumbnails.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const Carousel_styles = require("./Carousel.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Stack = require("../Stack/Stack.cjs");
 const Button = require("../Button/Button.cjs");
 const HvCarouselThumbnails = React.forwardRef((props, ref) => {
@@ -23,28 +23,11 @@ const HvCarouselThumbnails = React.forwardRef((props, ref) => {
   } = 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(Button.HvButton, {
-        icon: true,
-        style: {
-          width
-        },
-        variant: "secondaryGhost",
-        className: cx(classes.thumbnail, {
-          [classes.thumbnailSelected]: i === selectedIndex
-        }),
-        onClick: (event) => onThumbnailClick == null ? void 0 : onThumbnailClick(event, i),
-        ...thumbnailProps,
-        children: renderThumbnail == null ? void 0 : renderThumbnail(i)
-      }, `thumbnail-${i}`))
-    })
-  });
+  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(Button.HvButton, { icon: true, style: {
+    width
+  }, variant: "secondaryGhost", className: cx(classes.thumbnail, {
+    [classes.thumbnailSelected]: i === selectedIndex
+  }), onClick: (event) => onThumbnailClick == null ? void 0 : onThumbnailClick(event, i), ...thumbnailProps, children: renderThumbnail == null ? void 0 : renderThumbnail(i) }, `thumbnail-${i}`)) }) });
 });
 exports.HvCarouselThumbnails = HvCarouselThumbnails;
 //# sourceMappingURL=CarouselThumbnails.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"CarouselThumbnails.cjs","sources":["../../../../src/components/Carousel/CarouselThumbnails.tsx"],"sourcesContent":["import { CSSProperties, MouseEvent, forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvPaginationProps } from \"@core/components/Pagination\";\nimport { HvStack } from \"@core/components/Stack\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses } from \"./Carousel.styles\";\n\ninterface HvCarouselThumbnailsProps\n  extends HvBaseProps<HTMLDivElement, \"children\">,\n    Pick<HvPaginationProps, \"page\" | \"pages\" | \"canPrevious\" | \"canNext\"> {\n  width?: CSSProperties[\"width\"];\n  classes?: ExtractNames<typeof useClasses>;\n  onThumbnailClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    index: number\n  ) => void;\n  thumbnailProps?: Partial<HvButtonProps>;\n  showDots?: boolean;\n  renderThumbnail?: (index: number) => React.ReactNode;\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    thumbnailProps,\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          <HvButton\n            icon\n            key={`thumbnail-${i}`}\n            style={{ width }}\n            variant=\"secondaryGhost\"\n            className={cx(classes.thumbnail, {\n              [classes.thumbnailSelected]: i === selectedIndex,\n            })}\n            onClick={(event) => onThumbnailClick?.(event, i)}\n            {...thumbnailProps}\n          >\n            {renderThumbnail?.(i)}\n          </HvButton>\n        ))}\n      </HvStack>\n    </div>\n  );\n});\n"],"names":["HvCarouselThumbnails","forwardRef","props","ref","classes","classesProp","className","page","pages","width","renderThumbnail","onThumbnailClick","thumbnailProps","others","cx","useClasses","selectedIndex","numSlides","panel","children","HvStack","direction","spacing","Array","from","map","doc","i","_jsx","HvButton","icon","style","variant","thumbnail","thumbnailSelected","onClick","event"],"mappings":";;;;;;;AAwBO,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,IACAC;AAAAA,IACA,GAAGC;AAAAA,EACDX,IAAAA;AACE,QAAA;AAAA,IAAEE;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,gBAAAA,WAAWV,WAAW;AAE9C,QAAMW,gBAAgBT,QAAQ;AAC9B,QAAMU,YAAYT;AAElB,wCACE,OAAA;AAAA,IAAKL;AAAAA,IAAUG,WAAWQ,GAAGV,QAAQc,OAAOZ,SAAS;AAAA,IAAE,GAAKO;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,OAAAA,UAAQ;AAAA,QACPC,MAAI;AAAA,QAEJC,OAAO;AAAA,UAAEtB;AAAAA,QAAM;AAAA,QACfuB,SAAQ;AAAA,QACR1B,WAAWQ,GAAGV,QAAQ6B,WAAW;AAAA,UAC/B,CAAC7B,QAAQ8B,iBAAiB,GAAGP,MAAMX;AAAAA,QAAAA,CACpC;AAAA,QACDmB,SAAUC,CAAAA,UAAUzB,qDAAmByB,OAAOT;AAAAA,QAAG,GAC7Cf;AAAAA,QAAcO,UAEjBT,mDAAkBiB;AAAAA,MATb,GAAA,aAAYA,CAAE,EAUZ,CACX;AAAA,IAAA,CACM;AAAA,EAAA,CACN;AAET,CAAC;;"}
+{"version":3,"file":"CarouselThumbnails.cjs","sources":["../../../../src/components/Carousel/CarouselThumbnails.tsx"],"sourcesContent":["import { CSSProperties, MouseEvent, forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvPaginationProps } from \"@core/components/Pagination\";\nimport { HvStack } from \"@core/components/Stack\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses } from \"./Carousel.styles\";\n\ninterface HvCarouselThumbnailsProps\n  extends HvBaseProps<HTMLDivElement, \"children\">,\n    Pick<HvPaginationProps, \"page\" | \"pages\" | \"canPrevious\" | \"canNext\"> {\n  width?: CSSProperties[\"width\"];\n  classes?: ExtractNames<typeof useClasses>;\n  onThumbnailClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    index: number\n  ) => void;\n  thumbnailProps?: Partial<HvButtonProps>;\n  showDots?: boolean;\n  renderThumbnail?: (index: number) => React.ReactNode;\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    thumbnailProps,\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          <HvButton\n            icon\n            key={`thumbnail-${i}`}\n            style={{ width }}\n            variant=\"secondaryGhost\"\n            className={cx(classes.thumbnail, {\n              [classes.thumbnailSelected]: i === selectedIndex,\n            })}\n            onClick={(event) => onThumbnailClick?.(event, i)}\n            {...thumbnailProps}\n          >\n            {renderThumbnail?.(i)}\n          </HvButton>\n        ))}\n      </HvStack>\n    </div>\n  );\n});\n"],"names":["HvCarouselThumbnails","forwardRef","props","ref","classes","classesProp","className","page","pages","width","renderThumbnail","onThumbnailClick","thumbnailProps","others","cx","useClasses","selectedIndex","numSlides","jsx","panel","HvStack","Array","from","map","doc","i","HvButton","thumbnail","thumbnailSelected","event"],"mappings":";;;;;;;AAwBO,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,IACAC;AAAAA,IACA,GAAGC;AAAAA,EACDX,IAAAA;AACE,QAAA;AAAA,IAAEE;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,gBAAAA,WAAWV,WAAW;AAE9C,QAAMW,gBAAgBT,QAAQ;AAC9B,QAAMU,YAAYT;AAElB,SACGU,2BAAAA,IAAA,OAAA,EAAI,KAAU,WAAWJ,GAAGV,QAAQe,OAAOb,SAAS,GAAOO,GAAAA,QAC1D,UAAAK,2BAAA,IAACE,iBAAQ,WAAU,OAAM,SAAQ,MAC9BC,UAAMC,MAAAA,KAAKD,MAAMJ,SAAS,CAAC,EAAEM,IAAI,CAACC,KAAKC,MACtCP,+BAACQ,OAAAA,UACC,EAAA,MAAI,MAEJ,OAAO;AAAA,IAAEjB;AAAAA,EAAAA,GACT,SAAQ,kBACR,WAAWK,GAAGV,QAAQuB,WAAW;AAAA,IAC/B,CAACvB,QAAQwB,iBAAiB,GAAGH,MAAMT;AAAAA,EAAAA,CACpC,GACD,SAAUa,WAAUlB,qDAAmBkB,OAAOJ,IAC9C,GAAIb,gBAEHF,UAAAA,mDAAkBe,GATb,GAAA,aAAYA,CAAE,EAUtB,CACD,GACH,EACF,CAAA;AAEJ,CAAC;;"}