@itilite/lumina-ui 1.1.12 → 1.1.13

package/dist/chunk-UUEPD2FH.mjs

@@ -0,0 +1,141 @@
+import {
+  Button
+} from "./chunk-N3YFQDW7.mjs";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-FWCSY2DS.mjs";
+
+// src/atom/Modal/Modal.tsx
+import { Modal as AntModal } from "antd";
+import clsx from "clsx";
+
+// src/atom/Modal/Modal.module.scss
+var Modal_module_default = { "modal": "Modal-module__modal___PKrAi", "footerMargintopDisable": "Modal-module__footerMargintopDisable___4B6u-", "ant-modal-footer": "Modal-module__ant-modal-footer___HKsDR", "okBtn": "Modal-module__okBtn___Ut8e5", "cancelBtn": "Modal-module__cancelBtn___i0Rm8" };
+
+// src/atom/Modal/Modal.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Close = (_a) => {
+  var _b = _a, { size = 14, color = "#B6BAC3" } = _b, rest = __objRest(_b, ["size", "color"]);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    __spreadProps(__spreadValues({
+      width: size,
+      height: size,
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, rest), {
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7 5.58579L12.2929 0.292893C12.6834 -0.0976311 13.3166 -0.0976311 13.7071 0.292893C14.0976 0.683417 14.0976 1.31658 13.7071 1.70711L8.41421 7L13.7071 12.2929C14.0976 12.6834 14.0976 13.3166 13.7071 13.7071C13.3166 14.0976 12.6834 14.0976 12.2929 13.7071L7 8.41421L1.70711 13.7071C1.31658 14.0976 0.683417 14.0976 0.292893 13.7071C-0.0976311 13.3166 -0.0976311 12.6834 0.292893 12.2929L5.58579 7L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z",
+          fill: color
+        }
+      )
+    })
+  );
+};
+var Modal = (_a) => {
+  var _b = _a, {
+    className = "",
+    title = "",
+    children,
+    open = false,
+    handleOk,
+    handleCancel,
+    okText = "",
+    cancelText = "",
+    closeIcon = /* @__PURE__ */ jsx(Close, { color: "#6B7280" }),
+    bodyClassName = "modalBody",
+    outsideClickDisable = false,
+    hideCross = false,
+    okButtonLoading = false,
+    okButtonDisabled = false,
+    variant = "primary",
+    okBtnClasses = "",
+    cancelButtonAnalytics = {},
+    okButtonAnalytics = {},
+    footerMargintopDisable = true
+  } = _b, rest = __objRest(_b, [
+    "className",
+    "title",
+    "children",
+    "open",
+    "handleOk",
+    "handleCancel",
+    "okText",
+    "cancelText",
+    "closeIcon",
+    "bodyClassName",
+    "outsideClickDisable",
+    "hideCross",
+    "okButtonLoading",
+    "okButtonDisabled",
+    "variant",
+    "okBtnClasses",
+    "cancelButtonAnalytics",
+    "okButtonAnalytics",
+    "footerMargintopDisable"
+  ]);
+  return /* @__PURE__ */ jsx("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+    AntModal,
+    __spreadProps(__spreadValues({
+      title,
+      open,
+      onOk: handleOk,
+      onCancel: handleCancel,
+      className: clsx(Modal_module_default.modal, className, {
+        footerMargintopDisable
+      }),
+      okText,
+      cancelText,
+      closeIcon,
+      closable: !hideCross,
+      maskClosable: !outsideClickDisable,
+      footer: okText || cancelText ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx({
+            primaryFooter: variant === "primary",
+            secondaryFooter: variant === "secondary"
+          }),
+          children: [
+            cancelText && /* @__PURE__ */ jsx(
+              Button,
+              __spreadProps(__spreadValues({
+                onClick: handleCancel,
+                type: "secondary",
+                className: "cancelBtn",
+                variant: "subtle"
+              }, cancelButtonAnalytics), {
+                children: cancelText
+              })
+            ),
+            okText && /* @__PURE__ */ jsx(
+              Button,
+              __spreadProps(__spreadValues({
+                onClick: handleOk,
+                className: clsx(okBtnClasses, "okBtn"),
+                loading: okButtonLoading,
+                disabled: okButtonDisabled
+              }, okButtonAnalytics), {
+                children: okText
+              })
+            )
+          ]
+        }
+      ) : null
+    }, rest), {
+      children: /* @__PURE__ */ jsx("div", { className: bodyClassName, children })
+    })
+  ) });
+};
+Modal.displayName = "Modal";
+var Modal_default = Modal;
+
+export {
+  Modal,
+  Modal_default
+};

package/dist/index.d.mts

@@ -13,4 +13,6 @@ export { default as Slider } from './atom/Slider/Slider.mjs';
 import 'react';
 import 'antd/es/checkbox';
 import 'antd/lib/radio';
+import './types-mhQmqhsR.mjs';
+import './types-D4MD2w3_.mjs';
 import 'react/jsx-runtime';

package/dist/index.d.ts

@@ -13,4 +13,6 @@ export { default as Slider } from './atom/Slider/Slider.js';
 import 'react';
 import 'antd/es/checkbox';
 import 'antd/lib/radio';
+import './types-mhQmqhsR.js';
+import './types-D4MD2w3_.js';
 import 'react/jsx-runtime';

package/dist/index.js

@@ -70,7 +70,8 @@ __export(index_exports, {
   Slider: () => Slider_default,
   Switch: () => Switch_default,
   Tag: () => Tag_default,
-  Tooltip: () => Tooltip_default
+  Tooltip: () => Tooltip_default,
+  UserProfile: () => UserProfile_default
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -761,46 +762,6 @@ var LoadingSpinner_default = LoadingSpinner;
 
 // src/atom/Select/Select.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var InputWrapper = (0, import_react2.memo)(({ children, disabled, disabledTooltip }) => {
-  if (disabled && disabledTooltip)
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Tooltip_default, { title: disabledTooltip, children });
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children });
-});
-var OptionItem = (0, import_react2.memo)(({
-  option,
-  index,
-  isSelected,
-  isHighlighted,
-  experience,
-  size,
-  optionClassName,
-  onSelectHandler,
-  onMouseEnterHandler
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    "div",
-    {
-      onClick: () => onSelectHandler(option),
-      onMouseEnter: () => onMouseEnterHandler(index),
-      className: (0, import_clsx8.default)(
-        "tw-transition-all tw-duration-150",
-        { "tw-typography-body2": size !== "small" },
-        { "tw-typography-caption1": size === "small" },
-        optionClassName
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        "div",
-        {
-          className: (0, import_clsx8.default)(
-            "tw-px-4 tw-cursor-pointer tw-py-2 tw-mx-0.5 tw-rounded-xl",
-            isSelected ? experience === "personal" ? "tw-bg-[#f1e8fa]" : "tw-bg-[#fff1e1]" : isHighlighted ? "tw-bg-[#f3f4f6] tw-text-gray-900" : "tw-text-gray-900 hover:tw-bg-[#1118270a]"
-          ),
-          children: option.label
-        }
-      )
-    }
-  );
-});
 var Select = ({
   label,
   mandatory = false,
@@ -1039,31 +1000,6 @@ var Select = ({
     }
     return "";
   }, [selectedValue, validatedOptions, showDisplayValue, normalizeValue]);
-  const displayValue = (0, import_react2.useMemo)(() => getDisplayValue(), [getDisplayValue]);
-  const inputClasses = (0, import_react2.useMemo)(() => {
-    return (0, import_clsx8.default)(
-      "tw-w-full tw-rounded-xl tw-outline-none tw-transition-all tw-duration-200 tw-cursor-pointer tw-border-solid tw-text-color-text-default",
-      sizeClasses.input,
-      sizeClasses.padding,
-      variantClasses,
-      {
-        "tw-bg-white": valueSelected || displayValue || isFocused,
-        "tw-bg-color-gray-5": !valueSelected || !displayValue,
-        "!tw-bg-[#F8F7F6] tw-cursor-not-allowed tw-pointer-events-none": disabled
-      },
-      !label && "tw-flex tw-items-center",
-      {
-        "!tw-border-color-primary": isFocused && experience === "business"
-      },
-      {
-        "!tw-border-[#804D7B]": isFocused && experience === "personal"
-      },
-      error ? "!tw-border-color-text-critical " : "tw-border-[#EBE3DD] hover:tw-border-[#C5B7AC]",
-      "focus:tw-shadow-sm focus:tw-ring-offset-1",
-      className,
-      inputClassName
-    );
-  }, [sizeClasses, variantClasses, valueSelected, displayValue, isFocused, disabled, label, experience, error, className, inputClassName]);
   const filteredOptions = (0, import_react2.useMemo)(() => {
     var _a;
     if (!enableSearch) {
@@ -1158,7 +1094,7 @@ var Select = ({
   }, [highlightedIndex]);
   (0, import_react2.useEffect)(() => {
     optionRefs.current = [];
-  }, [filteredOptions.length]);
+  }, [filteredOptions]);
   const handleMouseEnter = (0, import_react2.useCallback)(() => {
     if (hoverTimeoutRef.current) {
       clearTimeout(hoverTimeoutRef.current);
@@ -1195,23 +1131,12 @@ var Select = ({
     },
     [isOpen, handleInputInteraction]
   );
-  const handleChevronMouseDown = (0, import_react2.useCallback)(
-    (e) => {
-      if (isHovering && selectedValue && allowClear) {
-        handleClear(e);
-      } else {
-        handleChevronClick(e);
-      }
-    },
-    [isHovering, selectedValue, allowClear, handleClear, handleChevronClick]
-  );
-  const handleOptionClick = (0, import_react2.useCallback)((option) => {
-    handleOptionSelect(option);
-  }, [handleOptionSelect]);
-  const handleOptionMouseEnter = (0, import_react2.useCallback)((index) => {
-    setHighlightedIndex(index);
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(InputWrapper, { disabled, disabledTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  const InputWrapper = ({ children }) => {
+    if (disabled && disabledTooltip)
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Tooltip_default, { title: disabledTooltip, children });
+    return children;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(InputWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       style,
@@ -1235,11 +1160,35 @@ var Select = ({
               autoCorrect: "off",
               autoCapitalize: "off",
               spellCheck: "false",
-              value: isFocused && enableSearch ? searchTerm : displayValue,
+              value: isFocused && enableSearch ? searchTerm : getDisplayValue(),
               onChange: enableSearch ? handleSearchChange : void 0,
               onClick: handleInputInteraction,
               onKeyDown: handleKeyDown,
-              className: inputClasses,
+              className: (0, import_clsx8.default)(
+                "tw-w-full tw-rounded-xl tw-outline-none tw-transition-all tw-duration-200 tw-cursor-pointer tw-border-solid tw-text-color-text-default",
+                sizeClasses.input,
+                sizeClasses.padding,
+                variantClasses,
+                {
+                  "tw-bg-white": valueSelected || getDisplayValue() || isFocused,
+                  "tw-bg-color-gray-5": !valueSelected || !getDisplayValue(),
+                  "!tw-bg-[#F8F7F6] tw-cursor-not-allowed tw-pointer-events-none": disabled
+                },
+                // Conditional padding based on label presence
+                !label && "tw-flex tw-items-center",
+                {
+                  "!tw-border-color-primary": isFocused && experience === "business"
+                },
+                {
+                  "!tw-border-[#804D7B]": isFocused && experience === "personal"
+                },
+                error ? "!tw-border-color-text-critical " : "tw-border-[#EBE3DD] hover:tw-border-[#C5B7AC]",
+                // Add focus state styling
+                "focus:tw-shadow-sm focus:tw-ring-offset-1",
+                className,
+                inputClassName
+                // Put inputClassName last so it can override default classes
+              ),
               readOnly: !isFocused || !enableSearch
             }
           ),
@@ -1280,7 +1229,13 @@ var Select = ({
                       // Only rotate chevron when open and not showing clear icon
                       isOpen && !(isHovering && selectedValue && allowClear) && "-tw-rotate-180"
                     ),
-                    onMouseDown: handleChevronMouseDown,
+                    onMouseDown: (e) => {
+                      if (isHovering && selectedValue && allowClear) {
+                        handleClear(e);
+                      } else {
+                        handleChevronClick(e);
+                      }
+                    },
                     children: disabled ? null : isHovering && selectedValue && allowClear ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                       CrossV2,
                       {
@@ -1311,32 +1266,75 @@ var Select = ({
               dropdownClassName
             ),
             ref: optionListRef,
-            children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
-              const isSelected = normalizeValue(selectedValue) === normalizeValue(option.value);
-              const isHighlighted = index === highlightedIndex;
-              return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref: (el) => optionRefs.current[index] = el, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                OptionItem,
-                {
-                  option,
-                  index,
-                  isSelected,
-                  isHighlighted,
-                  experience,
-                  size,
-                  optionClassName,
-                  onSelectHandler: handleOptionClick,
-                  onMouseEnterHandler: handleOptionMouseEnter
-                }
-              ) }, doubleCharSearch ? option.label : option.value);
-            }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "tw-px-4 tw-py-3 tw-text-gray-500 tw-text-sm", children: "No options found" })
+            children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "div",
+              {
+                ref: (el) => optionRefs.current[index] = el,
+                onClick: () => handleOptionSelect(option),
+                onMouseEnter: () => setHighlightedIndex(index),
+                className: (0, import_clsx8.default)(
+                  "tw-transition-all tw-duration-150",
+                  { "tw-typography-body2": size !== "small" },
+                  { "tw-typography-caption1": size === "small" },
+                  optionClassName
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  "div",
+                  {
+                    className: (0, import_clsx8.default)(
+                      "tw-px-4 tw-cursor-pointer tw-py-2 tw-mx-0.5 tw-rounded-xl",
+                      normalizeValue(selectedValue) === normalizeValue(option.value) ? experience === "personal" ? "tw-bg-[#f1e8fa]" : "tw-bg-[#fff1e1]" : (
+                        // Highlighted option styling (keyboard navigation)
+                        index === highlightedIndex ? "tw-bg-[#f3f4f6] tw-text-gray-900" : (
+                          // Default option styling
+                          "tw-text-gray-900 hover:tw-bg-[#1118270a]"
+                        )
+                      )
+                    ),
+                    children: option.label
+                  }
+                )
+              },
+              doubleCharSearch ? option.label : option.value
+            )) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "tw-px-4 tw-py-3 tw-text-gray-500 tw-text-sm", children: "No options found" })
           }
         )
       ]
     }
   ) });
 };
+var arePropsEqual = (prevProps, nextProps) => {
+  var _a, _b;
+  const criticalProps = [
+    "value",
+    "valueSelected",
+    "options",
+    "error",
+    "disabled",
+    "label",
+    "mandatory"
+  ];
+  for (const prop of criticalProps) {
+    if (prevProps[prop] !== nextProps[prop]) {
+      return false;
+    }
+  }
+  if (((_a = prevProps.options) == null ? void 0 : _a.length) !== ((_b = nextProps.options) == null ? void 0 : _b.length)) {
+    return false;
+  }
+  if (prevProps.options && nextProps.options) {
+    for (let i = 0; i < prevProps.options.length; i++) {
+      const prevOpt = prevProps.options[i];
+      const nextOpt = nextProps.options[i];
+      if ((prevOpt == null ? void 0 : prevOpt.value) !== (nextOpt == null ? void 0 : nextOpt.value) || (prevOpt == null ? void 0 : prevOpt.label) !== (nextOpt == null ? void 0 : nextOpt.label)) {
+        return false;
+      }
+    }
+  }
+  return true;
+};
 Select.displayName = "Select";
-var Select_default = Select;
+var Select_default = (0, import_react2.memo)(Select, arePropsEqual);
 
 // src/atom/RangePicker/RangePicker.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
@@ -2005,6 +2003,58 @@ function Slider(props) {
 }
 Slider.displayName = "Slider";
 var Slider_default = Slider;
+
+// src/molecules/UserProfile/UserProfile.tsx
+var import_clsx11 = __toESM(require("clsx"));
+
+// src/molecules/UserProfile/UserProfile.module.scss
+var UserProfile_module_default = { "userProfile": "UserProfile-module__userProfile___cRMm9", "profileContent": "UserProfile-module__profileContent___tfy8E", "profileHeader": "UserProfile-module__profileHeader___5qYbt", "profileName": "UserProfile-module__profileName___x8pg-", "profileEmail": "UserProfile-module__profileEmail___ZWKDd" };
+
+// src/molecules/UserProfile/UserProfile.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var UserProfile = ({
+  firstName = "",
+  lastName = "",
+  email = "",
+  profileImg = "",
+  className = "",
+  avatarHeight = 32,
+  avatarWidth = 32,
+  avatarSize = "normal",
+  showTag = false,
+  tagProps,
+  uniqueKey = "",
+  nameClassName = "",
+  emailClassName = ""
+}) => {
+  const fullName = `${firstName} ${lastName}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: (0, import_clsx11.default)(UserProfile_module_default.userProfile, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      Avatar,
+      {
+        img: profileImg,
+        name: fullName,
+        className: "tw-w-full tw-h-full tw-border-none",
+        height: avatarHeight,
+        width: avatarWidth,
+        size: avatarSize
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: UserProfile_module_default.profileContent, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: UserProfile_module_default.profileHeader, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { className: (0, import_clsx11.default)(nameClassName || (0, import_clsx11.default)(UserProfile_module_default.profileName, "tw-typography-body2Bold")), children: [
+          firstName,
+          " ",
+          lastName
+        ] }),
+        showTag && tagProps && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Tag, __spreadValues({}, tagProps))
+      ] }),
+      email && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: (0, import_clsx11.default)(emailClassName || (0, import_clsx11.default)(UserProfile_module_default.profileEmail, "tw-typography-caption3", "amp-mask")), children: email })
+    ] })
+  ] }, uniqueKey);
+};
+UserProfile.displayName = "UserProfile";
+var UserProfile_default = UserProfile;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
@@ -2018,5 +2068,6 @@ var Slider_default = Slider;
   Slider,
   Switch,
   Tag,
-  Tooltip
+  Tooltip,
+  UserProfile
 });

package/dist/index.mjs

@@ -1,40 +1,43 @@
 import {
   RangePicker_default
-} from "./chunk-IIJUGDEJ.mjs";
-import "./chunk-ZTRM4HZJ.mjs";
+} from "./chunk-35KDS27M.mjs";
 import {
-  Modal_default
-} from "./chunk-UQJ3BDM4.mjs";
+  Slider_default
+} from "./chunk-D3N7VFER.mjs";
+import {
+  Select_default
+} from "./chunk-E4FCLHYA.mjs";
 import {
   Switch_default
 } from "./chunk-MNARBWAJ.mjs";
+import {
+  Tooltip_default
+} from "./chunk-MLCMZRUC.mjs";
+import {
+  UserProfile_default
+} from "./chunk-N2WTNCQU.mjs";
 import {
   Tag_default
 } from "./chunk-4VZB2KR2.mjs";
 import {
   Avatar_default
 } from "./chunk-IWO2Y5QX.mjs";
-import {
-  Button_default
-} from "./chunk-AF2RKLH6.mjs";
 import {
   Checkbox_default
 } from "./chunk-UQZNUEZE.mjs";
 import {
-  Radio_default
-} from "./chunk-2EBPXGRY.mjs";
-import {
-  Slider_default
-} from "./chunk-D3N7VFER.mjs";
+  LoadingSpinner_default
+} from "./chunk-QKTMWS4J.mjs";
 import {
-  Select_default
-} from "./chunk-GU5F7Z7I.mjs";
+  Modal_default
+} from "./chunk-UQJ3BDM4.mjs";
 import {
-  Tooltip_default
-} from "./chunk-MLCMZRUC.mjs";
+  Button_default
+} from "./chunk-AF2RKLH6.mjs";
 import {
-  LoadingSpinner_default
-} from "./chunk-QKTMWS4J.mjs";
+  Radio_default
+} from "./chunk-2EBPXGRY.mjs";
+import "./chunk-ZTRM4HZJ.mjs";
 import "./chunk-FWCSY2DS.mjs";
 export {
   Avatar_default as Avatar,
@@ -48,5 +51,6 @@ export {
   Slider_default as Slider,
   Switch_default as Switch,
   Tag_default as Tag,
-  Tooltip_default as Tooltip
+  Tooltip_default as Tooltip,
+  UserProfile_default as UserProfile
 };

package/dist/molecules/UserProfile/UserProfile.d.mts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { T as TagProps } from '../../types-D4MD2w3_.mjs';
+import { A as AvatarProps } from '../../types-mhQmqhsR.mjs';
+
+interface UserProfileProps {
+    firstName: string;
+    lastName: string;
+    email?: string;
+    profileImg?: string;
+    className?: string;
+    avatarHeight?: number;
+    avatarWidth?: number;
+    avatarSize?: AvatarProps["size"];
+    showTag?: boolean;
+    tagProps?: TagProps;
+    uniqueKey?: string;
+    nameClassName?: string;
+    emailClassName?: string;
+}
+
+declare const UserProfile: React.FC<UserProfileProps>;
+
+export { UserProfile, UserProfile as default };

package/dist/molecules/UserProfile/UserProfile.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { T as TagProps } from '../../types-D4MD2w3_.js';
+import { A as AvatarProps } from '../../types-mhQmqhsR.js';
+
+interface UserProfileProps {
+    firstName: string;
+    lastName: string;
+    email?: string;
+    profileImg?: string;
+    className?: string;
+    avatarHeight?: number;
+    avatarWidth?: number;
+    avatarSize?: AvatarProps["size"];
+    showTag?: boolean;
+    tagProps?: TagProps;
+    uniqueKey?: string;
+    nameClassName?: string;
+    emailClassName?: string;
+}
+
+declare const UserProfile: React.FC<UserProfileProps>;
+
+export { UserProfile, UserProfile as default };