/* @oracle/oraclejet-preact: undefined */
import { jsx, jsxs } from 'preact/jsx-runtime';
import { useRef, useCallback, useEffect, useMemo } from 'preact/hooks';
import './FormFieldContext-47ca0c20.js';
import { u as useFormFieldContext } from './useFormFieldContext-daf7a676.js';
import { u as useRichSelectionContext, b as useRichSelectionStartContext } from './RichSelectionStartContext-3fc472e0.js';
import { u as useCheckboxSetContext } from './CheckboxSet-3aab5935.js';
import { u as useRadioSetContext, a as useRadioItemContext } from './RadioItemContext-fe419b75.js';
import { T as TruncatingText } from './TruncatingText-1bf00351.js';
import { c as classNames } from './classNames-4e12b00d.js';
import { styles } from './UNSAFE_RichSelectionItem/themes/RichSelectionItemStyles.css.js';
import { V as View } from './View-5bdd9b3c.js';
import { u as useTestId } from './useTestId-f24ac480.js';
import { A as AspectRatio } from './AspectRatio-ce5f20ea.js';
import { A as Avatar } from './Avatar-b051ab27.js';
import { C as Center } from './Center-71a03e65.js';
import { F as Flex } from './Flex-03129963.js';
import { u as useId } from './useId-03dbfdf0.js';
import './FormContext-55fb8000.js';
import { u as useFormContext } from './useFormContext-bb9dc478.js';
import { u as usePress } from './usePress-051f5adb.js';
import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
import { u as useInteractionStyle } from './useInteractionStyle-99e32c23.js';
import './TabbableModeContext-7d8ad946.js';
import { u as useTabbableMode } from './useTabbableMode-090ed4b5.js';
import { S as StyledCheckbox } from './StyledCheckbox-d6c8f557.js';
import { S as SvgCheck } from './Check-ac39fe00.js';
import { S as SvgRadioButtonOff } from './RadioButtonOff-e005ab12.js';
import { S as SvgRadioButtonOn } from './RadioButtonOn-ca8fdd4a.js';
import { H as HiddenAccessible } from './HiddenAccessible-61197e7c.js';
import { radioIconVars } from './UNSAFE_RadioItem/themes/RadioIconContract.css.js';
import { radioDisabledColor, radioDefaultColor } from './UNSAFE_RadioItem/themes/RadioStyles.css.js';
import { RadioIconRedwoodTheme } from './UNSAFE_RadioItem/themes/redwood/RadioIconTheme.js';
import { u as useTranslationBundle } from './useTranslationBundle-4822502f.js';
import { g as getRadioSelectionText } from './RadioItem-94909632.js';
import { u as useFocusableTextField } from './useFocusableTextField-8fe41cd4.js';
import { S as StyledCard } from './StyledCard-77623731.js';
import 'preact';
import 'preact/compat';
import './useFormFieldContextProps-31bbc12f.js';
import './CheckboxSetStyles.styles.css';
import './utils-b1eb54f9.js';
import './themeContract.css-1ffed3bf.js';
import './colorUtils-b3804ee8.js';
import './_curry1-63949a9b.js';
import './CheckboxRadioField-a387b3cb.js';
import './useCollectionFocusRing-23ac7f97.js';
import './collectionUtils-5313629f.js';
import './keys-49c92dbb.js';
import './clientHints-a42b510c.js';
import './Selector-23bccbe7.js';
import './BaseSelector-7cbc48bc.js';
import './useActive-fb6d4d52.js';
import './useToggle-8b7fcefe.js';
import './useFocus-38c95977.js';
import './useHover-85077adb.js';
import './mergeProps-88ea8306.js';
import './PRIVATE_BaseSelector/themes/SelectorStyles.css.js';
import './SelectorStyles.styles.css';
import './CollectionInteractionContext-7cf19abc.js';
import './useCollectionInteractionContext-3895c632.js';
import './Label-5d1ae8d7.js';
import './LayerHost-7931b424.js';
import './index-aec1cc7f.js';
import './UNSAFE_Layer/themes/LayerHostStyles.css.js';
import './LayerHostStyles.styles.css';
import './UserAssistanceStyles.styles.css';
import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceBaseTheme.styles.css';
import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css.js';
import './vanilla-extract-recipes-createRuntimeFn.esm-2aaf8c98.js';
import './MessageBannerStyles.styles.css';
import './UNSAFE_MessageBanner/themes/redwood/MessageBannerBaseTheme.styles.css';
import './UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.js';
import './MessageBannerVariants.styles.css';
import './useTooltip-94af94d4.js';
import './useTooltipControlled-f2cfa454.js';
import './useTouch-4828df25.js';
import './useAnimation-fe39685e.js';
import './useThemeInterpolations-e144e8ec.js';
import './useColorScheme-c4f6caab.js';
import './useScale-434ad939.js';
import './theme-63551f30.js';
import './Theme-e6dec6db.js';
import './mergeInterpolations-30cd9a69.js';
import './mergeDeepWithKey-33e3d1be.js';
import './_curry3-577eb45e.js';
import './_curry2-01c87f61.js';
import './_isObject-1fab0f5b.js';
import './useDensity-1acb0153.js';
import './unsafeDomAccess-453eb74e.js';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentTheme.js';
import './hooks/UNSAFE_useTooltip/themes/TooltipContentStyles.css.js';
import './TooltipContentStyles.styles.css';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.css.js';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
import './TooltipContentVariants.styles.css';
import './tooltipUtils-af0abd38.js';
import './EnvironmentProvider-6a0a8212.js';
import './LayerManager-52a26c55.js';
import './Floating-4a82db94.js';
import './useFloating-b9d680f7.js';
import './useUser-06d34d19.js';
import './positionUtils-f26caad9.js';
import './refUtils-76275c69.js';
import './useOutsideClick-b777a43e.js';
import './arrayUtils-35a58161.js';
import './Layer-535577b5.js';
import './UNSAFE_Layer/themes/LayerStyles.css.js';
import './LayerStyles.styles.css';
import './useModal-953082f2.js';
import './UNSAFE_Floating/themes/redwood/FloatingTheme.js';
import './UNSAFE_Floating/themes/FloatingStyles.css.js';
import './FloatingStyles.styles.css';
import './UNSAFE_Floating/themes/redwood/FloatingBaseTheme.css.js';
import './UNSAFE_Floating/themes/redwood/FloatingBaseTheme.styles.css';
import './UNSAFE_Floating/themes/redwood/FloatingVariants.css.js';
import './vanilla-extract-dynamic.esm-c909758c.js';
import './UNSAFE_Floating/themes/FloatingContract.css.js';
import './useUnsafeDomElementRef-32290273.js';
import './IconStyle.styles.css';
import './IconButton-7f91481c.js';
import './BaseButton-41068c85.js';
import './dimensions-e4fbc23d.js';
import './size-af1e638c.js';
import './UNSAFE_BaseButton/themes/redwood/BaseButtonTheme.js';
import './UNSAFE_BaseButton/themes/BaseButtonStyles.css.js';
import './BaseButtonStyles.styles.css';
import './UNSAFE_BaseButton/themes/redwood/BaseButtonVariants.css.js';
import './UNSAFE_BaseButton/themes/redwood/BaseButtonBaseTheme.styles.css';
import './BareButton-1e3df7cb.js';
import './useBareButton-ff4bd21e.js';
import './usePressClick-945cc43b.js';
import './buttonUtils-55fb1df7.js';
import './id-83adac50.js';
import './ButtonLabelLayout-1631c997.js';
import './Text-834eb35e.js';
import './UNSAFE_Text/themes/TextStyles.css.js';
import './TextStyles.styles.css';
import './useButtonLabelLayoutTheme-448e671d.js';
import './UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutTheme.js';
import './UNSAFE_ButtonLabelLayout/themes/ButtonLabelLayoutStyles.css.js';
import './ButtonLabelLayoutStyles.styles.css';
import './UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutBaseTheme.css.js';
import './UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutBaseTheme.styles.css';
import './UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutVariants.css.js';
import './ButtonLabelLayoutVariants.styles.css';
import './logger-c92f309c.js';
import './MessageStyles.styles.css';
import './MessageFormattingUtils-cdb25115.js';
import './getLocale-1c41e86a.js';
import './stringUtils-0fe25200.js';
import './TransitionGroup-5fd80dc9.js';
import './MessagesContext-76544845.js';
import './HiddenAccessibleStyles.styles.css';
import './ComponentMessageStyles.styles.css';
import './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageBaseTheme.styles.css';
import './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css.js';
import './InputGroupContext-20bdbd6e.js';
import './Popup-992b6c27.js';
import './tabbableUtils-c8311ec6.js';
import './head-8f89fe66.js';
import './_arity-be492b9e.js';
import './_isArray-694cc52d.js';
import './_isString-675f1de9.js';
import './FocusTrap-b59d5752.js';
import './FocusTracker-70300f1c.js';
import './PRIVATE_FocusTracker/themes/FocusTrackerStyles.css.js';
import './FocusTrackerStyles.styles.css';
import './Modal-c0f730b8.js';
import './UNSAFE_Modal/themes/ModalStyles.css.js';
import './ModalStyles.styles.css';
import './popupUtils-51366a29.js';
import './WindowOverlay-7264c44a.js';
import './UNSAFE_WindowOverlay/themes/WindowOverlayStyles.css.js';
import './WindowOverlayStyles.styles.css';
import './UNSAFE_WindowOverlay/themes/WindowOverlayContract.css.js';
import './UNSAFE_WindowOverlay/themes/redwood/WindowOverlayTheme.js';
import './UNSAFE_WindowOverlay/themes/redwood/WindowOverlayBaseTheme.css.js';
import './UNSAFE_WindowOverlay/themes/redwood/WindowOverlayBaseTheme.styles.css';
import './UNSAFE_WindowOverlay/themes/redwood/WindowOverlayVariants.css.js';
import './usePopupAnimation-96d2bc83.js';
import './useAnimationStatus-b881f39a.js';
import './popupAnimationUtils-175151d9.js';
import './LiveRegion-cebac18d.js';
import './LiveRegionStyles.styles.css';
import './UNSAFE_Popup/themes/PopupContract.css.js';
import './UNSAFE_Popup/themes/redwood/PopupTheme.js';
import './UNSAFE_Popup/themes/redwood/PopupBaseTheme.css.js';
import './UNSAFE_Popup/themes/redwood/PopupBaseTheme.styles.css';
import './UNSAFE_Popup/themes/redwood/PopupVariants.css.js';
import './PopupStyles.styles.css';
import './colors-03807160.js';
import './UNSAFE_Separator/themes/SeparatorStyles.css.js';
import './SeparatorStyles.styles.css';
import './CompactLabelAssistance-e2fcfcab.js';
import './Help-32a9689a.js';
import './Icon-4983d06e.js';
import './UNSAFE_Icon/themes/IconStyle.css.js';
import './useFocusWithin-30b1e2d8.js';
import './UNSAFE_UserAssistance/themes/UserAssistanceStyles.css.js';
import './UNSAFE_Label/themes/redwood/LabelTheme.js';
import './UNSAFE_Label/themes/LabelStyles.css.js';
import './LabelStyles.styles.css';
import './UNSAFE_Label/themes/redwood/LabelBaseTheme.css.js';
import './UNSAFE_Label/themes/redwood/LabelBaseTheme.styles.css';
import './UNSAFE_Label/themes/redwood/LabelVariants.css.js';
import './truncationUtils-e37f95ee.js';
import './UNSAFE_TextField/themes/redwood/TextFieldTheme.js';
import './UNSAFE_TextField/themes/TextFieldStyles.css.js';
import './SkeletonStyles.styles.css';
import './TextFieldLoadingStyles.styles.css';
import './TextFieldStyles.styles.css';
import './UNSAFE_TextField/themes/redwood/TextFieldBaseTheme.css.js';
import './UNSAFE_TextField/themes/redwood/TextFieldBaseTheme.styles.css';
import './UNSAFE_TextField/themes/redwood/TextFieldVariants.css.js';
import './TextFieldVariants.styles.css';
import './InlineHelp-9eaac91c.js';
import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceTheme.js';
import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceBaseTheme.css.js';
import './InlineUserAssistance-890293dd.js';
import './ComponentMessageContainer-d16c8b1f.js';
import './MessagesManager-47000438.js';
import './SuccessS-b5192d40.js';
import './ErrorS-3a890bf6.js';
import './InformationS-d53c2a91.js';
import './WarningS-3e53d87e.js';
import './PRIVATE_Message/themes/MessageStyles.css.js';
import './soundUtils-88264cb5.js';
import './useMessagesContext-9e1dbe91.js';
import './Transition-f9501682.js';
import './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageTheme.js';
import './UNSAFE_ComponentMessage/themes/ComponentMessageStyles.css.js';
import './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageBaseTheme.css.js';
import './useInputGroupContext-1d19411e.js';
import './CheckboxRadioFieldStyles.css-23f5791b.js';
import './useMessageSeverity-65295e8f.js';
import './CheckboxRadioFieldStyles.styles.css';
import './CheckboxRadioContext-fe425383.js';
import './LayoutStyles.css-6b02421a.js';
import './LayoutStyles.styles.css';
import './CheckboxRadioLabelValueLayout-e3845f16.js';
import './UNSAFE_RadioItem/themes/redwood/RadioTheme.js';
import './UNSAFE_RadioItem/themes/redwood/RadioBaseTheme.css.js';
import './UNSAFE_RadioItem/themes/redwood/RadioBaseTheme.styles.css';
import './UNSAFE_RadioItem/themes/redwood/RadioVariants.css.js';
import './RadioStyles.styles.css';
import './RadioVariants.styles.css';
import './UNSAFE_TextField/themes/redwood/FormLayoutTheme.js';
import './UNSAFE_TextField/themes/FormLayoutStyles.css.js';
import './UNSAFE_TextField/themes/redwood/FormLayoutBaseTheme.css.js';
import './UNSAFE_TextField/themes/redwood/FormLayoutBaseTheme.styles.css';
import './UNSAFE_Checkbox/themes/redwood/CheckboxTheme.js';
import './UNSAFE_Checkbox/themes/CheckboxStyles.css.js';
import './UNSAFE_Link/themes/redwood/LinkBaseTheme.styles.css';
import './CheckboxStyles.styles.css';
import './UNSAFE_Checkbox/themes/redwood/CheckboxBaseTheme.css.js';
import './UNSAFE_Checkbox/themes/redwood/CheckboxBaseTheme.styles.css';
import './UNSAFE_Checkbox/themes/redwood/CheckboxVariants.css.js';
import './CheckboxVariants.styles.css';
import './StyledLabelValueLayout-bb05f474.js';
import './LabelValueLayoutStyles.styles.css';
import './CheckboxRadioLabelValueLayoutStyles.styles.css';
import './formControlUtils-6fc3a497.js';
import './useTooltipOnTruncation-94282e75.js';
import './useDetectTruncation-071767c7.js';
import './useResizeObserver-13641643.js';
import './useAddBusyState-7a6af61f.js';
import './BusyStateContext-9ee9751d.js';
import './useBusyStateContext-4d3c27c0.js';
import './RichSelectionItemStyles.styles.css';
import './borders-98a63040.js';
import './flexitem-7b7f7920.js';
import './flexitem.styles.css';
import './vanilla-extract-sprinkles-createRuntimeSprinkles.esm-2d655d37.js';
import './padding-90265467.js';
import './aria-efa0582c.js';
import './equals-625352e8.js';
import './AspectRatioStyles.styles.css';
import './UNSAFE_Avatar/themes/redwood/AvatarTheme.js';
import './UNSAFE_Avatar/themes/AvatarStyles.css.js';
import './AvatarStyles.styles.css';
import './UNSAFE_Avatar/themes/redwood/AvatarBaseTheme.css.js';
import './ImageVars.styles.css';
import './UNSAFE_Avatar/themes/redwood/AvatarBaseTheme.styles.css';
import './UNSAFE_Avatar/themes/redwood/AvatarVariants.css.js';
import './AvatarVariants.styles.css';
import './ImageVars.css-7b3180c8.js';
import './boxalignment-8980856d.js';
import './boxalignment.styles.css';
import './flexbox-529f25da.js';
import './flexbox.styles.css';
import './FlexStyles.styles.css';
import './CheckboxOff-3359a12d.js';
import './CheckboxOn-930b64de.js';
import './CheckboxMixed-c4594250.js';
import './UNSAFE_Checkbox/themes/CheckboxIconContract.css.js';
import './UNSAFE_Checkbox/themes/redwood/CheckboxIconTheme.js';
import './UNSAFE_Checkbox/themes/CheckboxIconStyles.css.js';
import './CheckboxIconStyles.styles.css';
import './UNSAFE_Checkbox/themes/redwood/CheckboxIconBaseTheme.css.js';
import './UNSAFE_Checkbox/themes/redwood/CheckboxIconBaseTheme.styles.css';
import './UNSAFE_Checkbox/themes/redwood/CheckboxIconVariants.css.js';
import './CheckboxIconVariants.styles.css';
import './StyledCheckbox.styles.css';
import './UNSAFE_RadioItem/themes/RadioIconStyles.css.js';
import './RadioIconStyles.styles.css';
import './UNSAFE_RadioItem/themes/redwood/RadioIconBaseTheme.css.js';
import './UNSAFE_RadioItem/themes/redwood/RadioIconBaseTheme.styles.css';
import './UNSAFE_RadioItem/themes/redwood/RadioIconVariants.css.js';
import './RadioIconVariants.styles.css';
import './IconUserAssistance-61978211.js';
import './PRIVATE_StyledCard/themes/StyledCardStyles.css.js';
import './StyledCardStyles.styles.css';

// INFO: Label and SecondaryText Content handling
const RichSelectionTextContent = ({ secondaryTextId, isDisabled, isLayoutXL, label, labelId, secondaryText }) => {
    const labelContent = (jsx(TruncatingText, { variant: isDisabled ? 'disabled' : 'primary', lineClamp: isLayoutXL ? 1 : 2, id: labelId, children: label }));
    const classes = classNames([
        isLayoutXL ? styles.densityWrapper : styles.growOneColumn,
        !isLayoutXL && !secondaryText && styles.labelOnly
    ]);
    return (jsxs("div", { className: classes, children: [labelContent, secondaryText && (jsx(TruncatingText, { size: "sm", variant: isDisabled ? 'disabled' : 'secondary', lineClamp: 3, id: secondaryTextId, children: secondaryText }))] }));
};

const ThumbnailXL = ({ thumbnailSrc, mediaAccessibleLabel, testId, isDisabled }) => {
    const testIdProps = useTestId(testId ? `${testId}_thumbnail` : undefined);
    return (jsx(AspectRatio, { ratio: "4/3", children: jsx("img", { alt: mediaAccessibleLabel, className: classNames([styles.thumbnailImage, isDisabled && styles.mediaDisabledOpacity]), role: !mediaAccessibleLabel ? 'presentation' : undefined, src: thumbnailSrc, ...testIdProps }) }));
};
const Thumbnail = ({ thumbnailSrc, mediaAccessibleLabel, layout, testId, isDisabled }) => {
    const thumbnailClass = classNames([
        layout === 'md' ? styles.mdMediaVariant : styles.smMediaVariant,
        isDisabled && styles.mediaDisabledOpacity
    ]);
    const testIdProps = useTestId(testId ? `${testId}_thumbnail` : undefined);
    return (jsx("img", { alt: mediaAccessibleLabel, className: thumbnailClass, role: !mediaAccessibleLabel ? 'presentation' : undefined, src: thumbnailSrc, ...testIdProps }));
};
const MediumRenderer = ({ mediaAccessibleLabel, thumbnailSrc, layout, avatar, testId, isDisabled }) => {
    const testIdProps = useTestId(testId ? `${testId}_medium` : undefined);
    let mediumMediaItem;
    if (avatar) {
        const avatarElement = (jsx(Avatar, { ...avatar, "aria-label": mediaAccessibleLabel, size: "md", ...testIdProps }));
        mediumMediaItem = isDisabled ? (jsx("span", { className: styles.mediaDisabledOpacity, children: avatarElement })) : (avatarElement);
    }
    else {
        mediumMediaItem = (jsx(Thumbnail, { thumbnailSrc: thumbnailSrc, mediaAccessibleLabel: mediaAccessibleLabel, layout: layout, testId: testId, isDisabled: isDisabled }));
    }
    return jsx(Center, { children: mediumMediaItem });
};
const SmallRenderer = ({ avatar, iconClass, isDisabled, layout, thumbnailSrc, mediaAccessibleLabel, testId }) => {
    const testIdProps = useTestId(testId ? `${testId}_small` : undefined);
    const { iconWrapper, iconEnabledColor, iconDisabledColor, mediaDisabledOpacity } = styles;
    let smallMediaItem;
    if (avatar) {
        const avatarElement = (jsx(Avatar, { ...avatar, "aria-label": mediaAccessibleLabel, size: "xs", ...testIdProps }));
        smallMediaItem = isDisabled ? (jsx("span", { className: mediaDisabledOpacity, children: avatarElement })) : (avatarElement);
    }
    else if (thumbnailSrc) {
        smallMediaItem = (jsx(Thumbnail, { thumbnailSrc: thumbnailSrc, mediaAccessibleLabel: mediaAccessibleLabel, layout: layout, testId: testId, isDisabled: isDisabled, ...testIdProps }));
    }
    else if (iconClass) {
        const classes = classNames([
            iconClass,
            iconWrapper,
            isDisabled ? iconDisabledColor : iconEnabledColor
        ]);
        smallMediaItem = jsx("div", { class: classes, ...testIdProps });
    }
    return jsx(Center, { children: smallMediaItem });
};
// INFO: Media Item handling
const RichSelectionMediaItem = ({ avatar, iconClass, isDisabled, hasSecondaryText, mediaAccessibleLabel, layout, thumbnailSrc, testId }) => {
    if (!layout) {
        return null;
    }
    switch (layout) {
        case 'xl':
            return (jsx(ThumbnailXL, { thumbnailSrc: thumbnailSrc, mediaAccessibleLabel: mediaAccessibleLabel, testId: testId, isDisabled: isDisabled }));
        case 'md':
            const mediumMedia = avatar ? { avatar } : thumbnailSrc ? { thumbnailSrc } : undefined;
            return (jsx(View, { alignSelf: hasSecondaryText ? 'start' : 'center', children: jsx(MediumRenderer, { mediaAccessibleLabel: mediaAccessibleLabel, layout: layout, testId: testId, isDisabled: isDisabled, ...mediumMedia }) }));
        case 'sm':
            const smallMedia = avatar
                ? { avatar, mediaAccessibleLabel }
                : thumbnailSrc
                    ? { thumbnailSrc, mediaAccessibleLabel }
                    : iconClass
                        ? { iconClass }
                        : undefined;
            return (jsx(View, { alignSelf: hasSecondaryText ? 'start' : 'center', children: jsx(SmallRenderer, { ...smallMedia, layout: layout, testId: testId, isDisabled: isDisabled }) }));
        default:
            return null;
    }
};

const RadioControl = ({ ariaLabel, value, inputRef, isFocus, isDisabled, isLayoutXL, isReadonly, isSelected, describedBy, labelledBy, onBlur, onFocus }) => {
    const { name, value: radioGroupValue, onCommit, setFocusIndex } = useRadioSetContext();
    const IconComp = isReadonly
        ? isSelected
            ? SvgCheck
            : SvgRadioButtonOff
        : isSelected
            ? SvgRadioButtonOn
            : SvgRadioButtonOff;
    const spanRef = useRef(null);
    const { interactionProps, applyActiveStyle } = useInteractionStyle();
    const onChangeHandler = useCallback((event) => {
        event.stopPropagation();
        onCommit?.({ previousValue: radioGroupValue, value });
    }, [value, radioGroupValue, onCommit]);
    /**
     * When focused the view should have the respective RichSelectionItem.
     */
    useEffect(() => {
        const isActiveElement = document.activeElement === inputRef?.current;
        if (!isActiveElement && isFocus) {
            spanRef?.current?.scrollIntoView({ block: 'nearest' });
        }
    }, [inputRef, isFocus, spanRef]);
    const radioColor = isDisabled ? radioDisabledColor : radioDefaultColor;
    const { classes: radioIconClasses } = useComponentTheme(RadioIconRedwoodTheme, {
        disabled: isDisabled ? 'isDisabled' : 'notDisabled',
        selected: isSelected ? 'isSelected' : 'notSelected',
        active: applyActiveStyle ? 'isActive' : 'notActive',
        richSelection: isLayoutXL ? 'isLayoutXL' : 'notLayoutXL'
    });
    const { isTabbable } = useTabbableMode();
    const { index } = useRadioItemContext();
    const tabIndex = isTabbable !== false && ((index === 0 && !radioGroupValue) || isSelected) ? 0 : -1;
    const translations = useTranslationBundle('@oracle/oraclejet-preact');
    const readonlyLabel = `${ariaLabel} ${translations.formControl_readOnly()} ${getRadioSelectionText(translations, !!isSelected)}`;
    const hiddenInput = (jsx(HiddenAccessible, { children: isReadonly ? (jsx("div", { "aria-describedby": describedBy, "data-checked": isSelected, ref: inputRef, tabIndex: tabIndex, onBlur: onBlur, onFocus: (event) => {
                setFocusIndex?.(index);
                onFocus?.(event);
            }, children: readonlyLabel })) : (jsx("input", { type: "radio", name: name, value: value, ...(!isDisabled && {
                onChange: onChangeHandler
            }), checked: isSelected, disabled: isDisabled, "aria-labelledby": labelledBy, "aria-describedby": describedBy, tabIndex: tabIndex, onBlur: onBlur, onFocus: onFocus, ref: inputRef })) }));
    // Radio control is visually hidden in readonly mode unless it is selected
    if (!isSelected && isReadonly) {
        return jsx("span", { class: styles.inputElement, children: hiddenInput });
    }
    return (jsxs("span", { ref: spanRef, class: classNames([radioColor, isLayoutXL ? styles.radioWrapper : undefined]), children: [hiddenInput, jsx("span", { "aria-hidden": "true", class: radioIconClasses, ...interactionProps, children: jsx(IconComp, { size: radioIconVars.iconSize, color: "currentColor" }) })] }));
};
const CheckboxControl = ({ ariaLabel, value, inputRef, inputReadonlyRef, isSelected, isLayoutXL, isDisabled, isReadonly, describedBy, labelledBy, onBlur, onFocus }) => {
    const { name } = useCheckboxSetContext();
    const { isTabbable } = useTabbableMode();
    const translations = useTranslationBundle('@oracle/oraclejet-preact');
    const checkboxStyles = isLayoutXL ? styles.checkboxWrapper : styles.checkboxAlign;
    // JET-72374: We can't use the label content on its own for readonly because we also need to provide the state of the checkbox.
    const readonlyLabel = `${ariaLabel} ${translations.formControl_readOnly()} ${isSelected ? translations.checkbox_selected() : translations.checkbox_unselected()}`;
    // Checkbox control is visually hidden in readonly mode unless it is selected
    if (!isSelected && isReadonly) {
        return (jsx("span", { class: styles.inputElement, children: jsx(HiddenAccessible, { children: jsx("div", { onBlur: onBlur, onFocus: onFocus, ref: inputReadonlyRef, tabIndex: isTabbable ? 0 : -1, children: readonlyLabel }) }) }));
    }
    return (jsx("span", { class: checkboxStyles, children: jsx(StyledCheckbox, { "aria-describedby": describedBy, isDisabled: isDisabled, isReadonly: isReadonly, isChecked: isSelected ? 'checked' : 'unchecked', name: name, value: value, onBlur: onBlur, onFocus: onFocus, ref: isReadonly ? inputReadonlyRef : inputRef, ...(isReadonly ? { 'aria-label': readonlyLabel } : { 'aria-labelledby': labelledBy }) }) }));
};

const onMouseDown = (event) => {
    // Prevent focus from going to the body when the user clicks something within
    // the card that is not focusable. This is important because we are detecting
    // focus loss on the core pack side and showing hidden messages.
    event.preventDefault();
};
/**
 * `RichSelectionItem` is a customizable input card element used in selection interfaces. It can display a label,
 * optional secondary text, and media (such as an avatar, thumbnail, or icon). It supports both radio and checkbox
 * controls, allowing users to make a single or multiple selections, respectively. The component also handles
 * different states such as disabled, readonly, and focus, and renders dynamically based on layout( 'xl', 'md', or 'sm').
 */
const RichSelectionItem = ({ avatar, iconClass, isReadonly: propsIsReadonly, mediaAccessibleLabel, secondaryText, thumbnailSrc, label, value, testId }) => {
    const { isReadonly: isFormReadonly, isDisabled: isFormDisabled } = useFormContext();
    const styledCardRef = useRef(null);
    const inputRef = useRef(null);
    const inputReadonlyRef = useRef(null);
    const { selection, layout, messageSeverity } = useRichSelectionContext();
    const { isDisabled: isFieldDisabled, isReadonly: isFieldReadonly } = useFormFieldContext();
    const { value: radioGroupValue, onCommit: onRadioCommit, setFocusIndex } = useRadioSetContext();
    const { value: checkboxGroupValue, onCommit: onCheckboxCommit } = useCheckboxSetContext();
    const { index } = useRadioItemContext();
    // Determining selection state for error
    const styledCardVariant = messageSeverity === 'error' ? 'danger' : undefined;
    const isDisabled = isFieldDisabled ?? isFormDisabled;
    const isReadonly = isFieldReadonly || isFormReadonly || propsIsReadonly;
    const isEnabled = !isDisabled && !isReadonly;
    const id = useId();
    const isLayoutXL = layout === 'xl';
    const hasMedia = !!avatar || !!thumbnailSrc || !!iconClass;
    const labelId = `${id}-labelled-text`;
    const secondaryTextId = secondaryText ? `${id}-secondary-text` : undefined;
    const isSingleSelection = selection === 'single';
    const isSelected = isSingleSelection
        ? radioGroupValue === value
        : !!checkboxGroupValue?.has(value);
    const { isFocused: isFocus, focusProps: { onFocusIn, onFocusOut }, methods } = useFocusableTextField({
        enabledElementRef: inputRef,
        readonlyElementRef: inputReadonlyRef,
        isReadonly,
        isDisabled
    });
    // Scroll into view when the RichSelectionItem is focused
    useEffect(() => {
        if (isFocus) {
            styledCardRef?.current?.scrollIntoView({ block: 'nearest' });
        }
    }, [isFocus, styledCardRef]);
    // Text content of label and secondaryText rendering
    const textContent = (jsx(RichSelectionTextContent, { secondaryTextId: secondaryTextId, labelId: labelId, isDisabled: isDisabled, isLayoutXL: isLayoutXL, label: label, secondaryText: secondaryText }));
    // Media content rendering based on available media props respective to layout
    const media = avatar
        ? { avatar, mediaAccessibleLabel, layout: layout }
        : thumbnailSrc
            ? { thumbnailSrc, mediaAccessibleLabel, layout: layout }
            : iconClass
                ? { iconClass, layout: layout }
                : undefined;
    const mediaContent = hasMedia ? (jsx(RichSelectionMediaItem, { ...media, isDisabled: isDisabled, hasSecondaryText: !!secondaryText, testId: testId ? `${testId}_media` : undefined })) : undefined;
    // Selection control rendering (radio or checkbox)
    const selectionControl = (jsx(Flex, { align: secondaryText ? 'start' : 'center', children: isSingleSelection ? (jsx(RadioControl, { ariaLabel: label, onFocus: onFocusIn, onBlur: onFocusOut, value: value, inputRef: inputRef, isFocus: isFocus, isLayoutXL: isLayoutXL, isDisabled: isDisabled, isReadonly: isReadonly, isSelected: isSelected, describedBy: secondaryTextId, labelledBy: `${id}-labelled-text` })) : (jsx(CheckboxControl, { ariaLabel: label, onFocus: onFocusIn, onBlur: onFocusOut, value: value, inputRef: inputRef, inputReadonlyRef: inputReadonlyRef, isFocus: isFocus, isDisabled: isDisabled, isLayoutXL: isLayoutXL, isReadonly: isReadonly, isSelected: isSelected, describedBy: secondaryTextId, labelledBy: `${id}-labelled-text` })) }));
    // Handler for checkbox selection changes
    const triggerCheckBoxAction = useCallback(() => {
        // if selected from a click, we need to manually set focus on the input to allow for keyboard navigation
        methods.focus();
        const newGroupValue = new Set(checkboxGroupValue);
        // If the value is already selected, remove it; otherwise, add it
        if (newGroupValue.has(value)) {
            newGroupValue.delete(value);
        }
        else {
            newGroupValue.add(value);
        }
        onCheckboxCommit?.({
            previousValue: checkboxGroupValue,
            value: newGroupValue.size > 0 ? newGroupValue : undefined
        });
    }, [checkboxGroupValue, methods, onCheckboxCommit, value]);
    // Handler for radio selection changes
    const triggerRadioAction = useCallback(() => {
        if (radioGroupValue !== value) {
            // if selected from a click, we need to manually set focus on the input to allow for keyboard navigation
            methods.focus();
            onRadioCommit?.({
                previousValue: radioGroupValue,
                value: value
            });
        }
    }, [radioGroupValue, value, methods, onRadioCommit]);
    // due to the placement of the start label in rich selection, we need to check if the first item contains media or secondary text.
    const startData = useMemo(() => ({ hasMedia, hasSecondaryText: !!secondaryText }), [hasMedia, secondaryText]);
    const richSelectionStartContext = useRichSelectionStartContext();
    if (richSelectionStartContext?.isFirst) {
        richSelectionStartContext?.setStartData?.(startData);
    }
    // Event handlers for the interaction of the StyledCard
    const { pressProps } = usePress(isSingleSelection ? triggerRadioAction : triggerCheckBoxAction, {
        isDisabled: !isEnabled
    });
    // This is used to apply focus to the card while in readonly mode
    const onReadonlyClickHandler = useCallback(() => {
        // focus if radio
        inputRef?.current?.focus();
        setFocusIndex?.(index);
        // focus if checkbox
        inputReadonlyRef?.current?.focus();
    }, [index, setFocusIndex]);
    return (jsx(StyledCard, { cursor: isEnabled ? 'pointer' : 'arrow', display: "inlineFlex", height: "100%", isDisabled: !isEnabled, isFocusWithin: isFocus, isReadonly: isReadonly, isSelected: styledCardVariant !== 'danger' && isEnabled && isSelected, onMouseDown: onMouseDown, parentComponentVariant: "richSelectionItemCard", ref: styledCardRef, role: "listitem", styleVariant: styledCardVariant, testId: testId ? `${testId}_styled_card` : undefined, width: "100%", ...(isReadonly ? { onClick: onReadonlyClickHandler } : pressProps), children: isLayoutXL ? (jsxs(Flex, { direction: "column", height: "100%", width: "100%", children: [mediaContent, jsx("div", { class: styles.selectionElement, children: selectionControl }), textContent] })) : (jsx("div", { className: classNames([
                styles.densityWrapper,
                // if the item has a sm/md layout, without media or secondary text,
                // we need to set the min height of the card to match the start label
                !isLayoutXL &&
                    !hasMedia &&
                    !secondaryText &&
                    richSelectionStartContext !== null &&
                    styles.startMinHeight
            ]), children: jsxs(Flex, { direction: "row", gap: "4x", height: "100%", width: "100%", children: [selectionControl, textContent, mediaContent] }) })) }));
};

export { RichSelectionItem };
//# sourceMappingURL=UNSAFE_RichSelectionItem.js.map
