/* @oracle/oraclejet-preact: undefined */
import { jsx, jsxs } from 'preact/jsx-runtime';
import { useRef, useCallback, useEffect, useMemo } from 'preact/hooks';
import './FormFieldContext-68eb5946.js';
import { u as useFormFieldContext } from './useFormFieldContext-626574fd.js';
import { u as useRichSelectionContext, b as useRichSelectionStartContext } from './RichSelectionStartContext-3fc472e0.js';
import { u as useCheckboxSetContext } from './CheckboxSet-140804f2.js';
import { u as useRadioSetContext, a as useRadioItemContext } from './RadioItemContext-fe419b75.js';
import { T as TruncatingText } from './TruncatingText-fd66e0e0.js';
import { c as classNames } from './classNames-4e12b00d.js';
import { styles } from './UNSAFE_RichSelectionItem/themes/RichSelectionItemStyles.css.js';
import { V as View } from './View-afe98b65.js';
import { u as useTestId } from './useTestId-9b504481.js';
import { A as AspectRatio } from './AspectRatio-bd043de6.js';
import { A as Avatar } from './Avatar-b051ab27.js';
import { C as Center } from './Center-76b761ea.js';
import { F as Flex } from './Flex-ce31b351.js';
import { u as useId } from './useId-03dbfdf0.js';
import './FormContext-4d71f9c7.js';
import { u as useFormContext } from './useFormContext-875cacd7.js';
import { u as usePress } from './usePress-051f5adb.js';
import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
import { u as useInteractionStyle } from './useInteractionStyle-52222fdd.js';
import './TabbableModeContext-7d8ad946.js';
import { u as useTabbableMode } from './useTabbableMode-a3a351d0.js';
import { S as StyledCheckbox } from './StyledCheckbox-4451bc4a.js';
import { S as SvgCheck } from './Check-95f3d617.js';
import { S as SvgRadioButtonOff } from './RadioButtonOff-80fea9f3.js';
import { S as SvgRadioButtonOn } from './RadioButtonOn-b5b77d41.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 useFocusableTextField } from './useFocusableTextField-8fe41cd4.js';
import { S as StyledCard } from './StyledCard-362bd74b.js';
import 'preact';
import 'preact/compat';
import './useFormFieldContextProps-d07cd618.js';
import './CheckboxSetStyles.styles.css';
import './CheckboxRadioField-294463ba.js';
import './useCollectionFocusRing-de20f4fc.js';
import './collectionUtils-8a9d80a3.js';
import './keys-49c92dbb.js';
import './clientHints-f850225e.js';
import './useTranslationBundle-09302c20.js';
import './LayerHost-e6402730.js';
import './Common/themes/redwood/theme.js';
import './Common/themes/themeContract.css.js';
import './UNSAFE_Layer/themes/LayerHostStyles.css.js';
import './LayerHostStyles.styles.css';
import './Label-25eba25e.js';
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 './TooltipContentStyles.styles.css';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
import './TooltipContentVariants.styles.css';
import './tooltipUtils-768450a7.js';
import './EnvironmentProvider-bada8909.js';
import './LayerManager-fa745cec.js';
import './Floating-f02677ba.js';
import './useFloating-953362cf.js';
import './useUser-1cd223a9.js';
import './positionUtils-f26caad9.js';
import './refUtils-b9d8d91a.js';
import './useOutsideClick-fd9ad806.js';
import './arrayUtils-35a58161.js';
import './Layer-446bf21e.js';
import './UNSAFE_Layer/themes/LayerStyles.css.js';
import './LayerStyles.styles.css';
import './useThemeInterpolations-8dd8029f.js';
import './useColorScheme-c4e237ad.js';
import './useScale-83881775.js';
import './theme-63551f30.js';
import './Theme-e6dec6db.js';
import './mergeInterpolations-e2db2a66.js';
import './mergeDeepWithKey-08531060.js';
import './_curry3-0b4222d7.js';
import './_curry1-25297e59.js';
import './_curry2-34316bcf.js';
import './_isObject-1fab0f5b.js';
import './useDensity-c17603b2.js';
import './useModal-953082f2.js';
import './utils-a4102e03.js';
import './colorUtils-16eb823f.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-2955d60a.js';
import './UNSAFE_Floating/themes/FloatingContract.css.js';
import './IconStyle.styles.css';
import './IconButton-19fcf0a8.js';
import './BaseButton-61f6baa8.js';
import './usePressClick-945cc43b.js';
import './useHover-19340c22.js';
import './useToggle-8b7fcefe.js';
import './useActive-fb6d4d52.js';
import './dimensions-d4159ace.js';
import './size-18139a3a.js';
import './mergeProps-88ea8306.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 './ButtonLabelLayout-e9f8cbc0.js';
import './Text-f8d4ff78.js';
import './UNSAFE_Text/themes/TextStyles.css.js';
import './TextStyles.styles.css';
import './useButtonLabelLayoutTheme-a1b95a52.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 './useTooltip-89ca3f3e.js';
import './useFocus-38c95977.js';
import './useTouch-4828df25.js';
import './useAnimation-a5eb7604.js';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentTheme.js';
import './hooks/UNSAFE_useTooltip/themes/TooltipContentStyles.css.js';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.css.js';
import './logger-c92f309c.js';
import './buttonUtils-be059939.js';
import './id-83adac50.js';
import './MessageStyles.styles.css';
import './MessageFormattingUtils-34c9b1aa.js';
import './getLocale-1c41e86a.js';
import './stringUtils-16f617bc.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-d8bf7f4d.js';
import './tabbableUtils-6ceb767f.js';
import './head-6f17c50c.js';
import './_arity-be492b9e.js';
import './_isArray-694cc52d.js';
import './_isString-675f1de9.js';
import './FocusTrap-9e80c124.js';
import './FocusTracker-3d6ef02a.js';
import './PRIVATE_FocusTracker/themes/FocusTrackerStyles.css.js';
import './FocusTrackerStyles.styles.css';
import './Modal-24a0bf4b.js';
import './UNSAFE_Modal/themes/ModalStyles.css.js';
import './ModalStyles.styles.css';
import './popupUtils-58411a98.js';
import './WindowOverlay-a07b2e24.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-f017bc43.js';
import './useAnimationStatus-a9337dd8.js';
import './popupAnimationUtils-175151d9.js';
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 './UNSAFE_Separator/themes/SeparatorStyles.css.js';
import './SeparatorStyles.styles.css';
import './CompactLabelAssistance-fd3fb481.js';
import './CompactHelpSource-c3044924.js';
import './Help-ccf80cd6.js';
import './Icon-030b6dd4.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 './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-da344cfa.js';
import './InlineHelpSource-5ed4bb7d.js';
import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceTheme.js';
import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceBaseTheme.css.js';
import './InlineUserAssistance-65ca8810.js';
import './ComponentMessageContainer-13005c12.js';
import './MessagesManager-91ade5dc.js';
import './SuccessS-a7dda885.js';
import './ErrorS-6a705f7c.js';
import './InformationS-820fef0c.js';
import './WarningS-59b6c304.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-cf673ef0.js';
import './useMessageSeverity-65295e8f.js';
import './CheckboxRadioFieldStyles.styles.css';
import './CheckboxRadioContext-fe425383.js';
import './LayoutStyles.css-8a60c28c.js';
import './LayoutStyles.styles.css';
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 './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-d4881d3b.js';
import './LabelValueLayoutStyles.styles.css';
import './CheckboxRadioLabelValueLayoutStyles.styles.css';
import './useTooltipOnTruncation-175bf8a6.js';
import './useDetectTruncation-2d400634.js';
import './useResizeObserver-838164c1.js';
import './useVisAddBusyState-994e0324.js';
import './VisBusyStateContext-9ae84b1d.js';
import './useVisBusyStateContext-a1df0764.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 './colors-170180bf.js';
import './padding-28c96aec.js';
import './aria-efa0582c.js';
import './equals-160da165.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.styles2.css';
import './ImageVars.css-7b3180c8.js';
import './boxalignment-a90bc50d.js';
import './boxalignment.styles.css';
import './flexbox-529f25da.js';
import './flexbox.styles.css';
import './FlexStyles.styles.css';
import './CheckboxOff-60929345.js';
import './CheckboxOn-ecf8013a.js';
import './CheckboxMixed-4c45b354.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 './CollectionInteractionContext-7cf19abc.js';
import './useCollectionInteractionContext-3895c632.js';
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.styles2.css';
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 = ({ value, inputRef, inputReadonlyRef, isFocus, isDisabled, isLayoutXL, isReadonly, isSelected, describedBy, labelledBy, testId, onBlur, onFocus }) => {
    const { name, value: radioGroupValue, onCommit } = useRadioSetContext();
    const testIdProps = useTestId(testId);
    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(() => {
        if (isFocus) {
            spanRef?.current?.scrollIntoView({ block: 'nearest' });
        }
    }, [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 hiddenInput = (jsx(HiddenAccessible, { children: jsx("input", { type: "radio", name: name, value: value, ...(!isReadonly &&
                !isDisabled && {
                onChange: onChangeHandler
            }), checked: isSelected, disabled: isDisabled, "aria-labelledby": labelledBy, "aria-describedby": describedBy, tabIndex: tabIndex, onBlur: onBlur, onFocus: onFocus, ref: isReadonly ? inputReadonlyRef : inputRef, ...testIdProps }) }));
    // 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 = ({ value, inputRef, inputReadonlyRef, isSelected, isLayoutXL, isDisabled, isReadonly, describedBy, labelledBy, testId, onBlur, onFocus }) => {
    const { name } = useCheckboxSetContext();
    const testIdProps = useTestId(testId);
    const { isTabbable } = useTabbableMode();
    const checkboxStyles = isLayoutXL ? styles.checkboxWrapper : styles.checkboxAlign;
    // 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("input", { "aria-readonly": true, "aria-labelledby": labelledBy, "aria-describedby": describedBy, type: "checkbox", name: name, value: value, checked: false, disabled: isDisabled, tabIndex: isTabbable ? 0 : -1, onBlur: onBlur, onFocus: onFocus, ref: inputReadonlyRef, ...testIdProps }) }) }));
    }
    return (jsx("span", { class: checkboxStyles, children: jsx(StyledCheckbox, { "aria-describedby": describedBy, "aria-labelledby": labelledBy, isDisabled: isDisabled, isReadonly: isReadonly, isChecked: isSelected ? 'checked' : 'unchecked', name: name, value: value, onBlur: onBlur, onFocus: onFocus, ref: isReadonly ? inputReadonlyRef : inputRef, ...testIdProps }) }));
};

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 } = useRadioSetContext();
    const { value: checkboxGroupValue, onCommit: onCheckboxCommit } = useCheckboxSetContext();
    // 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, { onFocus: onFocusIn, onBlur: onFocusOut, value: value, inputRef: inputRef, inputReadonlyRef: inputReadonlyRef, isFocus: isFocus, isLayoutXL: isLayoutXL, isDisabled: isDisabled, isReadonly: isReadonly, isSelected: isSelected, describedBy: secondaryTextId, labelledBy: `${id}-labelled-text`, testId: testId ? `${testId}_input_radio` : undefined })) : (jsx(CheckboxControl, { 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`, testId: testId ? `${testId}_input_checkbox` : undefined })) }));
    // 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
    });
    return (jsx(StyledCard, { cursor: isEnabled ? 'pointer' : 'arrow', display: "inlineFlex", height: "100%", isDisabled: !isEnabled, isFocusWithin: isFocus, 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: () => methods.focus() } : 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
