'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { getTranslation } from '@payloadcms/translations';
import React from 'react';
import { components as SelectComponents } from 'react-select';
import { useTranslation } from '../../../providers/Translation/index.js';
import './index.scss';
const baseClass = 'multi-value-label';
export const MultiValueLabel = (props)=>{
    // @ts-expect-error-next-line// TODO Fix this - moduleResolution 16 breaks our declare module
    const { data, selectProps: { customProps: { draggableProps, editableProps } = {} } = {} } = props;
    const { i18n } = useTranslation();
    const className = `${baseClass}__text`;
    const labelText = data.label ? getTranslation(data.label, i18n) : '';
    const titleText = typeof labelText === 'string' ? labelText : '';
    return /*#__PURE__*/ _jsxDEV("div", {
        className: baseClass,
        title: titleText,
        children: /*#__PURE__*/ _jsxDEV(SelectComponents.MultiValueLabel, {
            ...props,
            innerProps: {
                className,
                ...editableProps && editableProps(data, className, props.selectProps) || {},
                ...draggableProps || {}
            }
        }, void 0, false, {
            fileName: "src/elements/ReactSelect/MultiValueLabel/index.tsx",
            lineNumber: 27,
            columnNumber: 7
        }, this)
    }, void 0, false, {
        fileName: "src/elements/ReactSelect/MultiValueLabel/index.tsx",
        lineNumber: 26,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map