@lumx/react 3.20.1-alpha.12 → 3.20.1-alpha.13

package/_internal/components/select-d46cfe35.js

@@ -0,0 +1,404 @@
+import { c as classNames, _ as _extends, f as forwardRef } from '../forwardRef-49d2bb84.js';
+import isEmpty from 'lodash/isEmpty';
+import { mdiCheckCircle, mdiAlertCircle, mdiCloseCircle, mdiMenuDown, mdiClose } from '@lumx/icons';
+import { Theme, Kind, Size, Emphasis } from '@lumx/core/js/constants';
+import { I as IconButton } from '../IconButton-10585058.js';
+import { C as Chip } from '../Chip-4c572eec.js';
+import { Icon } from './icon-2e7345ad.js';
+import { InputLabel } from './input-label-5e509a1b.js';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { m as mergeRefs } from '../mergeRefs-f0d7d6ea.js';
+import { u as useTheme } from '../ThemeContext-3181f000.js';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { Dropdown } from './dropdown-38b0b6a0.js';
+import { InputHelper } from './input-helper-e644e05e.js';
+import { u as useFocusTrap } from '../useFocusTrap-c3c6378b.js';
+import { u as useId } from '../useId-3a1facc0.js';
+import { P as Placement } from '../constants-b9e57936.js';
+
+/**
+ * Listen on element focus to store the focus status.
+ */
+function useListenFocus(ref) {
+  const [isFocus, setFocus] = useState(false);
+  useEffect(() => {
+    const {
+      current: element
+    } = ref;
+    if (!element) {
+      return undefined;
+    }
+    const onFocus = () => setFocus(true);
+    const onBlur = () => setFocus(false);
+    element.addEventListener('focus', onFocus);
+    element.addEventListener('blur', onBlur);
+    return () => {
+      element.removeEventListener('focus', onFocus);
+      element.removeEventListener('blur', onBlur);
+    };
+  }, [ref, setFocus]);
+  return isFocus;
+}
+
+/** The display name of the component. */
+const COMPONENT_NAME$2 = 'Select';
+
+/** The default class name and classes prefix for this component. */
+const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
+const WithSelectContext = (SelectElement, props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    children,
+    className,
+    focusElement,
+    isMultiple,
+    closeOnClick = !isMultiple,
+    disabled,
+    error,
+    hasError,
+    helper,
+    id,
+    isDisabled = disabled,
+    isEmpty,
+    isOpen,
+    isRequired,
+    isValid,
+    label,
+    onClear,
+    onDropdownClose,
+    onInfiniteScroll,
+    onInputClick,
+    placeholder,
+    theme = defaultTheme,
+    value,
+    variant,
+    ...forwardedProps
+  } = props;
+  const generatedSelectId = useId();
+  const selectId = id || generatedSelectId;
+  const anchorRef = useRef(null);
+  const selectRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const isFocus = useListenFocus(anchorRef);
+  const handleKeyboardNav = useCallback(evt => {
+    if ((evt.key === 'Enter' || evt.key === ' ' || evt.key === 'ArrowDown') && onInputClick) {
+      evt.preventDefault();
+      onInputClick();
+    }
+  }, [onInputClick]);
+  const onClose = () => {
+    if (onDropdownClose) {
+      onDropdownClose();
+    }
+    anchorRef?.current?.blur();
+  };
+
+  // Handle focus trap.
+  useFocusTrap(isOpen && dropdownRef.current, focusElement?.current);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: mergeRefs(ref, selectRef),
+    className: classNames(className, handleBasicClasses({
+      hasError,
+      hasLabel: Boolean(label),
+      hasPlaceholder: Boolean(placeholder),
+      hasValue: !isEmpty,
+      isDisabled,
+      isEmpty,
+      isFocus,
+      isOpen,
+      isValid,
+      prefix: CLASSNAME$2,
+      theme: theme === Theme.light ? Theme.light : Theme.dark
+    }))
+  }, /*#__PURE__*/React.createElement(SelectElement, _extends({}, forwardedProps, {
+    anchorRef: anchorRef,
+    "aria-disabled": isDisabled,
+    handleKeyboardNav: handleKeyboardNav,
+    hasError: hasError,
+    isDisabled: isDisabled,
+    isEmpty: isEmpty,
+    isRequired: isRequired,
+    isValid: isValid,
+    label: label,
+    placeholder: placeholder,
+    id: selectId,
+    theme: theme,
+    value: value,
+    variant: variant,
+    onClear: onClear,
+    onInputClick: onInputClick
+  })), /*#__PURE__*/React.createElement(Dropdown, {
+    anchorRef: anchorRef,
+    closeOnClick: closeOnClick,
+    closeOnClickAway: true,
+    closeOnEscape: true,
+    isOpen: !!isOpen,
+    placement: Placement.BOTTOM_START,
+    onClose: onClose,
+    onInfiniteScroll: onInfiniteScroll,
+    ref: dropdownRef
+  }, children), hasError && error && /*#__PURE__*/React.createElement(InputHelper, {
+    className: `${CLASSNAME$2}__helper`,
+    kind: Kind.error,
+    theme: theme
+  }, error), helper && /*#__PURE__*/React.createElement(InputHelper, {
+    className: `${CLASSNAME$2}__helper`,
+    theme: theme
+  }, helper));
+};
+
+/**
+ * Select variants.
+ */
+const SelectVariant = {
+  input: 'input',
+  chip: 'chip'
+};
+
+/** The display name of the component. */
+const COMPONENT_NAME$1 = 'Select';
+
+/** The default class name and classes prefix for this component. */
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
+
+/** The default value of props. */
+const DEFAULT_PROPS$1 = {
+  selectedValueRender: choice => choice,
+  variant: SelectVariant.input
+};
+const stopPropagation = evt => evt.stopPropagation();
+
+/**
+ * Select component.
+ */
+const SelectField = props => {
+  const defaultTheme = useTheme();
+  const {
+    anchorRef,
+    clearButtonProps,
+    handleKeyboardNav,
+    hasError,
+    hasInputClear,
+    icon,
+    id,
+    isDisabled,
+    isEmpty,
+    isRequired,
+    isValid,
+    label,
+    onClear,
+    onInputClick,
+    placeholder,
+    selectedValueRender,
+    theme = defaultTheme,
+    value,
+    variant,
+    selectElementRef,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, variant === SelectVariant.input && /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME$1}__header`
+  }, /*#__PURE__*/React.createElement(InputLabel, {
+    htmlFor: id,
+    className: `${CLASSNAME$1}__label`,
+    isRequired: isRequired,
+    theme: theme
+  }, label)), /*#__PURE__*/React.createElement("div", _extends({
+    ref: mergeRefs(anchorRef, selectElementRef),
+    id: id,
+    className: `${CLASSNAME$1}__wrapper`,
+    onClick: onInputClick,
+    onKeyDown: handleKeyboardNav,
+    tabIndex: isDisabled ? undefined : 0,
+    "aria-disabled": isDisabled || undefined
+  }, forwardedProps), icon && /*#__PURE__*/React.createElement(Icon, {
+    className: `${CLASSNAME$1}__input-icon`,
+    color: theme === Theme.dark ? 'light' : undefined,
+    icon: icon,
+    size: Size.xs
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames([`${CLASSNAME$1}__input-native`, isEmpty && placeholder && `${CLASSNAME$1}__input-native--placeholder`])
+  }, !isEmpty && /*#__PURE__*/React.createElement("span", null, selectedValueRender?.(value)), isEmpty && placeholder && /*#__PURE__*/React.createElement("span", null, placeholder)), (isValid || hasError) && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME$1}__input-validity`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: isValid ? mdiCheckCircle : mdiAlertCircle,
+    size: Size.xxs
+  })), hasInputClear && clearButtonProps && /*#__PURE__*/React.createElement(IconButton, _extends({}, clearButtonProps, {
+    className: `${CLASSNAME$1}__input-clear`,
+    icon: mdiCloseCircle,
+    emphasis: Emphasis.low,
+    size: Size.s,
+    theme: theme,
+    onClick: onClear,
+    onKeyDown: stopPropagation
+  })), /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME$1}__input-indicator`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: mdiMenuDown,
+    size: Size.s
+  })))), variant === SelectVariant.chip && /*#__PURE__*/React.createElement(Chip, _extends({
+    id: id,
+    isSelected: !isEmpty,
+    isDisabled: isDisabled,
+    after: /*#__PURE__*/React.createElement(Icon, {
+      icon: isEmpty ? mdiMenuDown : mdiCloseCircle
+    }),
+    onAfterClick: isEmpty ? onInputClick : onClear,
+    onClick: onInputClick,
+    ref: mergeRefs(anchorRef, selectElementRef),
+    theme: theme
+  }, forwardedProps), isEmpty && /*#__PURE__*/React.createElement("span", null, label), !isEmpty && /*#__PURE__*/React.createElement("span", null, selectedValueRender?.(value))));
+};
+
+/**
+ * Select component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Select = forwardRef((props, ref) => {
+  const isEmpty$1 = isEmpty(props.value);
+  const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty$1;
+  return WithSelectContext(SelectField, {
+    ...DEFAULT_PROPS$1,
+    ...props,
+    className: classNames(props.className, handleBasicClasses({
+      hasInputClear,
+      hasUnique: !props.isEmpty,
+      prefix: CLASSNAME$1
+    })),
+    hasInputClear,
+    isEmpty: isEmpty$1
+  }, ref);
+});
+Select.displayName = COMPONENT_NAME$1;
+Select.className = CLASSNAME$1;
+Select.defaultProps = DEFAULT_PROPS$1;
+Select.className = CLASSNAME$1;
+
+/** Defines the props of the component. */
+
+/** The display name of the component. */
+const COMPONENT_NAME = 'Select';
+
+/** The default class name and classes prefix for this component. */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/** The default value of props. */
+const DEFAULT_PROPS = {
+  selectedChipRender(choice, index, onClear, isDisabled, theme) {
+    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,
+      theme: theme
+    }, choice);
+  },
+  selectedValueRender: choice => choice,
+  variant: SelectVariant.input
+};
+const SelectMultipleField = props => {
+  const defaultTheme = useTheme();
+  const {
+    anchorRef,
+    handleKeyboardNav,
+    hasError,
+    icon,
+    id,
+    isDisabled,
+    isEmpty,
+    isRequired,
+    isValid,
+    label,
+    onClear,
+    onInputClick,
+    placeholder,
+    selectedChipRender,
+    selectedValueRender,
+    theme = defaultTheme,
+    value,
+    variant,
+    selectElementRef,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, variant === SelectVariant.input && /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__header`
+  }, /*#__PURE__*/React.createElement(InputLabel, {
+    htmlFor: id,
+    className: `${CLASSNAME}__label`,
+    isRequired: isRequired,
+    theme: theme
+  }, label)), /*#__PURE__*/React.createElement("div", _extends({
+    ref: mergeRefs(anchorRef, selectElementRef),
+    id: id,
+    className: `${CLASSNAME}__wrapper`,
+    onClick: onInputClick,
+    onKeyDown: handleKeyboardNav,
+    tabIndex: isDisabled ? undefined : 0,
+    "aria-disabled": isDisabled || undefined
+  }, forwardedProps), icon && /*#__PURE__*/React.createElement(Icon, {
+    className: `${CLASSNAME}__input-icon`,
+    color: theme === Theme.dark ? 'light' : undefined,
+    icon: icon,
+    size: Size.xs
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__chips`
+  }, !isEmpty && value.map((val, index) => selectedChipRender?.(val, index, onClear, isDisabled, theme))), isEmpty && placeholder && /*#__PURE__*/React.createElement("div", {
+    className: classNames([`${CLASSNAME}__input-native`, `${CLASSNAME}__input-native--placeholder`])
+  }, /*#__PURE__*/React.createElement("span", null, placeholder)), (isValid || hasError) && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__input-validity`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: isValid ? mdiCheckCircle : mdiAlertCircle,
+    size: Size.xxs
+  })), /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__input-indicator`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: mdiMenuDown,
+    size: Size.s
+  })))), variant === SelectVariant.chip && /*#__PURE__*/React.createElement(Chip, _extends({
+    id: id,
+    isSelected: !isEmpty,
+    isDisabled: isDisabled,
+    after: /*#__PURE__*/React.createElement(Icon, {
+      icon: isEmpty ? mdiMenuDown : mdiCloseCircle
+    }),
+    onAfterClick: isEmpty ? onInputClick : onClear,
+    onClick: onInputClick,
+    ref: mergeRefs(anchorRef, selectElementRef),
+    theme: theme
+  }, forwardedProps), isEmpty && /*#__PURE__*/React.createElement("span", null, label), !isEmpty && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", null, selectedValueRender?.(value[0])), value.length > 1 && /*#__PURE__*/React.createElement("span", null, "\xA0+", value.length - 1))));
+};
+
+/**
+ * SelectMultiple component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const SelectMultiple = forwardRef((props, ref) => {
+  return WithSelectContext(SelectMultipleField, {
+    ...DEFAULT_PROPS,
+    ...props,
+    className: classNames(props.className, handleBasicClasses({
+      hasMultiple: !props.isEmpty,
+      prefix: CLASSNAME
+    })),
+    isEmpty: props.value.length === 0,
+    isMultiple: true
+  }, ref);
+});
+SelectMultiple.displayName = COMPONENT_NAME;
+SelectMultiple.className = CLASSNAME;
+SelectMultiple.defaultProps = DEFAULT_PROPS;
+
+export { Select, SelectMultiple, SelectMultipleField, SelectVariant };
+//# sourceMappingURL=select-d46cfe35.js.map

package/_internal/components/select-d46cfe35.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-d46cfe35.js","sources":["../../../src/hooks/useListenFocus.tsx","../../../src/components/select/WithSelectContext.tsx","../../../src/components/select/constants.ts","../../../src/components/select/Select.tsx","../../../src/components/select/SelectMultiple.tsx"],"sourcesContent":["import { RefObject, useEffect, useState } from 'react';\n\n/**\n * Listen on element focus to store the focus status.\n */\nexport function useListenFocus(ref: RefObject<HTMLElement>) {\n    const [isFocus, setFocus] = useState(false);\n\n    useEffect(() => {\n        const { current: element } = ref;\n        if (!element) {\n            return undefined;\n        }\n\n        const onFocus = () => setFocus(true);\n        const onBlur = () => setFocus(false);\n        element.addEventListener('focus', onFocus);\n        element.addEventListener('blur', onBlur);\n        return () => {\n            element.removeEventListener('focus', onFocus);\n            element.removeEventListener('blur', onBlur);\n        };\n    }, [ref, setFocus]);\n\n    return isFocus;\n}\n","import classNames from 'classnames';\nimport { Ref, useCallback, useRef } from 'react';\n\nimport { Placement } from '@lumx/react';\nimport { Kind, Theme } from '@lumx/core/js/constants';\nimport { Dropdown } from '@lumx/react/components/dropdown/Dropdown';\nimport { InputHelper } from '@lumx/react/components/input-helper/InputHelper';\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\nimport { useListenFocus } from '@lumx/react/hooks/useListenFocus';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\n\nimport { useId } from '@lumx/react/hooks/useId';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { CoreSelectProps } from './constants';\n\n/** The display name of the component. */\nconst COMPONENT_NAME = 'Select';\n\n/** The default class name and classes prefix for this component. */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\nexport const WithSelectContext = (\n    SelectElement: React.FC<any>,\n    props: CoreSelectProps,\n    ref: Ref<HTMLDivElement>,\n): React.ReactElement => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        children,\n        className,\n        focusElement,\n        isMultiple,\n        closeOnClick = !isMultiple,\n        disabled,\n        error,\n        hasError,\n        helper,\n        id,\n        isDisabled = disabled,\n        isEmpty,\n        isOpen,\n        isRequired,\n        isValid,\n        label,\n        onClear,\n        onDropdownClose,\n        onInfiniteScroll,\n        onInputClick,\n        placeholder,\n        theme = defaultTheme,\n        value,\n        variant,\n        ...forwardedProps\n    } = props;\n    const generatedSelectId = useId();\n    const selectId = id || generatedSelectId;\n    const anchorRef = useRef<HTMLElement>(null);\n    const selectRef = useRef<HTMLDivElement>(null);\n    const dropdownRef = useRef<HTMLDivElement>(null);\n    const isFocus = useListenFocus(anchorRef);\n\n    const handleKeyboardNav = useCallback(\n        (evt: React.KeyboardEvent<HTMLElement>) => {\n            if ((evt.key === 'Enter' || evt.key === ' ' || evt.key === 'ArrowDown') && onInputClick) {\n                evt.preventDefault();\n                onInputClick();\n            }\n        },\n        [onInputClick],\n    );\n\n    const onClose = () => {\n        if (onDropdownClose) {\n            onDropdownClose();\n        }\n        anchorRef?.current?.blur();\n    };\n\n    // Handle focus trap.\n    useFocusTrap(isOpen && dropdownRef.current, focusElement?.current);\n\n    return (\n        <div\n            ref={mergeRefs(ref, selectRef)}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    hasError,\n                    hasLabel: Boolean(label),\n                    hasPlaceholder: Boolean(placeholder),\n                    hasValue: !isEmpty,\n                    isDisabled,\n                    isEmpty,\n                    isFocus,\n                    isOpen,\n                    isValid,\n                    prefix: CLASSNAME,\n                    theme: theme === Theme.light ? Theme.light : Theme.dark,\n                }),\n            )}\n        >\n            <SelectElement\n                {...forwardedProps}\n                anchorRef={anchorRef}\n                aria-disabled={isDisabled}\n                handleKeyboardNav={handleKeyboardNav}\n                hasError={hasError}\n                isDisabled={isDisabled}\n                isEmpty={isEmpty}\n                isRequired={isRequired}\n                isValid={isValid}\n                label={label}\n                placeholder={placeholder}\n                id={selectId}\n                theme={theme}\n                value={value}\n                variant={variant}\n                onClear={onClear}\n                onInputClick={onInputClick}\n            />\n            <Dropdown\n                anchorRef={anchorRef}\n                closeOnClick={closeOnClick}\n                closeOnClickAway\n                closeOnEscape\n                isOpen={!!isOpen}\n                placement={Placement.BOTTOM_START}\n                onClose={onClose}\n                onInfiniteScroll={onInfiniteScroll}\n                ref={dropdownRef}\n            >\n                {children}\n            </Dropdown>\n            {hasError && error && (\n                <InputHelper className={`${CLASSNAME}__helper`} kind={Kind.error} theme={theme}>\n                    {error}\n                </InputHelper>\n            )}\n            {helper && (\n                <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>\n                    {helper}\n                </InputHelper>\n            )}\n        </div>\n    );\n};\n","import { IconButtonProps } from '@lumx/react';\nimport { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';\nimport { ReactNode, SyntheticEvent } from 'react';\n\n/**\n * Select variants.\n */\nexport const SelectVariant = { input: 'input', chip: 'chip' } as const;\nexport type SelectVariant = ValueOf<typeof SelectVariant>;\n\nexport interface CoreSelectProps extends GenericProps, HasTheme {\n    /** Props to pass to the clear button (minus those already set by the Select props). If not specified, the button won't be displayed. */\n    clearButtonProps?: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;\n    /** Whether the select (input variant) is displayed with error style or not. */\n    hasError?: boolean;\n    /** Error message. */\n    error?: string | ReactNode;\n    /** Helper text. */\n    helper?: string;\n    /** Whether the select should close on click. */\n    closeOnClick?: boolean;\n    /** Icon (SVG path). */\n    icon?: string;\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\n    /** Whether the component is required or not. */\n    isRequired?: boolean;\n    /** Whether the component is open or not. */\n    isOpen?: boolean;\n    /** Whether the select (input variant) is displayed with valid style or not. */\n    isValid?: boolean;\n    /** Label text. */\n    label?: string;\n    /** Placeholder input text. */\n    placeholder?: string;\n    /** Select variant. */\n    variant?: SelectVariant;\n    /** On clear callback. */\n    onClear?(event: SyntheticEvent, value?: string): void;\n    /** On blur callback. */\n    onBlur?(): void;\n    /** On filter text change callback (with 500ms debounce). */\n    onFilter?(): void;\n    /** On input click callback (can be used for dropdown toggle). */\n    onInputClick?(): void;\n    /** On dropdown close callback. */\n    onDropdownClose?(): void;\n    /** On scroll end callback. */\n    onInfiniteScroll?(): void;\n    /** Render value function. Default: Renders the value as a string. */\n    selectedValueRender?(choice: string): ReactNode | string;\n    /** Children */\n    children?: React.ReactNode;\n}\n","import { RefObject } from 'react';\n\nimport classNames from 'classnames';\nimport lodashIsEmpty from 'lodash/isEmpty';\n\nimport { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';\nimport { Emphasis, Size, Theme } from '@lumx/core/js/constants';\nimport { IconButton } from '@lumx/react/components/button/IconButton';\nimport { Chip } from '@lumx/react/components/chip/Chip';\nimport { Icon } from '@lumx/react/components/icon/Icon';\nimport { InputLabel } from '@lumx/react/components/input-label/InputLabel';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { WithSelectContext } from './WithSelectContext';\nimport { CoreSelectProps, SelectVariant } from './constants';\n\n/** Defines the props of the component. */\nexport interface SelectProps extends CoreSelectProps {\n    /** Selected value. */\n    value: string;\n}\n\nexport { SelectVariant };\n\n/** The display name of the component. */\nconst COMPONENT_NAME = 'Select';\n\n/** The default class name and classes prefix for this component. */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/** The default value of props. */\nconst DEFAULT_PROPS: Partial<SelectProps> = {\n    selectedValueRender: (choice) => choice,\n    variant: SelectVariant.input,\n};\n\nconst stopPropagation = (evt: Event) => evt.stopPropagation();\n\n/**\n * Select component.\n */\nconst SelectField: React.FC<SelectProps> = (props) => {\n    const defaultTheme = useTheme();\n    const {\n        anchorRef,\n        clearButtonProps,\n        handleKeyboardNav,\n        hasError,\n        hasInputClear,\n        icon,\n        id,\n        isDisabled,\n        isEmpty,\n        isRequired,\n        isValid,\n        label,\n        onClear,\n        onInputClick,\n        placeholder,\n        selectedValueRender,\n        theme = defaultTheme,\n        value,\n        variant,\n        selectElementRef,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <>\n            {variant === SelectVariant.input && (\n                <>\n                    {label && (\n                        <div className={`${CLASSNAME}__header`}>\n                            <InputLabel\n                                htmlFor={id}\n                                className={`${CLASSNAME}__label`}\n                                isRequired={isRequired}\n                                theme={theme}\n                            >\n                                {label}\n                            </InputLabel>\n                        </div>\n                    )}\n\n                    {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n                    <div\n                        ref={mergeRefs(anchorRef as RefObject<HTMLDivElement>, selectElementRef)}\n                        id={id}\n                        className={`${CLASSNAME}__wrapper`}\n                        onClick={onInputClick}\n                        onKeyDown={handleKeyboardNav}\n                        tabIndex={isDisabled ? undefined : 0}\n                        aria-disabled={isDisabled || undefined}\n                        {...forwardedProps}\n                    >\n                        {icon && (\n                            <Icon\n                                className={`${CLASSNAME}__input-icon`}\n                                color={theme === Theme.dark ? 'light' : undefined}\n                                icon={icon}\n                                size={Size.xs}\n                            />\n                        )}\n\n                        <div\n                            className={classNames([\n                                `${CLASSNAME}__input-native`,\n                                isEmpty && placeholder && `${CLASSNAME}__input-native--placeholder`,\n                            ])}\n                        >\n                            {!isEmpty && <span>{selectedValueRender?.(value)}</span>}\n\n                            {isEmpty && placeholder && <span>{placeholder}</span>}\n                        </div>\n\n                        {(isValid || hasError) && (\n                            <div className={`${CLASSNAME}__input-validity`}>\n                                <Icon icon={isValid ? mdiCheckCircle : mdiAlertCircle} size={Size.xxs} />\n                            </div>\n                        )}\n\n                        {hasInputClear && clearButtonProps && (\n                            <IconButton\n                                {...clearButtonProps}\n                                className={`${CLASSNAME}__input-clear`}\n                                icon={mdiCloseCircle}\n                                emphasis={Emphasis.low}\n                                size={Size.s}\n                                theme={theme}\n                                onClick={onClear}\n                                onKeyDown={stopPropagation}\n                            />\n                        )}\n\n                        <div className={`${CLASSNAME}__input-indicator`}>\n                            <Icon icon={mdiMenuDown} size={Size.s} />\n                        </div>\n                    </div>\n                </>\n            )}\n\n            {variant === SelectVariant.chip && (\n                <Chip\n                    id={id}\n                    isSelected={!isEmpty}\n                    isDisabled={isDisabled}\n                    after={<Icon icon={isEmpty ? mdiMenuDown : mdiCloseCircle} />}\n                    onAfterClick={isEmpty ? onInputClick : onClear}\n                    onClick={onInputClick}\n                    ref={mergeRefs(anchorRef as RefObject<HTMLAnchorElement>, selectElementRef)}\n                    theme={theme}\n                    {...forwardedProps}\n                >\n                    {isEmpty && <span>{label}</span>}\n\n                    {!isEmpty && <span>{selectedValueRender?.(value)}</span>}\n                </Chip>\n            )}\n        </>\n    );\n};\n\n/**\n * Select component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Select = forwardRef<SelectProps, HTMLDivElement>((props, ref) => {\n    const isEmpty = lodashIsEmpty(props.value);\n    const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty;\n\n    return WithSelectContext(\n        SelectField,\n        {\n            ...DEFAULT_PROPS,\n            ...props,\n            className: classNames(\n                props.className,\n                handleBasicClasses({\n                    hasInputClear,\n                    hasUnique: !props.isEmpty,\n                    prefix: CLASSNAME,\n                }),\n            ),\n            hasInputClear,\n            isEmpty,\n        },\n        ref,\n    );\n});\nSelect.displayName = COMPONENT_NAME;\nSelect.className = CLASSNAME;\nSelect.defaultProps = DEFAULT_PROPS;\nSelect.className = CLASSNAME;\n","import { ReactNode, RefObject, SyntheticEvent } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiAlertCircle, mdiCheckCircle, mdiClose, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';\nimport { Size, Theme } from '@lumx/core/js/constants';\nimport { Chip } from '@lumx/react/components/chip/Chip';\nimport { Icon } from '@lumx/react/components/icon/Icon';\nimport { InputLabel } from '@lumx/react/components/input-label/InputLabel';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\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 { WithSelectContext } from './WithSelectContext';\nimport { CoreSelectProps, SelectVariant } from './constants';\n\n/** Defines the props of the component. */\nexport interface SelectMultipleProps extends CoreSelectProps {\n    /** Selected values. */\n    value: string[];\n    /** Selected value render function. Default: Renders the value inside of a Chip. */\n    selectedChipRender?(\n        choice: string,\n        index: number,\n        onClear?: (event: SyntheticEvent, choice: string) => void,\n        isDisabled?: boolean,\n        theme?: any,\n    ): ReactNode | string;\n}\n\n/** The display name of the component. */\nconst COMPONENT_NAME = 'Select';\n\n/** The default class name and classes prefix for this component. */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/** The default value of props. */\nconst DEFAULT_PROPS: Partial<SelectMultipleProps> = {\n    selectedChipRender(choice, index, onClear, isDisabled?, theme?) {\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                theme={theme}\n            >\n                {choice}\n            </Chip>\n        );\n    },\n    selectedValueRender: (choice) => choice,\n    variant: SelectVariant.input,\n};\n\nexport const SelectMultipleField: React.FC<SelectMultipleProps> = (props) => {\n    const defaultTheme = useTheme();\n    const {\n        anchorRef,\n        handleKeyboardNav,\n        hasError,\n        icon,\n        id,\n        isDisabled,\n        isEmpty,\n        isRequired,\n        isValid,\n        label,\n        onClear,\n        onInputClick,\n        placeholder,\n        selectedChipRender,\n        selectedValueRender,\n        theme = defaultTheme,\n        value,\n        variant,\n        selectElementRef,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <>\n            {variant === SelectVariant.input && (\n                <>\n                    {label && (\n                        <div className={`${CLASSNAME}__header`}>\n                            <InputLabel\n                                htmlFor={id}\n                                className={`${CLASSNAME}__label`}\n                                isRequired={isRequired}\n                                theme={theme}\n                            >\n                                {label}\n                            </InputLabel>\n                        </div>\n                    )}\n\n                    {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n                    <div\n                        ref={mergeRefs(anchorRef as RefObject<HTMLDivElement>, selectElementRef)}\n                        id={id}\n                        className={`${CLASSNAME}__wrapper`}\n                        onClick={onInputClick}\n                        onKeyDown={handleKeyboardNav}\n                        tabIndex={isDisabled ? undefined : 0}\n                        aria-disabled={isDisabled || undefined}\n                        {...forwardedProps}\n                    >\n                        {icon && (\n                            <Icon\n                                className={`${CLASSNAME}__input-icon`}\n                                color={theme === Theme.dark ? 'light' : undefined}\n                                icon={icon}\n                                size={Size.xs}\n                            />\n                        )}\n\n                        <div className={`${CLASSNAME}__chips`}>\n                            {!isEmpty &&\n                                value.map((val, index) => selectedChipRender?.(val, index, onClear, isDisabled, theme))}\n                        </div>\n\n                        {isEmpty && placeholder && (\n                            <div\n                                className={classNames([\n                                    `${CLASSNAME}__input-native`,\n                                    `${CLASSNAME}__input-native--placeholder`,\n                                ])}\n                            >\n                                <span>{placeholder}</span>\n                            </div>\n                        )}\n\n                        {(isValid || hasError) && (\n                            <div className={`${CLASSNAME}__input-validity`}>\n                                <Icon icon={isValid ? mdiCheckCircle : mdiAlertCircle} size={Size.xxs} />\n                            </div>\n                        )}\n\n                        <div className={`${CLASSNAME}__input-indicator`}>\n                            <Icon icon={mdiMenuDown} size={Size.s} />\n                        </div>\n                    </div>\n                </>\n            )}\n\n            {variant === SelectVariant.chip && (\n                <Chip\n                    id={id}\n                    isSelected={!isEmpty}\n                    isDisabled={isDisabled}\n                    after={<Icon icon={isEmpty ? mdiMenuDown : mdiCloseCircle} />}\n                    onAfterClick={isEmpty ? onInputClick : onClear}\n                    onClick={onInputClick}\n                    ref={mergeRefs(anchorRef as RefObject<HTMLAnchorElement>, selectElementRef)}\n                    theme={theme}\n                    {...forwardedProps}\n                >\n                    {isEmpty && <span>{label}</span>}\n\n                    {!isEmpty && (\n                        <span>\n                            <span>{selectedValueRender?.(value[0])}</span>\n\n                            {value.length > 1 && <span>&nbsp;+{value.length - 1}</span>}\n                        </span>\n                    )}\n                </Chip>\n            )}\n        </>\n    );\n};\n\n/**\n * SelectMultiple component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const SelectMultiple = forwardRef<SelectMultipleProps, HTMLDivElement>((props, ref) => {\n    return WithSelectContext(\n        SelectMultipleField,\n        {\n            ...DEFAULT_PROPS,\n            ...props,\n            className: classNames(\n                props.className,\n                handleBasicClasses({\n                    hasMultiple: !props.isEmpty,\n                    prefix: CLASSNAME,\n                }),\n            ),\n            isEmpty: props.value.length === 0,\n            isMultiple: true,\n        },\n        ref,\n    );\n});\nSelectMultiple.displayName = COMPONENT_NAME;\nSelectMultiple.className = CLASSNAME;\nSelectMultiple.defaultProps = DEFAULT_PROPS;\n"],"names":["useListenFocus","ref","isFocus","setFocus","useState","useEffect","current","element","undefined","onFocus","onBlur","addEventListener","removeEventListener","COMPONENT_NAME","CLASSNAME","getRootClassName","WithSelectContext","SelectElement","props","defaultTheme","useTheme","Theme","light","children","className","focusElement","isMultiple","closeOnClick","disabled","error","hasError","helper","id","isDisabled","isEmpty","isOpen","isRequired","isValid","label","onClear","onDropdownClose","onInfiniteScroll","onInputClick","placeholder","theme","value","variant","forwardedProps","generatedSelectId","useId","selectId","anchorRef","useRef","selectRef","dropdownRef","handleKeyboardNav","useCallback","evt","key","preventDefault","onClose","blur","useFocusTrap","React","createElement","mergeRefs","classNames","handleBasicClasses","hasLabel","Boolean","hasPlaceholder","hasValue","prefix","dark","_extends","Dropdown","closeOnClickAway","closeOnEscape","placement","Placement","BOTTOM_START","InputHelper","kind","Kind","SelectVariant","input","chip","DEFAULT_PROPS","selectedValueRender","choice","stopPropagation","SelectField","clearButtonProps","hasInputClear","icon","selectElementRef","Fragment","InputLabel","htmlFor","onClick","onKeyDown","tabIndex","Icon","color","size","Size","xs","mdiCheckCircle","mdiAlertCircle","xxs","IconButton","mdiCloseCircle","emphasis","Emphasis","low","s","mdiMenuDown","Chip","isSelected","after","onAfterClick","Select","forwardRef","lodashIsEmpty","hasUnique","displayName","defaultProps","selectedChipRender","index","event","mdiClose","SelectMultipleField","map","val","length","SelectMultiple","hasMultiple"],"mappings":";;;;;;;;;;;;;;;;;;AAEA;AACA;AACA;AACO,SAASA,cAAcA,CAACC,GAA2B,EAAE;EACxD,MAAM,CAACC,OAAO,EAAEC,QAAQ,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;AAE3CC,EAAAA,SAAS,CAAC,MAAM;IACZ,MAAM;AAAEC,MAAAA,OAAO,EAAEC,OAAAA;AAAQ,KAAC,GAAGN,GAAG,CAAA;IAChC,IAAI,CAACM,OAAO,EAAE;AACV,MAAA,OAAOC,SAAS,CAAA;AACpB,KAAA;AAEA,IAAA,MAAMC,OAAO,GAAGA,MAAMN,QAAQ,CAAC,IAAI,CAAC,CAAA;AACpC,IAAA,MAAMO,MAAM,GAAGA,MAAMP,QAAQ,CAAC,KAAK,CAAC,CAAA;AACpCI,IAAAA,OAAO,CAACI,gBAAgB,CAAC,OAAO,EAAEF,OAAO,CAAC,CAAA;AAC1CF,IAAAA,OAAO,CAACI,gBAAgB,CAAC,MAAM,EAAED,MAAM,CAAC,CAAA;AACxC,IAAA,OAAO,MAAM;AACTH,MAAAA,OAAO,CAACK,mBAAmB,CAAC,OAAO,EAAEH,OAAO,CAAC,CAAA;AAC7CF,MAAAA,OAAO,CAACK,mBAAmB,CAAC,MAAM,EAAEF,MAAM,CAAC,CAAA;KAC9C,CAAA;AACL,GAAC,EAAE,CAACT,GAAG,EAAEE,QAAQ,CAAC,CAAC,CAAA;AAEnB,EAAA,OAAOD,OAAO,CAAA;AAClB;;ACTA;AACA,MAAMW,gBAAc,GAAG,QAAQ,CAAA;;AAE/B;AACA,MAAMC,WAAS,GAAGC,gBAAgB,CAACF,gBAAc,CAAC,CAAA;AAE3C,MAAMG,iBAAiB,GAAGA,CAC7BC,aAA4B,EAC5BC,KAAsB,EACtBjB,GAAwB,KACH;EACrB,MAAMkB,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFC,QAAQ;IACRC,SAAS;IACTC,YAAY;IACZC,UAAU;IACVC,YAAY,GAAG,CAACD,UAAU;IAC1BE,QAAQ;IACRC,KAAK;IACLC,QAAQ;IACRC,MAAM;IACNC,EAAE;AACFC,IAAAA,UAAU,GAAGL,QAAQ;IACrBM,OAAO;IACPC,MAAM;IACNC,UAAU;IACVC,OAAO;IACPC,KAAK;IACLC,OAAO;IACPC,eAAe;IACfC,gBAAgB;IAChBC,YAAY;IACZC,WAAW;AACXC,IAAAA,KAAK,GAAGzB,YAAY;IACpB0B,KAAK;IACLC,OAAO;IACP,GAAGC,cAAAA;AACP,GAAC,GAAG7B,KAAK,CAAA;AACT,EAAA,MAAM8B,iBAAiB,GAAGC,KAAK,EAAE,CAAA;AACjC,EAAA,MAAMC,QAAQ,GAAGlB,EAAE,IAAIgB,iBAAiB,CAAA;AACxC,EAAA,MAAMG,SAAS,GAAGC,MAAM,CAAc,IAAI,CAAC,CAAA;AAC3C,EAAA,MAAMC,SAAS,GAAGD,MAAM,CAAiB,IAAI,CAAC,CAAA;AAC9C,EAAA,MAAME,WAAW,GAAGF,MAAM,CAAiB,IAAI,CAAC,CAAA;AAChD,EAAA,MAAMlD,OAAO,GAAGF,cAAc,CAACmD,SAAS,CAAC,CAAA;AAEzC,EAAA,MAAMI,iBAAiB,GAAGC,WAAW,CAChCC,GAAqC,IAAK;IACvC,IAAI,CAACA,GAAG,CAACC,GAAG,KAAK,OAAO,IAAID,GAAG,CAACC,GAAG,KAAK,GAAG,IAAID,GAAG,CAACC,GAAG,KAAK,WAAW,KAAKhB,YAAY,EAAE;MACrFe,GAAG,CAACE,cAAc,EAAE,CAAA;AACpBjB,MAAAA,YAAY,EAAE,CAAA;AAClB,KAAA;AACJ,GAAC,EACD,CAACA,YAAY,CACjB,CAAC,CAAA;EAED,MAAMkB,OAAO,GAAGA,MAAM;AAClB,IAAA,IAAIpB,eAAe,EAAE;AACjBA,MAAAA,eAAe,EAAE,CAAA;AACrB,KAAA;AACAW,IAAAA,SAAS,EAAE7C,OAAO,EAAEuD,IAAI,EAAE,CAAA;GAC7B,CAAA;;AAED;EACAC,YAAY,CAAC3B,MAAM,IAAImB,WAAW,CAAChD,OAAO,EAAEmB,YAAY,EAAEnB,OAAO,CAAC,CAAA;EAElE,oBACIyD,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACI/D,IAAAA,GAAG,EAAEgE,SAAS,CAAChE,GAAG,EAAEoD,SAAS,CAAE;AAC/B7B,IAAAA,SAAS,EAAE0C,UAAU,CACjB1C,SAAS,EACT2C,kBAAkB,CAAC;MACfrC,QAAQ;AACRsC,MAAAA,QAAQ,EAAEC,OAAO,CAAC/B,KAAK,CAAC;AACxBgC,MAAAA,cAAc,EAAED,OAAO,CAAC1B,WAAW,CAAC;MACpC4B,QAAQ,EAAE,CAACrC,OAAO;MAClBD,UAAU;MACVC,OAAO;MACPhC,OAAO;MACPiC,MAAM;MACNE,OAAO;AACPmC,MAAAA,MAAM,EAAE1D,WAAS;AACjB8B,MAAAA,KAAK,EAAEA,KAAK,KAAKvB,KAAK,CAACC,KAAK,GAAGD,KAAK,CAACC,KAAK,GAAGD,KAAK,CAACoD,IAAAA;AACvD,KAAC,CACL,CAAA;GAEAV,eAAAA,KAAA,CAAAC,aAAA,CAAC/C,aAAa,EAAAyD,QAAA,KACN3B,cAAc,EAAA;AAClBI,IAAAA,SAAS,EAAEA,SAAU;AACrB,IAAA,eAAA,EAAelB,UAAW;AAC1BsB,IAAAA,iBAAiB,EAAEA,iBAAkB;AACrCzB,IAAAA,QAAQ,EAAEA,QAAS;AACnBG,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,OAAO,EAAEA,OAAQ;AACjBE,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,KAAK,EAAEA,KAAM;AACbK,IAAAA,WAAW,EAAEA,WAAY;AACzBX,IAAAA,EAAE,EAAEkB,QAAS;AACbN,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBP,IAAAA,OAAO,EAAEA,OAAQ;AACjBG,IAAAA,YAAY,EAAEA,YAAAA;AAAa,GAAA,CAC9B,CAAC,eACFqB,KAAA,CAAAC,aAAA,CAACW,QAAQ,EAAA;AACLxB,IAAAA,SAAS,EAAEA,SAAU;AACrBxB,IAAAA,YAAY,EAAEA,YAAa;IAC3BiD,gBAAgB,EAAA,IAAA;IAChBC,aAAa,EAAA,IAAA;IACb1C,MAAM,EAAE,CAAC,CAACA,MAAO;IACjB2C,SAAS,EAAEC,SAAS,CAACC,YAAa;AAClCpB,IAAAA,OAAO,EAAEA,OAAQ;AACjBnB,IAAAA,gBAAgB,EAAEA,gBAAiB;AACnCxC,IAAAA,GAAG,EAAEqD,WAAAA;GAEJ/B,EAAAA,QACK,CAAC,EACVO,QAAQ,IAAID,KAAK,iBACdkC,KAAA,CAAAC,aAAA,CAACiB,WAAW,EAAA;IAACzD,SAAS,EAAE,CAAGV,EAAAA,WAAS,CAAW,QAAA,CAAA;IAACoE,IAAI,EAAEC,IAAI,CAACtD,KAAM;AAACe,IAAAA,KAAK,EAAEA,KAAAA;GACpEf,EAAAA,KACQ,CAChB,EACAE,MAAM,iBACHgC,KAAA,CAAAC,aAAA,CAACiB,WAAW,EAAA;IAACzD,SAAS,EAAE,CAAGV,EAAAA,WAAS,CAAW,QAAA,CAAA;AAAC8B,IAAAA,KAAK,EAAEA,KAAAA;GAClDb,EAAAA,MACQ,CAEhB,CAAC,CAAA;AAEd,CAAC;;AC9ID;AACA;AACA;AACO,MAAMqD,aAAa,GAAG;AAAEC,EAAAA,KAAK,EAAE,OAAO;AAAEC,EAAAA,IAAI,EAAE,MAAA;AAAO;;ACoB5D;AACA,MAAMzE,gBAAc,GAAG,QAAQ,CAAA;;AAE/B;AACA,MAAMC,WAAS,GAAGC,gBAAgB,CAACF,gBAAc,CAAC,CAAA;;AAElD;AACA,MAAM0E,eAAmC,GAAG;EACxCC,mBAAmB,EAAGC,MAAM,IAAKA,MAAM;EACvC3C,OAAO,EAAEsC,aAAa,CAACC,KAAAA;AAC3B,CAAC,CAAA;AAED,MAAMK,eAAe,GAAIjC,GAAU,IAAKA,GAAG,CAACiC,eAAe,EAAE,CAAA;;AAE7D;AACA;AACA;AACA,MAAMC,WAAkC,GAAIzE,KAAK,IAAK;AAClD,EAAA,MAAMC,YAAY,GAAGC,QAAQ,EAAE,CAAA;EAC/B,MAAM;IACF+B,SAAS;IACTyC,gBAAgB;IAChBrC,iBAAiB;IACjBzB,QAAQ;IACR+D,aAAa;IACbC,IAAI;IACJ9D,EAAE;IACFC,UAAU;IACVC,OAAO;IACPE,UAAU;IACVC,OAAO;IACPC,KAAK;IACLC,OAAO;IACPG,YAAY;IACZC,WAAW;IACX6C,mBAAmB;AACnB5C,IAAAA,KAAK,GAAGzB,YAAY;IACpB0B,KAAK;IACLC,OAAO;IACPiD,gBAAgB;IAChB,GAAGhD,cAAAA;AACP,GAAC,GAAG7B,KAAK,CAAA;EAET,oBACI6C,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAiC,QAAA,EACKlD,IAAAA,EAAAA,OAAO,KAAKsC,aAAa,CAACC,KAAK,iBAC5BtB,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAiC,QAAA,EAAA,IAAA,EACK1D,KAAK,iBACFyB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKxC,SAAS,EAAE,GAAGV,WAAS,CAAA,QAAA,CAAA;AAAW,GAAA,eACnCiD,KAAA,CAAAC,aAAA,CAACiC,UAAU,EAAA;AACPC,IAAAA,OAAO,EAAElE,EAAG;IACZR,SAAS,EAAE,CAAGV,EAAAA,WAAS,CAAU,OAAA,CAAA;AACjCsB,IAAAA,UAAU,EAAEA,UAAW;AACvBQ,IAAAA,KAAK,EAAEA,KAAAA;GAENN,EAAAA,KACO,CACX,CACR,eAGDyB,KAAA,CAAAC,aAAA,QAAAU,QAAA,CAAA;AACIzE,IAAAA,GAAG,EAAEgE,SAAS,CAACd,SAAS,EAA+B4C,gBAAgB,CAAE;AACzE/D,IAAAA,EAAE,EAAEA,EAAG;IACPR,SAAS,EAAE,CAAGV,EAAAA,WAAS,CAAY,SAAA,CAAA;AACnCqF,IAAAA,OAAO,EAAEzD,YAAa;AACtB0D,IAAAA,SAAS,EAAE7C,iBAAkB;AAC7B8C,IAAAA,QAAQ,EAAEpE,UAAU,GAAGzB,SAAS,GAAG,CAAE;AACrC,IAAA,eAAA,EAAeyB,UAAU,IAAIzB,SAAAA;GACzBuC,EAAAA,cAAc,GAEjB+C,IAAI,iBACD/B,KAAA,CAAAC,aAAA,CAACsC,IAAI,EAAA;IACD9E,SAAS,EAAE,CAAGV,EAAAA,WAAS,CAAe,YAAA,CAAA;IACtCyF,KAAK,EAAE3D,KAAK,KAAKvB,KAAK,CAACoD,IAAI,GAAG,OAAO,GAAGjE,SAAU;AAClDsF,IAAAA,IAAI,EAAEA,IAAK;IACXU,IAAI,EAAEC,IAAI,CAACC,EAAAA;AAAG,GACjB,CACJ,eAED3C,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACIxC,IAAAA,SAAS,EAAE0C,UAAU,CAAC,CAClB,GAAGpD,WAAS,CAAA,cAAA,CAAgB,EAC5BoB,OAAO,IAAIS,WAAW,IAAI,CAAG7B,EAAAA,WAAS,6BAA6B,CACtE,CAAA;AAAE,GAAA,EAEF,CAACoB,OAAO,iBAAI6B,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA,IAAA,EAAOwB,mBAAmB,GAAG3C,KAAK,CAAQ,CAAC,EAEvDX,OAAO,IAAIS,WAAW,iBAAIoB,KAAA,CAAAC,aAAA,CAAOrB,MAAAA,EAAAA,IAAAA,EAAAA,WAAkB,CACnD,CAAC,EAEL,CAACN,OAAO,IAAIP,QAAQ,kBACjBiC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKxC,SAAS,EAAE,GAAGV,WAAS,CAAA,gBAAA,CAAA;AAAmB,GAAA,eAC3CiD,KAAA,CAAAC,aAAA,CAACsC,IAAI,EAAA;AAACR,IAAAA,IAAI,EAAEzD,OAAO,GAAGsE,cAAc,GAAGC,cAAe;IAACJ,IAAI,EAAEC,IAAI,CAACI,GAAAA;AAAI,GAAE,CACvE,CACR,EAEAhB,aAAa,IAAID,gBAAgB,iBAC9B7B,KAAA,CAAAC,aAAA,CAAC8C,UAAU,EAAApC,QAAA,KACHkB,gBAAgB,EAAA;IACpBpE,SAAS,EAAE,CAAGV,EAAAA,WAAS,CAAgB,aAAA,CAAA;AACvCgF,IAAAA,IAAI,EAAEiB,cAAe;IACrBC,QAAQ,EAAEC,QAAQ,CAACC,GAAI;IACvBV,IAAI,EAAEC,IAAI,CAACU,CAAE;AACbvE,IAAAA,KAAK,EAAEA,KAAM;AACbuD,IAAAA,OAAO,EAAE5D,OAAQ;AACjB6D,IAAAA,SAAS,EAAEV,eAAAA;AAAgB,GAAA,CAC9B,CACJ,eAED3B,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKxC,SAAS,EAAE,GAAGV,WAAS,CAAA,iBAAA,CAAA;AAAoB,GAAA,eAC5CiD,KAAA,CAAAC,aAAA,CAACsC,IAAI,EAAA;AAACR,IAAAA,IAAI,EAAEsB,WAAY;IAACZ,IAAI,EAAEC,IAAI,CAACU,CAAAA;AAAE,GAAE,CACvC,CACJ,CACP,CACL,EAEArE,OAAO,KAAKsC,aAAa,CAACE,IAAI,iBAC3BvB,KAAA,CAAAC,aAAA,CAACqD,IAAI,EAAA3C,QAAA,CAAA;AACD1C,IAAAA,EAAE,EAAEA,EAAG;IACPsF,UAAU,EAAE,CAACpF,OAAQ;AACrBD,IAAAA,UAAU,EAAEA,UAAW;AACvBsF,IAAAA,KAAK,eAAExD,KAAA,CAAAC,aAAA,CAACsC,IAAI,EAAA;AAACR,MAAAA,IAAI,EAAE5D,OAAO,GAAGkF,WAAW,GAAGL,cAAAA;AAAe,KAAE,CAAE;AAC9DS,IAAAA,YAAY,EAAEtF,OAAO,GAAGQ,YAAY,GAAGH,OAAQ;AAC/C4D,IAAAA,OAAO,EAAEzD,YAAa;AACtBzC,IAAAA,GAAG,EAAEgE,SAAS,CAACd,SAAS,EAAkC4C,gBAAgB,CAAE;AAC5EnD,IAAAA,KAAK,EAAEA,KAAAA;GACHG,EAAAA,cAAc,CAEjBb,EAAAA,OAAO,iBAAI6B,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO1B,KAAY,CAAC,EAE/B,CAACJ,OAAO,iBAAI6B,KAAA,CAAAC,aAAA,CAAOwB,MAAAA,EAAAA,IAAAA,EAAAA,mBAAmB,GAAG3C,KAAK,CAAQ,CACrD,CAEZ,CAAC,CAAA;AAEX,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAM4E,MAAM,GAAGC,UAAU,CAA8B,CAACxG,KAAK,EAAEjB,GAAG,KAAK;AAC1E,EAAA,MAAMiC,SAAO,GAAGyF,OAAa,CAACzG,KAAK,CAAC2B,KAAK,CAAC,CAAA;EAC1C,MAAMgD,aAAa,GAAG3E,KAAK,CAACqB,OAAO,IAAIrB,KAAK,CAAC0E,gBAAgB,IAAI,CAAC1D,SAAO,CAAA;EAEzE,OAAOlB,iBAAiB,CACpB2E,WAAW,EACX;AACI,IAAA,GAAGJ,eAAa;AAChB,IAAA,GAAGrE,KAAK;IACRM,SAAS,EAAE0C,UAAU,CACjBhD,KAAK,CAACM,SAAS,EACf2C,kBAAkB,CAAC;MACf0B,aAAa;AACb+B,MAAAA,SAAS,EAAE,CAAC1G,KAAK,CAACgB,OAAO;AACzBsC,MAAAA,MAAM,EAAE1D,WAAAA;AACZ,KAAC,CACL,CAAC;IACD+E,aAAa;AACb3D,aAAAA,SAAAA;GACH,EACDjC,GACJ,CAAC,CAAA;AACL,CAAC,EAAC;AACFwH,MAAM,CAACI,WAAW,GAAGhH,gBAAc,CAAA;AACnC4G,MAAM,CAACjG,SAAS,GAAGV,WAAS,CAAA;AAC5B2G,MAAM,CAACK,YAAY,GAAGvC,eAAa,CAAA;AACnCkC,MAAM,CAACjG,SAAS,GAAGV,WAAS;;ACrL5B;;AAcA;AACA,MAAMD,cAAc,GAAG,QAAQ,CAAA;;AAE/B;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA,MAAM0E,aAA2C,GAAG;EAChDwC,kBAAkBA,CAACtC,MAAM,EAAEuC,KAAK,EAAEzF,OAAO,EAAEN,UAAW,EAAEW,KAAM,EAAE;IAC5D,MAAMuD,OAAO,GAAI8B,KAAuB,IAAK1F,OAAO,IAAIA,OAAO,CAAC0F,KAAK,EAAExC,MAAM,CAAC,CAAA;AAC9E,IAAA,oBACI1B,KAAA,CAAAC,aAAA,CAACqD,IAAI,EAAA;AACD3D,MAAAA,GAAG,EAAEsE,KAAM;AACXT,MAAAA,KAAK,EAAEhF,OAAO,iBAAIwB,KAAA,CAAAC,aAAA,CAACsC,IAAI,EAAA;AAACR,QAAAA,IAAI,EAAEoC,QAAS;QAAC1B,IAAI,EAAEC,IAAI,CAACI,GAAAA;AAAI,OAAE,CAAE;AAC3D5E,MAAAA,UAAU,EAAEA,UAAW;MACvBuE,IAAI,EAAEC,IAAI,CAACU,CAAE;AACbK,MAAAA,YAAY,EAAErB,OAAQ;AACtBA,MAAAA,OAAO,EAAEA,OAAQ;AACjBvD,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAA,EAEZ6C,MACC,CAAC,CAAA;GAEd;EACDD,mBAAmB,EAAGC,MAAM,IAAKA,MAAM;EACvC3C,OAAO,EAAEsC,aAAa,CAACC,KAAAA;AAC3B,CAAC,CAAA;AAEY8C,MAAAA,mBAAkD,GAAIjH,KAAK,IAAK;AACzE,EAAA,MAAMC,YAAY,GAAGC,QAAQ,EAAE,CAAA;EAC/B,MAAM;IACF+B,SAAS;IACTI,iBAAiB;IACjBzB,QAAQ;IACRgE,IAAI;IACJ9D,EAAE;IACFC,UAAU;IACVC,OAAO;IACPE,UAAU;IACVC,OAAO;IACPC,KAAK;IACLC,OAAO;IACPG,YAAY;IACZC,WAAW;IACXoF,kBAAkB;IAClBvC,mBAAmB;AACnB5C,IAAAA,KAAK,GAAGzB,YAAY;IACpB0B,KAAK;IACLC,OAAO;IACPiD,gBAAgB;IAChB,GAAGhD,cAAAA;AACP,GAAC,GAAG7B,KAAK,CAAA;EAET,oBACI6C,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAiC,QAAA,EACKlD,IAAAA,EAAAA,OAAO,KAAKsC,aAAa,CAACC,KAAK,iBAC5BtB,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAiC,QAAA,EAAA,IAAA,EACK1D,KAAK,iBACFyB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKxC,SAAS,EAAE,GAAGV,SAAS,CAAA,QAAA,CAAA;AAAW,GAAA,eACnCiD,KAAA,CAAAC,aAAA,CAACiC,UAAU,EAAA;AACPC,IAAAA,OAAO,EAAElE,EAAG;IACZR,SAAS,EAAE,CAAGV,EAAAA,SAAS,CAAU,OAAA,CAAA;AACjCsB,IAAAA,UAAU,EAAEA,UAAW;AACvBQ,IAAAA,KAAK,EAAEA,KAAAA;GAENN,EAAAA,KACO,CACX,CACR,eAGDyB,KAAA,CAAAC,aAAA,QAAAU,QAAA,CAAA;AACIzE,IAAAA,GAAG,EAAEgE,SAAS,CAACd,SAAS,EAA+B4C,gBAAgB,CAAE;AACzE/D,IAAAA,EAAE,EAAEA,EAAG;IACPR,SAAS,EAAE,CAAGV,EAAAA,SAAS,CAAY,SAAA,CAAA;AACnCqF,IAAAA,OAAO,EAAEzD,YAAa;AACtB0D,IAAAA,SAAS,EAAE7C,iBAAkB;AAC7B8C,IAAAA,QAAQ,EAAEpE,UAAU,GAAGzB,SAAS,GAAG,CAAE;AACrC,IAAA,eAAA,EAAeyB,UAAU,IAAIzB,SAAAA;GACzBuC,EAAAA,cAAc,GAEjB+C,IAAI,iBACD/B,KAAA,CAAAC,aAAA,CAACsC,IAAI,EAAA;IACD9E,SAAS,EAAE,CAAGV,EAAAA,SAAS,CAAe,YAAA,CAAA;IACtCyF,KAAK,EAAE3D,KAAK,KAAKvB,KAAK,CAACoD,IAAI,GAAG,OAAO,GAAGjE,SAAU;AAClDsF,IAAAA,IAAI,EAAEA,IAAK;IACXU,IAAI,EAAEC,IAAI,CAACC,EAAAA;AAAG,GACjB,CACJ,eAED3C,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKxC,SAAS,EAAE,GAAGV,SAAS,CAAA,OAAA,CAAA;AAAU,GAAA,EACjC,CAACoB,OAAO,IACLW,KAAK,CAACuF,GAAG,CAAC,CAACC,GAAG,EAAEL,KAAK,KAAKD,kBAAkB,GAAGM,GAAG,EAAEL,KAAK,EAAEzF,OAAO,EAAEN,UAAU,EAAEW,KAAK,CAAC,CACzF,CAAC,EAELV,OAAO,IAAIS,WAAW,iBACnBoB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACIxC,SAAS,EAAE0C,UAAU,CAAC,CAClB,CAAA,EAAGpD,SAAS,CAAA,cAAA,CAAgB,EAC5B,CAAA,EAAGA,SAAS,CAAA,2BAAA,CAA6B,CAC5C,CAAA;AAAE,GAAA,eAEHiD,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA,IAAA,EAAOrB,WAAkB,CACxB,CACR,EAEA,CAACN,OAAO,IAAIP,QAAQ,kBACjBiC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKxC,SAAS,EAAE,GAAGV,SAAS,CAAA,gBAAA,CAAA;AAAmB,GAAA,eAC3CiD,KAAA,CAAAC,aAAA,CAACsC,IAAI,EAAA;AAACR,IAAAA,IAAI,EAAEzD,OAAO,GAAGsE,cAAc,GAAGC,cAAe;IAACJ,IAAI,EAAEC,IAAI,CAACI,GAAAA;AAAI,GAAE,CACvE,CACR,eAED9C,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKxC,SAAS,EAAE,GAAGV,SAAS,CAAA,iBAAA,CAAA;AAAoB,GAAA,eAC5CiD,KAAA,CAAAC,aAAA,CAACsC,IAAI,EAAA;AAACR,IAAAA,IAAI,EAAEsB,WAAY;IAACZ,IAAI,EAAEC,IAAI,CAACU,CAAAA;AAAE,GAAE,CACvC,CACJ,CACP,CACL,EAEArE,OAAO,KAAKsC,aAAa,CAACE,IAAI,iBAC3BvB,KAAA,CAAAC,aAAA,CAACqD,IAAI,EAAA3C,QAAA,CAAA;AACD1C,IAAAA,EAAE,EAAEA,EAAG;IACPsF,UAAU,EAAE,CAACpF,OAAQ;AACrBD,IAAAA,UAAU,EAAEA,UAAW;AACvBsF,IAAAA,KAAK,eAAExD,KAAA,CAAAC,aAAA,CAACsC,IAAI,EAAA;AAACR,MAAAA,IAAI,EAAE5D,OAAO,GAAGkF,WAAW,GAAGL,cAAAA;AAAe,KAAE,CAAE;AAC9DS,IAAAA,YAAY,EAAEtF,OAAO,GAAGQ,YAAY,GAAGH,OAAQ;AAC/C4D,IAAAA,OAAO,EAAEzD,YAAa;AACtBzC,IAAAA,GAAG,EAAEgE,SAAS,CAACd,SAAS,EAAkC4C,gBAAgB,CAAE;AAC5EnD,IAAAA,KAAK,EAAEA,KAAAA;GACHG,EAAAA,cAAc,GAEjBb,OAAO,iBAAI6B,KAAA,CAAAC,aAAA,CAAO1B,MAAAA,EAAAA,IAAAA,EAAAA,KAAY,CAAC,EAE/B,CAACJ,OAAO,iBACL6B,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA,IAAA,eACID,KAAA,CAAAC,aAAA,CAAOwB,MAAAA,EAAAA,IAAAA,EAAAA,mBAAmB,GAAG3C,KAAK,CAAC,CAAC,CAAC,CAAQ,CAAC,EAE7CA,KAAK,CAACyF,MAAM,GAAG,CAAC,iBAAIvE,KAAA,CAAAC,aAAA,CAAM,MAAA,EAAA,IAAA,EAAA,OAAO,EAACnB,KAAK,CAACyF,MAAM,GAAG,CAAQ,CACxD,CAER,CAEZ,CAAC,CAAA;AAEX,EAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,cAAc,GAAGb,UAAU,CAAsC,CAACxG,KAAK,EAAEjB,GAAG,KAAK;EAC1F,OAAOe,iBAAiB,CACpBmH,mBAAmB,EACnB;AACI,IAAA,GAAG5C,aAAa;AAChB,IAAA,GAAGrE,KAAK;IACRM,SAAS,EAAE0C,UAAU,CACjBhD,KAAK,CAACM,SAAS,EACf2C,kBAAkB,CAAC;AACfqE,MAAAA,WAAW,EAAE,CAACtH,KAAK,CAACgB,OAAO;AAC3BsC,MAAAA,MAAM,EAAE1D,SAAAA;AACZ,KAAC,CACL,CAAC;AACDoB,IAAAA,OAAO,EAAEhB,KAAK,CAAC2B,KAAK,CAACyF,MAAM,KAAK,CAAC;AACjC5G,IAAAA,UAAU,EAAE,IAAA;GACf,EACDzB,GACJ,CAAC,CAAA;AACL,CAAC,EAAC;AACFsI,cAAc,CAACV,WAAW,GAAGhH,cAAc,CAAA;AAC3C0H,cAAc,CAAC/G,SAAS,GAAGV,SAAS,CAAA;AACpCyH,cAAc,CAACT,YAAY,GAAGvC,aAAa;;;;"}

package/_internal/{b477da26.js → components/side-navigation-75b22f19.js}

@@ -1,15 +1,19 @@
+import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
 import { Children } from 'react';
-import { m as getRootClassName, n as forwardRef, l as classNames, b as Theme, d as Emphasis, c as Size } from './6589b796.js';
-import { i as isComponent } from './78df9309.js';
-import { u as useTheme } from './3181f000.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { i as isComponent } from '../isComponent-78df9309.js';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { u as useTheme } from '../ThemeContext-3181f000.js';
 import isEmpty from 'lodash/isEmpty';
-import { h as handleBasicClasses } from './e2afb13f.js';
-import { u as useId } from './3a1facc0.js';
-import { R as RawClickable } from './2c2b6a89.js';
-import { I as Icon } from './8ab42752.js';
-import { I as IconButton } from './0a490b07.js';
-import { m as mdiChevronUp, a as mdiChevronDown } from './0b9c76cb.js';
+import { mdiChevronUp, mdiChevronDown } from '@lumx/icons';
+import { u as useId } from '../useId-3a1facc0.js';
+import { R as RawClickable } from '../RawClickable-c76bbc4c.js';
+import { Theme, Emphasis, Size } from '@lumx/core/js/constants';
+import { Icon } from './icon-2e7345ad.js';
+import { I as IconButton } from '../IconButton-10585058.js';
+
+/**
+ * Defines the props of the component.
+ */
 
 /**
  * Component display name.
@@ -37,16 +41,19 @@ const SideNavigation = forwardRef((props, ref) => {
     ...forwardedProps
   } = props;
   const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
-  return /*#__PURE__*/jsx("ul", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames(className, theme === Theme.dark && 'lumx-color-font-light-N', CLASSNAME$1),
-    children: content
-  });
+  return /*#__PURE__*/React.createElement("ul", _extends({
+    ref: ref
+  }, forwardedProps, {
+    className: classNames(className, theme === Theme.dark && 'lumx-color-font-light-N', CLASSNAME$1)
+  }), content);
 });
 SideNavigation.displayName = COMPONENT_NAME$1;
 SideNavigation.className = CLASSNAME$1;
 
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -100,65 +107,53 @@ const SideNavigationItem = forwardRef((props, ref) => {
     // Associate with content ID only if in DOM (shown or hidden and not unmounted)
     ariaProps['aria-controls'] = showChildren || closeMode === 'hide' ? contentId : undefined;
   }
-  return /*#__PURE__*/jsxs("li", {
-    ref: ref,
-    ...forwardedProps,
+  return /*#__PURE__*/React.createElement("li", _extends({
+    ref: ref
+  }, forwardedProps, {
     className: classNames(className, handleBasicClasses({
       emphasis,
       isOpen: showChildren,
       isSelected,
       prefix: CLASSNAME
-    })),
-    children: [shouldSplitActions ? /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME}__wrapper`,
-      children: [/*#__PURE__*/jsxs(RawClickable, {
-        as: linkAs || (linkProps?.href ? 'a' : 'button'),
-        ...linkProps,
-        className: `${CLASSNAME}__link`,
-        onClick: onClick,
-        children: [icon && /*#__PURE__*/jsx(Icon, {
-          className: `${CLASSNAME}__icon`,
-          icon: icon,
-          size: Size.xs
-        }), /*#__PURE__*/jsx("span", {
-          children: label
-        })]
-      }), /*#__PURE__*/jsx(IconButton, {
-        ...toggleButtonProps,
-        className: `${CLASSNAME}__toggle`,
-        icon: isOpen ? mdiChevronUp : mdiChevronDown,
-        size: Size.m,
-        emphasis: Emphasis.low,
-        onClick: onActionClick,
-        ...ariaProps
-      })]
-    }) : /*#__PURE__*/jsxs(RawClickable, {
-      as: linkAs || (linkProps?.href ? 'a' : 'button'),
-      ...linkProps,
-      className: `${CLASSNAME}__link`,
-      onClick: onClick,
-      ...ariaProps,
-      children: [icon && /*#__PURE__*/jsx(Icon, {
-        className: `${CLASSNAME}__icon`,
-        icon: icon,
-        size: Size.xs
-      }), /*#__PURE__*/jsx("span", {
-        children: label
-      }), hasContent && /*#__PURE__*/jsx(Icon, {
-        className: `${CLASSNAME}__chevron`,
-        icon: isOpen ? mdiChevronUp : mdiChevronDown,
-        size: Size.xs
-      })]
-    }), (closeMode === 'hide' || showChildren) && /*#__PURE__*/jsx("ul", {
-      className: `${CLASSNAME}__children`,
-      id: contentId,
-      children: content
-    })]
-  });
+    }))
+  }), shouldSplitActions ? /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__wrapper`
+  }, /*#__PURE__*/React.createElement(RawClickable, _extends({
+    as: linkAs || (linkProps?.href ? 'a' : 'button')
+  }, linkProps, {
+    className: `${CLASSNAME}__link`,
+    onClick: onClick
+  }), icon && /*#__PURE__*/React.createElement(Icon, {
+    className: `${CLASSNAME}__icon`,
+    icon: icon,
+    size: Size.xs
+  }), /*#__PURE__*/React.createElement("span", null, label)), /*#__PURE__*/React.createElement(IconButton, _extends({}, toggleButtonProps, {
+    className: `${CLASSNAME}__toggle`,
+    icon: isOpen ? mdiChevronUp : mdiChevronDown,
+    size: Size.m,
+    emphasis: Emphasis.low,
+    onClick: onActionClick
+  }, ariaProps))) : /*#__PURE__*/React.createElement(RawClickable, _extends({
+    as: linkAs || (linkProps?.href ? 'a' : 'button')
+  }, linkProps, {
+    className: `${CLASSNAME}__link`,
+    onClick: onClick
+  }, ariaProps), icon && /*#__PURE__*/React.createElement(Icon, {
+    className: `${CLASSNAME}__icon`,
+    icon: icon,
+    size: Size.xs
+  }), /*#__PURE__*/React.createElement("span", null, label), hasContent && /*#__PURE__*/React.createElement(Icon, {
+    className: `${CLASSNAME}__chevron`,
+    icon: isOpen ? mdiChevronUp : mdiChevronDown,
+    size: Size.xs
+  })), (closeMode === 'hide' || showChildren) && /*#__PURE__*/React.createElement("ul", {
+    className: `${CLASSNAME}__children`,
+    id: contentId
+  }, content));
 });
 SideNavigationItem.displayName = COMPONENT_NAME;
 SideNavigationItem.className = CLASSNAME;
 SideNavigationItem.defaultProps = DEFAULT_PROPS;
 
 export { SideNavigation, SideNavigationItem };
-//# sourceMappingURL=b477da26.js.map
+//# sourceMappingURL=side-navigation-75b22f19.js.map