@tenancy.nz/feature-ui 1.0.1 → 1.0.2

package/dist/cjs/components/PropertyCard.cjs

@@ -3,135 +3,143 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
-require('react');
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
 var ui = require('@tenancy.nz/ui');
 var icons = require('@tenancy.nz/icons');
 var IconLabel = require('./IconLabel.cjs');
 var PropertyCard_styled = require('./PropertyCard.styled.cjs');
 
-function PropertyCard({
-  address = void 0,
-  compact = false,
-  enquiriesCount = void 0,
-  imgSrc,
-  noOfBedrooms = void 0,
-  noOfBathrooms = void 0,
-  noOfCarparks = void 0,
-  rent = void 0,
-  viewingsCount = void 0,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Paper,
-    {
-      overflow: false,
-      sx: {
-        display: "flex",
-        alignItems: "center"
+var _excluded = ["address", "compact", "enquiriesCount", "imgSrc", "noOfBedrooms", "noOfBathrooms", "noOfCarparks", "rent", "viewingsCount"];
+function PropertyCard(_ref) {
+  var _ref$address = _ref.address,
+    address = _ref$address === void 0 ? void 0 : _ref$address,
+    _ref$compact = _ref.compact,
+    compact = _ref$compact === void 0 ? false : _ref$compact,
+    _ref$enquiriesCount = _ref.enquiriesCount,
+    enquiriesCount = _ref$enquiriesCount === void 0 ? void 0 : _ref$enquiriesCount,
+    imgSrc = _ref.imgSrc,
+    _ref$noOfBedrooms = _ref.noOfBedrooms,
+    noOfBedrooms = _ref$noOfBedrooms === void 0 ? void 0 : _ref$noOfBedrooms,
+    _ref$noOfBathrooms = _ref.noOfBathrooms,
+    noOfBathrooms = _ref$noOfBathrooms === void 0 ? void 0 : _ref$noOfBathrooms,
+    _ref$noOfCarparks = _ref.noOfCarparks,
+    noOfCarparks = _ref$noOfCarparks === void 0 ? void 0 : _ref$noOfCarparks,
+    _ref$rent = _ref.rent,
+    rent = _ref$rent === void 0 ? void 0 : _ref$rent,
+    _ref$viewingsCount = _ref.viewingsCount,
+    viewingsCount = _ref$viewingsCount === void 0 ? void 0 : _ref$viewingsCount,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return /* @__PURE__ */React.createElement(ui.Paper, _rollupPluginBabelHelpers.objectSpread2({
+    overflow: false,
+    sx: {
+      display: "flex",
+      alignItems: "center"
+    }
+  }, rest), /* @__PURE__ */React.createElement(PropertyCard_styled.StyledPropertyImage, null, /* @__PURE__ */React.createElement(ui.Media, {
+    as: "img",
+    title: address,
+    src: imgSrc
+  })), /* @__PURE__ */React.createElement(PropertyCard_styled.StyledPropertyDetailsBox, null, /* @__PURE__ */React.createElement(ui.Box, null, /* @__PURE__ */React.createElement(ui.Heading, {
+    as: "h4",
+    weight: "700"
+  }, address)), /* @__PURE__ */React.createElement(ui.Box, {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      ml: {
+        sm: "auto"
+      },
+      mt: {
+        xs: "10px",
+        sm: 0
+      },
+      "@media print": {
+        ml: "auto"
+      }
+    }
+  }, /* @__PURE__ */React.createElement(PropertyCard_styled.StyledPropertyAmenitiesBox, null, rent && /* @__PURE__ */React.createElement(ui.Heading, {
+    as: "h4",
+    weight: "700"
+  }, rent), /* @__PURE__ */React.createElement(ui.Box, {
+    fontSize: "16px"
+  }, noOfBedrooms && /* @__PURE__ */React.createElement(IconLabel.default, {
+    color: "text.primary",
+    startIcon: /* @__PURE__ */React.createElement(icons.Icon, {
+      size: 21,
+      color: "inherit",
+      name: "bed"
+    })
+  }, /* @__PURE__ */React.createElement(ui.Text, {
+    as: "span",
+    variant: "inherit"
+  }, noOfBedrooms)), noOfBathrooms && /* @__PURE__ */React.createElement(IconLabel.default, {
+    color: "text.primary",
+    startIcon: /* @__PURE__ */React.createElement(icons.Icon, {
+      size: 21,
+      color: "inherit",
+      name: "bath"
+    }),
+    marginLeft: 3
+  }, /* @__PURE__ */React.createElement(ui.Text, {
+    as: "span",
+    variant: "inherit"
+  }, noOfBathrooms)), noOfCarparks && /* @__PURE__ */React.createElement(IconLabel.default, {
+    color: "text.primary",
+    startIcon: /* @__PURE__ */React.createElement(icons.Icon, {
+      size: 21,
+      color: "inherit",
+      name: "car"
+    }),
+    marginLeft: 3
+  }, /* @__PURE__ */React.createElement(ui.Text, {
+    as: "span",
+    variant: "inherit"
+  }, noOfCarparks)))), !compact && /* @__PURE__ */React.createElement(ui.Box, {
+    paddingLeft: "25px",
+    borderLeft: "1px solid #00000040",
+    display: "flex",
+    direction: "column",
+    sx: {
+      gap: {
+        xs: "18px",
+        lg: "10px",
+        xl: 0
       },
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(PropertyCard_styled.StyledPropertyImage, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Media, { as: "img", title: address, src: imgSrc }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(PropertyCard_styled.StyledPropertyDetailsBox, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { as: "h4", weight: "700", children: address }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            ui.Box,
-            {
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                ml: { sm: "auto" },
-                mt: { xs: "10px", sm: 0 },
-                "@media print": {
-                  ml: "auto"
-                }
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(PropertyCard_styled.StyledPropertyAmenitiesBox, { children: [
-                  rent && /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { as: "h4", weight: "700", children: rent }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { fontSize: "16px", children: [
-                    noOfBedrooms && /* @__PURE__ */ jsxRuntime.jsx(
-                      IconLabel.default,
-                      {
-                        color: "text.primary",
-                        startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { size: 21, color: "inherit", name: "bed" }),
-                        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "span", variant: "inherit", children: noOfBedrooms })
-                      }
-                    ),
-                    noOfBathrooms && /* @__PURE__ */ jsxRuntime.jsx(
-                      IconLabel.default,
-                      {
-                        color: "text.primary",
-                        startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { size: 21, color: "inherit", name: "bath" }),
-                        marginLeft: 3,
-                        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "span", variant: "inherit", children: noOfBathrooms })
-                      }
-                    ),
-                    noOfCarparks && /* @__PURE__ */ jsxRuntime.jsx(
-                      IconLabel.default,
-                      {
-                        color: "text.primary",
-                        startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { size: 21, color: "inherit", name: "car" }),
-                        marginLeft: 3,
-                        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "span", variant: "inherit", children: noOfCarparks })
-                      }
-                    )
-                  ] })
-                ] }),
-                !compact && /* @__PURE__ */ jsxRuntime.jsxs(
-                  ui.Box,
-                  {
-                    paddingLeft: "25px",
-                    borderLeft: "1px solid #00000040",
-                    display: "flex",
-                    direction: "column",
-                    sx: {
-                      gap: { xs: "18px", lg: "10px", xl: 0 },
-                      justifyContent: "space-between"
-                    },
-                    children: [
-                      viewingsCount && /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { display: "flex", align: "center", gap: "12px", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { minWidth: "87px", children: /* @__PURE__ */ jsxRuntime.jsx(
-                          ui.Text,
-                          {
-                            transform: "uppercase",
-                            color: "textPrimary",
-                            as: "span",
-                            weight: "600",
-                            align: "right",
-                            lineHeight: "15px",
-                            children: "Viewings"
-                          }
-                        ) }),
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { as: "h2", children: viewingsCount })
-                      ] }),
-                      enquiriesCount && /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { display: "flex", align: "center", gap: "12px", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { minWidth: "87px", children: /* @__PURE__ */ jsxRuntime.jsx(
-                          ui.Text,
-                          {
-                            transform: "uppercase",
-                            color: "textPrimary",
-                            as: "span",
-                            weight: "600",
-                            minWidth: "87px",
-                            align: "right",
-                            lineHeight: "15px",
-                            children: "Enquiries"
-                          }
-                        ) }),
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { as: "h2", children: enquiriesCount })
-                      ] })
-                    ]
-                  }
-                )
-              ]
-            }
-          )
-        ] })
-      ]
+      justifyContent: "space-between"
     }
-  );
+  }, viewingsCount && /* @__PURE__ */React.createElement(ui.Box, {
+    display: "flex",
+    align: "center",
+    gap: "12px"
+  }, /* @__PURE__ */React.createElement(ui.Box, {
+    minWidth: "87px"
+  }, /* @__PURE__ */React.createElement(ui.Text, {
+    transform: "uppercase",
+    color: "textPrimary",
+    as: "span",
+    weight: "600",
+    align: "right",
+    lineHeight: "15px"
+  }, "Viewings")), /* @__PURE__ */React.createElement(ui.Heading, {
+    as: "h2"
+  }, viewingsCount)), enquiriesCount && /* @__PURE__ */React.createElement(ui.Box, {
+    display: "flex",
+    align: "center",
+    gap: "12px"
+  }, /* @__PURE__ */React.createElement(ui.Box, {
+    minWidth: "87px"
+  }, /* @__PURE__ */React.createElement(ui.Text, {
+    transform: "uppercase",
+    color: "textPrimary",
+    as: "span",
+    weight: "600",
+    minWidth: "87px",
+    align: "right",
+    lineHeight: "15px"
+  }, "Enquiries")), /* @__PURE__ */React.createElement(ui.Heading, {
+    as: "h2"
+  }, enquiriesCount))))));
 }
 
 exports.default = PropertyCard;

package/dist/cjs/components/PropertyCard.styled.cjs

@@ -1,75 +1,23 @@
 "use strict";
 'use strict';
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var react = require('@emotion/react');
 var styled = require('@emotion/styled');
 
-const StyledPropertyImage = styled.figure`
-  padding: 0;
-  margin: 0;
-  width: 120px;
-  height: 95px;
-  flex: 0 0 95px;
-  overflow: hidden;
-
-  ${({ theme }) => react.css`
-    ${theme.breakpoints.down("sm")} {
-      display: none;
-    }
-
-    ${theme.breakpoints.up("sm")} {
-      width: 150px;
-      height: 135px;
-      flex: 0 0 150px;
-    }
-
-    @media print {
-      width: 150px;
-      height: 135px;
-      flex: 0 0 150px;
-      display: block;
-    }
-  `}
-`;
-const StyledPropertyDetailsBox = styled.div`
-  display: flex;
-  width: 100%;
-  align-items: flex-start;
-  padding: 16px 24px 16px 20px;
-  flex-direction: column;
-
-  ${({ theme }) => react.css`
-    ${theme.breakpoints.up("sm")} {
-      flex-direction: row;
-      align-items: center;
-    }
-  `}
-
-  @media print {
-    flex-direction: row;
-    align-items: center;
-  }
-`;
-const StyledPropertyAmenitiesBox = styled.div`
-  padding-right: 25px;
-  display: flex;
-  flex-direction: column;
-  margin-top: 5px;
-
-  gap: 18px;
-  min-width: 170px;
-  height: 100%;
-  justify-content: space-between;
-
-  ${({ theme }) => `
-    @media (min-width: ${theme.breakpoints.values.md}px) {
-      align-items: flex-end;
-    }
-  `}
-  @media print {
-    align-items: flex-end;
-  }
-`;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var StyledPropertyImage = styled.figure(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  padding: 0;\n  margin: 0;\n  width: 120px;\n  height: 95px;\n  flex: 0 0 95px;\n  overflow: hidden;\n\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    ", " {\n      display: none;\n    }\n\n    ", " {\n      width: 150px;\n      height: 135px;\n      flex: 0 0 150px;\n    }\n\n    @media print {\n      width: 150px;\n      height: 135px;\n      flex: 0 0 150px;\n      display: block;\n    }\n  "])), theme.breakpoints.down("sm"), theme.breakpoints.up("sm"));
+});
+var StyledPropertyDetailsBox = styled.div(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  align-items: flex-start;\n  padding: 16px 24px 16px 20px;\n  flex-direction: column;\n\n  ", "\n\n  @media print {\n    flex-direction: row;\n    align-items: center;\n  }\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return react.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    ", " {\n      flex-direction: row;\n      align-items: center;\n    }\n  "])), theme.breakpoints.up("sm"));
+});
+var StyledPropertyAmenitiesBox = styled.div(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  padding-right: 25px;\n  display: flex;\n  flex-direction: column;\n  margin-top: 5px;\n\n  gap: 18px;\n  min-width: 170px;\n  height: 100%;\n  justify-content: space-between;\n\n  ", "\n  @media print {\n    align-items: flex-end;\n  }\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return "\n    @media (min-width: ".concat(theme.breakpoints.values.md, "px) {\n      align-items: flex-end;\n    }\n  ");
+});
 
 exports.StyledPropertyAmenitiesBox = StyledPropertyAmenitiesBox;
 exports.StyledPropertyDetailsBox = StyledPropertyDetailsBox;

package/dist/esm/_virtual/_rollupPluginBabelHelpers.js

@@ -0,0 +1,120 @@
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _taggedTemplateLiteral(e, t) {
+  return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
+    raw: {
+      value: Object.freeze(t)
+    }
+  }));
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+export { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _defineProperty as defineProperty, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _objectSpread2 as objectSpread2, _objectWithoutProperties as objectWithoutProperties, _objectWithoutPropertiesLoose as objectWithoutPropertiesLoose, _slicedToArray as slicedToArray, _taggedTemplateLiteral as taggedTemplateLiteral, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey, _unsupportedIterableToArray as unsupportedIterableToArray };

package/dist/esm/components/AgentDetailsCard.js

@@ -1,51 +1,89 @@
 "use strict";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react';
+import React from 'react';
 import { Box, Skeleton, Heading, Text } from '@tenancy.nz/ui';
 import { UserIcon, PhoneIcon, EnvelopeIcon } from '@tenancy.nz/icons';
 import IconLabel from './IconLabel.js';
 
-function AgentDetailsCard({
-  email = void 0,
-  loading = false,
-  logo = void 0,
-  name = void 0,
-  phone = void 0
-}) {
-  return /* @__PURE__ */ jsxs(Box, { display: "flex", gap: "8px", align: "flex-start", children: [
-    /* @__PURE__ */ jsxs(Box, { display: "flex", gap: "8px", direction: "column", width: "100%", children: [
-      loading ? /* @__PURE__ */ jsx(Skeleton, { width: "75%", height: "22px", variant: "text" }) : /* @__PURE__ */ jsx(IconLabel, { color: "tertiary.main", startIcon: /* @__PURE__ */ jsx(UserIcon, { size: "24px" }), children: /* @__PURE__ */ jsx(Heading, { as: "h5", weight: "700", children: name }) }),
-      loading ? /* @__PURE__ */ jsx(Skeleton, { width: "55%", height: "18px", variant: "text" }) : /* @__PURE__ */ jsx(
-        IconLabel,
-        {
-          color: "tertiary.main",
-          startIcon: /* @__PURE__ */ jsx(PhoneIcon, { size: "24px" }),
-          children: /* @__PURE__ */ jsx(Text, { as: "span", color: "text.primary", variant: "body1", weight: "400", children: phone })
-        }
-      ),
-      loading ? /* @__PURE__ */ jsx(Skeleton, { width: "55%", height: "18px", variant: "text" }) : /* @__PURE__ */ jsx(
-        IconLabel,
-        {
-          color: "tertiary.main",
-          startIcon: /* @__PURE__ */ jsx(EnvelopeIcon, { size: "24px" }),
-          children: /* @__PURE__ */ jsx(Text, { as: "span", color: "text.primary", variant: "body1", weight: "400", children: email })
-        }
-      )
-    ] }),
-    loading && /* @__PURE__ */ jsx(Box, { flex: "0 0 40px", children: /* @__PURE__ */ jsx(Skeleton, { width: "40px", height: "40px", variant: "rectangular" }) }),
-    logo && !loading && /* @__PURE__ */ jsx(
-      Box,
-      {
-        width: "40px",
-        height: "40px",
-        sx: {
-          flex: "0 0 40px",
-          "> img": { maxWidth: "100%", maxHeight: "100%" }
-        },
-        children: /* @__PURE__ */ jsx("img", { src: logo, alt: "Agency Logo" })
+function AgentDetailsCard(_ref) {
+  var _ref$email = _ref.email,
+    email = _ref$email === void 0 ? void 0 : _ref$email,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$logo = _ref.logo,
+    logo = _ref$logo === void 0 ? void 0 : _ref$logo,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? void 0 : _ref$name,
+    _ref$phone = _ref.phone,
+    phone = _ref$phone === void 0 ? void 0 : _ref$phone;
+  return /* @__PURE__ */React.createElement(Box, {
+    display: "flex",
+    gap: "8px",
+    align: "flex-start"
+  }, /* @__PURE__ */React.createElement(Box, {
+    display: "flex",
+    gap: "8px",
+    direction: "column",
+    width: "100%"
+  }, loading ? /* @__PURE__ */React.createElement(Skeleton, {
+    width: "75%",
+    height: "22px",
+    variant: "text"
+  }) : /* @__PURE__ */React.createElement(IconLabel, {
+    color: "tertiary.main",
+    startIcon: /* @__PURE__ */React.createElement(UserIcon, {
+      size: "24px"
+    })
+  }, /* @__PURE__ */React.createElement(Heading, {
+    as: "h5",
+    weight: "700"
+  }, name)), loading ? /* @__PURE__ */React.createElement(Skeleton, {
+    width: "55%",
+    height: "18px",
+    variant: "text"
+  }) : /* @__PURE__ */React.createElement(IconLabel, {
+    color: "tertiary.main",
+    startIcon: /* @__PURE__ */React.createElement(PhoneIcon, {
+      size: "24px"
+    })
+  }, /* @__PURE__ */React.createElement(Text, {
+    as: "span",
+    color: "text.primary",
+    variant: "body1",
+    weight: "400"
+  }, phone)), loading ? /* @__PURE__ */React.createElement(Skeleton, {
+    width: "55%",
+    height: "18px",
+    variant: "text"
+  }) : /* @__PURE__ */React.createElement(IconLabel, {
+    color: "tertiary.main",
+    startIcon: /* @__PURE__ */React.createElement(EnvelopeIcon, {
+      size: "24px"
+    })
+  }, /* @__PURE__ */React.createElement(Text, {
+    as: "span",
+    color: "text.primary",
+    variant: "body1",
+    weight: "400"
+  }, email))), loading && /* @__PURE__ */React.createElement(Box, {
+    flex: "0 0 40px"
+  }, /* @__PURE__ */React.createElement(Skeleton, {
+    width: "40px",
+    height: "40px",
+    variant: "rectangular"
+  })), logo && !loading && /* @__PURE__ */React.createElement(Box, {
+    width: "40px",
+    height: "40px",
+    sx: {
+      flex: "0 0 40px",
+      "> img": {
+        maxWidth: "100%",
+        maxHeight: "100%"
       }
-    )
-  ] });
+    }
+  }, /* @__PURE__ */React.createElement("img", {
+    src: logo,
+    alt: "Agency Logo"
+  })));
 }
 
 export { AgentDetailsCard as default };