/* @oracle/oraclejet-preact: undefined */
import { jsx } from 'preact/jsx-runtime';
import { c as classNames } from './classNames-4e12b00d.js';
import './FormContext-4d71f9c7.js';
import { u as useFormContext } from './useFormContext-875cacd7.js';
import './FormFieldContext-68eb5946.js';
import { u as useFormFieldContext } from './useFormFieldContext-626574fd.js';
import { s as sizeToCSS } from './size-18139a3a.js';
import { l as labelSlotStyles, a as labelInnerStyles, S as StyledLabelValueLayout } from './StyledLabelValueLayout-d4881d3b.js';
import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
import { TextFieldRedwoodTheme } from './UNSAFE_TextField/themes/redwood/TextFieldTheme.js';
import { LabelRedwoodTheme } from './UNSAFE_Label/themes/redwood/LabelTheme.js';
import { FormLayoutRedwoodTheme } from './UNSAFE_TextField/themes/redwood/FormLayoutTheme.js';

/**
 * A layout component for rendering a label and value pair, used in form components
 * such as TextField, TextArea, and FormComponentWrapper.
 */
const LabelValueLayout = ({ label, labelEdge, children, labelStartWidth = '33%', parentComponentVariant = 'textField', ...rest }) => {
    const { baseTheme: textFieldTheme } = useComponentTheme(TextFieldRedwoodTheme);
    const { baseTheme: labelTheme } = useComponentTheme(LabelRedwoodTheme);
    const { baseTheme: formLayoutTheme } = useComponentTheme(FormLayoutRedwoodTheme);
    const isTextField = parentComponentVariant.startsWith('text');
    const isFormComponentWrapper = parentComponentVariant === 'formComponentWrapper';
    const isStart = labelEdge === 'start';
    const isTop = labelEdge === 'top' || labelEdge === 'inside'; // 'inside' needs to pick up all 'top' styles.
    const isInside = labelEdge === 'inside';
    const width = sizeToCSS(labelStartWidth);
    const valueWidth = `calc(100% - ${width})`;
    const hasTopUserAssistance = !!rest.hasTopUserAssistance;
    const labelStyles = isStart
        ? { flexBasis: width, width: width, maxWidth: width }
        : {};
    const valueStyles = isStart
        ? { flexBasis: valueWidth, width: valueWidth, maxWidth: valueWidth }
        : {};
    const { isFormLayout, isReadonly: isFormReadonly, labelWrapping } = useFormContext();
    const { isReadonly } = useFormFieldContext();
    const isPureReadonly = (isFormLayout && isFormReadonly) || (!isFormLayout && isReadonly);
    const labelStyleClasses = classNames([
        formLayoutTheme,
        labelSlotStyles.base,
        isStart && labelSlotStyles.start,
        isTop && labelSlotStyles.top,
        isTop && hasTopUserAssistance && labelSlotStyles.topAndTopUA,
        isTop && isPureReadonly && labelSlotStyles.topPureReadonly
    ]);
    const labelInnerClasses = classNames([
        isTextField && textFieldTheme,
        isFormComponentWrapper && labelTheme,
        formLayoutTheme,
        labelInnerStyles.base,
        isStart && labelInnerStyles.start,
        isTextField && isStart && !isPureReadonly && labelInnerStyles.startNotPureReadonly,
        isFormComponentWrapper && isInside && labelInnerStyles.insideFormComponentWrapper,
        // Form Component Wrapper
        isFormComponentWrapper &&
            isStart &&
            !isPureReadonly &&
            !hasTopUserAssistance &&
            labelInnerStyles.startWithoutTopFormComponentWrapperUA,
        labelWrapping === 'truncate' && labelInnerStyles.noWrap
    ]);
    return (jsx(StyledLabelValueLayout
    // For readonly start aligned labels, we want the div that is the parent of the label to
    // stretch to the height of the value content, including the end content (InputSensitiveText)
    , { 
        // For readonly start aligned labels, we want the div that is the parent of the label to
        // stretch to the height of the value content, including the end content (InputSensitiveText)
        flexAlign: isReadonly && isStart ? 'stretch' : 'start', labelStyleClasses: labelStyleClasses, labelStyles: labelStyles, labelInnerClasses: labelInnerClasses, label: label, valueStyles: valueStyles, children: children }));
};

export { LabelValueLayout as L };
//# sourceMappingURL=LabelValueLayout-1db91391.js.map
