@lumx/react 3.20.1-alpha.10 → 3.20.1-alpha.11

package/_internal/77eb8ef3.js

@@ -0,0 +1,149 @@
+import { n as forwardRef, b as Theme, _ as _extends } from './d3321a86.js';
+import React__default, { useEffect } from 'react';
+import { a as SlideshowControls, b as Slides, c as buildSlideShowGroupId, D as DEFAULT_OPTIONS } from './85d992d2.js';
+export { S as SlideshowItem } from './85d992d2.js';
+import { m as mergeRefs } from './f0d7d6ea.js';
+import { u as useTheme } from './3181f000.js';
+
+/**
+ * Hook that allows to control when there is a focus event within a given element, meaning
+ * that any element within the given target will trigger the focus in and focus out events.
+ * @param options - UseFocusWithinOptions
+ */
+const useFocusWithin = ({
+  element,
+  onFocusIn,
+  onFocusOut
+}) => {
+  useEffect(() => {
+    if (element) {
+      element.addEventListener('focusin', onFocusIn);
+      element.addEventListener('focusout', onFocusOut);
+    }
+    return () => {
+      if (element) {
+        element.removeEventListener('focusin', onFocusIn);
+        element.removeEventListener('focusout', onFocusOut);
+      }
+    };
+  }, [onFocusIn, element, onFocusOut]);
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = DEFAULT_OPTIONS;
+
+/**
+ * Slideshow component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Slideshow = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    activeIndex,
+    autoPlay = DEFAULT_PROPS.autoPlay,
+    children,
+    className,
+    fillHeight,
+    groupBy = DEFAULT_OPTIONS.groupBy,
+    interval = DEFAULT_PROPS.interval,
+    onChange,
+    slideshowControlsProps,
+    theme = defaultTheme,
+    id,
+    slidesId,
+    slideGroupLabel,
+    ...forwardedProps
+  } = props;
+  // Number of slideshow items.
+  const itemsCount = React__default.Children.count(children);
+  const {
+    activeIndex: currentIndex,
+    slideshowId,
+    setSlideshow,
+    isAutoPlaying,
+    slideshowSlidesId,
+    slidesCount,
+    onNextClick,
+    onPaginationClick,
+    onPreviousClick,
+    slideshow,
+    stopAutoPlay,
+    startAutoPlay,
+    toggleAutoPlay,
+    toggleForcePause
+  } = SlideshowControls.useSlideshowControls({
+    activeIndex,
+    defaultActiveIndex: DEFAULT_PROPS.activeIndex,
+    autoPlay: Boolean(autoPlay),
+    itemsCount,
+    groupBy,
+    id,
+    interval,
+    onChange,
+    slidesId
+  });
+  useFocusWithin({
+    element: slideshow,
+    onFocusIn: stopAutoPlay,
+    onFocusOut: startAutoPlay
+  });
+  const showControls = slideshowControlsProps && slidesCount > 1;
+  return /*#__PURE__*/React__default.createElement(Slides, _extends({
+    activeIndex: currentIndex,
+    id: slideshowId,
+    className: className,
+    theme: theme,
+    fillHeight: fillHeight,
+    groupBy: groupBy,
+    isAutoPlaying: isAutoPlaying,
+    autoPlay: autoPlay,
+    slidesId: slideshowSlidesId,
+    toggleAutoPlay: toggleAutoPlay,
+    ref: mergeRefs(ref, setSlideshow),
+    hasControls: showControls,
+    slideGroupLabel: slideGroupLabel,
+    afterSlides: slideshowControlsProps && slidesCount > 1 ? /*#__PURE__*/React__default.createElement("div", {
+      className: `${Slides.className}__controls`
+    }, /*#__PURE__*/React__default.createElement(SlideshowControls, _extends({}, slideshowControlsProps, {
+      activeIndex: currentIndex,
+      onPaginationClick: onPaginationClick,
+      onNextClick: onNextClick,
+      onPreviousClick: onPreviousClick,
+      slidesCount: slidesCount,
+      parentRef: slideshow,
+      theme: theme,
+      isAutoPlaying: isAutoPlaying,
+      nextButtonProps: {
+        'aria-controls': slideshowSlidesId,
+        ...slideshowControlsProps.nextButtonProps
+      },
+      previousButtonProps: {
+        'aria-controls': slideshowSlidesId,
+        ...slideshowControlsProps.previousButtonProps
+      },
+      playButtonProps: autoPlay ? {
+        'aria-controls': slideshowSlidesId,
+        onClick: toggleForcePause,
+        ...slideshowControlsProps.playButtonProps
+      } : undefined,
+      paginationItemProps: index => ({
+        'aria-controls': buildSlideShowGroupId(slideshowSlidesId, index),
+        ...slideshowControlsProps.paginationItemProps?.(index)
+      })
+    }))) : undefined
+  }, forwardedProps), children);
+});
+Slideshow.displayName = 'Slideshow';
+Slideshow.defaultProps = DEFAULT_PROPS;
+
+export { Slides, Slideshow, SlideshowControls };
+//# sourceMappingURL=77eb8ef3.js.map

package/_internal/77eb8ef3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"77eb8ef3.js","sources":["../../src/hooks/useFocusWithin.ts","../../src/components/slideshow/Slideshow.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nexport interface UseFocusWithinOptions {\n    /** element to add the focus within to */\n    element: HTMLElement | null;\n    /** callback to be executed on focus in */\n    onFocusIn: (ev: FocusEvent) => void;\n    /** callback to be executed on focus out */\n    onFocusOut: (ev: FocusEvent) => void;\n}\n\n/**\n * Hook that allows to control when there is a focus event within a given element, meaning\n * that any element within the given target will trigger the focus in and focus out events.\n * @param options - UseFocusWithinOptions\n */\nexport const useFocusWithin = ({ element, onFocusIn, onFocusOut }: UseFocusWithinOptions) => {\n    useEffect(() => {\n        if (element) {\n            element.addEventListener('focusin', onFocusIn);\n\n            element.addEventListener('focusout', onFocusOut);\n        }\n\n        return () => {\n            if (element) {\n                element.removeEventListener('focusin', onFocusIn);\n\n                element.removeEventListener('focusout', onFocusOut);\n            }\n        };\n    }, [onFocusIn, element, onFocusOut]);\n};\n","import React from 'react';\n\nimport { SlideshowControls, SlideshowControlsProps, Theme, Slides, SlidesProps } from '@lumx/react';\nimport { DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { buildSlideShowGroupId } from './SlideshowItemGroup';\n\n/**\n * Defines the props of the component.\n */\nexport interface SlideshowProps\n    extends GenericProps,\n        Pick<SlidesProps, 'autoPlay' | 'slidesId' | 'id' | 'theme' | 'fillHeight' | 'groupBy' | 'slideGroupLabel'> {\n    /** current slide active */\n    activeIndex?: SlidesProps['activeIndex'];\n    /** Interval between each slide when automatic rotation is enabled. */\n    interval?: number;\n    /** Props to pass to the slideshow controls (minus those already set by the Slideshow props). */\n    slideshowControlsProps?: Pick<\n        SlideshowControlsProps,\n        'nextButtonProps' | 'previousButtonProps' | 'paginationItemProps'\n    > &\n        Omit<\n            SlideshowControlsProps,\n            | 'activeIndex'\n            | 'onPaginationClick'\n            | 'onNextClick'\n            | 'onPreviousClick'\n            | 'slidesCount'\n            | 'parentRef'\n            | 'theme'\n        >;\n    /** Callback when slide changes */\n    onChange?(index: number): void;\n    /** Children */\n    children?: React.ReactNode;\n}\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<SlideshowProps> = DEFAULT_OPTIONS;\n\n/**\n * Slideshow component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Slideshow = forwardRef<SlideshowProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        activeIndex,\n        autoPlay = DEFAULT_PROPS.autoPlay,\n        children,\n        className,\n        fillHeight,\n        groupBy = DEFAULT_OPTIONS.groupBy,\n        interval = DEFAULT_PROPS.interval,\n        onChange,\n        slideshowControlsProps,\n        theme = defaultTheme,\n        id,\n        slidesId,\n        slideGroupLabel,\n        ...forwardedProps\n    } = props;\n    // Number of slideshow items.\n    const itemsCount = React.Children.count(children);\n\n    const {\n        activeIndex: currentIndex,\n        slideshowId,\n        setSlideshow,\n        isAutoPlaying,\n        slideshowSlidesId,\n        slidesCount,\n        onNextClick,\n        onPaginationClick,\n        onPreviousClick,\n        slideshow,\n        stopAutoPlay,\n        startAutoPlay,\n        toggleAutoPlay,\n        toggleForcePause,\n    } = SlideshowControls.useSlideshowControls({\n        activeIndex,\n        defaultActiveIndex: DEFAULT_PROPS.activeIndex as number,\n        autoPlay: Boolean(autoPlay),\n        itemsCount,\n        groupBy,\n        id,\n        interval,\n        onChange,\n        slidesId,\n    });\n\n    useFocusWithin({\n        element: slideshow,\n        onFocusIn: stopAutoPlay,\n        onFocusOut: startAutoPlay,\n    });\n\n    const showControls = slideshowControlsProps && slidesCount > 1;\n\n    return (\n        <Slides\n            activeIndex={currentIndex}\n            id={slideshowId}\n            className={className}\n            theme={theme}\n            fillHeight={fillHeight}\n            groupBy={groupBy}\n            isAutoPlaying={isAutoPlaying}\n            autoPlay={autoPlay}\n            slidesId={slideshowSlidesId}\n            toggleAutoPlay={toggleAutoPlay}\n            ref={mergeRefs(ref, setSlideshow)}\n            hasControls={showControls}\n            slideGroupLabel={slideGroupLabel}\n            afterSlides={\n                slideshowControlsProps && slidesCount > 1 ? (\n                    <div className={`${Slides.className}__controls`}>\n                        <SlideshowControls\n                            {...slideshowControlsProps}\n                            activeIndex={currentIndex}\n                            onPaginationClick={onPaginationClick}\n                            onNextClick={onNextClick}\n                            onPreviousClick={onPreviousClick}\n                            slidesCount={slidesCount}\n                            parentRef={slideshow}\n                            theme={theme}\n                            isAutoPlaying={isAutoPlaying}\n                            nextButtonProps={{\n                                'aria-controls': slideshowSlidesId,\n                                ...slideshowControlsProps.nextButtonProps,\n                            }}\n                            previousButtonProps={{\n                                'aria-controls': slideshowSlidesId,\n                                ...slideshowControlsProps.previousButtonProps,\n                            }}\n                            playButtonProps={\n                                autoPlay\n                                    ? {\n                                          'aria-controls': slideshowSlidesId,\n                                          onClick: toggleForcePause,\n                                          ...slideshowControlsProps.playButtonProps,\n                                      }\n                                    : undefined\n                            }\n                            paginationItemProps={(index) => ({\n                                'aria-controls': buildSlideShowGroupId(slideshowSlidesId, index),\n                                ...slideshowControlsProps.paginationItemProps?.(index),\n                            })}\n                        />\n                    </div>\n                ) : undefined\n            }\n            {...forwardedProps}\n        >\n            {children}\n        </Slides>\n    );\n});\n\nSlideshow.displayName = 'Slideshow';\nSlideshow.defaultProps = DEFAULT_PROPS;\n"],"names":["useFocusWithin","element","onFocusIn","onFocusOut","useEffect","addEventListener","removeEventListener","DEFAULT_PROPS","DEFAULT_OPTIONS","Slideshow","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","activeIndex","autoPlay","children","className","fillHeight","groupBy","interval","onChange","slideshowControlsProps","theme","id","slidesId","slideGroupLabel","forwardedProps","itemsCount","React","Children","count","currentIndex","slideshowId","setSlideshow","isAutoPlaying","slideshowSlidesId","slidesCount","onNextClick","onPaginationClick","onPreviousClick","slideshow","stopAutoPlay","startAutoPlay","toggleAutoPlay","toggleForcePause","SlideshowControls","useSlideshowControls","defaultActiveIndex","Boolean","showControls","createElement","Slides","_extends","mergeRefs","hasControls","afterSlides","parentRef","nextButtonProps","previousButtonProps","playButtonProps","onClick","undefined","paginationItemProps","index","buildSlideShowGroupId","displayName","defaultProps"],"mappings":"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"}

package/_internal/78df9309.js

@@ -0,0 +1,20 @@
+import get from 'lodash/get';
+
+/**
+ * Properties of a component to use to determine it's name.
+ * In the order of preference.
+ */
+const NAME_PROPERTIES = ['type', 'type.displayName', 'displayName', 'name', 'type.name', 'props.mdxType', '_reactInternalFiber.elementType.name'];
+/**
+ * Create a predicate function that checks if a ReactNode is a react element from the given component.
+ *
+ * @param  component React function component or the component name
+ * @return predicate returning true if value is instance of the component
+ */
+const isComponent = component => instance => {
+  const componentName = typeof component === 'string' ? component : component.displayName;
+  return !!get(instance, '$$typeof') && NAME_PROPERTIES.some(nameProperty => get(instance, nameProperty) === componentName);
+};
+
+export { isComponent as i };
+//# sourceMappingURL=78df9309.js.map

package/_internal/78df9309.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"78df9309.js","sources":["../../src/utils/type/isComponent.ts"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport get from 'lodash/get';\nimport type { Comp } from './Comp';\n\n/**\n * Properties of a component to use to determine it's name.\n * In the order of preference.\n */\nconst NAME_PROPERTIES: string[] = [\n    'type',\n    'type.displayName',\n    'displayName',\n    'name',\n    'type.name',\n    'props.mdxType',\n    '_reactInternalFiber.elementType.name',\n];\n/**\n * Create a predicate function that checks if a ReactNode is a react element from the given component.\n *\n * @param  component React function component or the component name\n * @return predicate returning true if value is instance of the component\n */\nexport const isComponent =\n    <C>(component: Comp<C, any> | string) =>\n    (instance: ReactNode): instance is ReactElement => {\n        const componentName = typeof component === 'string' ? component : component.displayName;\n\n        return (\n            !!get(instance, '$$typeof') &&\n            NAME_PROPERTIES.some((nameProperty: string): boolean => get(instance, nameProperty) === componentName)\n        );\n    };\n"],"names":["NAME_PROPERTIES","isComponent","component","instance","componentName","displayName","get","some","nameProperty"],"mappings":";;AAIA;AACA;AACA;AACA;AACA,MAAMA,eAAyB,GAAG,CAC9B,MAAM,EACN,kBAAkB,EAClB,aAAa,EACb,MAAM,EACN,WAAW,EACX,eAAe,EACf,sCAAsC,CACzC,CAAA;AACD;AACA;AACA;AACA;AACA;AACA;MACaC,WAAW,GAChBC,SAAgC,IACnCC,QAAmB,IAA+B;EAC/C,MAAMC,aAAa,GAAG,OAAOF,SAAS,KAAK,QAAQ,GAAGA,SAAS,GAAGA,SAAS,CAACG,WAAW,CAAA;EAEvF,OACI,CAAC,CAACC,GAAG,CAACH,QAAQ,EAAE,UAAU,CAAC,IAC3BH,eAAe,CAACO,IAAI,CAAEC,YAAoB,IAAcF,GAAG,CAACH,QAAQ,EAAEK,YAAY,CAAC,KAAKJ,aAAa,CAAC,CAAA;AAE9G;;;;"}

package/_internal/7b214f74.js

@@ -0,0 +1,70 @@
+import { m as getRootClassName, d as Emphasis, c as Size, n as forwardRef, b as Theme, _ as _extends } from './d3321a86.js';
+import { B as ButtonRoot } from './01bc8fcf.js';
+import { u as useTheme, T as ThemeProvider } from './3181f000.js';
+import { Tooltip } from './d6b3a3c0.js';
+import { I as Icon } from './4e1dde79.js';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'IconButton';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  emphasis: Emphasis.high,
+  size: Size.m
+};
+
+/**
+ * IconButton component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const IconButton = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    emphasis = DEFAULT_PROPS.emphasis,
+    image,
+    icon,
+    label,
+    size = DEFAULT_PROPS.size,
+    theme = defaultTheme,
+    tooltipProps,
+    hideTooltip,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/React.createElement(Tooltip, _extends({
+    label: hideTooltip ? '' : label
+  }, tooltipProps), /*#__PURE__*/React.createElement(ButtonRoot, _extends({
+    ref: ref,
+    emphasis,
+    size,
+    theme
+  }, forwardedProps, {
+    "aria-label": label,
+    variant: "icon"
+  }), image ? /*#__PURE__*/React.createElement("img", {
+    // no need to set alt as an aria-label is already set on the button
+    alt: "",
+    src: image
+  }) : /*#__PURE__*/React.createElement(ThemeProvider, {
+    value: undefined
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon
+  }))));
+});
+IconButton.displayName = COMPONENT_NAME;
+IconButton.className = CLASSNAME;
+IconButton.defaultProps = DEFAULT_PROPS;
+
+export { IconButton as I };
+//# sourceMappingURL=7b214f74.js.map

package/_internal/7b214f74.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"7b214f74.js","sources":["../../src/components/button/IconButton.tsx"],"sourcesContent":["import { Emphasis, Icon, Size, Theme, ThemeProvider, Tooltip, TooltipProps } from '@lumx/react';\nimport { BaseButtonProps, ButtonRoot } from '@lumx/react/components/button/ButtonRoot';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nexport interface IconButtonProps extends BaseButtonProps {\n    /**\n     * Icon (SVG path).\n     * If `image` is also set, `image` will be used instead.\n     */\n    icon?: string;\n    /**\n     * Image (image url).\n     * Has priority over `icon`.\n     */\n    image?: string;\n    /**\n     * Label text (required for a11y purpose).\n     * If you really don't want an aria-label, you can set an empty label (this is not recommended).\n     */\n    label: string;\n    /**\n     * Props to pass to the tooltip.\n     * If undefined or if tooltipProps.label is undefined, the label prop will be used as tooltip label.\n     * */\n    tooltipProps?: Partial<TooltipProps>;\n    /** Whether the tooltip should be hidden or not. */\n    hideTooltip?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'IconButton';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<IconButtonProps> = {\n    emphasis: Emphasis.high,\n    size: Size.m,\n};\n\n/**\n * IconButton component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const IconButton = forwardRef<IconButtonProps, HTMLButtonElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        emphasis = DEFAULT_PROPS.emphasis,\n        image,\n        icon,\n        label,\n        size = DEFAULT_PROPS.size,\n        theme = defaultTheme,\n        tooltipProps,\n        hideTooltip,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <Tooltip label={hideTooltip ? '' : label} {...tooltipProps}>\n            <ButtonRoot ref={ref} {...{ emphasis, size, theme, ...forwardedProps }} aria-label={label} variant=\"icon\">\n                {image ? (\n                    <img\n                        // no need to set alt as an aria-label is already set on the button\n                        alt=\"\"\n                        src={image}\n                    />\n                ) : (\n                    <ThemeProvider value={undefined}>\n                        <Icon icon={icon as string} />\n                    </ThemeProvider>\n                )}\n            </ButtonRoot>\n        </Tooltip>\n    );\n});\nIconButton.displayName = COMPONENT_NAME;\nIconButton.className = CLASSNAME;\nIconButton.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","emphasis","Emphasis","high","size","Size","m","IconButton","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","image","icon","label","theme","tooltipProps","hideTooltip","forwardedProps","React","createElement","Tooltip","_extends","ButtonRoot","variant","alt","src","ThemeProvider","value","undefined","Icon","displayName","className","defaultProps"],"mappings":";;;;;;AA+BA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAuC,GAAG;EAC5CC,QAAQ,EAAEC,QAAQ,CAACC,IAAI;EACvBC,IAAI,EAAEC,IAAI,CAACC,CAAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAU,GAAGC,UAAU,CAAqC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACrF,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFb,QAAQ,GAAGD,aAAa,CAACC,QAAQ;IACjCc,KAAK;IACLC,IAAI;IACJC,KAAK;IACLb,IAAI,GAAGJ,aAAa,CAACI,IAAI;AACzBc,IAAAA,KAAK,GAAGP,YAAY;IACpBQ,YAAY;IACZC,WAAW;IACX,GAAGC,cAAAA;AACP,GAAC,GAAGZ,KAAK,CAAA;AAET,EAAA,oBACIa,KAAA,CAAAC,aAAA,CAACC,OAAO,EAAAC,QAAA,CAAA;AAACR,IAAAA,KAAK,EAAEG,WAAW,GAAG,EAAE,GAAGH,KAAAA;GAAWE,EAAAA,YAAY,gBACtDG,KAAA,CAAAC,aAAA,CAACG,UAAU,EAAAD,QAAA,CAAA;AAACf,IAAAA,GAAG,EAAEA,GAAI;IAAOT,QAAQ;IAAEG,IAAI;AAAEc,IAAAA,KAAAA;AAAK,GAAA,EAAKG,cAAc,EAAA;AAAI,IAAA,YAAA,EAAYJ,KAAM;AAACU,IAAAA,OAAO,EAAC,MAAA;AAAM,GAAA,CAAA,EACpGZ,KAAK,gBACFO,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACI;AACAK,IAAAA,GAAG,EAAC,EAAE;AACNC,IAAAA,GAAG,EAAEd,KAAAA;AAAM,GACd,CAAC,gBAEFO,KAAA,CAAAC,aAAA,CAACO,aAAa,EAAA;AAACC,IAAAA,KAAK,EAAEC,SAAAA;AAAU,GAAA,eAC5BV,KAAA,CAAAC,aAAA,CAACU,IAAI,EAAA;AAACjB,IAAAA,IAAI,EAAEA,IAAAA;GAAiB,CAClB,CAEX,CACP,CAAC,CAAA;AAElB,CAAC,EAAC;AACFT,UAAU,CAAC2B,WAAW,GAAGrC,cAAc,CAAA;AACvCU,UAAU,CAAC4B,SAAS,GAAGrC,SAAS,CAAA;AAChCS,UAAU,CAAC6B,YAAY,GAAGpC,aAAa;;;;"}

package/_internal/7b221b05.js

@@ -0,0 +1,9 @@
+/** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
+function resolveColorWithVariants(colorWithVariants, colorVariant) {
+  if (!colorWithVariants) return [undefined, colorVariant];
+  const [color, baseColorVariant] = colorWithVariants.split('-');
+  return [color, colorVariant || baseColorVariant];
+}
+
+export { resolveColorWithVariants as r };
+//# sourceMappingURL=7b221b05.js.map

package/_internal/7b221b05.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"7b221b05.js","sources":["../../../lumx-core/src/js/utils/className/resolveColorWithVariants.ts"],"sourcesContent":["import { ColorPalette, ColorVariant, ColorWithVariants } from '../../constants';\n\n/** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */\nexport function resolveColorWithVariants(\n    colorWithVariants?: ColorWithVariants,\n    colorVariant?: ColorVariant,\n): [color?: ColorPalette, colorVariant?: ColorVariant] {\n    if (!colorWithVariants) return [undefined, colorVariant];\n    const [color, baseColorVariant] = colorWithVariants.split('-');\n    return [color as ColorPalette, (colorVariant || baseColorVariant) as ColorVariant];\n}\n"],"names":["resolveColorWithVariants","colorWithVariants","colorVariant","undefined","color","baseColorVariant","split"],"mappings":"AAEA;AACO,SAASA,wBAAwBA,CACpCC,iBAAqC,EACrCC,YAA2B,EACwB;EACnD,IAAI,CAACD,iBAAiB,EAAE,OAAO,CAACE,SAAS,EAAED,YAAY,CAAC,CAAA;EACxD,MAAM,CAACE,KAAK,EAAEC,gBAAgB,CAAC,GAAGJ,iBAAiB,CAACK,KAAK,CAAC,GAAG,CAAC,CAAA;AAC9D,EAAA,OAAO,CAACF,KAAK,EAAmBF,YAAY,IAAIG,gBAAgB,CAAkB,CAAA;AACtF;;;;"}

package/_internal/7c4f4643.js

@@ -0,0 +1,20 @@
+import React__default, { Children } from 'react';
+import { i as isComponentType } from './e806b848.js';
+import { I as Icon } from './4e1dde79.js';
+
+/** Force wrap spaces around icons to make sure they are never stuck against text. */
+function wrapChildrenIconWithSpaces(children) {
+  if (children === null || children === undefined) return undefined;
+  return Children.toArray(children).flatMap(child => {
+    if (isComponentType(Icon)(child)) {
+      return [' ', child, ' '];
+    }
+    if (/*#__PURE__*/React__default.isValidElement(child) && child.props && typeof child.props === 'object' && 'children' in child.props) {
+      return /*#__PURE__*/React__default.cloneElement(child, undefined, wrapChildrenIconWithSpaces(child.props.children));
+    }
+    return child;
+  });
+}
+
+export { wrapChildrenIconWithSpaces as w };
+//# sourceMappingURL=7c4f4643.js.map

package/_internal/7c4f4643.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"7c4f4643.js","sources":["../../src/utils/react/wrapChildrenIconWithSpaces.tsx"],"sourcesContent":["import React, { Children } from 'react';\nimport { isComponentType } from '@lumx/react/utils/type';\nimport { Icon } from '@lumx/react';\n\n/** Force wrap spaces around icons to make sure they are never stuck against text. */\nexport function wrapChildrenIconWithSpaces(children: React.ReactNode): React.ReactNode {\n    if (children === null || children === undefined) return undefined;\n    return Children.toArray(children).flatMap((child) => {\n        if (isComponentType(Icon)(child)) {\n            return [' ', child, ' '];\n        }\n        if (\n            React.isValidElement(child) &&\n            child.props &&\n            typeof child.props === 'object' &&\n            'children' in child.props\n        ) {\n            return React.cloneElement(child, undefined, wrapChildrenIconWithSpaces(child.props.children));\n        }\n        return child;\n    });\n}\n"],"names":["wrapChildrenIconWithSpaces","children","undefined","Children","toArray","flatMap","child","isComponentType","Icon","React","isValidElement","props","cloneElement"],"mappings":";;;;AAIA;AACO,SAASA,0BAA0BA,CAACC,QAAyB,EAAmB;EACnF,IAAIA,QAAQ,KAAK,IAAI,IAAIA,QAAQ,KAAKC,SAAS,EAAE,OAAOA,SAAS,CAAA;EACjE,OAAOC,QAAQ,CAACC,OAAO,CAACH,QAAQ,CAAC,CAACI,OAAO,CAAEC,KAAK,IAAK;AACjD,IAAA,IAAIC,eAAe,CAACC,IAAI,CAAC,CAACF,KAAK,CAAC,EAAE;AAC9B,MAAA,OAAO,CAAC,GAAG,EAAEA,KAAK,EAAE,GAAG,CAAC,CAAA;AAC5B,KAAA;IACA,iBACIG,cAAK,CAACC,cAAc,CAACJ,KAAK,CAAC,IAC3BA,KAAK,CAACK,KAAK,IACX,OAAOL,KAAK,CAACK,KAAK,KAAK,QAAQ,IAC/B,UAAU,IAAIL,KAAK,CAACK,KAAK,EAC3B;AACE,MAAA,oBAAOF,cAAK,CAACG,YAAY,CAACN,KAAK,EAAEJ,SAAS,EAAEF,0BAA0B,CAACM,KAAK,CAACK,KAAK,CAACV,QAAQ,CAAC,CAAC,CAAA;AACjG,KAAA;AACA,IAAA,OAAOK,KAAK,CAAA;AAChB,GAAC,CAAC,CAAA;AACN;;;;"}

package/_internal/7daf0f24.js

@@ -0,0 +1,77 @@
+import { useEffect } from 'react';
+
+const useRovingTabIndex = ({
+  parentRef,
+  elementSelector,
+  keepTabIndex,
+  onElementFocus,
+  extraDependencies = []
+}) => {
+  useEffect(() => {
+    const parent = parentRef?.current;
+    if (!parent) {
+      return undefined;
+    }
+    const elements = parent.querySelectorAll(elementSelector);
+    const initialFocusableElement = parent?.querySelector(`${elementSelector}[tabindex="0"]`);
+    const handleKeyDown = index => evt => {
+      let newTabFocus = index;
+      if (!(evt.key === 'ArrowRight' || evt.key === 'ArrowLeft')) {
+        return;
+      }
+      if (evt.key === 'ArrowRight') {
+        // Move right
+        newTabFocus += 1;
+        // If we're at the end, go to the start
+        if (newTabFocus >= elements.length) {
+          newTabFocus = 0;
+        }
+      } else if (evt.key === 'ArrowLeft') {
+        // Move left
+        newTabFocus -= 1;
+        if (newTabFocus < 0) {
+          // If we're at the start, move to the end
+          newTabFocus = elements.length - 1;
+        }
+      }
+      const newElement = elements[newTabFocus];
+      newElement?.focus();
+
+      // When an element is focused using roving tab index, trigger the onElementFocus callback
+      if (newElement && onElementFocus) {
+        onElementFocus(newElement);
+      }
+      if (keepTabIndex) {
+        evt.currentTarget.setAttribute('tabindex', '-1');
+        newElement?.setAttribute('tabindex', '0');
+      }
+    };
+    if (elements?.length > 0) {
+      elements.forEach((el, key) => {
+        // if no element has tabindex set to 0, set the first element as focusable
+        if (!initialFocusableElement && key === 0) {
+          el.setAttribute('tabindex', '0');
+          // set all other to -1
+        } else if (initialFocusableElement !== el) {
+          el.setAttribute('tabindex', '-1');
+        }
+        // add event listener
+        el.addEventListener('keydown', handleKeyDown(key));
+      });
+    }
+
+    // Cleanup listeners
+    return () => {
+      if (elements?.length > 0) {
+        elements.forEach((el, key) => {
+          el.removeEventListener('keydown', handleKeyDown(key));
+        });
+      }
+    };
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [parentRef, ...extraDependencies]);
+};
+
+export { useRovingTabIndex as u };
+//# sourceMappingURL=7daf0f24.js.map

package/_internal/7daf0f24.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"7daf0f24.js","sources":["../../src/hooks/useRovingTabIndex.tsx"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\ninterface UseRovingTabIndexOptions {\n    parentRef: RefObject<HTMLElement>;\n    elementSelector: string;\n    keepTabIndex?: boolean;\n    /** Action to trigger when an element is focused using roving tab index */\n    onElementFocus?: (element: HTMLElement) => void;\n    /** List of values to be used as extra dependencies of the useEffect */\n    extraDependencies?: any[];\n}\n\nexport const useRovingTabIndex = ({\n    parentRef,\n    elementSelector,\n    keepTabIndex,\n    onElementFocus,\n    extraDependencies = [],\n}: UseRovingTabIndexOptions): void => {\n    useEffect(\n        () => {\n            const parent = parentRef?.current;\n            if (!parent) {\n                return undefined;\n            }\n\n            const elements = parent.querySelectorAll(elementSelector) as NodeListOf<HTMLElement>;\n            const initialFocusableElement = parent?.querySelector(`${elementSelector}[tabindex=\"0\"]`);\n\n            const handleKeyDown = (index: number) => (evt: KeyboardEvent) => {\n                let newTabFocus = index;\n                if (!(evt.key === 'ArrowRight' || evt.key === 'ArrowLeft')) {\n                    return;\n                }\n\n                if (evt.key === 'ArrowRight') {\n                    // Move right\n                    newTabFocus += 1;\n                    // If we're at the end, go to the start\n                    if (newTabFocus >= elements.length) {\n                        newTabFocus = 0;\n                    }\n                } else if (evt.key === 'ArrowLeft') {\n                    // Move left\n                    newTabFocus -= 1;\n                    if (newTabFocus < 0) {\n                        // If we're at the start, move to the end\n                        newTabFocus = elements.length - 1;\n                    }\n                }\n                const newElement = elements[newTabFocus];\n                newElement?.focus();\n\n                // When an element is focused using roving tab index, trigger the onElementFocus callback\n                if (newElement && onElementFocus) {\n                    onElementFocus(newElement);\n                }\n\n                if (keepTabIndex) {\n                    (evt.currentTarget as HTMLElement).setAttribute('tabindex', '-1');\n                    newElement?.setAttribute('tabindex', '0');\n                }\n            };\n\n            if (elements?.length > 0) {\n                elements.forEach((el, key) => {\n                    // if no element has tabindex set to 0, set the first element as focusable\n                    if (!initialFocusableElement && key === 0) {\n                        el.setAttribute('tabindex', '0');\n                        // set all other to -1\n                    } else if (initialFocusableElement !== el) {\n                        el.setAttribute('tabindex', '-1');\n                    }\n                    // add event listener\n                    el.addEventListener('keydown', handleKeyDown(key) as EventListener);\n                });\n            }\n\n            // Cleanup listeners\n            return () => {\n                if (elements?.length > 0) {\n                    elements.forEach((el, key) => {\n                        el.removeEventListener('keydown', handleKeyDown(key) as EventListener);\n                    });\n                }\n            };\n        }, // eslint-disable-next-line react-hooks/exhaustive-deps\n        [parentRef, ...extraDependencies],\n    );\n};\n"],"names":["useRovingTabIndex","parentRef","elementSelector","keepTabIndex","onElementFocus","extraDependencies","useEffect","parent","current","undefined","elements","querySelectorAll","initialFocusableElement","querySelector","handleKeyDown","index","evt","newTabFocus","key","length","newElement","focus","currentTarget","setAttribute","forEach","el","addEventListener","removeEventListener"],"mappings":"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"}

package/_internal/803945f7.js

@@ -0,0 +1,65 @@
+import { l as classNames, _ as _extends } from './d3321a86.js';
+import { u as useTheme } from './3181f000.js';
+import { FlexBox } from './64046d7a.js';
+import { T as Text } from './8fcceef3.js';
+
+/** Internal component used to render image captions */
+const ImageCaption = props => {
+  const defaultTheme = useTheme();
+  const {
+    baseClassName,
+    theme = defaultTheme,
+    as = 'figcaption',
+    title,
+    titleProps,
+    description,
+    descriptionProps,
+    tags,
+    captionStyle,
+    align,
+    truncate
+  } = props;
+  if (!title && !description && !tags) return null;
+  const titleColor = {
+    color: theme === 'dark' ? 'light' : 'dark'
+  };
+  const baseColor = {
+    color: theme === 'dark' ? 'light' : 'dark',
+    colorVariant: 'L2'
+  };
+
+  // Display description as string or HTML
+  const descriptionContent = typeof description === 'string' ? {
+    children: description
+  } : {
+    dangerouslySetInnerHTML: description
+  };
+  return /*#__PURE__*/React.createElement(FlexBox, {
+    as: as,
+    className: classNames(baseClassName && `${baseClassName}__wrapper`),
+    style: captionStyle,
+    orientation: "vertical",
+    vAlign: align,
+    hAlign: align === 'center' ? align : undefined,
+    gap: "regular"
+  }, (title || description) && /*#__PURE__*/React.createElement(Text, _extends({
+    as: "p",
+    className: classNames(baseClassName && `${baseClassName}__caption`),
+    truncate: truncate
+  }, baseColor), title && /*#__PURE__*/React.createElement(Text, _extends({}, titleProps, {
+    as: "span",
+    className: classNames(titleProps?.className, baseClassName && `${baseClassName}__title`),
+    typography: "subtitle1"
+  }, titleColor), title), ' ', description && /*#__PURE__*/React.createElement(Text, _extends({}, descriptionProps, {
+    as: "span",
+    className: classNames(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
+    typography: "body1"
+  }, descriptionContent))), tags && /*#__PURE__*/React.createElement(FlexBox, {
+    className: classNames(baseClassName && `${baseClassName}__tags`),
+    orientation: "horizontal",
+    vAlign: align
+  }, tags));
+};
+
+export { ImageCaption as I };
+//# sourceMappingURL=803945f7.js.map

package/_internal/803945f7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"803945f7.js","sources":["../../src/components/image-block/ImageCaption.tsx"],"sourcesContent":["import { CSSProperties, ReactNode } from 'react';\n\nimport { FlexBox, HorizontalAlignment, Text, TextProps, useTheme } from '@lumx/react';\nimport { HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';\nimport classNames from 'classnames';\n\ntype As = 'div' | 'figcaption';\n\ntype ForwardedTextProps = Omit<TextProps, 'as' | 'typography' | 'color' | 'colorVariant'>;\n\nexport type ImageCaptionMetadata = {\n    /** Image title to display in the caption. */\n    title?: string;\n    /** Props to pass to the title. */\n    titleProps?: ForwardedTextProps;\n    /** Image description. Can be either a string, or sanitized html. */\n    description?: string | { __html: string };\n    /** Props to pass to the title. */\n    descriptionProps?: ForwardedTextProps;\n    /** Tag content. */\n    tags?: ReactNode;\n    /** Caption custom CSS style. */\n    captionStyle?: CSSProperties;\n};\n\nexport type ImageCaptionProps<AS extends As = 'figcaption'> = HasTheme &\n    HasPolymorphicAs<AS> &\n    ImageCaptionMetadata & {\n        /** Base className for sub elements */\n        baseClassName?: string;\n        /** Alignment. */\n        align?: HorizontalAlignment;\n        /** Truncate text on title & description (no line wrapping). */\n        truncate?: TextProps['truncate'];\n    };\n\n/** Internal component used to render image captions */\nexport const ImageCaption = <AS extends As>(props: ImageCaptionProps<AS>) => {\n    const defaultTheme = useTheme();\n    const {\n        baseClassName,\n        theme = defaultTheme,\n        as = 'figcaption',\n        title,\n        titleProps,\n        description,\n        descriptionProps,\n        tags,\n        captionStyle,\n        align,\n        truncate,\n    } = props;\n    if (!title && !description && !tags) return null;\n\n    const titleColor = { color: theme === 'dark' ? 'light' : 'dark' } as const;\n    const baseColor = { color: theme === 'dark' ? 'light' : 'dark', colorVariant: 'L2' } as const;\n\n    // Display description as string or HTML\n    const descriptionContent =\n        typeof description === 'string' ? { children: description } : { dangerouslySetInnerHTML: description };\n\n    return (\n        <FlexBox\n            as={as}\n            className={classNames(baseClassName && `${baseClassName}__wrapper`)}\n            style={captionStyle}\n            orientation=\"vertical\"\n            vAlign={align}\n            hAlign={align === 'center' ? align : undefined}\n            gap=\"regular\"\n        >\n            {(title || description) && (\n                <Text\n                    as=\"p\"\n                    className={classNames(baseClassName && `${baseClassName}__caption`)}\n                    truncate={truncate}\n                    {...baseColor}\n                >\n                    {title && (\n                        <Text\n                            {...titleProps}\n                            as=\"span\"\n                            className={classNames(titleProps?.className, baseClassName && `${baseClassName}__title`)}\n                            typography=\"subtitle1\"\n                            {...titleColor}\n                        >\n                            {title}\n                        </Text>\n                    )}{' '}\n                    {description && (\n                        <Text\n                            {...descriptionProps}\n                            as=\"span\"\n                            className={classNames(\n                                descriptionProps?.className,\n                                baseClassName && `${baseClassName}__description`,\n                            )}\n                            typography=\"body1\"\n                            {...descriptionContent}\n                        />\n                    )}\n                </Text>\n            )}\n            {tags && (\n                <FlexBox\n                    className={classNames(baseClassName && `${baseClassName}__tags`)}\n                    orientation=\"horizontal\"\n                    vAlign={align}\n                >\n                    {tags}\n                </FlexBox>\n            )}\n        </FlexBox>\n    );\n};\n"],"names":["ImageCaption","props","defaultTheme","useTheme","baseClassName","theme","as","title","titleProps","description","descriptionProps","tags","captionStyle","align","truncate","titleColor","color","baseColor","colorVariant","descriptionContent","children","dangerouslySetInnerHTML","React","createElement","FlexBox","className","classNames","style","orientation","vAlign","hAlign","undefined","gap","Text","_extends","typography"],"mappings":"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"}

package/_internal/80e5c950.js

@@ -0,0 +1,80 @@
+import { m as getRootClassName, j as ColorPalette, n as forwardRef, _ as _extends, l as classNames } from './d3321a86.js';
+import { h as handleBasicClasses } from './4ceaf17c.js';
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1 = 'Badge';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  color: ColorPalette.primary
+};
+
+/**
+ * Badge component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Badge = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    color = DEFAULT_PROPS.color,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, forwardedProps, {
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME$1,
+      color
+    }))
+  }), children);
+});
+Badge.displayName = COMPONENT_NAME$1;
+Badge.className = CLASSNAME$1;
+Badge.defaultProps = DEFAULT_PROPS;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'BadgeWrapper';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const BadgeWrapper = forwardRef((props, ref) => {
+  const {
+    badge,
+    children,
+    className,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, forwardedProps, {
+    className: classNames(className, CLASSNAME)
+  }), children, badge && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__badge`
+  }, badge));
+});
+BadgeWrapper.displayName = 'BadgeWrapper';
+BadgeWrapper.className = CLASSNAME;
+
+export { Badge, BadgeWrapper };
+//# sourceMappingURL=80e5c950.js.map

package/_internal/80e5c950.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"80e5c950.js","sources":["../../src/components/badge/Badge.tsx","../../src/components/badge/BadgeWrapper.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { ColorPalette } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface BadgeProps extends GenericProps {\n    /** Badge content. */\n    children?: ReactNode;\n    /** Color variant. */\n    color?: ColorPalette;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Badge';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<BadgeProps> = {\n    color: ColorPalette.primary,\n};\n\n/**\n * Badge component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Badge = forwardRef<BadgeProps, HTMLDivElement>((props, ref) => {\n    const { children, className, color = DEFAULT_PROPS.color, ...forwardedProps } = props;\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color }))}\n        >\n            {children}\n        </div>\n    );\n});\nBadge.displayName = COMPONENT_NAME;\nBadge.className = CLASSNAME;\nBadge.defaultProps = DEFAULT_PROPS;\n","import { ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nexport interface BadgeWrapperProps extends GenericProps {\n    /** Badge. */\n    badge: ReactElement;\n    /** Node to display the badge on */\n    children: ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'BadgeWrapper';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\nexport const BadgeWrapper = forwardRef<BadgeWrapperProps, HTMLDivElement>((props, ref) => {\n    const { badge, children, className, ...forwardedProps } = props;\n\n    return (\n        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>\n            {children}\n            {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}\n        </div>\n    );\n});\nBadgeWrapper.displayName = 'BadgeWrapper';\nBadgeWrapper.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","color","ColorPalette","primary","Badge","forwardRef","props","ref","children","className","forwardedProps","React","createElement","_extends","classNames","handleBasicClasses","prefix","displayName","defaultProps","BadgeWrapper","badge"],"mappings":";;;AASA;AACA;AACA;;AAQA;AACA;AACA;AACA,MAAMA,gBAAc,GAAG,OAAO,CAAA;;AAE9B;AACA;AACA;AACA,MAAMC,WAAS,GAAGC,gBAAgB,CAACF,gBAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAkC,GAAG;EACvCC,KAAK,EAAEC,YAAY,CAACC,OAAAA;AACxB,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,KAAK,GAAGC,UAAU,CAA6B,CAACC,KAAK,EAAEC,GAAG,KAAK;EACxE,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAER,KAAK,GAAGD,aAAa,CAACC,KAAK;IAAE,GAAGS,cAAAA;AAAe,GAAC,GAAGJ,KAAK,CAAA;AACrF,EAAA,oBACIK,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;AACIN,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,EACLG,cAAc,EAAA;AAClBD,IAAAA,SAAS,EAAEK,UAAU,CAACL,SAAS,EAAEM,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAElB,WAAS;AAAEG,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAA;AAAE,GAAA,CAAA,EAElFO,QACA,CAAC,CAAA;AAEd,CAAC,EAAC;AACFJ,KAAK,CAACa,WAAW,GAAGpB,gBAAc,CAAA;AAClCO,KAAK,CAACK,SAAS,GAAGX,WAAS,CAAA;AAC3BM,KAAK,CAACc,YAAY,GAAGlB,aAAa;;AC1ClC;AACA;AACA;AACA,MAAMH,cAAc,GAAG,cAAc,CAAA;;AAErC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;AAE3C,MAAMsB,YAAY,GAAGd,UAAU,CAAoC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACtF,MAAM;IAAEa,KAAK;IAAEZ,QAAQ;IAAEC,SAAS;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGJ,KAAK,CAAA;AAE/D,EAAA,oBACIK,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;AAAKN,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,EAAKG,cAAc,EAAA;AAAED,IAAAA,SAAS,EAAEK,UAAU,CAACL,SAAS,EAAEX,SAAS,CAAA;AAAE,GAAA,CAAA,EAC1EU,QAAQ,EACRY,KAAK,iBAAIT,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKH,SAAS,EAAE,GAAGX,SAAS,CAAA,OAAA,CAAA;GAAYsB,EAAAA,KAAW,CAC5D,CAAC,CAAA;AAEd,CAAC,EAAC;AACFD,YAAY,CAACF,WAAW,GAAG,cAAc,CAAA;AACzCE,YAAY,CAACV,SAAS,GAAGX,SAAS;;;;"}