var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React from 'react';
import { addSubcomponents } from '../../utils/addSubcomponents';
import { Avatar } from '../Avatar';
import { ContactItemAvatar, ContactItemAvatarWrapper, ContactItemText, ContactItemTextWrapper, ContactItemWrapper, } from './ContactItem.styles';
/**

 The contact item component is a more complex alternative to a standard line
 of text found in a list or form component. Use this component when you have
 a list or set of items that can benefit from an additional line of content or
 an avatar.

 @since 10.19.0

 @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-contact-item--demo)

 @see [Design Guidelines](https://design.procore.com/contact-item)

 */
var ContactItem_ = React.forwardRef(function ContactItem(_a, ref) {
    var imageUrl = _a.imageUrl, icon = _a.icon, initials = _a.initials, _b = _a.selected, selected = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.clickable, clickable = _d === void 0 ? false : _d, children = _a.children, props = __rest(_a, ["imageUrl", "icon", "initials", "selected", "disabled", "clickable", "children"]);
    var showAvatar = imageUrl || icon || initials;
    return (React.createElement(ContactItemWrapper, __assign({ "$selected": selected, "$disabled": disabled, "$clickable": clickable, ref: ref }, props),
        showAvatar && (React.createElement(ContactItemAvatarWrapper, null,
            React.createElement(ContactItemAvatar, { size: "lg", disabled: disabled }, (function () {
                if (imageUrl)
                    return React.createElement(Avatar.Portrait, { imageUrl: imageUrl });
                if (icon)
                    return React.createElement(Avatar.Icon, { icon: icon });
                if (initials)
                    return React.createElement(Avatar.Label, null, initials);
            })()))),
        React.createElement(ContactItemTextWrapper, null, children)));
});
var Title = React.forwardRef(function Title(_a, ref) {
    var children = _a.children, props = __rest(_a, ["children"]);
    return (React.createElement(ContactItemText, __assign({ weight: "bold", color: "gray15", ref: ref }, props), children));
});
var Description = React.forwardRef(function Description(_a, ref) {
    var children = _a.children, props = __rest(_a, ["children"]);
    return (React.createElement(ContactItemText, __assign({ weight: "regular", color: "gray45", ref: ref }, props), children));
});
ContactItem_.displayName = 'ContactItem';
Title.displayName = 'ContactItem.Title';
Description.displayName = 'ContactItem.Description';
export var ContactItem = addSubcomponents({
    Title: Title,
    Description: Description,
}, ContactItem_);
//# sourceMappingURL=ContactItem.js.map