/* @oracle/oraclejet-preact: undefined */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('preact/jsx-runtime');
var hooks = require('preact/hooks');
require('./FormFieldContext-8418dc68.js');
var useFormFieldContext = require('./useFormFieldContext-20f419ef.js');
var RichSelectionStartContext = require('./RichSelectionStartContext-3d10f9ed.js');
var RadioItemContext = require('./RadioItemContext-3a86c17d.js');
var TruncatingText = require('./TruncatingText-c6b19242.js');
var classNames = require('./classNames-c14c6ef3.js');
var UNSAFE_RichSelectionItem_themes_RichSelectionItemStyles_css = require('./UNSAFE_RichSelectionItem/themes/RichSelectionItemStyles.css.js');
var View = require('./View-216e5184.js');
var useTestId = require('./useTestId-32c35bff.js');
var AspectRatio = require('./AspectRatio-0504ecd0.js');
var Avatar = require('./Avatar-c84a09ae.js');
var Center = require('./Center-269b4172.js');
var Flex = require('./Flex-da9f223a.js');
var useId = require('./useId-6c0eeb27.js');
require('./FormContext-9452bd30.js');
var useFormContext = require('./useFormContext-4c3091dc.js');
var usePress = require('./usePress-886180e4.js');
var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
var useInteractionStyle = require('./useInteractionStyle-379ee8fa.js');
require('./TabbableModeContext-e99d527e.js');
var useTabbableMode = require('./useTabbableMode-5c8fd9e5.js');
var StyledCheckbox = require('./StyledCheckbox-a78cdad7.js');
var Check = require('./Check-1a279253.js');
var RadioButtonOff = require('./RadioButtonOff-b28fd2cb.js');
var RadioButtonOn = require('./RadioButtonOn-77b82ecb.js');
var HiddenAccessible = require('./HiddenAccessible-087eb49a.js');
var UNSAFE_RadioItem_themes_RadioIconContract_css = require('./UNSAFE_RadioItem/themes/RadioIconContract.css.js');
var UNSAFE_RadioItem_themes_RadioStyles_css = require('./UNSAFE_RadioItem/themes/RadioStyles.css.js');
var UNSAFE_RadioItem_themes_redwood_RadioIconTheme = require('./UNSAFE_RadioItem/themes/redwood/RadioIconTheme.js');
var CheckboxSetContext = require('./CheckboxSetContext-c62db26d.js');
var useFocusableTextField = require('./useFocusableTextField-2c36840d.js');
var StyledCard = require('./StyledCard-67d90e2e.js');
require('preact');
require('./useTooltipOnTruncation-cea31e18.js');
require('./useDetectTruncation-e6304b0a.js');
require('./useResizeObserver-1597395f.js');
require('./useVisAddBusyState-1564f647.js');
require('./VisBusyStateContext-223f53dd.js');
require('./useVisBusyStateContext-090a1870.js');
require('./useTooltip-cf4a15f3.js');
require('./useHover-c099039f.js');
require('./useToggle-3ebba7d8.js');
require('./useFocus-1b288fb9.js');
require('./useTouch-4dec8729.js');
require('./mergeProps-e3da7237.js');
require('./useAnimation-fb11e4cc.js');
require('./useThemeInterpolations-e3c7807c.js');
require('./useColorScheme-b4de9e67.js');
require('./LayerHost-8ec73638.js');
require('./Common/themes/redwood/theme.js');
require('./Common/themes/themeContract.css.js');
require('preact/compat');
require('./UNSAFE_Layer/themes/LayerHostStyles.css.js');

require('./useScale-779458a9.js');
require('./theme-dfd6a9fe.js');
require('./Theme-f06687af.js');
require('./mergeInterpolations-6727b536.js');
require('./mergeDeepWithKey-210b024d.js');
require('./_curry3-18677bca.js');
require('./_curry1-e8f0d7ea.js');
require('./_curry2-c15d89cd.js');
require('./_isObject-28636267.js');
require('./useDensity-301606ec.js');
require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentTheme.js');
require('./hooks/UNSAFE_useTooltip/themes/TooltipContentStyles.css.js');

require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.css.js');

require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');

require('./vanilla-extract-recipes-createRuntimeFn.esm-d1301b2d.js');
require('./tooltipUtils-d461919d.js');
require('./EnvironmentProvider-753342f1.js');
require('./LayerManager-4857dbaf.js');
require('./Floating-dd6667de.js');
require('./useFloating-c64ecd7f.js');
require('./useUser-c85f9587.js');
require('./positionUtils-a780137e.js');
require('./refUtils-915b985d.js');
require('./useOutsideClick-8e9209c6.js');
require('./arrayUtils-7d8dcfc3.js');
require('./Layer-2352de5e.js');
require('./UNSAFE_Layer/themes/LayerStyles.css.js');

require('./useModal-0739a528.js');
require('./utils-606327d1.js');
require('./colorUtils-fe6f2fbf.js');
require('./UNSAFE_Floating/themes/redwood/FloatingTheme.js');
require('./UNSAFE_Floating/themes/FloatingStyles.css.js');

require('./UNSAFE_Floating/themes/redwood/FloatingBaseTheme.css.js');

require('./UNSAFE_Floating/themes/redwood/FloatingVariants.css.js');
require('./vanilla-extract-dynamic.esm-d5dffce7.js');
require('./UNSAFE_Floating/themes/FloatingContract.css.js');
require('./logger-2b636482.js');
require('./UNSAFE_Text/themes/TextStyles.css.js');

require('./clientHints-89c01238.js');

require('./borders-4b8488cb.js');
require('./dimensions-b4be9793.js');
require('./size-0056ef1a.js');
require('./flexitem-fee13e26.js');

require('./vanilla-extract-sprinkles-createRuntimeSprinkles.esm-d68f3e0f.js');
require('./colors-846e841c.js');
require('./padding-c5a8f4f5.js');
require('./aria-889aedd0.js');
require('./equals-098f7781.js');
require('./_isArray-73160ad5.js');
require('./_isString-f4443c9e.js');

require('./UNSAFE_Avatar/themes/redwood/AvatarTheme.js');
require('./UNSAFE_Avatar/themes/AvatarStyles.css.js');

require('./UNSAFE_Avatar/themes/redwood/AvatarBaseTheme.css.js');


require('./UNSAFE_Avatar/themes/redwood/AvatarVariants.css.js');

require('./ImageVars.css-3fbb1c0b.js');
require('./boxalignment-28ee3565.js');

require('./flexbox-2cae9a01.js');


require('./useActive-6770f917.js');
require('./CheckboxOff-4655c1e3.js');
require('./Icon-6baa1a6f.js');
require('./UNSAFE_Icon/themes/IconStyle.css.js');

require('./CheckboxOn-1dd681f1.js');
require('./CheckboxMixed-3865367b.js');
require('./UNSAFE_Checkbox/themes/CheckboxIconContract.css.js');
require('./UNSAFE_Checkbox/themes/redwood/CheckboxIconTheme.js');
require('./UNSAFE_Checkbox/themes/CheckboxIconStyles.css.js');

require('./UNSAFE_Checkbox/themes/redwood/CheckboxIconBaseTheme.css.js');

require('./UNSAFE_Checkbox/themes/redwood/CheckboxIconVariants.css.js');


require('./CollectionInteractionContext-f84ff7a1.js');
require('./useCollectionInteractionContext-6fc0200e.js');


require('./UNSAFE_RadioItem/themes/RadioIconStyles.css.js');

require('./UNSAFE_RadioItem/themes/redwood/RadioIconBaseTheme.css.js');

require('./UNSAFE_RadioItem/themes/redwood/RadioIconVariants.css.js');

require('./useFocusWithin-eb7f956a.js');
require('./PRIVATE_StyledCard/themes/StyledCardStyles.css.js');


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

const ThumbnailXL = ({ thumbnailSrc, mediaAccessibleLabel, testId, isDisabled }) => {
    const testIdProps = useTestId.useTestId(testId ? `${testId}_thumbnail` : undefined);
    return (jsxRuntime.jsx(AspectRatio.AspectRatio, { ratio: "4/3", children: jsxRuntime.jsx("img", { alt: mediaAccessibleLabel, className: classNames.classNames([UNSAFE_RichSelectionItem_themes_RichSelectionItemStyles_css.styles.thumbnailImage, isDisabled && UNSAFE_RichSelectionItem_themes_RichSelectionItemStyles_css.styles.mediaDisabledOpacity]), role: !mediaAccessibleLabel ? 'presentation' : undefined, src: thumbnailSrc, ...testIdProps }) }));
};
const Thumbnail = ({ thumbnailSrc, mediaAccessibleLabel, layout, testId, isDisabled }) => {
    const thumbnailClass = classNames.classNames([
        layout === 'md' ? UNSAFE_RichSelectionItem_themes_RichSelectionItemStyles_css.styles.mdMediaVariant : UNSAFE_RichSelectionItem_themes_RichSelectionItemStyles_css.styles.smMediaVariant,
        isDisabled && UNSAFE_RichSelectionItem_themes_RichSelectionItemStyles_css.styles.mediaDisabledOpacity
    ]);
    const testIdProps = useTestId.useTestId(testId ? `${testId}_thumbnail` : undefined);
    return (jsxRuntime.jsx("img", { alt: mediaAccessibleLabel, className: thumbnailClass, role: !mediaAccessibleLabel ? 'presentation' : undefined, src: thumbnailSrc, ...testIdProps }));
};
const MediumRenderer = ({ mediaAccessibleLabel, thumbnailSrc, layout, avatar, testId, isDisabled }) => {
    const testIdProps = useTestId.useTestId(testId ? `${testId}_medium` : undefined);
    let mediumMediaItem;
    if (avatar) {
        const avatarElement = (jsxRuntime.jsx(Avatar.Avatar, { ...avatar, "aria-label": mediaAccessibleLabel, size: "md", ...testIdProps }));
        mediumMediaItem = isDisabled ? (jsxRuntime.jsx("span", { className: UNSAFE_RichSelectionItem_themes_RichSelectionItemStyles_css.styles.mediaDisabledOpacity, children: avatarElement })) : (avatarElement);
    }
    else {
        mediumMediaItem = (jsxRuntime.jsx(Thumbnail, { thumbnailSrc: thumbnailSrc, mediaAccessibleLabel: mediaAccessibleLabel, layout: layout, testId: testId, isDisabled: isDisabled }));
    }
    return jsxRuntime.jsx(Center.Center, { children: mediumMediaItem });
};
const SmallRenderer = ({ avatar, iconClass, isDisabled, layout, thumbnailSrc, mediaAccessibleLabel, testId }) => {
    const testIdProps = useTestId.useTestId(testId ? `${testId}_small` : undefined);
    const { iconWrapper, iconEnabledColor, iconDisabledColor, mediaDisabledOpacity } = UNSAFE_RichSelectionItem_themes_RichSelectionItemStyles_css.styles;
    let smallMediaItem;
    if (avatar) {
        const avatarElement = (jsxRuntime.jsx(Avatar.Avatar, { ...avatar, "aria-label": mediaAccessibleLabel, size: "xs", ...testIdProps }));
        smallMediaItem = isDisabled ? (jsxRuntime.jsx("span", { className: mediaDisabledOpacity, children: avatarElement })) : (avatarElement);
    }
    else if (thumbnailSrc) {
        smallMediaItem = (jsxRuntime.jsx(Thumbnail, { thumbnailSrc: thumbnailSrc, mediaAccessibleLabel: mediaAccessibleLabel, layout: layout, testId: testId, isDisabled: isDisabled, ...testIdProps }));
    }
    else if (iconClass) {
        const classes = classNames.classNames([
            iconClass,
            iconWrapper,
            isDisabled ? iconDisabledColor : iconEnabledColor
        ]);
        smallMediaItem = jsxRuntime.jsx("div", { class: classes, ...testIdProps });
    }
    return jsxRuntime.jsx(Center.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 (jsxRuntime.jsx(ThumbnailXL, { thumbnailSrc: thumbnailSrc, mediaAccessibleLabel: mediaAccessibleLabel, testId: testId, isDisabled: isDisabled }));
        case 'md':
            const mediumMedia = avatar ? { avatar } : thumbnailSrc ? { thumbnailSrc } : undefined;
            return (jsxRuntime.jsx(View.View, { alignSelf: hasSecondaryText ? 'start' : 'center', children: jsxRuntime.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 (jsxRuntime.jsx(View.View, { alignSelf: hasSecondaryText ? 'start' : 'center', children: jsxRuntime.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 } = RadioItemContext.useRadioSetContext();
    const testIdProps = useTestId.useTestId(testId);
    const IconComp = isReadonly
        ? isSelected
            ? Check.SvgCheck
            : RadioButtonOff.SvgRadioButtonOff
        : isSelected
            ? RadioButtonOn.SvgRadioButtonOn
            : RadioButtonOff.SvgRadioButtonOff;
    const spanRef = hooks.useRef(null);
    const { interactionProps, applyActiveStyle } = useInteractionStyle.useInteractionStyle();
    const onChangeHandler = hooks.useCallback((event) => {
        event.stopPropagation();
        onCommit?.({ previousValue: radioGroupValue, value });
    }, [value, radioGroupValue, onCommit]);
    /**
     * When focused the view should have the respective RichSelectionItem.
     */
    hooks.useEffect(() => {
        if (isFocus) {
            spanRef?.current?.scrollIntoView({ block: 'nearest' });
        }
    }, [isFocus, spanRef]);
    const radioColor = isDisabled ? UNSAFE_RadioItem_themes_RadioStyles_css.radioDisabledColor : UNSAFE_RadioItem_themes_RadioStyles_css.radioDefaultColor;
    const { classes: radioIconClasses } = useComponentTheme.useComponentTheme(UNSAFE_RadioItem_themes_redwood_RadioIconTheme.RadioIconRedwoodTheme, {
        disabled: isDisabled ? 'isDisabled' : 'notDisabled',
        selected: isSelected ? 'isSelected' : 'notSelected',
        active: applyActiveStyle ? 'isActive' : 'notActive',
        richSelection: isLayoutXL ? 'isLayoutXL' : 'notLayoutXL'
    });
    const { isTabbable } = useTabbableMode.useTabbableMode();
    const { index } = RadioItemContext.useRadioItemContext();
    const tabIndex = isTabbable !== false && ((index === 0 && !radioGroupValue) || isSelected) ? 0 : -1;
    const hiddenInput = (jsxRuntime.jsx(HiddenAccessible.HiddenAccessible, { children: jsxRuntime.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 jsxRuntime.jsx("span", { class: UNSAFE_RichSelectionItem_themes_RichSelectionItemStyles_css.styles.inputElement, children: hiddenInput });
    }
    return (jsxRuntime.jsxs("span", { ref: spanRef, class: classNames.classNames([radioColor, isLayoutXL ? UNSAFE_RichSelectionItem_themes_RichSelectionItemStyles_css.styles.radioWrapper : undefined]), children: [hiddenInput, jsxRuntime.jsx("span", { "aria-hidden": "true", class: radioIconClasses, ...interactionProps, children: jsxRuntime.jsx(IconComp, { size: UNSAFE_RadioItem_themes_RadioIconContract_css.radioIconVars.iconSize, color: "currentColor" }) })] }));
};
const CheckboxControl = ({ value, inputRef, inputReadonlyRef, isSelected, isLayoutXL, isDisabled, isReadonly, describedBy, labelledBy, testId, onBlur, onFocus }) => {
    const { name } = CheckboxSetContext.useCheckboxSetContext();
    const testIdProps = useTestId.useTestId(testId);
    const { isTabbable } = useTabbableMode.useTabbableMode();
    const checkboxStyles = isLayoutXL ? UNSAFE_RichSelectionItem_themes_RichSelectionItemStyles_css.styles.checkboxWrapper : UNSAFE_RichSelectionItem_themes_RichSelectionItemStyles_css.styles.checkboxAlign;
    // Checkbox control is visually hidden in readonly mode unless it is selected
    if (!isSelected && isReadonly) {
        return (jsxRuntime.jsx("span", { class: UNSAFE_RichSelectionItem_themes_RichSelectionItemStyles_css.styles.inputElement, children: jsxRuntime.jsx(HiddenAccessible.HiddenAccessible, { children: jsxRuntime.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 (jsxRuntime.jsx("span", { class: checkboxStyles, children: jsxRuntime.jsx(StyledCheckbox.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.useFormContext();
    const styledCardRef = hooks.useRef(null);
    const inputRef = hooks.useRef(null);
    const inputReadonlyRef = hooks.useRef(null);
    const { selection, layout, messageSeverity } = RichSelectionStartContext.useRichSelectionContext();
    const { isDisabled: isFieldDisabled, isReadonly: isFieldReadonly } = useFormFieldContext.useFormFieldContext();
    const { value: radioGroupValue, onCommit: onRadioCommit } = RadioItemContext.useRadioSetContext();
    const { value: checkboxGroupValue, onCommit: onCheckboxCommit } = CheckboxSetContext.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.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.useFocusableTextField({
        enabledElementRef: inputRef,
        readonlyElementRef: inputReadonlyRef,
        isReadonly,
        isDisabled
    });
    // Scroll into view when the RichSelectionItem is focused
    hooks.useEffect(() => {
        if (isFocus) {
            styledCardRef?.current?.scrollIntoView({ block: 'nearest' });
        }
    }, [isFocus, styledCardRef]);
    // Text content of label and secondaryText rendering
    const textContent = (jsxRuntime.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 ? (jsxRuntime.jsx(RichSelectionMediaItem, { ...media, isDisabled: isDisabled, hasSecondaryText: !!secondaryText, testId: testId ? `${testId}_media` : undefined })) : undefined;
    // Selection control rendering (radio or checkbox)
    const selectionControl = (jsxRuntime.jsx(Flex.Flex, { align: secondaryText ? 'start' : 'center', children: isSingleSelection ? (jsxRuntime.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 })) : (jsxRuntime.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 = hooks.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 = hooks.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 = hooks.useMemo(() => ({ hasMedia, hasSecondaryText: !!secondaryText }), [hasMedia, secondaryText]);
    const richSelectionStartContext = RichSelectionStartContext.useRichSelectionStartContext();
    if (richSelectionStartContext?.isFirst) {
        richSelectionStartContext?.setStartData?.(startData);
    }
    // Event handlers for the interaction of the StyledCard
    const { pressProps } = usePress.usePress(isSingleSelection ? triggerRadioAction : triggerCheckBoxAction, {
        isDisabled: !isEnabled
    });
    return (jsxRuntime.jsx(StyledCard.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 ? (jsxRuntime.jsxs(Flex.Flex, { direction: "column", height: "100%", width: "100%", children: [mediaContent, jsxRuntime.jsx("div", { class: UNSAFE_RichSelectionItem_themes_RichSelectionItemStyles_css.styles.selectionElement, children: selectionControl }), textContent] })) : (jsxRuntime.jsx("div", { className: classNames.classNames([
                UNSAFE_RichSelectionItem_themes_RichSelectionItemStyles_css.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 &&
                    UNSAFE_RichSelectionItem_themes_RichSelectionItemStyles_css.styles.startMinHeight
            ]), children: jsxRuntime.jsxs(Flex.Flex, { direction: "row", gap: "4x", height: "100%", width: "100%", children: [selectionControl, textContent, mediaContent] }) })) }));
};

exports.RichSelectionItem = RichSelectionItem;
//# sourceMappingURL=UNSAFE_RichSelectionItem.js.map
