@hitachivantara/uikit-react-core 5.17.0 → 5.18.0

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

@@ -1,10 +1,9 @@
 import { useRef, useState, Children, useEffect } from "react";
 import useCarousel from "embla-carousel-react";
-import { ClassNames } from "@emotion/react";
 import { Close, Fullscreen, Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
-import newStyles, { carouselClasses } from "./Carousel.styles.js";
-import { makeClasses } from "./utils.js";
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { useClasses } from "./Carousel.styles.js";
+import { staticClasses } from "./Carousel.styles.js";
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
 import { HvContainer } from "../Container/Container.js";
 import { HvStack } from "../Stack/Stack.js";
 import { HvTypography } from "../Typography/Typography.js";
@@ -13,7 +12,7 @@ const clamp = (num, max, min = 0) => Math.min(Math.max(num, min), max);
 const HvCarousel = (props) => {
   const {
     className,
-    classes: classesProp = {},
+    classes: classesProp,
     height: heightProp = "auto",
     thumbnailWidth = 90,
     title,
@@ -30,6 +29,10 @@ const HvCarousel = (props) => {
     onChange,
     ...others
   } = props;
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const thumbnailsRef = useRef(null);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [containerRef, controller] = useCarousel({
@@ -83,146 +86,132 @@ const HvCarousel = (props) => {
   const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);
   const showThumbnails = !hideThumbnails && !!renderThumbnail;
   const showDots = showDotsProp ?? numSlides <= 5;
-  return /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => {
-      const classes = makeClasses({
-        css,
-        cx
-      }, {
-        cc: carouselClasses,
-        styles: newStyles,
-        classes: classesProp
-      });
-      return /* @__PURE__ */ jsxs(HvContainer, {
-        className: cx(classes.root, className, {
-          [classes.xs]: xs,
-          [classes.fullscreen]: isFullscreen
-        }),
-        ...others,
-        children: [showTitle && /* @__PURE__ */ jsx(HvTypography, {
-          variant: "title2",
-          className: classes.title,
-          children: title
-        }), /* @__PURE__ */ jsxs("div", {
-          className: classes.actions,
-          children: [showFullscreen && /* @__PURE__ */ jsx(HvButton, {
+  return /* @__PURE__ */ jsxs(HvContainer, {
+    className: cx(classes.root, className, {
+      [classes.xs]: xs,
+      [classes.fullscreen]: isFullscreen
+    }),
+    ...others,
+    children: [showTitle && /* @__PURE__ */ jsx(HvTypography, {
+      variant: "title2",
+      className: classes.title,
+      children: title
+    }), /* @__PURE__ */ jsxs("div", {
+      className: classes.actions,
+      children: [showFullscreen && /* @__PURE__ */ jsx(HvButton, {
+        icon: true,
+        variant: "secondaryGhost",
+        onClick: () => setIsFullscreen((curr) => !curr),
+        className: classes.closeButton,
+        children: isFullscreen ? /* @__PURE__ */ jsx(Close, {
+          "aria-label": "Close"
+        }) : /* @__PURE__ */ jsx(Fullscreen, {
+          "aria-label": "Fullscreen"
+        })
+      }), actions]
+    }), /* @__PURE__ */ jsxs("div", {
+      className: classes.mainContainer,
+      children: [/* @__PURE__ */ jsx("div", {
+        className: classes.controls,
+        children: showDots ? /* @__PURE__ */ jsx("div", {
+          className: classes.dots,
+          children: Array.from(Array(numSlides)).map((el, index) => /* @__PURE__ */ jsx("span", {
+            className: cx(classes.dot, {
+              [classes.dotSelected]: index === selectedIndex
+            })
+          }, `circle-${index}`))
+        }) : /* @__PURE__ */ jsxs(Fragment, {
+          children: [/* @__PURE__ */ jsx(HvButton, {
+            icon: true,
+            disabled: !canPrev,
+            variant: "secondaryGhost",
+            "aria-label": "Backwards",
+            onClick: handlePrevious,
+            children: /* @__PURE__ */ jsx(Backwards, {
+              iconSize: "XS"
+            })
+          }), /* @__PURE__ */ jsx("div", {
+            className: classes.pageCounter,
+            children: `${selectedIndex + 1} / ${numSlides}`
+          }), /* @__PURE__ */ jsx(HvButton, {
             icon: true,
+            disabled: !canNext,
             variant: "secondaryGhost",
-            onClick: () => setIsFullscreen((curr) => !curr),
-            className: classes.closeButton,
-            children: isFullscreen ? /* @__PURE__ */ jsx(Close, {
-              "aria-label": "Close"
-            }) : /* @__PURE__ */ jsx(Fullscreen, {
-              "aria-label": "Fullscreen"
+            "aria-label": "Forwards",
+            onClick: handleNext,
+            children: /* @__PURE__ */ jsx(Forwards, {
+              iconSize: "XS"
             })
-          }), actions]
-        }), /* @__PURE__ */ jsxs("div", {
-          className: classes.mainContainer,
-          children: [/* @__PURE__ */ jsx("div", {
-            className: classes.controls,
-            children: showDots ? /* @__PURE__ */ jsx("div", {
-              className: classes.dots,
-              children: Array.from(Array(numSlides)).map((el, index) => /* @__PURE__ */ jsx("span", {
-                className: cx(classes.dot, {
-                  [classes.dotSelected]: index === selectedIndex
-                })
-              }, `circle-${index}`))
-            }) : /* @__PURE__ */ jsxs(Fragment, {
-              children: [/* @__PURE__ */ jsx(HvButton, {
-                icon: true,
-                disabled: !canPrev,
-                variant: "secondaryGhost",
-                "aria-label": "Backwards",
-                onClick: handlePrevious,
-                children: /* @__PURE__ */ jsx(Backwards, {
-                  iconSize: "XS"
-                })
-              }), /* @__PURE__ */ jsx("div", {
-                className: classes.pageCounter,
-                children: `${selectedIndex + 1} / ${numSlides}`
-              }), /* @__PURE__ */ jsx(HvButton, {
-                icon: true,
-                disabled: !canNext,
-                variant: "secondaryGhost",
-                "aria-label": "Forwards",
-                onClick: handleNext,
-                children: /* @__PURE__ */ jsx(Forwards, {
-                  iconSize: "XS"
-                })
-              })]
+          })]
+        })
+      }), /* @__PURE__ */ jsxs("div", {
+        className: cx(classes.main, {
+          [classes.mainXs]: xs,
+          [classes.mainFullscreen]: isFullscreen
+        }),
+        children: [showCounter && /* @__PURE__ */ jsx("div", {
+          className: classes.counterContainer,
+          children: /* @__PURE__ */ jsx("span", {
+            className: classes.counter,
+            children: `${selectedIndex + 1}/${numSlides}`
+          })
+        }), showSlideControls && /* @__PURE__ */ jsxs("div", {
+          className: classes.slideControls,
+          children: [/* @__PURE__ */ jsx(HvButton, {
+            icon: true,
+            disabled: !canPrev,
+            variant: "secondary",
+            "aria-label": "Backwards",
+            onClick: handlePrevious,
+            children: /* @__PURE__ */ jsx(Backwards, {
+              iconSize: "XS"
+            })
+          }), /* @__PURE__ */ jsx(HvButton, {
+            icon: true,
+            disabled: !canNext,
+            variant: "secondary",
+            "aria-label": "Forwards",
+            onClick: handleNext,
+            children: /* @__PURE__ */ jsx(Forwards, {
+              iconSize: "XS"
             })
-          }), /* @__PURE__ */ jsxs("div", {
-            className: cx(classes.main, {
-              [classes.mainXs]: xs,
-              [classes.mainFullscreen]: isFullscreen
-            }),
-            children: [showCounter && /* @__PURE__ */ jsx("div", {
-              className: classes.counterContainer,
-              children: /* @__PURE__ */ jsx("span", {
-                className: classes.counter,
-                children: `${selectedIndex + 1}/${numSlides}`
-              })
-            }), showSlideControls && /* @__PURE__ */ jsxs("div", {
-              className: classes.slideControls,
-              children: [/* @__PURE__ */ jsx(HvButton, {
-                icon: true,
-                disabled: !canPrev,
-                variant: "secondary",
-                "aria-label": "Backwards",
-                onClick: handlePrevious,
-                children: /* @__PURE__ */ jsx(Backwards, {
-                  iconSize: "XS"
-                })
-              }), /* @__PURE__ */ jsx(HvButton, {
-                icon: true,
-                disabled: !canNext,
-                variant: "secondary",
-                "aria-label": "Forwards",
-                onClick: handleNext,
-                children: /* @__PURE__ */ jsx(Forwards, {
-                  iconSize: "XS"
-                })
-              })]
-            }), /* @__PURE__ */ jsx("div", {
-              ref: containerRef,
-              style: {
-                height
-              },
-              className: classes.slidesViewport,
-              children: /* @__PURE__ */ jsx("div", {
-                className: classes.slidesContainer,
-                children
-              })
-            })]
           })]
-        }), showThumbnails && /* @__PURE__ */ jsx("div", {
-          ref: thumbnailsRef,
-          className: classes.panel,
-          children: /* @__PURE__ */ jsx(HvStack, {
-            direction: "row",
-            spacing: "xs",
-            children: Array.from(Array(numSlides)).map((doc, i) => /* @__PURE__ */ jsx(HvButton, {
-              icon: true,
-              variant: "secondaryGhost",
-              style: {
-                width: thumbnailWidth
-              },
-              className: cx(classes.thumbnail, {
-                [classes.thumbnailSelected]: i === selectedIndex
-              }),
-              onClick: () => handleScroll(i),
-              children: renderThumbnail(i)
-            }, `button-${i}`))
+        }), /* @__PURE__ */ jsx("div", {
+          ref: containerRef,
+          style: {
+            height
+          },
+          className: classes.slidesViewport,
+          children: /* @__PURE__ */ jsx("div", {
+            className: classes.slidesContainer,
+            children
           })
         })]
-      });
-    }
+      })]
+    }), showThumbnails && /* @__PURE__ */ jsx("div", {
+      ref: thumbnailsRef,
+      className: classes.panel,
+      children: /* @__PURE__ */ jsx(HvStack, {
+        direction: "row",
+        spacing: "xs",
+        children: Array.from(Array(numSlides)).map((doc, i) => /* @__PURE__ */ jsx(HvButton, {
+          icon: true,
+          variant: "secondaryGhost",
+          style: {
+            width: thumbnailWidth
+          },
+          className: cx(classes.thumbnail, {
+            [classes.thumbnailSelected]: i === selectedIndex
+          }),
+          onClick: () => handleScroll(i),
+          children: renderThumbnail(i)
+        }, `button-${i}`))
+      })
+    })]
   });
 };
 export {
-  HvCarousel
+  HvCarousel,
+  staticClasses as carouselClasses
 };
 //# sourceMappingURL=Carousel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sources":["../../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  Children,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport useCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\nimport { ClassNames } from \"@emotion/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\";\n\nimport styles, {\n  HvCarouselClasses,\n  carouselClasses as cc,\n} from \"./Carousel.styles\";\nimport { makeClasses } from \"./utils\";\n\nconst clamp = (num: number, max: number, min = 0) =>\n  Math.min(Math.max(num, min), max);\n\nexport interface HvCarouselProps\n  extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: Partial<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 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 = () => {\n    controller?.scrollPrev();\n  };\n\n  const handleNext = () => {\n    controller?.scrollNext();\n  };\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = () => {\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  };\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n  }, [numSlides]);\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    <ClassNames>\n      {({ css, cx }) => {\n        const classes = makeClasses(\n          { css, cx },\n          { cc, styles, classes: classesProp }\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    </ClassNames>\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","thumbnailsRef","useRef","isFullscreen","setIsFullscreen","useState","containerRef","controller","useCarousel","align","loop","selectedIndex","setSelectedIndex","startIndex","numSlides","Children","count","handlePrevious","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","ClassNames","css","cx","makeClasses","cc","styles","HvContainer","root","fullscreen","_jsx","HvTypography","variant","_jsxs","HvButton","icon","onClick","curr","closeButton","Close","Fullscreen","mainContainer","controls","dots","Array","from","map","el","dot","dotSelected","_Fragment","disabled","Backwards","iconSize","pageCounter","Forwards","main","mainXs","mainFullscreen","counterContainer","counter","slideControls","ref","style","slidesViewport","slidesContainer","panel","HvStack","direction","spacing","doc","i","width","thumbnail","thumbnailSelected"],"mappings":"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"}
+{"version":3,"file":"Carousel.js","sources":["../../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  Children,\n  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 = () => {\n    controller?.scrollPrev();\n  };\n\n  const handleNext = () => {\n    controller?.scrollNext();\n  };\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = () => {\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  };\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n  }, [numSlides]);\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","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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"}

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

@@ -1,7 +1,9 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { replace$ } from "./utils.js";
-import { getClasses } from "../../utils/classes.js";
-const styles = {
+import { createClasses } from "../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvCarousel", {
   /** Styles applied to the component root class. */
   root: {
     display: "flex",
@@ -166,12 +168,9 @@ const styles = {
       opacity: "100%"
     }
   }
-};
-const name = "HvCarousel";
-const carouselClasses = getClasses(Object.keys(styles), name);
-const newStyles = replace$(styles, name);
+});
 export {
-  carouselClasses,
-  newStyles as default
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=Carousel.styles.js.map

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

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

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

@@ -1,6 +1,4 @@
-import { ClassNames } from "@emotion/react";
-import styles, { cc } from "./CarouselSlide.styles.js";
-import { makeClasses } from "../utils.js";
+import { useClasses } from "./CarouselSlide.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 const HvCarouselSlide = ({
   classes: classesProp = {},
@@ -10,31 +8,21 @@ const HvCarouselSlide = ({
   alt,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => {
-      const classes = makeClasses({
-        css,
-        cx
-      }, {
-        cc,
-        styles,
-        classes: classesProp
-      });
-      return /* @__PURE__ */ jsx("div", {
-        className: cx(css({
-          flex: `0 0 ${flexBasis}`
-        }), classes.slide),
-        children: children ?? /* @__PURE__ */ jsx("img", {
-          className: classes.image,
-          src,
-          alt,
-          ...props
-        })
-      });
-    }
+  const {
+    classes,
+    css,
+    cx
+  } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx("div", {
+    className: cx(css({
+      flex: `0 0 ${flexBasis}`
+    }), classes.slide),
+    children: children ?? /* @__PURE__ */ jsx("img", {
+      className: classes.image,
+      src,
+      alt,
+      ...props
+    })
   });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"CarouselSlide.js","sources":["../../../../../src/components/Carousel/CarouselSlide/CarouselSlide.tsx"],"sourcesContent":["import { ImgHTMLAttributes } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\n\nimport styles, { HvCarouselSlideClasses, cc } from \"./CarouselSlide.styles\";\nimport { makeClasses } from \"../utils\";\n\nexport interface HvCarouselSlideProps\n  extends ImgHTMLAttributes<HTMLImageElement> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: Partial<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  return (\n    <ClassNames>\n      {({ css, cx }) => {\n        const classes = makeClasses(\n          { css, cx },\n          { cc, styles, classes: classesProp }\n        );\n\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    </ClassNames>\n  );\n};\n"],"names":["HvCarouselSlide","classes","classesProp","children","size","flexBasis","src","alt","props","ClassNames","css","cx","makeClasses","cc","styles","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;AAC1B,6BACGC,YAAU;AAAA,IAAAN,UACRA,CAAC;AAAA,MAAEO;AAAAA,MAAKC;AAAAA,IAAAA,MAAS;AAChB,YAAMV,UAAUW,YACd;AAAA,QAAEF;AAAAA,QAAKC;AAAAA,MAAAA,GACP;AAAA,QAAEE;AAAAA,QAAIC;AAAAA,QAAQb,SAASC;AAAAA,MAAAA,CACzB;AAEA,iCACE,OAAA;AAAA,QAAKa,WAAWJ,GAAGD,IAAI;AAAA,UAAEM,MAAO,OAAMX;AAAAA,QAAAA,CAAa,GAAGJ,QAAQgB,KAAK;AAAA,QAAEd,UAClEA,YACCe,oBAAA,OAAA;AAAA,UAAKH,WAAWd,QAAQkB;AAAAA,UAAOb;AAAAA,UAAUC;AAAAA,UAAS,GAAKC;AAAAA,QAAAA,CAAQ;AAAA,MAAA,CAE9D;AAAA,IAET;AAAA,EAAA,CACU;AAEhB;"}
+{"version":3,"file":"CarouselSlide.js","sources":["../../../../../src/components/Carousel/CarouselSlide/CarouselSlide.tsx"],"sourcesContent":["import { ImgHTMLAttributes } from \"react\";\nimport { ExtractNames } from \"@core/utils\";\nimport { useClasses } from \"./CarouselSlide.styles\";\n\nexport type HvCarouselSlideClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselSlideProps\n  extends ImgHTMLAttributes<HTMLImageElement> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselSlideClasses;\n  /** The width of the Slide. Defaults to `100%` */\n  size?: string;\n  /** Content of a slide to be displayed */\n  children?: React.ReactNode;\n}\n\n/**\n * A container to use as `children` of `HvCarousel`.\n * Pass `img` props directly to it, or `children` for any custom content\n */\nexport const HvCarouselSlide = ({\n  classes: classesProp = {},\n  children,\n  size: flexBasis = \"100%\",\n  src,\n  alt,\n  ...props\n}: HvCarouselSlideProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n  return (\n    <div className={cx(css({ flex: `0 0 ${flexBasis}` }), classes.slide)}>\n      {children ?? (\n        <img className={classes.image} src={src} alt={alt} {...props} />\n      )}\n    </div>\n  );\n};\n"],"names":["HvCarouselSlide","classes","classesProp","children","size","flexBasis","src","alt","props","css","cx","useClasses","className","flex","slide","_jsx","image"],"mappings":";;AAoBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,SAASC,cAAc,CAAC;AAAA,EACxBC;AAAAA,EACAC,MAAMC,YAAY;AAAA,EAClBC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiB,MAAM;AACpB,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AACnD,6BACE,OAAA;AAAA,IAAKU,WAAWF,GAAGD,IAAI;AAAA,MAAEI,MAAO,OAAMR;AAAAA,IAAAA,CAAa,GAAGJ,QAAQa,KAAK;AAAA,IAAEX,UAClEA,YACCY,oBAAA,OAAA;AAAA,MAAKH,WAAWX,QAAQe;AAAAA,MAAOV;AAAAA,MAAUC;AAAAA,MAAS,GAAKC;AAAAA,IAAAA,CAAQ;AAAA,EAAA,CAE9D;AAET;"}

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

@@ -1,15 +1,17 @@
-import { getClasses } from "../../../utils/classes.js";
-const styles = {
+import { createClasses } from "../../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvCarouselSlide", {
   slide: {},
   image: {
     aspectRatio: "16/9",
     width: "100%",
     height: "100%"
   }
-};
-const cc = getClasses(Object.keys(styles), "HvCarouselSlide");
+});
 export {
-  cc,
-  styles as default
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=CarouselSlide.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CarouselSlide.styles.js","sources":["../../../../../src/components/Carousel/CarouselSlide/CarouselSlide.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/css\";\nimport { getClasses } from \"@core/utils\";\n\nexport type HvCarouselSlideClasses = Record<keyof typeof styles, string>;\n\nconst styles = {\n  slide: {},\n  image: {\n    aspectRatio: \"16/9\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n} satisfies Record<string, CSSInterpolation>;\n\nexport const cc = getClasses(\n  Object.keys(styles) as (keyof HvCarouselSlideClasses)[],\n  \"HvCarouselSlide\"\n);\n\nexport default styles;\n"],"names":["styles","slide","image","aspectRatio","width","height","cc","getClasses","Object","keys"],"mappings":";AAKA,MAAMA,SAAS;AAAA,EACbC,OAAO,CAAC;AAAA,EACRC,OAAO;AAAA,IACLC,aAAa;AAAA,IACbC,OAAO;AAAA,IACPC,QAAQ;AAAA,EACV;AACF;AAEO,MAAMC,KAAKC,WAChBC,OAAOC,KAAKT,MAAM,GAClB,iBACF;"}
+{"version":3,"file":"CarouselSlide.styles.js","sources":["../../../../../src/components/Carousel/CarouselSlide/CarouselSlide.styles.ts"],"sourcesContent":["import { createClasses } from \"@core/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCarouselSlide\", {\n  slide: {},\n  image: {\n    aspectRatio: \"16/9\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","slide","image","aspectRatio","width","height"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,mBAAmB;AAAA,EAC5EC,OAAO,CAAC;AAAA,EACRC,OAAO;AAAA,IACLC,aAAa;AAAA,IACbC,OAAO;AAAA,IACPC,QAAQ;AAAA,EACV;AACF,CAAC;"}