@hitachivantara/uikit-react-core 5.22.1 → 5.24.0

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

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBox } from \"@core/components/Box\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvAtmosphereColorKeys, HvSemanticColorKeys } from \"@core/types/tokens\";\n\nimport { staticClasses, useClasses } from \"./Card.styles\";\n\nexport { staticClasses as cardClasses };\n\nexport type HvCardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardProps extends HvBaseProps {\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** Whether the card is selectable. */\n  selectable?: boolean;\n  /** Whether the card is currently selected. */\n  selected?: boolean;\n  /** The background color of the card. */\n  bgcolor?:\n    | \"sema0\"\n    | HvSemanticColorKeys\n    | HvAtmosphereColorKeys\n    | \"transparent\";\n  /**\n   *  The border color at the top of the card. Must be one of palette semantic or atmosphere colors.\n   *  To set another color, the borderTop should be override.\n   */\n  statusColor?: \"sema0\" | HvSemanticColorKeys | HvAtmosphereColorKeys;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardClasses;\n}\n\n/**\n * A card is a container for a few short and related pieces of content.\n * It roughly resembles a playing card in size and shape and is intended as a\n * linked short representation of a conceptual unit. For that reason,\n * this pattern must be used as an entry-point for further information.\n */\nexport const HvCard = ({\n  classes: classesProp,\n  className,\n  children,\n  icon,\n  selectable = false,\n  selected = false,\n  statusColor = \"sema0\",\n  bgcolor,\n  ...others\n}: HvCardProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n  return (\n    <HvBox\n      aria-selected={selectable ? selected : undefined}\n      className={cx(\n        \"HvIsCardGridElement\",\n        classes.root,\n        css({\n          backgroundColor:\n            (bgcolor && theme.colors[bgcolor]) || theme.card.backgroundColor,\n        }),\n        className,\n        {\n          [classes.selectable]: selectable,\n          [classes.selected]: selected,\n        }\n      )}\n      {...others}\n    >\n      <div className={classes.semanticContainer}>\n        <div\n          className={cx(\n            css({\n              height: selected ? 4 : 2,\n              backgroundColor:\n                statusColor === \"sema0\"\n                  ? selected\n                    ? theme.colors.secondary\n                    : theme.colors.atmo4\n                  : theme.colors[statusColor],\n            }),\n            classes.semanticBar\n          )}\n        />\n        <div className={classes.icon}>{icon}</div>\n      </div>\n      {children}\n    </HvBox>\n  );\n};\n"],"names":["HvCard","classes","classesProp","className","children","icon","selectable","selected","statusColor","bgcolor","others","css","cx","useClasses","HvBox","undefined","root","backgroundColor","theme","colors","card","_jsxs","semanticContainer","_jsx","height","secondary","atmo4","semanticBar"],"mappings":";;;;;;AAyCO,MAAMA,SAASA,CAAC;AAAA,EACrBC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC;AAAAA,EACA,GAAGC;AACQ,MAAM;AACX,QAAA;AAAA,IAAET;AAAAA,IAASU;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,YAAAA,WAAWX,WAAW;AACnD,yCACGY,IAAAA,OAAK;AAAA,IACJ,iBAAeR,aAAaC,WAAWQ;AAAAA,IACvCZ,WAAWS,GACT,uBACAX,QAAQe,MACRL,IAAI;AAAA,MACFM,iBACGR,WAAWS,kBAAMC,OAAOV,OAAO,KAAMS,YAAAA,MAAME,KAAKH;AAAAA,IACpD,CAAA,GACDd,WACA;AAAA,MACE,CAACF,QAAQK,UAAU,GAAGA;AAAAA,MACtB,CAACL,QAAQM,QAAQ,GAAGA;AAAAA,IAAAA,CAExB;AAAA,IAAE,GACEG;AAAAA,IAAMN,WAEViB,2BAAAA,KAAA,OAAA;AAAA,MAAKlB,WAAWF,QAAQqB;AAAAA,MAAkBlB,WACxCmB,2BAAAA,IAAA,OAAA;AAAA,QACEpB,WAAWS,GACTD,IAAI;AAAA,UACFa,QAAQjB,WAAW,IAAI;AAAA,UACvBU,iBACET,gBAAgB,UACZD,WACEW,YAAMC,MAAAA,OAAOM,YACbP,YAAAA,MAAMC,OAAOO,QACfR,YAAAA,MAAMC,OAAOX,WAAW;AAAA,QAAA,CAC/B,GACDP,QAAQ0B,WACV;AAAA,MAAA,CACD,GACDJ,2BAAAA,IAAA,OAAA;AAAA,QAAKpB,WAAWF,QAAQI;AAAAA,QAAKD,UAAEC;AAAAA,MAAAA,CAAU,CAAC;AAAA,IACvC,CAAA,GACJD,QAAQ;AAAA,EAAA,CACJ;AAEX;;;"}
+{"version":3,"file":"Card.cjs","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBox } from \"@core/components/Box\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvAtmosphereColorKeys, HvSemanticColorKeys } from \"@core/types/tokens\";\n\nimport { staticClasses, useClasses } from \"./Card.styles\";\n\nexport { staticClasses as cardClasses };\n\nexport type HvCardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardProps extends HvBaseProps {\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** Whether the card is selectable. */\n  selectable?: boolean;\n  /** Whether the card is currently selected. */\n  selected?: boolean;\n  /** The background color of the card. */\n  bgcolor?:\n    | \"sema0\"\n    | HvSemanticColorKeys\n    | HvAtmosphereColorKeys\n    | \"transparent\";\n  /**\n   *  The border color at the top of the card. Must be one of palette semantic or atmosphere colors.\n   *  To set another color, the borderTop should be override.\n   */\n  statusColor?: \"sema0\" | HvSemanticColorKeys | HvAtmosphereColorKeys;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardClasses;\n}\n\n/**\n * A card is a container for a few short and related pieces of content.\n * It roughly resembles a playing card in size and shape and is intended as a\n * linked short representation of a conceptual unit. For that reason,\n * this pattern must be used as an entry-point for further information.\n */\nexport const HvCard = (props: HvCardProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    icon,\n    selectable = false,\n    selected = false,\n    statusColor = \"sema0\",\n    bgcolor,\n    ...others\n  } = useDefaultProps(\"HvCard\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  return (\n    <HvBox\n      aria-selected={selectable ? selected : undefined}\n      className={cx(\n        \"HvIsCardGridElement\",\n        classes.root,\n        css({\n          backgroundColor:\n            (bgcolor && theme.colors[bgcolor]) || theme.card.backgroundColor,\n        }),\n        className,\n        {\n          [classes.selectable]: selectable,\n          [classes.selected]: selected,\n        }\n      )}\n      {...others}\n    >\n      <div className={classes.semanticContainer}>\n        <div\n          className={cx(\n            css({\n              height: selected ? 4 : 2,\n              backgroundColor:\n                statusColor === \"sema0\"\n                  ? selected\n                    ? theme.colors.secondary\n                    : theme.colors.atmo4\n                  : theme.colors[statusColor],\n            }),\n            classes.semanticBar\n          )}\n        />\n        <div className={classes.icon}>{icon}</div>\n      </div>\n      {children}\n    </HvBox>\n  );\n};\n"],"names":["HvCard","props","classes","classesProp","className","children","icon","selectable","selected","statusColor","bgcolor","others","useDefaultProps","css","cx","useClasses","HvBox","undefined","root","backgroundColor","theme","colors","card","_jsxs","semanticContainer","_jsx","height","secondary","atmo4","semanticBar"],"mappings":";;;;;;;AA0CaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,aAAa;AAAA,IACbC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,UAAUX,KAAK;AAE7B,QAAA;AAAA,IAAEC;AAAAA,IAASW;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,YAAAA,WAAWZ,WAAW;AACnD,yCACGa,IAAAA,OAAK;AAAA,IACJ,iBAAeT,aAAaC,WAAWS;AAAAA,IACvCb,WAAWU,GACT,uBACAZ,QAAQgB,MACRL,IAAI;AAAA,MACFM,iBACGT,WAAWU,kBAAMC,OAAOX,OAAO,KAAMU,YAAAA,MAAME,KAAKH;AAAAA,IACpD,CAAA,GACDf,WACA;AAAA,MACE,CAACF,QAAQK,UAAU,GAAGA;AAAAA,MACtB,CAACL,QAAQM,QAAQ,GAAGA;AAAAA,IAAAA,CAExB;AAAA,IAAE,GACEG;AAAAA,IAAMN,WAEVkB,2BAAAA,KAAA,OAAA;AAAA,MAAKnB,WAAWF,QAAQsB;AAAAA,MAAkBnB,WACxCoB,2BAAAA,IAAA,OAAA;AAAA,QACErB,WAAWU,GACTD,IAAI;AAAA,UACFa,QAAQlB,WAAW,IAAI;AAAA,UACvBW,iBACEV,gBAAgB,UACZD,WACEY,YAAMC,MAAAA,OAAOM,YACbP,YAAAA,MAAMC,OAAOO,QACfR,YAAAA,MAAMC,OAAOZ,WAAW;AAAA,QAAA,CAC/B,GACDP,QAAQ2B,WACV;AAAA,MAAA,CACD,GACDJ,2BAAAA,IAAA,OAAA;AAAA,QAAKrB,WAAWF,QAAQI;AAAAA,QAAKD,UAAEC;AAAAA,MAAAA,CAAU,CAAC;AAAA,IACvC,CAAA,GACJD,QAAQ;AAAA,EAAA,CACJ;AAEX;;;"}

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const useCarousel = require("embla-carousel-react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const useTheme = require("../../hooks/useTheme.cjs");
@@ -35,7 +36,7 @@ const HvCarousel = (props) => {
     renderThumbnail,
     onChange,
     ...others
-  } = props;
+  } = useDefaultProps.useDefaultProps("HvCarousel", props);
   const {
     activeTheme
   } = useTheme.useTheme();
@@ -111,7 +112,6 @@ const HvCarousel = (props) => {
     })),
     children: [actionsProp, showFullscreen && /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
       icon: true,
-      variant: "secondaryGhost",
       onClick: () => setIsFullscreen((curr) => !curr),
       className: classes.closeButton,
       children: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, {

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\";\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 { 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  controlsPosition?: \"top\" | \"bottom\";\n  thumbnailsPosition?: \"top\" | \"bottom\";\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: EmblaOptionsType;\n  /** */\n  renderThumbnail?: (index: number) => React.ReactNode;\n  /** The callback fired when the active slide changes. */\n  onChange?: (index: number) => void;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n  const {\n    className,\n    classes: classesProp,\n    height: heightProp = \"auto\",\n    thumbnailWidth = 90,\n    title,\n    children,\n    actions: actionsProp,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    controlsPosition: controlsPositionProp,\n    thumbnailsPosition: thumbnailsPositionProp,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    ...others\n  } = props;\n  const { activeTheme } = useTheme();\n  const { classes, css, cx } = useClasses(classesProp);\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const isDs3 = activeTheme?.name === \"ds3\";\n  const actionsPosition = isDs3 ? \"header\" : \"controls\";\n  const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n  const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n  const [containerRef, controller] = useCarousel({\n    align: \"start\",\n    loop: true,\n    ...carouselOptions,\n  });\n\n  const [selectedIndex, setSelectedIndex] = useState(\n    carouselOptions?.startIndex ?? 0\n  );\n\n  const numSlides = Children.count(children);\n\n  const handlePrevious = useCallback(() => {\n    controller?.scrollPrev();\n  }, [controller]);\n\n  const handleNext = useCallback(() => {\n    controller?.scrollNext();\n  }, [controller]);\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = useCallback(() => {\n    if (!controller) return;\n\n    const slideIndex = controller.selectedScrollSnap();\n    setSelectedIndex(slideIndex);\n\n    // scroll to thumbnail button\n    thumbnailsRef.current\n      ?.querySelectorAll(\"button\")\n      ?.[slideIndex]?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n      });\n\n    onChange?.(slideIndex);\n  }, [controller, onChange]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller, handleSelect]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n  }, [numSlides, controller]);\n\n  const canPrev = controller?.canScrollPrev() ?? false;\n  const canNext = controller?.canScrollNext() ?? false;\n  const showTitle = !!title && (!xs || isFullscreen);\n  const showFullscreen = showFullscreenProp ?? xs;\n  const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n  const showCounter = xs;\n  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n  const showThumbnails = !hideThumbnails && !!renderThumbnail;\n  const showDots = showDotsProp ?? numSlides <= 5;\n\n  const actions = (\n    <div\n      className={cx(\n        classes.actions,\n        actionsPosition === \"header\"\n          ? css({ position: \"relative\", top: -40, height: 0 })\n          : css({ position: \"absolute\" })\n      )}\n    >\n      {actionsProp}\n      {showFullscreen && (\n        <HvButton\n          icon\n          variant=\"secondaryGhost\"\n          onClick={() => setIsFullscreen((curr) => !curr)}\n          className={classes.closeButton}\n        >\n          {isFullscreen ? (\n            <Close aria-label=\"Close\" />\n          ) : (\n            <Fullscreen aria-label=\"Fullscreen\" />\n          )}\n        </HvButton>\n      )}\n    </div>\n  );\n\n  const controls = (\n    <HvCarouselControls\n      classes={classes}\n      showDots={showDots}\n      page={selectedIndex}\n      pages={numSlides}\n      canPrevious={canPrev}\n      canNext={canNext}\n      onPreviousClick={handlePrevious}\n      onNextClick={handleNext}\n      actions={actionsPosition === \"controls\" && actions}\n    />\n  );\n\n  const thumbnails = showThumbnails && (\n    <HvCarouselThumbnails\n      classes={classes}\n      ref={thumbnailsRef}\n      page={selectedIndex}\n      pages={numSlides}\n      width={thumbnailWidth}\n      onThumbnailClick={(evt, i) => handleScroll(i)}\n      renderThumbnail={renderThumbnail}\n    />\n  );\n\n  return (\n    <HvContainer\n      className={cx(classes.root, className, {\n        [classes.xs]: xs,\n        [classes.fullscreen]: isFullscreen,\n      })}\n      {...others}\n    >\n      {showTitle && (\n        <HvTypography variant=\"title2\" className={classes.title}>\n          {title}\n        </HvTypography>\n      )}\n\n      {actionsPosition === \"header\" && actions}\n      {thumbnailsPosition === \"top\" && thumbnails}\n      {controlsPosition === \"top\" && controls}\n      <div\n        className={cx(classes.main, {\n          [classes.mainXs]: xs,\n          [classes.mainFullscreen]: isFullscreen,\n        })}\n      >\n        {showCounter && (\n          <div className={classes.counterContainer}>\n            <span className={classes.counter}>\n              {`${selectedIndex + 1}/${numSlides}`}\n            </span>\n          </div>\n        )}\n\n        {showSlideControls && (\n          <div className={classes.slideControls}>\n            <HvButton\n              icon\n              disabled={!canPrev}\n              variant=\"secondary\"\n              aria-label=\"Backwards\"\n              onClick={handlePrevious}\n            >\n              <Backwards iconSize=\"XS\" />\n            </HvButton>\n            <HvButton\n              icon\n              disabled={!canNext}\n              variant=\"secondary\"\n              aria-label=\"Forwards\"\n              onClick={handleNext}\n            >\n              <Forwards iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        )}\n\n        <div\n          ref={containerRef}\n          style={{ height }}\n          className={classes.slidesViewport}\n        >\n          <div className={classes.slidesContainer}>{children}</div>\n        </div>\n      </div>\n      {controlsPosition === \"bottom\" && controls}\n      {thumbnailsPosition === \"bottom\" && thumbnails}\n    </HvContainer>\n  );\n};\n"],"names":["clamp","num","max","min","Math","HvCarousel","props","className","classes","classesProp","height","heightProp","thumbnailWidth","title","children","actions","actionsProp","xs","showDots","showDotsProp","showCounter","showCounterProp","showSlideControls","showFullscreen","showFullscreenProp","hideThumbnails","hideThumbnailsProp","controlsPosition","controlsPositionProp","thumbnailsPosition","thumbnailsPositionProp","carouselOptions","renderThumbnail","onChange","others","activeTheme","useTheme","css","cx","useClasses","thumbnailsRef","useRef","isFullscreen","setIsFullscreen","useState","isDs3","name","actionsPosition","containerRef","controller","useCarousel","align","loop","selectedIndex","setSelectedIndex","startIndex","numSlides","Children","count","handlePrevious","useCallback","scrollPrev","handleNext","scrollNext","handleScroll","index","scrollTo","handleSelect","slideIndex","selectedScrollSnap","current","querySelectorAll","scrollIntoView","behavior","block","useEffect","on","off","reInit","currentIndex","canPrev","canScrollPrev","canNext","canScrollNext","showTitle","showThumbnails","position","top","HvButton","icon","variant","onClick","curr","closeButton","_jsx","Close","Fullscreen","controls","HvCarouselControls","page","pages","canPrevious","onPreviousClick","onNextClick","thumbnails","HvCarouselThumbnails","ref","width","onThumbnailClick","evt","i","HvContainer","root","fullscreen","HvTypography","_jsxs","main","mainXs","mainFullscreen","counterContainer","counter","slideControls","disabled","Backwards","iconSize","Forwards","style","slidesViewport","slidesContainer"],"mappings":"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"}
+{"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 { 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  controlsPosition?: \"top\" | \"bottom\";\n  thumbnailsPosition?: \"top\" | \"bottom\";\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: EmblaOptionsType;\n  /** */\n  renderThumbnail?: (index: number) => React.ReactNode;\n  /** The callback fired when the active slide changes. */\n  onChange?: (index: number) => void;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n  const {\n    className,\n    classes: classesProp,\n    height: heightProp = \"auto\",\n    thumbnailWidth = 90,\n    title,\n    children,\n    actions: actionsProp,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    controlsPosition: controlsPositionProp,\n    thumbnailsPosition: thumbnailsPositionProp,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    ...others\n  } = 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        <HvButton\n          icon\n          onClick={() => setIsFullscreen((curr) => !curr)}\n          className={classes.closeButton}\n        >\n          {isFullscreen ? (\n            <Close aria-label=\"Close\" />\n          ) : (\n            <Fullscreen aria-label=\"Fullscreen\" />\n          )}\n        </HvButton>\n      )}\n    </div>\n  );\n\n  const controls = (\n    <HvCarouselControls\n      classes={classes}\n      showDots={showDots}\n      page={selectedIndex}\n      pages={numSlides}\n      canPrevious={canPrev}\n      canNext={canNext}\n      onPreviousClick={handlePrevious}\n      onNextClick={handleNext}\n      actions={actionsPosition === \"controls\" && actions}\n    />\n  );\n\n  const thumbnails = showThumbnails && (\n    <HvCarouselThumbnails\n      classes={classes}\n      ref={thumbnailsRef}\n      page={selectedIndex}\n      pages={numSlides}\n      width={thumbnailWidth}\n      onThumbnailClick={(evt, i) => handleScroll(i)}\n      renderThumbnail={renderThumbnail}\n    />\n  );\n\n  return (\n    <HvContainer\n      className={cx(classes.root, className, {\n        [classes.xs]: xs,\n        [classes.fullscreen]: isFullscreen,\n      })}\n      {...others}\n    >\n      {showTitle && (\n        <HvTypography variant=\"title2\" className={classes.title}>\n          {title}\n        </HvTypography>\n      )}\n\n      {actionsPosition === \"header\" && actions}\n      {thumbnailsPosition === \"top\" && thumbnails}\n      {controlsPosition === \"top\" && controls}\n      <div\n        className={cx(classes.main, {\n          [classes.mainXs]: xs,\n          [classes.mainFullscreen]: isFullscreen,\n        })}\n      >\n        {showCounter && (\n          <div className={classes.counterContainer}>\n            <span className={classes.counter}>\n              {`${selectedIndex + 1}/${numSlides}`}\n            </span>\n          </div>\n        )}\n\n        {showSlideControls && (\n          <div className={classes.slideControls}>\n            <HvButton\n              icon\n              disabled={!canPrev}\n              variant=\"secondary\"\n              aria-label=\"Backwards\"\n              onClick={handlePrevious}\n            >\n              <Backwards iconSize=\"XS\" />\n            </HvButton>\n            <HvButton\n              icon\n              disabled={!canNext}\n              variant=\"secondary\"\n              aria-label=\"Forwards\"\n              onClick={handleNext}\n            >\n              <Forwards iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        )}\n\n        <div\n          ref={containerRef}\n          style={{ height }}\n          className={classes.slidesViewport}\n        >\n          <div className={classes.slidesContainer}>{children}</div>\n        </div>\n      </div>\n      {controlsPosition === \"bottom\" && controls}\n      {thumbnailsPosition === \"bottom\" && thumbnails}\n    </HvContainer>\n  );\n};\n"],"names":["clamp","num","max","min","Math","HvCarousel","props","className","classes","classesProp","height","heightProp","thumbnailWidth","title","children","actions","actionsProp","xs","showDots","showDotsProp","showCounter","showCounterProp","showSlideControls","showFullscreen","showFullscreenProp","hideThumbnails","hideThumbnailsProp","controlsPosition","controlsPositionProp","thumbnailsPosition","thumbnailsPositionProp","carouselOptions","renderThumbnail","onChange","others","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","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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"}

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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");
@@ -16,7 +17,7 @@ const HvCarouselControls = (props) => {
     actions,
     onPreviousClick,
     onNextClick
-  } = props;
+  } = useDefaultProps.useDefaultProps("HvCarouselControls", props);
   const {
     classes,
     cx
@@ -36,7 +37,6 @@ const HvCarouselControls = (props) => {
       children: [/* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
         icon: true,
         disabled: !canPrevious,
-        variant: "secondaryGhost",
         "aria-label": "Backwards",
         onClick: onPreviousClick,
         children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, {
@@ -48,7 +48,6 @@ const HvCarouselControls = (props) => {
       }), /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
         icon: true,
         disabled: !canNext,
-        variant: "secondaryGhost",
         "aria-label": "Forwards",
         onClick: onNextClick,
         children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, {

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\";\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  } = props;\n  const { classes, cx } = useClasses(classesProp, false);\n\n  const selectedIndex = page || 0;\n  const numSlides = pages;\n\n  return (\n    <div className={cx(classes.controls, className)}>\n      {showDots ? (\n        <div className={classes.dots}>\n          {Array.from(Array(numSlides)).map((el, index) => (\n            <span\n              key={`circle-${index}`}\n              className={cx(classes.dot, {\n                [classes.dotSelected]: index === selectedIndex,\n              })}\n            />\n          ))}\n        </div>\n      ) : (\n        <>\n          <HvButton\n            icon\n            disabled={!canPrevious}\n            variant=\"secondaryGhost\"\n            aria-label=\"Backwards\"\n            onClick={onPreviousClick}\n          >\n            <Backwards iconSize=\"XS\" />\n          </HvButton>\n          <div className={classes.pageCounter}>\n            {`${selectedIndex + 1} / ${numSlides}`}\n          </div>\n          <HvButton\n            icon\n            disabled={!canNext}\n            variant=\"secondaryGhost\"\n            aria-label=\"Forwards\"\n            onClick={onNextClick}\n          >\n            <Forwards iconSize=\"XS\" />\n          </HvButton>\n        </>\n      )}\n      {actions}\n    </div>\n  );\n};\n"],"names":["HvCarouselControls","props","classes","classesProp","className","showDots","page","pages","canPrevious","canNext","actions","onPreviousClick","onNextClick","cx","useClasses","selectedIndex","numSlides","controls","children","_jsx","dots","Array","from","map","el","index","dot","dotSelected","_jsxs","_Fragment","HvButton","icon","disabled","variant","onClick","Backwards","iconSize","pageCounter","Forwards"],"mappings":";;;;;;AAqBaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EACEX,IAAAA;AACE,QAAA;AAAA,IAAEC;AAAAA,IAASW;AAAAA,EAAAA,IAAOC,gBAAWX,WAAAA,aAAa,KAAK;AAErD,QAAMY,gBAAgBT,QAAQ;AAC9B,QAAMU,YAAYT;AAElB,yCACE,OAAA;AAAA,IAAKH,WAAWS,GAAGX,QAAQe,UAAUb,SAAS;AAAA,IAAEc,UAAA,CAC7Cb,WACCc,2BAAAA,IAAA,OAAA;AAAA,MAAKf,WAAWF,QAAQkB;AAAAA,MAAKF,UAC1BG,MAAMC,KAAKD,MAAML,SAAS,CAAC,EAAEO,IAAI,CAACC,IAAIC,UACrCN,2BAAAA,IAAA,QAAA;AAAA,QAEEf,WAAWS,GAAGX,QAAQwB,KAAK;AAAA,UACzB,CAACxB,QAAQyB,WAAW,GAAGF,UAAUV;AAAAA,QAAAA,CAClC;AAAA,MAAE,GAHG,UAASU,OAIhB,CACF;AAAA,IAAA,CACE,IAELG,2BAAAA,KAAAC,qBAAA;AAAA,MAAAX,UAAA,CACEC,2BAAAA,IAACW,iBAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,UAAU,CAACxB;AAAAA,QACXyB,SAAQ;AAAA,QACR,cAAW;AAAA,QACXC,SAASvB;AAAAA,QAAgBO,yCAExBiB,2BAAS;AAAA,UAACC,UAAS;AAAA,QAAA,CAAM;AAAA,MAAA,CAClB,GACVjB,2BAAAA,IAAA,OAAA;AAAA,QAAKf,WAAWF,QAAQmC;AAAAA,QAAYnB,UAChC,GAAEH,gBAAgB,OAAOC;AAAAA,MAAAA,CACxB,GACLG,2BAAAA,IAACW,iBAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,UAAU,CAACvB;AAAAA,QACXwB,SAAQ;AAAA,QACR,cAAW;AAAA,QACXC,SAAStB;AAAAA,QAAYM,yCAEpBoB,0BAAQ;AAAA,UAACF,UAAS;AAAA,QAAA,CAAM;AAAA,MAAA,CACjB,CAAC;AAAA,IACX,CAAA,GAEH1B,OAAO;AAAA,EAAA,CACL;AAET;;"}
+{"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,MAAE,GAHG,UAASU,OAIhB,CACF;AAAA,IAAA,CACE,IAELG,2BAAAA,KAAAC,qBAAA;AAAA,MAAAX,UAAA,CACEC,2BAAAA,IAACW,iBAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,UAAU,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,OAAOC;AAAAA,MAAAA,CACxB,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;;"}

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const CarouselSlide_styles = require("./CarouselSlide.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvCarouselSlide = ({
-  classes: classesProp = {},
+  classes: classesProp,
   className,
   children,
   size: flexBasis = "100%",

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,cAAc,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC,MAAMC,YAAY;AAAA,EAClBC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiB,MAAM;AACpB,QAAA;AAAA,IAAER;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,qBAAAA,WAAWV,WAAW;AACnD,wCACE,OAAA;AAAA,IACEC,WAAWQ,GACTD,IAAI;AAAA,MAAEG,MAAO,OAAMP;AAAAA,IAAAA,CAAa,GAChCL,QAAQa,OACRX,SACF;AAAA,IAAEC,UAEDA,YACCW,2BAAAA,IAAA,OAAA;AAAA,MAAKZ,WAAWF,QAAQe;AAAAA,MAAOT;AAAAA,MAAUC;AAAAA,MAAS,GAAKC;AAAAA,IAAAA,CAAQ;AAAA,EAAA,CAE9D;AAET;;"}
+{"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;AAAAA,IAAAA,CAAa,GAChCL,QAAQa,OACRX,SACF;AAAA,IAAEC,UAEDA,YACCW,2BAAAA,IAAA,OAAA;AAAA,MAAKZ,WAAWF,QAAQe;AAAAA,MAAOT;AAAAA,MAAUC;AAAAA,MAAS,GAAKC;AAAAA,IAAAA,CAAQ;AAAA,EAAA,CAE9D;AAET;;"}

package/dist/cjs/components/CheckBox/CheckBox.cjs

@@ -1,42 +1,49 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const clsx = require("clsx");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const useControlled = require("../../hooks/useControlled.cjs");
 const setId = require("../../utils/setId.cjs");
 const CheckBox_styles = require("./CheckBox.styles.cjs");
-const checkBoxClasses = require("./checkBoxClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const validationStates = require("../Forms/FormElement/validationStates.cjs");
+const BaseCheckBox = require("../BaseCheckBox/BaseCheckBox.cjs");
+const FormElement = require("../Forms/FormElement/FormElement.cjs");
+const Label = require("../Forms/Label/Label.cjs");
 const WarningText = require("../Forms/WarningText/WarningText.cjs");
-const HvCheckBox = ({
-  id,
-  classes,
-  className,
-  name,
-  checked,
-  status,
-  indeterminate,
-  statusMessage,
-  label,
-  labelProps,
-  inputProps,
-  value = "on",
-  required = false,
-  readOnly = false,
-  disabled = false,
-  semantic = false,
-  defaultChecked = false,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  "aria-describedby": ariaDescribedBy,
-  "aria-errormessage": ariaErrorMessage,
-  onChange,
-  onFocusVisible,
-  onBlur,
-  ...others
-}) => {
+const HvCheckBox = (props) => {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    name,
+    checked,
+    status,
+    indeterminate,
+    statusMessage,
+    label,
+    labelProps,
+    inputProps,
+    value = "on",
+    required = false,
+    readOnly = false,
+    disabled = false,
+    semantic = false,
+    defaultChecked = false,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-errormessage": ariaErrorMessage,
+    onChange,
+    onFocusVisible,
+    onBlur,
+    ...others
+  } = useDefaultProps.useDefaultProps("HvCheckBox", props);
+  const {
+    classes,
+    cx
+  } = CheckBox_styles.useClasses(classesProp);
   const elementId = useUniqueId.useUniqueId(id, "hvcheckbox");
   const [focusVisible, setFocusVisible] = React.useState(false);
   const [validationState, setValidationState] = useControlled.useControlled(status, "standBy");
@@ -70,11 +77,12 @@ const HvCheckBox = ({
   if (isStateInvalid) {
     errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
   }
-  const checkbox = /* @__PURE__ */ jsxRuntime.jsx(CheckBox_styles.StyledBaseCheckBox, {
+  const checkbox = /* @__PURE__ */ jsxRuntime.jsx(BaseCheckBox.HvBaseCheckBox, {
     id: hasLabel ? setId.setId(elementId, "input") : setId.setId(id, "input"),
     name,
-    className: clsx.clsx(checkBoxClasses.default.checkbox, classes == null ? void 0 : classes.checkbox, isStateInvalid && clsx.clsx(checkBoxClasses.default.invalidCheckbox, classes == null ? void 0 : classes.invalidCheckbox)),
-    $invalid: isStateInvalid,
+    className: cx(classes.checkbox, {
+      [classes.invalidCheckbox]: isStateInvalid
+    }),
     disabled,
     readOnly,
     required,
@@ -95,25 +103,26 @@ const HvCheckBox = ({
     onBlur: onBlurCallback,
     ...others
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(CheckBox_styles.StyledFormElement, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
     id,
     name,
     status: validationState,
     disabled,
     required,
     readOnly,
-    className: clsx.clsx(className, checkBoxClasses.default.root, classes == null ? void 0 : classes.root, !!(focusVisible && label) && clsx.clsx(checkBoxClasses.default.focusVisible, classes == null ? void 0 : classes.focusVisible)),
-    $focusVisible: !!(focusVisible && label),
-    children: [hasLabel ? /* @__PURE__ */ jsxRuntime.jsxs(CheckBox_styles.StyledLabelContainer, {
-      className: clsx.clsx(checkBoxClasses.default.container, classes == null ? void 0 : classes.container, disabled && clsx.clsx(checkBoxClasses.default.disabled, classes == null ? void 0 : classes.disabled), isStateInvalid && clsx.clsx(checkBoxClasses.default.invalidContainer, classes == null ? void 0 : classes.invalidContainer)),
-      $disabled: disabled,
-      $invalid: isStateInvalid,
-      children: [checkbox, /* @__PURE__ */ jsxRuntime.jsx(CheckBox_styles.StyledLabel, {
+    className: cx(classes.root, {
+      [classes.focusVisible]: !!(focusVisible && label)
+    }, className),
+    children: [hasLabel ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: cx(classes.container, {
+        [classes.disabled]: disabled,
+        [classes.invalidContainer]: isStateInvalid
+      }),
+      children: [checkbox, /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
         id: setId.setId(elementId, "label"),
         htmlFor: setId.setId(elementId, "input"),
         label,
-        className: clsx.clsx(checkBoxClasses.default.label, classes == null ? void 0 : classes.label),
-        $disabled: disabled,
+        className: classes.label,
         ...labelProps
       })]
     }) : checkbox, canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
@@ -125,5 +134,6 @@ const HvCheckBox = ({
     })]
   });
 };
+exports.checkBoxClasses = CheckBox_styles.staticClasses;
 exports.HvCheckBox = HvCheckBox;
 //# sourceMappingURL=CheckBox.cjs.map

package/dist/cjs/components/CheckBox/CheckBox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.cjs","sources":["../../../../src/components/CheckBox/CheckBox.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport { clsx } from \"clsx\";\n\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvBaseCheckBoxProps } from \"@core/components/BaseCheckBox\";\nimport {\n  HvLabelProps,\n  HvFormStatus,\n  HvWarningText,\n  isInvalid,\n} from \"@core/components/Forms\";\n\nimport {\n  StyledBaseCheckBox,\n  StyledFormElement,\n  StyledLabel,\n  StyledLabelContainer,\n} from \"./CheckBox.styles\";\nimport checkBoxClasses, { HvCheckBoxClasses } from \"./checkBoxClasses\";\n\nexport interface HvCheckBoxProps extends Omit<HvBaseCheckBoxProps, \"classes\"> {\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvCheckBoxClasses;\n}\n\n/**\n * A Checkbox is a mechanism that allows the user to select one or more options.\n *\n * Usually used in a Checkbox Group to present the user with a range of options from\n * which the user <b>may select any number of options</b> to complete their task.\n *\n * It can also be used individually to represent the toggle of a single option, when\n * the Toggle Switch and Toggle Button aren't more appropriate.\n */\nexport const HvCheckBox = ({\n  id,\n  classes,\n  className,\n  name,\n  checked,\n  status,\n  indeterminate,\n  statusMessage,\n  label,\n  labelProps,\n  inputProps,\n  value = \"on\",\n  required = false,\n  readOnly = false,\n  disabled = false,\n  semantic = false,\n  defaultChecked = false,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-errormessage\": ariaErrorMessage,\n  onChange,\n  onFocusVisible,\n  onBlur,\n  ...others\n}: HvCheckBoxProps) => {\n  const elementId = useUniqueId(id, \"hvcheckbox\");\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [isChecked, setIsChecked] = useControlled(\n    checked,\n    Boolean(defaultChecked)\n  );\n\n  const [isIndeterminate, setIsIndeterminate] = useControlled(\n    checked !== undefined ? indeterminate : undefined,\n    Boolean(indeterminate)\n  );\n\n  const isStateInvalid = isInvalid(validationState);\n\n  const onChangeCallback = useCallback<\n    NonNullable<HvBaseCheckBoxProps[\"onChange\"]>\n  >(\n    (event, newChecked) => {\n      setIsChecked(() => {\n        // This will only run if uncontrolled\n        setIsIndeterminate(false);\n\n        if (required && !newChecked) {\n          setValidationState(\"invalid\");\n        } else {\n          setValidationState(\"valid\");\n        }\n\n        return newChecked;\n      });\n\n      onChange?.(event, newChecked, value);\n    },\n    [\n      onChange,\n      required,\n      setIsChecked,\n      setIsIndeterminate,\n      setValidationState,\n      value,\n    ]\n  );\n\n  const onFocusVisibleCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n    setFocusVisible(true);\n    onFocusVisible?.(event);\n  };\n\n  const onBlurCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n    setFocusVisible(false);\n    onBlur?.(event);\n  };\n\n  // The error message area will only be created if:\n  //   - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const hasLabel = label != null;\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  const checkbox = (\n    <StyledBaseCheckBox\n      id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n      name={name}\n      className={clsx(\n        checkBoxClasses.checkbox,\n        classes?.checkbox,\n        isStateInvalid &&\n          clsx(checkBoxClasses.invalidCheckbox, classes?.invalidCheckbox)\n      )}\n      $invalid={isStateInvalid}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      onChange={onChangeCallback}\n      value={value}\n      checked={isChecked}\n      indeterminate={isIndeterminate}\n      semantic={semantic}\n      inputProps={{\n        \"aria-invalid\": isStateInvalid ? true : undefined,\n        \"aria-errormessage\": errorMessageId,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n        ...inputProps,\n      }}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      {...others}\n    />\n  );\n\n  return (\n    <StyledFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={clsx(\n        className,\n        checkBoxClasses.root,\n        classes?.root,\n        !!(focusVisible && label) &&\n          clsx(checkBoxClasses.focusVisible, classes?.focusVisible)\n      )}\n      $focusVisible={!!(focusVisible && label)}\n    >\n      {hasLabel ? (\n        <StyledLabelContainer\n          className={clsx(\n            checkBoxClasses.container,\n            classes?.container,\n            disabled && clsx(checkBoxClasses.disabled, classes?.disabled),\n            isStateInvalid &&\n              clsx(checkBoxClasses.invalidContainer, classes?.invalidContainer)\n          )}\n          $disabled={disabled}\n          $invalid={isStateInvalid}\n        >\n          {checkbox}\n          <StyledLabel\n            id={setId(elementId, \"label\")}\n            htmlFor={setId(elementId, \"input\")}\n            label={label}\n            className={clsx(checkBoxClasses.label, classes?.label)}\n            $disabled={disabled}\n            {...labelProps}\n          />\n        </StyledLabelContainer>\n      ) : (\n        checkbox\n      )}\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableAdornment={!hasLabel}\n          hideText={!hasLabel}\n          disableBorder\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </StyledFormElement>\n  );\n};\n"],"names":["HvCheckBox","id","classes","className","name","checked","status","indeterminate","statusMessage","label","labelProps","inputProps","value","required","readOnly","disabled","semantic","defaultChecked","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","onFocusVisible","onBlur","others","elementId","useUniqueId","focusVisible","setFocusVisible","useState","validationState","setValidationState","useControlled","validationMessage","isChecked","setIsChecked","Boolean","isIndeterminate","setIsIndeterminate","undefined","isStateInvalid","isInvalid","onChangeCallback","useCallback","event","newChecked","onFocusVisibleCallback","onBlurCallback","canShowError","hasLabel","errorMessageId","setId","checkbox","StyledBaseCheckBox","clsx","checkBoxClasses","invalidCheckbox","$invalid","StyledFormElement","root","$focusVisible","children","_jsxs","StyledLabelContainer","container","invalidContainer","$disabled","_jsx","StyledLabel","htmlFor","HvWarningText","disableAdornment","hideText","disableBorder"],"mappings":"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"}
+{"version":3,"file":"CheckBox.cjs","sources":["../../../../src/components/CheckBox/CheckBox.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { setId } from \"@core/utils/setId\";\nimport {\n  HvBaseCheckBox,\n  HvBaseCheckBoxProps,\n} from \"@core/components/BaseCheckBox\";\nimport {\n  HvLabelProps,\n  HvFormStatus,\n  HvWarningText,\n  isInvalid,\n  HvFormElement,\n  HvLabel,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./CheckBox.styles\";\n\nexport { staticClasses as checkBoxClasses };\n\nexport type HvCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxProps extends Omit<HvBaseCheckBoxProps, \"classes\"> {\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvCheckBoxClasses;\n}\n\n/**\n * A Checkbox is a mechanism that allows the user to select one or more options.\n *\n * Usually used in a Checkbox Group to present the user with a range of options from\n * which the user <b>may select any number of options</b> to complete their task.\n *\n * It can also be used individually to represent the toggle of a single option, when\n * the Toggle Switch and Toggle Button aren't more appropriate.\n */\nexport const HvCheckBox = (props: HvCheckBoxProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    name,\n    checked,\n    status,\n    indeterminate,\n    statusMessage,\n    label,\n    labelProps,\n    inputProps,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    semantic = false,\n    defaultChecked = false,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-errormessage\": ariaErrorMessage,\n    onChange,\n    onFocusVisible,\n    onBlur,\n    ...others\n  } = useDefaultProps(\"HvCheckBox\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvcheckbox\");\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [isChecked, setIsChecked] = useControlled(\n    checked,\n    Boolean(defaultChecked)\n  );\n\n  const [isIndeterminate, setIsIndeterminate] = useControlled(\n    checked !== undefined ? indeterminate : undefined,\n    Boolean(indeterminate)\n  );\n\n  const isStateInvalid = isInvalid(validationState);\n\n  const onChangeCallback = useCallback<\n    NonNullable<HvBaseCheckBoxProps[\"onChange\"]>\n  >(\n    (event, newChecked) => {\n      setIsChecked(() => {\n        // This will only run if uncontrolled\n        setIsIndeterminate(false);\n\n        if (required && !newChecked) {\n          setValidationState(\"invalid\");\n        } else {\n          setValidationState(\"valid\");\n        }\n\n        return newChecked;\n      });\n\n      onChange?.(event, newChecked, value);\n    },\n    [\n      onChange,\n      required,\n      setIsChecked,\n      setIsIndeterminate,\n      setValidationState,\n      value,\n    ]\n  );\n\n  const onFocusVisibleCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n    setFocusVisible(true);\n    onFocusVisible?.(event);\n  };\n\n  const onBlurCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n    setFocusVisible(false);\n    onBlur?.(event);\n  };\n\n  // The error message area will only be created if:\n  //   - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const hasLabel = label != null;\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  const checkbox = (\n    <HvBaseCheckBox\n      id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n      name={name}\n      className={cx(classes.checkbox, {\n        [classes.invalidCheckbox]: isStateInvalid,\n      })}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      onChange={onChangeCallback}\n      value={value}\n      checked={isChecked}\n      indeterminate={isIndeterminate}\n      semantic={semantic}\n      inputProps={{\n        \"aria-invalid\": isStateInvalid ? true : undefined,\n        \"aria-errormessage\": errorMessageId,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n        ...inputProps,\n      }}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      {...others}\n    />\n  );\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={cx(\n        classes.root,\n        { [classes.focusVisible]: !!(focusVisible && label) },\n        className\n      )}\n    >\n      {hasLabel ? (\n        <div\n          className={cx(classes.container, {\n            [classes.disabled]: disabled,\n            [classes.invalidContainer]: isStateInvalid,\n          })}\n        >\n          {checkbox}\n          <HvLabel\n            id={setId(elementId, \"label\")}\n            htmlFor={setId(elementId, \"input\")}\n            label={label}\n            className={classes.label}\n            {...labelProps}\n          />\n        </div>\n      ) : (\n        checkbox\n      )}\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableAdornment={!hasLabel}\n          hideText={!hasLabel}\n          disableBorder\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["HvCheckBox","props","id","classes","classesProp","className","name","checked","status","indeterminate","statusMessage","label","labelProps","inputProps","value","required","readOnly","disabled","semantic","defaultChecked","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","onFocusVisible","onBlur","others","useDefaultProps","cx","useClasses","elementId","useUniqueId","focusVisible","setFocusVisible","useState","validationState","setValidationState","useControlled","validationMessage","isChecked","setIsChecked","Boolean","isIndeterminate","setIsIndeterminate","undefined","isStateInvalid","isInvalid","onChangeCallback","useCallback","event","newChecked","onFocusVisibleCallback","onBlurCallback","canShowError","hasLabel","errorMessageId","setId","checkbox","HvBaseCheckBox","invalidCheckbox","HvFormElement","root","children","_jsxs","container","invalidContainer","_jsx","HvLabel","htmlFor","HvWarningText","disableAdornment","hideText","disableBorder"],"mappings":"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"}