@lumx/react 3.20.1-alpha.14 → 3.20.1-alpha.15

package/_internal/components/alert-dialog-8f1c163c.js

@@ -0,0 +1,147 @@
+import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
+import React__default from 'react';
+import { mdiAlert, mdiInformation, mdiCheckCircle, mdiAlertCircle } from '@lumx/icons';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { u as useId } from '../useId-3a1facc0.js';
+import { Dialog } from './dialog-7dbcb485.js';
+import { Toolbar } from './toolbar-155562be.js';
+import { Icon } from './icon-2e7345ad.js';
+import { a as Button } from '../Button-f19e18df.js';
+import { Kind, ColorPalette, Size, Emphasis } from '@lumx/core/js/constants';
+
+/**
+ * Associative map from message kind to color and icon.
+ */
+const CONFIG = {
+  [Kind.error]: {
+    color: ColorPalette.red,
+    icon: mdiAlert
+  },
+  [Kind.info]: {
+    color: ColorPalette.blue,
+    icon: mdiInformation
+  },
+  [Kind.success]: {
+    color: ColorPalette.green,
+    icon: mdiCheckCircle
+  },
+  [Kind.warning]: {
+    color: ColorPalette.yellow,
+    icon: mdiAlertCircle
+  }
+};
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'AlertDialog';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  size: Size.tiny,
+  kind: Kind.info
+};
+
+/**
+ * AlertDialog component.
+ *
+ * An alert dialog is a modal dialog that interrupts the user's workflow to
+ * communicate an important message and acquire a response.
+ *
+ * It should not have a complex content.
+ * Children of this component should only be strings, paragraphs or links.
+ */
+const AlertDialog = forwardRef((props, ref) => {
+  const {
+    id,
+    title,
+    className,
+    cancelProps,
+    confirmProps,
+    kind = DEFAULT_PROPS.kind,
+    size = DEFAULT_PROPS.size,
+    dialogProps,
+    children,
+    ...forwardedProps
+  } = props;
+  const cancelButtonRef = React__default.useRef(null);
+  const confirmationButtonRef = React__default.useRef(null);
+  const {
+    color,
+    icon
+  } = CONFIG[kind] || {};
+
+  // Define a unique ID to target title and description for aria attributes.
+  const generatedId = useId();
+  const uniqueId = id || generatedId;
+  const titleId = `${uniqueId}-title`;
+  const descriptionId = `${uniqueId}-description`;
+
+  // If content is a string, set in a paragraph.
+  const DescriptionElement = typeof children === 'string' ? 'p' : 'div';
+  const {
+    label: confirmLabel,
+    onClick: confirmOnClick,
+    ...forwardedConfirmProps
+  } = confirmProps;
+  const {
+    label: cancelLabel,
+    onClick: cancelOnClick,
+    ...forwardedCancelProps
+  } = cancelProps || {};
+  return /*#__PURE__*/React__default.createElement(Dialog, _extends({
+    ref: ref,
+    focusElement: cancelProps ? cancelButtonRef : confirmationButtonRef,
+    size: size,
+    dialogProps: {
+      id: uniqueId,
+      role: 'alertdialog',
+      'aria-labelledby': titleId,
+      'aria-describedby': descriptionId,
+      ...dialogProps
+    },
+    className: classNames(className, handleBasicClasses({
+      kind,
+      prefix: CLASSNAME
+    }))
+  }, forwardedProps), /*#__PURE__*/React__default.createElement("header", null, /*#__PURE__*/React__default.createElement(Toolbar, {
+    className: "lumx-spacing-margin-horizontal",
+    before: /*#__PURE__*/React__default.createElement(Icon, {
+      icon: icon,
+      size: Size.s,
+      color: color
+    }),
+    label: /*#__PURE__*/React__default.createElement("h2", {
+      id: titleId,
+      className: "lumx-typography-title"
+    }, title)
+  })), children && /*#__PURE__*/React__default.createElement(DescriptionElement, {
+    id: descriptionId,
+    className: "lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
+  }, children), /*#__PURE__*/React__default.createElement("footer", null, /*#__PURE__*/React__default.createElement(Toolbar, {
+    className: "lumx-spacing-margin-horizontal",
+    after: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, cancelProps && /*#__PURE__*/React__default.createElement(Button, _extends({}, forwardedCancelProps, {
+      ref: cancelButtonRef,
+      emphasis: Emphasis.medium,
+      onClick: cancelOnClick
+    }), cancelLabel), /*#__PURE__*/React__default.createElement(Button, _extends({}, forwardedConfirmProps, {
+      ref: confirmationButtonRef,
+      color: color,
+      className: "lumx-spacing-margin-left-regular",
+      onClick: confirmOnClick
+    }), confirmLabel))
+  })));
+});
+AlertDialog.displayName = COMPONENT_NAME;
+AlertDialog.className = CLASSNAME;
+AlertDialog.defaultProps = DEFAULT_PROPS;
+
+export { AlertDialog };
+//# sourceMappingURL=alert-dialog-8f1c163c.js.map

package/_internal/components/alert-dialog-8f1c163c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-8f1c163c.js","sources":["../../../src/components/alert-dialog/AlertDialog.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n    DialogProps,\n    Dialog,\n    Button,\n    Emphasis,\n    ColorPalette,\n    Icon,\n    Size,\n    Kind,\n    Toolbar,\n    ButtonProps,\n} from '@lumx/react';\nimport { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nexport interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {\n    /** Message variant. */\n    kind?: Kind;\n    /** Dialog title. */\n    title?: string;\n    /** Props forwarded to the confirm button */\n    confirmProps: ButtonProps & {\n        onClick(): void;\n        label: string;\n    };\n    /**\n     * Props forwarded to the cancel button.\n     * Will not render a cancel button if undefined.\n     */\n    cancelProps?: ButtonProps & {\n        onClick(): void;\n        label: string;\n    };\n    /**\n     * Children\n     */\n    children?: React.ReactNode;\n}\n\n/**\n * Associative map from message kind to color and icon.\n */\nconst CONFIG = {\n    [Kind.error]: { color: ColorPalette.red, icon: mdiAlert },\n    [Kind.info]: { color: ColorPalette.blue, icon: mdiInformation },\n    [Kind.success]: { color: ColorPalette.green, icon: mdiCheckCircle },\n    [Kind.warning]: { color: ColorPalette.yellow, icon: mdiAlertCircle },\n};\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'AlertDialog';\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<DialogProps> = {\n    size: Size.tiny,\n    kind: Kind.info,\n};\n\n/**\n * AlertDialog component.\n *\n * An alert dialog is a modal dialog that interrupts the user's workflow to\n * communicate an important message and acquire a response.\n *\n * It should not have a complex content.\n * Children of this component should only be strings, paragraphs or links.\n */\nexport const AlertDialog = forwardRef<AlertDialogProps, HTMLDivElement>((props, ref) => {\n    const {\n        id,\n        title,\n        className,\n        cancelProps,\n        confirmProps,\n        kind = DEFAULT_PROPS.kind,\n        size = DEFAULT_PROPS.size,\n        dialogProps,\n        children,\n        ...forwardedProps\n    } = props;\n\n    const cancelButtonRef = React.useRef(null);\n    const confirmationButtonRef = React.useRef(null);\n    const { color, icon } = CONFIG[kind as Kind] || {};\n\n    // Define a unique ID to target title and description for aria attributes.\n    const generatedId = useId();\n    const uniqueId = id || generatedId;\n    const titleId = `${uniqueId}-title`;\n    const descriptionId = `${uniqueId}-description`;\n\n    // If content is a string, set in a paragraph.\n    const DescriptionElement = typeof children === 'string' ? 'p' : 'div';\n\n    const { label: confirmLabel, onClick: confirmOnClick, ...forwardedConfirmProps } = confirmProps;\n    const { label: cancelLabel, onClick: cancelOnClick, ...forwardedCancelProps } = cancelProps || {};\n\n    return (\n        <Dialog\n            ref={ref}\n            focusElement={cancelProps ? cancelButtonRef : confirmationButtonRef}\n            size={size}\n            dialogProps={{\n                id: uniqueId,\n                role: 'alertdialog',\n                'aria-labelledby': titleId,\n                'aria-describedby': descriptionId,\n                ...dialogProps,\n            }}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    kind,\n                    prefix: CLASSNAME,\n                }),\n            )}\n            {...forwardedProps}\n        >\n            <header>\n                <Toolbar\n                    className=\"lumx-spacing-margin-horizontal\"\n                    before={<Icon icon={icon} size={Size.s} color={color} />}\n                    label={\n                        <h2 id={titleId} className=\"lumx-typography-title\">\n                            {title}\n                        </h2>\n                    }\n                />\n            </header>\n\n            {children && (\n                <DescriptionElement\n                    id={descriptionId}\n                    className=\"lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge\"\n                >\n                    {children}\n                </DescriptionElement>\n            )}\n\n            <footer>\n                <Toolbar\n                    className=\"lumx-spacing-margin-horizontal\"\n                    after={\n                        <>\n                            {cancelProps && (\n                                <Button\n                                    {...forwardedCancelProps}\n                                    ref={cancelButtonRef}\n                                    emphasis={Emphasis.medium}\n                                    onClick={cancelOnClick}\n                                >\n                                    {cancelLabel}\n                                </Button>\n                            )}\n                            <Button\n                                {...forwardedConfirmProps}\n                                ref={confirmationButtonRef}\n                                color={color}\n                                className=\"lumx-spacing-margin-left-regular\"\n                                onClick={confirmOnClick}\n                            >\n                                {confirmLabel}\n                            </Button>\n                        </>\n                    }\n                />\n            </footer>\n        </Dialog>\n    );\n});\n\nAlertDialog.displayName = COMPONENT_NAME;\nAlertDialog.className = CLASSNAME;\nAlertDialog.defaultProps = DEFAULT_PROPS;\n"],"names":["CONFIG","Kind","error","color","ColorPalette","red","icon","mdiAlert","info","blue","mdiInformation","success","green","mdiCheckCircle","warning","yellow","mdiAlertCircle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","tiny","kind","AlertDialog","forwardRef","props","ref","id","title","className","cancelProps","confirmProps","dialogProps","children","forwardedProps","cancelButtonRef","React","useRef","confirmationButtonRef","generatedId","useId","uniqueId","titleId","descriptionId","DescriptionElement","label","confirmLabel","onClick","confirmOnClick","forwardedConfirmProps","cancelLabel","cancelOnClick","forwardedCancelProps","createElement","Dialog","_extends","focusElement","role","classNames","handleBasicClasses","prefix","Toolbar","before","Icon","s","after","Fragment","Button","emphasis","Emphasis","medium","displayName","defaultProps"],"mappings":"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"}

package/_internal/components/autocomplete-bfbdeb3c.js

@@ -0,0 +1,264 @@
+import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
+import { useRef } from 'react';
+import { getRootClassName } from '@lumx/core/js/utils/className';
+import { u as useFocus } from '../index-f415b08e.js';
+import { m as mergeRefs } from '../mergeRefs-f0d7d6ea.js';
+import { u as useTheme } from '../ThemeContext-3181f000.js';
+import { u as useDisableStateProps } from '../useDisableStateProps-fffc365f.js';
+import { TextField } from './text-field-82733568.js';
+import { Dropdown } from './dropdown-38b0b6a0.js';
+import { mdiClose } from '@lumx/icons';
+import { C as Chip } from '../Chip-4c572eec.js';
+import { Icon } from './icon-2e7345ad.js';
+import { Size } from '@lumx/core/js/constants';
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1 = 'Autocomplete';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$1 = {
+  anchorToInput: false,
+  closeOnClick: false,
+  closeOnClickAway: true,
+  closeOnEscape: true,
+  shouldFocusOnClose: false
+};
+
+/**
+ * Autocomplete component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Autocomplete = forwardRef((props, ref) => {
+  const defaultTheme = useTheme();
+  const {
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    anchorToInput = DEFAULT_PROPS$1.anchorToInput,
+    children,
+    chips,
+    className,
+    closeOnClick = DEFAULT_PROPS$1.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$1.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$1.closeOnEscape,
+    error,
+    fitToAnchorWidth,
+    hasError,
+    helper,
+    icon,
+    inputRef,
+    clearButtonProps,
+    isRequired,
+    isOpen,
+    isValid,
+    label,
+    name,
+    offset,
+    onBlur,
+    onChange,
+    onClose,
+    onFocus,
+    onInfiniteScroll,
+    placeholder,
+    placement,
+    shouldFocusOnClose = DEFAULT_PROPS$1.shouldFocusOnClose,
+    theme = defaultTheme,
+    value,
+    textFieldProps = {},
+    focusAnchorOnClose,
+    ...forwardedProps
+  } = otherProps;
+  const inputAnchorRef = useRef(null);
+  const textFieldRef = useRef(null);
+  useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, forwardedProps, {
+    className: classNames(className, CLASSNAME$1)
+  }), /*#__PURE__*/React.createElement(TextField, _extends({}, textFieldProps, {
+    chips: chips,
+    error: error,
+    hasError: hasError,
+    helper: helper,
+    icon: icon,
+    inputRef: mergeRefs(inputAnchorRef, inputRef),
+    clearButtonProps: clearButtonProps
+  }, disabledStateProps, {
+    isRequired: isRequired,
+    isValid: isValid,
+    label: label,
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    placeholder: placeholder,
+    textFieldRef: textFieldRef,
+    theme: theme,
+    value: value
+  })), /*#__PURE__*/React.createElement(Dropdown, {
+    anchorRef: anchorToInput ? inputAnchorRef : textFieldRef,
+    closeOnClick: closeOnClick,
+    closeOnClickAway: closeOnClickAway,
+    closeOnEscape: closeOnEscape,
+    focusAnchorOnClose: focusAnchorOnClose,
+    fitToAnchorWidth: fitToAnchorWidth,
+    isOpen: isOpen,
+    offset: offset,
+    onClose: onClose,
+    onInfiniteScroll: onInfiniteScroll,
+    placement: placement,
+    shouldFocusOnOpen: false,
+    theme: theme
+  }, children));
+});
+Autocomplete.displayName = COMPONENT_NAME$1;
+Autocomplete.className = CLASSNAME$1;
+Autocomplete.defaultProps = DEFAULT_PROPS$1;
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'AutocompleteMultiple';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  closeOnClickAway: true,
+  closeOnEscape: true,
+  selectedChipRender(choice, index, onClear, isDisabled) {
+    const onClick = event => onClear && onClear(event, choice);
+    return /*#__PURE__*/React.createElement(Chip, {
+      key: index,
+      after: onClear && /*#__PURE__*/React.createElement(Icon, {
+        icon: mdiClose,
+        size: Size.xxs
+      }),
+      isDisabled: isDisabled,
+      size: Size.s,
+      onAfterClick: onClick,
+      onClick: onClick
+    }, choice);
+  },
+  values: []
+};
+
+/**
+ * AutocompleteMultiple component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const AutocompleteMultiple = forwardRef((props, ref) => {
+  const defaultTheme = useTheme();
+  const {
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    anchorToInput,
+    children,
+    // `chipsAlignment` needs to be here to remove it from `forwardedProps`.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    chipsAlignment,
+    className,
+    closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS.closeOnEscape,
+    fitToAnchorWidth,
+    hasError,
+    helper,
+    icon,
+    inputRef,
+    clearButtonProps,
+    isRequired,
+    isOpen,
+    isValid,
+    label,
+    name,
+    offset,
+    onBlur,
+    onChange,
+    onClear,
+    onClose,
+    onFocus,
+    onInfiniteScroll,
+    onKeyDown,
+    placeholder,
+    placement,
+    selectedChipRender = DEFAULT_PROPS.selectedChipRender,
+    shouldFocusOnClose,
+    theme = defaultTheme,
+    type,
+    value,
+    values = DEFAULT_PROPS.values,
+    ...forwardedProps
+  } = otherProps;
+  return /*#__PURE__*/React.createElement(Autocomplete, _extends({
+    ref: ref
+  }, forwardedProps, {
+    anchorToInput: anchorToInput,
+    className: classNames(className, CLASSNAME),
+    name: name,
+    value: value,
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    onBlur: onBlur,
+    shouldFocusOnClose: shouldFocusOnClose,
+    onFocus: onFocus,
+    hasError: hasError,
+    helper: helper,
+    icon: icon,
+    inputRef: inputRef,
+    chips: values && values.map((chip, index) => selectedChipRender?.(chip, index, onClear))
+  }, disabledStateProps, {
+    isRequired: isRequired,
+    clearButtonProps: clearButtonProps,
+    isValid: isValid,
+    label: label,
+    placeholder: placeholder,
+    theme: theme,
+    type: type,
+    isOpen: isOpen,
+    closeOnClick: false,
+    closeOnClickAway: closeOnClickAway,
+    closeOnEscape: closeOnEscape,
+    onClose: onClose,
+    offset: offset,
+    placement: placement,
+    fitToAnchorWidth: fitToAnchorWidth,
+    onInfiniteScroll: onInfiniteScroll
+  }), children);
+});
+AutocompleteMultiple.displayName = COMPONENT_NAME;
+AutocompleteMultiple.className = CLASSNAME;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS;
+
+export { Autocomplete, AutocompleteMultiple };
+//# sourceMappingURL=autocomplete-bfbdeb3c.js.map

package/_internal/components/autocomplete-bfbdeb3c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-bfbdeb3c.js","sources":["../../../src/components/autocomplete/Autocomplete.tsx","../../../src/components/autocomplete/AutocompleteMultiple.tsx"],"sourcesContent":["import { ReactNode, SyntheticEvent, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Dropdown, DropdownProps, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';\n\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { useFocus } from '@lumx/react/hooks/useFocus';\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 { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\n\n/**\n * Defines the props of the component.\n */\nexport interface AutocompleteProps extends GenericProps, HasTheme {\n    /**\n     * Whether the suggestions list should display anchored to the input or to the wrapper.\n     * @see {@link DropdownProps#anchorToInput}\n     */\n    anchorToInput?: boolean;\n    /**\n     * Props to pass to the clear button (minus those already set by the TextField props).\n     * If not specified, the button won't be displayed.\n     * @see {@link TextFieldProps#clearButtonProps}\n     */\n    clearButtonProps?: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;\n    /**\n     * Reference to the <input> or <textarea> element.\n     * @see {@link TextFieldProps#inputRef}\n     */\n    inputRef?: TextFieldProps['inputRef'];\n    /**\n     * The offset that will be applied to the Dropdown position.\n     * @see {@link DropdownProps#offset}\n     */\n    offset?: Offset;\n    /**\n     * The preferred Dropdown location against the anchor element.\n     * @see {@link DropdownProps#placement}\n     */\n    placement?: Placement;\n    /**\n     * Manage dropdown width:\n     *   - `maxWidth`: dropdown not bigger than anchor\n     *   - `minWidth` or `true`: dropdown not smaller than anchor\n     *   - `width`: dropdown equal to the anchor.\n     * @see {@link DropdownProps#fitToAnchorWidth}\n     */\n    fitToAnchorWidth?: DropdownProps['fitToAnchorWidth'];\n    /**\n     * The error related to the component.\n     * @see {@link TextFieldProps#error}\n     */\n    error?: string | ReactNode;\n    /**\n     * Whether the text field is displayed with error style or not.\n     * @see {@link TextFieldProps#hasError}\n     */\n    hasError?: boolean;\n    /**\n     * Whether the text box should be focused upon closing the suggestions or not.\n     */\n    shouldFocusOnClose?: boolean;\n    /**\n     * The helper message of the text field.\n     * @see {@link TextFieldProps#helper}\n     */\n    helper?: string;\n    /**\n     * The icon of the text field (SVG path).\n     * @see {@link TextFieldProps#icon}\n     */\n    icon?: string;\n    /**\n     * Whether the component is disabled or not.\n     * @see {@link TextFieldProps#isDisabled}\n     */\n    isDisabled?: boolean;\n    /**\n     * Whether the component is required or not.\n     * @see {@link TextFieldProps#isRequired}\n     */\n    isRequired?: boolean;\n    /**\n     * Whether the text field is displayed with valid style or not.\n     * @see {@link TextFieldProps#isValid}\n     */\n    isValid?: boolean;\n    /**\n     * The label of the text field displayed in a label tag.\n     * @see {@link TextFieldProps#label}\n     */\n    label?: string;\n    /**\n     * The placeholder message of the text field.\n     * @see {@link TextFieldProps#placeholder}\n     */\n    placeholder?: string;\n    /** List of suggestions to display during autocomplete. */\n    children: React.ReactNode;\n    /**\n     * The list of chips to be displayed before the text field input.\n     */\n    chips?: React.ReactNode;\n    /**\n     * The value of the text field.\n     * @see {@link TextFieldProps#value}\n     */\n    value: string;\n    /**\n     * Whether the suggestions from the autocomplete should be displayed or not.\n     * @see {@link DropdownProps#isOpen}\n     */\n    isOpen: boolean;\n    /**\n     * The native input name property.\n     * @see {@link TextFieldProps#name}\n     */\n    name?: string;\n    /**\n     * Whether a click in the Autocomplete dropdown would close it or not.\n     * @see {@link DropdownProps#closeOnClick}\n     */\n    closeOnClick?: boolean;\n    /**\n     * Whether a click anywhere out of the Autocomplete would close it or not.\n     * @see {@link DropdownProps#closeOnClickAway}\n     */\n    closeOnClickAway?: boolean;\n    /**\n     * Whether an escape key press would close the Autocomplete or not.\n     * @see {@link DropdownProps#closeOnEscape}\n     */\n    closeOnEscape?: boolean;\n    /**\n     * Whether the focus should go back on the anchor when dropdown closes and focus is within.\n     * @see {@link DropdownProps#focusAnchorOnClose}\n     */\n    focusAnchorOnClose?: DropdownProps['focusAnchorOnClose'];\n    /**\n     * The function called on blur.\n     * @see {@link TextFieldProps#onBlur}\n     */\n    onBlur?(event: React.FocusEvent): void;\n    /**\n     * On change callback.\n     * @see {@link TextFieldProps#onChange}\n     */\n    onChange(value: string, name?: string, event?: SyntheticEvent): void;\n    /**\n     * The function called on close.\n     * @see {@link DropdownProps#onClose}\n     */\n    onClose?(): void;\n    /**\n     * The function called on focus.\n     * @see {@link TextFieldProps#onFocus}\n     */\n    onFocus?(event: React.FocusEvent): void;\n    /**\n     * The function called when the bottom of the dropdown is reached.\n     * @see {@link DropdownProps#onInfiniteScroll}\n     */\n    onInfiniteScroll?(): void;\n    /**\n     * Props forwarded to the underlying TextField component.\n     * Only the props not managed by the Autocomplete can be set.\n     * @see {@link TextFieldProps}\n     */\n    textFieldProps?: Partial<TextFieldProps>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Autocomplete';\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<AutocompleteProps> = {\n    anchorToInput: false,\n    closeOnClick: false,\n    closeOnClickAway: true,\n    closeOnEscape: true,\n    shouldFocusOnClose: false,\n};\n\n/**\n * Autocomplete component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Autocomplete = forwardRef<AutocompleteProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme();\n    const { disabledStateProps, otherProps } = useDisableStateProps(props);\n    const {\n        anchorToInput = DEFAULT_PROPS.anchorToInput,\n        children,\n        chips,\n        className,\n        closeOnClick = DEFAULT_PROPS.closeOnClick,\n        closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,\n        closeOnEscape = DEFAULT_PROPS.closeOnEscape,\n        error,\n        fitToAnchorWidth,\n        hasError,\n        helper,\n        icon,\n        inputRef,\n        clearButtonProps,\n        isRequired,\n        isOpen,\n        isValid,\n        label,\n        name,\n        offset,\n        onBlur,\n        onChange,\n        onClose,\n        onFocus,\n        onInfiniteScroll,\n        placeholder,\n        placement,\n        shouldFocusOnClose = DEFAULT_PROPS.shouldFocusOnClose,\n        theme = defaultTheme,\n        value,\n        textFieldProps = {},\n        focusAnchorOnClose,\n        ...forwardedProps\n    } = otherProps;\n    const inputAnchorRef = useRef<HTMLElement>(null);\n    const textFieldRef = useRef(null);\n    useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);\n\n    return (\n        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>\n            <TextField\n                {...textFieldProps}\n                chips={chips}\n                error={error}\n                hasError={hasError}\n                helper={helper}\n                icon={icon}\n                inputRef={mergeRefs(inputAnchorRef as React.RefObject<HTMLInputElement>, inputRef)}\n                clearButtonProps={clearButtonProps}\n                {...disabledStateProps}\n                isRequired={isRequired}\n                isValid={isValid}\n                label={label}\n                name={name}\n                onBlur={onBlur}\n                onChange={onChange}\n                onFocus={onFocus}\n                placeholder={placeholder}\n                textFieldRef={textFieldRef}\n                theme={theme}\n                value={value}\n            />\n            <Dropdown\n                anchorRef={anchorToInput ? inputAnchorRef : textFieldRef}\n                closeOnClick={closeOnClick}\n                closeOnClickAway={closeOnClickAway}\n                closeOnEscape={closeOnEscape}\n                focusAnchorOnClose={focusAnchorOnClose}\n                fitToAnchorWidth={fitToAnchorWidth}\n                isOpen={isOpen}\n                offset={offset}\n                onClose={onClose}\n                onInfiniteScroll={onInfiniteScroll}\n                placement={placement}\n                shouldFocusOnOpen={false}\n                theme={theme}\n            >\n                {children}\n            </Dropdown>\n        </div>\n    );\n});\nAutocomplete.displayName = COMPONENT_NAME;\nAutocomplete.className = CLASSNAME;\nAutocomplete.defaultProps = DEFAULT_PROPS;\n","import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiClose } from '@lumx/icons';\n\nimport { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\n\n/**\n * Defines the props of the component.\n */\nexport interface AutocompleteMultipleProps extends AutocompleteProps {\n    /** Selected values. */\n    values: any[];\n    /** Alignment of the chips in the autocomplete. */\n    chipsAlignment?: HorizontalAlignment;\n    /** Selected value render function. Default: Renders the value inside of a Chip. */\n    selectedChipRender(\n        choice: any,\n        index: number,\n        onClear?: (event: React.MouseEvent, choice: any) => void,\n        isDisabled?: boolean,\n    ): ReactNode | string;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'AutocompleteMultiple';\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<AutocompleteMultipleProps> = {\n    closeOnClickAway: true,\n    closeOnEscape: true,\n    selectedChipRender(choice, index, onClear, isDisabled) {\n        const onClick = (event: React.MouseEvent) => onClear && onClear(event, choice);\n        return (\n            <Chip\n                key={index}\n                after={onClear && <Icon icon={mdiClose} size={Size.xxs} />}\n                isDisabled={isDisabled}\n                size={Size.s}\n                onAfterClick={onClick}\n                onClick={onClick}\n            >\n                {choice}\n            </Chip>\n        );\n    },\n    values: [],\n};\n\n/**\n * AutocompleteMultiple component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const AutocompleteMultiple = forwardRef<AutocompleteMultipleProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme();\n    const { disabledStateProps, otherProps } = useDisableStateProps(props);\n    const {\n        anchorToInput,\n        children,\n        // `chipsAlignment` needs to be here to remove it from `forwardedProps`.\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        chipsAlignment,\n        className,\n        closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,\n        closeOnEscape = DEFAULT_PROPS.closeOnEscape,\n        fitToAnchorWidth,\n        hasError,\n        helper,\n        icon,\n        inputRef,\n        clearButtonProps,\n        isRequired,\n        isOpen,\n        isValid,\n        label,\n        name,\n        offset,\n        onBlur,\n        onChange,\n        onClear,\n        onClose,\n        onFocus,\n        onInfiniteScroll,\n        onKeyDown,\n        placeholder,\n        placement,\n        selectedChipRender = DEFAULT_PROPS.selectedChipRender,\n        shouldFocusOnClose,\n        theme = defaultTheme,\n        type,\n        value,\n        values = DEFAULT_PROPS.values,\n        ...forwardedProps\n    } = otherProps;\n\n    return (\n        <Autocomplete\n            ref={ref}\n            {...forwardedProps}\n            anchorToInput={anchorToInput}\n            className={classNames(className, CLASSNAME)}\n            name={name}\n            value={value}\n            onChange={onChange}\n            onKeyDown={onKeyDown}\n            onBlur={onBlur}\n            shouldFocusOnClose={shouldFocusOnClose}\n            onFocus={onFocus}\n            hasError={hasError}\n            helper={helper}\n            icon={icon}\n            inputRef={inputRef}\n            chips={values && values.map((chip: any, index: number) => selectedChipRender?.(chip, index, onClear))}\n            {...disabledStateProps}\n            isRequired={isRequired}\n            clearButtonProps={clearButtonProps}\n            isValid={isValid}\n            label={label}\n            placeholder={placeholder}\n            theme={theme}\n            type={type}\n            isOpen={isOpen}\n            closeOnClick={false}\n            closeOnClickAway={closeOnClickAway}\n            closeOnEscape={closeOnEscape}\n            onClose={onClose}\n            offset={offset}\n            placement={placement}\n            fitToAnchorWidth={fitToAnchorWidth}\n            onInfiniteScroll={onInfiniteScroll}\n        >\n            {children}\n        </Autocomplete>\n    );\n});\nAutocompleteMultiple.displayName = COMPONENT_NAME;\nAutocompleteMultiple.className = CLASSNAME;\nAutocompleteMultiple.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","anchorToInput","closeOnClick","closeOnClickAway","closeOnEscape","shouldFocusOnClose","Autocomplete","forwardRef","props","ref","defaultTheme","useTheme","disabledStateProps","otherProps","useDisableStateProps","children","chips","className","error","fitToAnchorWidth","hasError","helper","icon","inputRef","clearButtonProps","isRequired","isOpen","isValid","label","name","offset","onBlur","onChange","onClose","onFocus","onInfiniteScroll","placeholder","placement","theme","value","textFieldProps","focusAnchorOnClose","forwardedProps","inputAnchorRef","useRef","textFieldRef","useFocus","current","React","createElement","_extends","classNames","TextField","mergeRefs","Dropdown","anchorRef","shouldFocusOnOpen","displayName","defaultProps","selectedChipRender","choice","index","onClear","isDisabled","onClick","event","Chip","key","after","Icon","mdiClose","size","Size","xxs","s","onAfterClick","values","AutocompleteMultiple","chipsAlignment","onKeyDown","type","map","chip"],"mappings":"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"}

package/_internal/components/avatar-6990e3e9.js

@@ -0,0 +1,87 @@
+import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { u as useTheme } from '../ThemeContext-3181f000.js';
+import { T as Thumbnail } from '../Thumbnail-30d2a781.js';
+import { Size, Theme, AspectRatio } from '@lumx/core/js/constants';
+
+/**
+ * Avatar sizes.
+ */
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Avatar';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  size: Size.m
+};
+
+/**
+ * Avatar component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Avatar = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    actions,
+    alt,
+    badge,
+    className,
+    image,
+    linkProps,
+    linkAs,
+    onClick,
+    onKeyPress,
+    size = DEFAULT_PROPS.size,
+    theme = defaultTheme,
+    thumbnailProps,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, forwardedProps, {
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      size,
+      theme
+    }))
+  }), /*#__PURE__*/React.createElement(Thumbnail, _extends({
+    linkProps: linkProps,
+    linkAs: linkAs,
+    className: `${CLASSNAME}__thumbnail`,
+    onClick: onClick,
+    onKeyPress: onKeyPress
+  }, thumbnailProps, {
+    aspectRatio: AspectRatio.square,
+    size: size,
+    image: image,
+    alt: alt,
+    theme: theme
+  })), actions && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__actions`
+  }, actions), badge && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__badge`
+  }, badge));
+});
+Avatar.displayName = COMPONENT_NAME;
+Avatar.className = CLASSNAME;
+Avatar.defaultProps = DEFAULT_PROPS;
+
+export { Avatar };
+//# sourceMappingURL=avatar-6990e3e9.js.map

package/_internal/components/avatar-6990e3e9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-6990e3e9.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import { KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';\n\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Avatar sizes.\n */\nexport type AvatarSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface AvatarProps extends GenericProps, HasTheme {\n    /** Action toolbar content. */\n    actions?: ReactNode;\n    /** Image alternative text. */\n    alt: string;\n    /** Badge. */\n    badge?: ReactElement;\n    /** Image URL. */\n    image: string;\n    /** Props to pass to the link wrapping the thumbnail. */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** On click callback. */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /** On key press callback. */\n    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n    /** Size variant. */\n    size?: AvatarSize;\n    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */\n    thumbnailProps?: Omit<\n        ThumbnailProps,\n        'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'\n    >;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Avatar';\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<AvatarProps> = {\n    size: Size.m,\n};\n\n/**\n * Avatar component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Avatar = forwardRef<AvatarProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        actions,\n        alt,\n        badge,\n        className,\n        image,\n        linkProps,\n        linkAs,\n        onClick,\n        onKeyPress,\n        size = DEFAULT_PROPS.size,\n        theme = defaultTheme,\n        thumbnailProps,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}\n        >\n            <Thumbnail\n                linkProps={linkProps}\n                linkAs={linkAs}\n                className={`${CLASSNAME}__thumbnail`}\n                onClick={onClick}\n                onKeyPress={onKeyPress}\n                {...thumbnailProps}\n                aspectRatio={AspectRatio.square}\n                size={size}\n                image={image}\n                alt={alt}\n                theme={theme}\n            />\n            {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n            {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}\n        </div>\n    );\n});\nAvatar.displayName = COMPONENT_NAME;\nAvatar.className = CLASSNAME;\nAvatar.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","m","Avatar","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","actions","alt","badge","className","image","linkProps","linkAs","onClick","onKeyPress","theme","thumbnailProps","forwardedProps","React","createElement","_extends","classNames","handleBasicClasses","prefix","Thumbnail","aspectRatio","AspectRatio","square","displayName","defaultProps"],"mappings":";;;;;;AAWA;AACA;AACA;;AAGA;AACA;AACA;;AA2BA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,QAAQ,CAAA;;AAE/B;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAmC,GAAG;EACxCC,IAAI,EAAEC,IAAI,CAACC,CAAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,MAAM,GAAGC,UAAU,CAA8B,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC1E,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFC,OAAO;IACPC,GAAG;IACHC,KAAK;IACLC,SAAS;IACTC,KAAK;IACLC,SAAS;IACTC,MAAM;IACNC,OAAO;IACPC,UAAU;IACVnB,IAAI,GAAGD,aAAa,CAACC,IAAI;AACzBoB,IAAAA,KAAK,GAAGb,YAAY;IACpBc,cAAc;IACd,GAAGC,cAAAA;AACP,GAAC,GAAGjB,KAAK,CAAA;AAET,EAAA,oBACIkB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;AACInB,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,EACLgB,cAAc,EAAA;AAClBR,IAAAA,SAAS,EAAEY,UAAU,CAACZ,SAAS,EAAEa,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAE/B,SAAS;MAAEG,IAAI;AAAEoB,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAA;AAAE,GAAA,CAAA,eAEzFG,KAAA,CAAAC,aAAA,CAACK,SAAS,EAAAJ,QAAA,CAAA;AACNT,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,MAAM,EAAEA,MAAO;IACfH,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAc,WAAA,CAAA;AACrCqB,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,UAAU,EAAEA,UAAAA;AAAW,GAAA,EACnBE,cAAc,EAAA;IAClBS,WAAW,EAAEC,WAAW,CAACC,MAAO;AAChChC,IAAAA,IAAI,EAAEA,IAAK;AACXe,IAAAA,KAAK,EAAEA,KAAM;AACbH,IAAAA,GAAG,EAAEA,GAAI;AACTQ,IAAAA,KAAK,EAAEA,KAAAA;AAAM,GAAA,CAChB,CAAC,EACDT,OAAO,iBAAIY,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKV,SAAS,EAAE,GAAGjB,SAAS,CAAA,SAAA,CAAA;AAAY,GAAA,EAAEc,OAAa,CAAC,EACnEE,KAAK,iBAAIU,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKV,SAAS,EAAE,GAAGjB,SAAS,CAAA,OAAA,CAAA;GAAYgB,EAAAA,KAAW,CAC5D,CAAC,CAAA;AAEd,CAAC,EAAC;AACFV,MAAM,CAAC8B,WAAW,GAAGrC,cAAc,CAAA;AACnCO,MAAM,CAACW,SAAS,GAAGjB,SAAS,CAAA;AAC5BM,MAAM,CAAC+B,YAAY,GAAGnC,aAAa;;;;"}

package/_internal/components/badge-81543bc7.js

@@ -0,0 +1,81 @@
+import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { ColorPalette } from '@lumx/core/js/constants';
+
+/**
+ * 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=badge-81543bc7.js.map