@trii/components 2.0.19 → 2.0.21

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import React__default, { useEffect } from 'react';
-import { Button, styled as styled$3, Box, IconButton, Avatar, Typography, Tooltip, Chip, Popper, ClickAwayListener, CardContent } from '@mui/material';
+import React__default, { useCallback, useEffect } from 'react';
+import { Button, styled as styled$3, Box, IconButton, Avatar, Typography, CircularProgress, Tooltip, Chip, Popper, ClickAwayListener, CardContent } from '@mui/material';
 import { withEmotionCache, ThemeContext, CacheProvider, Global, css, keyframes } from '@emotion/react';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -3022,6 +3022,422 @@ var capitalize = /*#__PURE__*/Object.freeze({
 	default: capitalize$1
 });
 
+/**
+ * Safe chained function.
+ *
+ * Will only create a new function if needed,
+ * otherwise will pass back existing functions or null.
+ */
+function createChainedFunction(...funcs) {
+  return funcs.reduce((acc, func) => {
+    if (func == null) {
+      return acc;
+    }
+    return function chainedFunction(...args) {
+      acc.apply(this, args);
+      func.apply(this, args);
+    };
+  }, () => {});
+}
+
+// Corresponds to 10 frames at 60 Hz.
+// A few bytes payload overhead when lodash/debounce is ~3 kB and debounce ~300 B.
+function debounce(func, wait = 166) {
+  let timeout;
+  function debounced(...args) {
+    const later = () => {
+      // @ts-ignore
+      func.apply(this, args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  }
+  debounced.clear = () => {
+    clearTimeout(timeout);
+  };
+  return debounced;
+}
+
+function deprecatedPropType(validator, reason) {
+  if (process.env.NODE_ENV === 'production') {
+    return () => null;
+  }
+  return (props, propName, componentName, location, propFullName) => {
+    const componentNameSafe = componentName || '<<anonymous>>';
+    const propFullNameSafe = propFullName || propName;
+    if (typeof props[propName] !== 'undefined') {
+      return new Error(`The ${location} \`${propFullNameSafe}\` of ` + `\`${componentNameSafe}\` is deprecated. ${reason}`);
+    }
+    return null;
+  };
+}
+
+function isMuiElement(element, muiNames) {
+  var _muiName, _element$type;
+  return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf( // For server components `muiName` is avaialble in element.type._payload.value.muiName
+  // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
+  // eslint-disable-next-line no-underscore-dangle
+  (_muiName = element.type.muiName) != null ? _muiName : (_element$type = element.type) == null || (_element$type = _element$type._payload) == null || (_element$type = _element$type.value) == null ? void 0 : _element$type.muiName) !== -1;
+}
+
+function ownerDocument(node) {
+  return node && node.ownerDocument || document;
+}
+
+function ownerWindow(node) {
+  const doc = ownerDocument(node);
+  return doc.defaultView || window;
+}
+
+function requirePropFactory(componentNameInError, Component) {
+  if (process.env.NODE_ENV === 'production') {
+    return () => null;
+  }
+
+  // eslint-disable-next-line react/forbid-foreign-prop-types
+  const prevPropTypes = Component ? _extends$1({}, Component.propTypes) : null;
+  const requireProp = requiredProp => (props, propName, componentName, location, propFullName, ...args) => {
+    const propFullNameSafe = propFullName || propName;
+    const defaultTypeChecker = prevPropTypes == null ? void 0 : prevPropTypes[propFullNameSafe];
+    if (defaultTypeChecker) {
+      const typeCheckerResult = defaultTypeChecker(props, propName, componentName, location, propFullName, ...args);
+      if (typeCheckerResult) {
+        return typeCheckerResult;
+      }
+    }
+    if (typeof props[propName] !== 'undefined' && !props[requiredProp]) {
+      return new Error(`The prop \`${propFullNameSafe}\` of ` + `\`${componentNameInError}\` can only be used together with the \`${requiredProp}\` prop.`);
+    }
+    return null;
+  };
+  return requireProp;
+}
+
+/**
+ * TODO v5: consider making it private
+ *
+ * passes {value} to {ref}
+ *
+ * WARNING: Be sure to only call this inside a callback that is passed as a ref.
+ * Otherwise, make sure to cleanup the previous {ref} if it changes. See
+ * https://github.com/mui/material-ui/issues/13539
+ *
+ * Useful if you want to expose the ref of an inner component to the public API
+ * while still using it inside the component.
+ * @param ref A ref callback or ref object. If anything falsy, this is a no-op.
+ */
+function setRef(ref, value) {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+
+/**
+ * A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
+ * This is useful for effects that are only needed for client-side rendering but not for SSR.
+ *
+ * Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * and confirm it doesn't apply to your use-case.
+ */
+const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+var useEnhancedEffect$1 = useEnhancedEffect;
+
+let globalId = 0;
+function useGlobalId(idOverride) {
+  const [defaultId, setDefaultId] = React.useState(idOverride);
+  const id = idOverride || defaultId;
+  React.useEffect(() => {
+    if (defaultId == null) {
+      // Fallback to this default id when possible.
+      // Use the incrementing value for client-side rendering only.
+      // We can't use it server-side.
+      // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
+      globalId += 1;
+      setDefaultId(`mui-${globalId}`);
+    }
+  }, [defaultId]);
+  return id;
+}
+
+// downstream bundlers may remove unnecessary concatenation, but won't remove toString call -- Workaround for https://github.com/webpack/webpack/issues/14814
+const maybeReactUseId = React['useId'.toString()];
+/**
+ *
+ * @example <div id={useId()} />
+ * @param idOverride
+ * @returns {string}
+ */
+function useId(idOverride) {
+  if (maybeReactUseId !== undefined) {
+    const reactId = maybeReactUseId();
+    return idOverride != null ? idOverride : reactId;
+  }
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
+  return useGlobalId(idOverride);
+}
+
+function unsupportedProp(props, propName, componentName, location, propFullName) {
+  if (process.env.NODE_ENV === 'production') {
+    return null;
+  }
+  const propFullNameSafe = propFullName || propName;
+  if (typeof props[propName] !== 'undefined') {
+    return new Error(`The prop \`${propFullNameSafe}\` is not supported. Please remove it.`);
+  }
+  return null;
+}
+
+function useControlled({
+  controlled,
+  default: defaultProp,
+  name,
+  state = 'value'
+}) {
+  // isControlled is ignored in the hook dependency lists as it should never change.
+  const {
+    current: isControlled
+  } = React.useRef(controlled !== undefined);
+  const [valueState, setValue] = React.useState(defaultProp);
+  const value = isControlled ? controlled : valueState;
+  if (process.env.NODE_ENV !== 'production') {
+    React.useEffect(() => {
+      if (isControlled !== (controlled !== undefined)) {
+        console.error([`MUI: A component is changing the ${isControlled ? '' : 'un'}controlled ${state} state of ${name} to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${name} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+      }
+    }, [state, name, controlled]);
+    const {
+      current: defaultValue
+    } = React.useRef(defaultProp);
+    React.useEffect(() => {
+      if (!isControlled && defaultValue !== defaultProp) {
+        console.error([`MUI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` + `To suppress this warning opt to use a controlled ${name}.`].join('\n'));
+      }
+    }, [JSON.stringify(defaultProp)]);
+  }
+  const setValueIfUncontrolled = React.useCallback(newValue => {
+    if (!isControlled) {
+      setValue(newValue);
+    }
+  }, []);
+  return [value, setValueIfUncontrolled];
+}
+
+/**
+ * Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ * See RFC in https://github.com/reactjs/rfcs/pull/220
+ */
+
+function useEventCallback(fn) {
+  const ref = React.useRef(fn);
+  useEnhancedEffect$1(() => {
+    ref.current = fn;
+  });
+  return React.useRef((...args) =>
+  // @ts-expect-error hide `this`
+  (0, ref.current)(...args)).current;
+}
+
+function useForkRef(...refs) {
+  /**
+   * This will create a new function if the refs passed to this hook change and are all defined.
+   * This means react will call the old forkRef with `null` and the new forkRef
+   * with the ref. Cleanup naturally emerges from this behavior.
+   */
+  return React.useMemo(() => {
+    if (refs.every(ref => ref == null)) {
+      return null;
+    }
+    return instance => {
+      refs.forEach(ref => {
+        setRef(ref, instance);
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, refs);
+}
+
+class Timeout {
+  constructor() {
+    this.currentId = null;
+    this.clear = () => {
+      if (this.currentId !== null) {
+        clearTimeout(this.currentId);
+        this.currentId = null;
+      }
+    };
+    this.disposeEffect = () => {
+      return this.clear;
+    };
+  }
+  static create() {
+    return new Timeout();
+  }
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  start(delay, fn) {
+    this.clear();
+    this.currentId = setTimeout(() => {
+      this.currentId = null;
+      fn();
+    }, delay);
+  }
+}
+
+let hadKeyboardEvent = true;
+let hadFocusVisibleRecently = false;
+const hadFocusVisibleRecentlyTimeout = new Timeout();
+const inputTypesWhitelist = {
+  text: true,
+  search: true,
+  url: true,
+  tel: true,
+  email: true,
+  password: true,
+  number: true,
+  date: true,
+  month: true,
+  week: true,
+  time: true,
+  datetime: true,
+  'datetime-local': true
+};
+
+/**
+ * Computes whether the given element should automatically trigger the
+ * `focus-visible` class being added, i.e. whether it should always match
+ * `:focus-visible` when focused.
+ * @param {Element} node
+ * @returns {boolean}
+ */
+function focusTriggersKeyboardModality(node) {
+  const {
+    type,
+    tagName
+  } = node;
+  if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {
+    return true;
+  }
+  if (tagName === 'TEXTAREA' && !node.readOnly) {
+    return true;
+  }
+  if (node.isContentEditable) {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Keep track of our keyboard modality state with `hadKeyboardEvent`.
+ * If the most recent user interaction was via the keyboard;
+ * and the key press did not include a meta, alt/option, or control key;
+ * then the modality is keyboard. Otherwise, the modality is not keyboard.
+ * @param {KeyboardEvent} event
+ */
+function handleKeyDown(event) {
+  if (event.metaKey || event.altKey || event.ctrlKey) {
+    return;
+  }
+  hadKeyboardEvent = true;
+}
+
+/**
+ * If at any point a user clicks with a pointing device, ensure that we change
+ * the modality away from keyboard.
+ * This avoids the situation where a user presses a key on an already focused
+ * element, and then clicks on a different element, focusing it with a
+ * pointing device, while we still think we're in keyboard modality.
+ */
+function handlePointerDown() {
+  hadKeyboardEvent = false;
+}
+function handleVisibilityChange() {
+  if (this.visibilityState === 'hidden') {
+    // If the tab becomes active again, the browser will handle calling focus
+    // on the element (Safari actually calls it twice).
+    // If this tab change caused a blur on an element with focus-visible,
+    // re-apply the class when the user switches back to the tab.
+    if (hadFocusVisibleRecently) {
+      hadKeyboardEvent = true;
+    }
+  }
+}
+function prepare(doc) {
+  doc.addEventListener('keydown', handleKeyDown, true);
+  doc.addEventListener('mousedown', handlePointerDown, true);
+  doc.addEventListener('pointerdown', handlePointerDown, true);
+  doc.addEventListener('touchstart', handlePointerDown, true);
+  doc.addEventListener('visibilitychange', handleVisibilityChange, true);
+}
+function isFocusVisible(event) {
+  const {
+    target
+  } = event;
+  try {
+    return target.matches(':focus-visible');
+  } catch (error) {
+    // Browsers not implementing :focus-visible will throw a SyntaxError.
+    // We use our own heuristic for those browsers.
+    // Rethrow might be better if it's not the expected error but do we really
+    // want to crash if focus-visible malfunctioned?
+  }
+
+  // No need for validFocusTarget check. The user does that by attaching it to
+  // focusable events only.
+  return hadKeyboardEvent || focusTriggersKeyboardModality(target);
+}
+function useIsFocusVisible() {
+  const ref = React.useCallback(node => {
+    if (node != null) {
+      prepare(node.ownerDocument);
+    }
+  }, []);
+  const isFocusVisibleRef = React.useRef(false);
+
+  /**
+   * Should be called if a blur event is fired
+   */
+  function handleBlurVisible() {
+    // checking against potential state variable does not suffice if we focus and blur synchronously.
+    // React wouldn't have time to trigger a re-render so `focusVisible` would be stale.
+    // Ideally we would adjust `isFocusVisible(event)` to look at `relatedTarget` for blur events.
+    // This doesn't work in IE11 due to https://github.com/facebook/react/issues/3751
+    // TODO: check again if React releases their internal changes to focus event handling (https://github.com/facebook/react/pull/19186).
+    if (isFocusVisibleRef.current) {
+      // To detect a tab/window switch, we look for a blur event followed
+      // rapidly by a visibility change.
+      // If we don't see a visibility change within 100ms, it's probably a
+      // regular focus change.
+      hadFocusVisibleRecently = true;
+      hadFocusVisibleRecentlyTimeout.start(100, () => {
+        hadFocusVisibleRecently = false;
+      });
+      isFocusVisibleRef.current = false;
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Should be called if a blur event is fired
+   */
+  function handleFocusVisible(event) {
+    if (isFocusVisible(event)) {
+      isFocusVisibleRef.current = true;
+      return true;
+    }
+    return false;
+  }
+  return {
+    isFocusVisibleRef,
+    onFocus: handleFocusVisible,
+    onBlur: handleBlurVisible,
+    ref
+  };
+}
+
 /**
  * Add keys, values of `defaultProps` that does not exist in `props`
  * @param {object} defaultProps
@@ -6635,7 +7051,7 @@ var require$$1 = /*@__PURE__*/getAugmentedNamespace(formatMuiErrorMessage);
 
 var require$$2 = /*@__PURE__*/getAugmentedNamespace(clamp);
 
-var _interopRequireDefault$1 = interopRequireDefaultExports;
+var _interopRequireDefault$3 = interopRequireDefaultExports;
 Object.defineProperty(colorManipulator, "__esModule", {
   value: true
 });
@@ -6657,8 +7073,8 @@ colorManipulator.private_safeEmphasize = private_safeEmphasize;
 colorManipulator.private_safeLighten = private_safeLighten;
 colorManipulator.recomposeColor = recomposeColor;
 colorManipulator.rgbToHex = rgbToHex;
-var _formatMuiErrorMessage2 = _interopRequireDefault$1(require$$1);
-var _clamp = _interopRequireDefault$1(require$$2);
+var _formatMuiErrorMessage2 = _interopRequireDefault$3(require$$1);
+var _clamp = _interopRequireDefault$3(require$$2);
 /* eslint-disable @typescript-eslint/naming-convention */
 
 /**
@@ -7780,21 +8196,21 @@ var require$$7 = /*@__PURE__*/getAugmentedNamespace(createTheme$1);
 
 var require$$8 = /*@__PURE__*/getAugmentedNamespace(styleFunctionSx);
 
-var _interopRequireDefault = interopRequireDefaultExports;
+var _interopRequireDefault$2 = interopRequireDefaultExports;
 Object.defineProperty(createStyled$1, "__esModule", {
   value: true
 });
 var _default = createStyled$1.default = createStyled;
 createStyled$1.shouldForwardProp = shouldForwardProp;
 createStyled$1.systemDefaultTheme = void 0;
-var _extends2 = _interopRequireDefault(require_extends());
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(requireObjectWithoutPropertiesLoose());
+var _extends2 = _interopRequireDefault$2(require_extends());
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault$2(requireObjectWithoutPropertiesLoose());
 var _styledEngine = _interopRequireWildcard(require$$3);
 var _deepmerge = require$$4;
-var _capitalize = _interopRequireDefault(require$$5);
-var _getDisplayName = _interopRequireDefault(require$$6);
-var _createTheme = _interopRequireDefault(require$$7);
-var _styleFunctionSx = _interopRequireDefault(require$$8);
+var _capitalize = _interopRequireDefault$2(require$$5);
+var _getDisplayName = _interopRequireDefault$2(require$$6);
+var _createTheme = _interopRequireDefault$2(require$$7);
+var _styleFunctionSx = _interopRequireDefault$2(require$$8);
 const _excluded$1 = ["ownerState"],
   _excluded2 = ["variants"],
   _excluded3 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
@@ -8224,7 +8640,7 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes /* remove-proptypes */
 SvgIcon.muiName = 'SvgIcon';
 var SvgIcon$1 = SvgIcon;
 
-function createSvgIcon(path, displayName) {
+function createSvgIcon$1(path, displayName) {
   function Component(props, ref) {
     return /*#__PURE__*/jsxRuntimeExports.jsx(SvgIcon$1, _extends$1({
       "data-testid": `${displayName}Icon`,
@@ -8242,45 +8658,127 @@ function createSvgIcon(path, displayName) {
   return /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Component));
 }
 
-var Email = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
+// TODO: remove this export once ClassNameGenerator is stable
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const unstable_ClassNameGenerator = {
+  configure: generator => {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(['MUI: `ClassNameGenerator` import from `@mui/material/utils` is outdated and might cause unexpected issues.', '', "You should use `import { unstable_ClassNameGenerator } from '@mui/material/className'` instead", '', 'The detail of the issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401', '', 'The updated documentation: https://mui.com/guides/classname-generator/'].join('\n'));
+    }
+    ClassNameGenerator$1.configure(generator);
+  }
+};
+
+var utils = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	capitalize: capitalize$1,
+	createChainedFunction: createChainedFunction,
+	createSvgIcon: createSvgIcon$1,
+	debounce: debounce,
+	deprecatedPropType: deprecatedPropType,
+	isMuiElement: isMuiElement,
+	ownerDocument: ownerDocument,
+	ownerWindow: ownerWindow,
+	requirePropFactory: requirePropFactory,
+	setRef: setRef,
+	unstable_ClassNameGenerator: unstable_ClassNameGenerator,
+	unstable_useEnhancedEffect: useEnhancedEffect$1,
+	unstable_useId: useId,
+	unsupportedProp: unsupportedProp,
+	useControlled: useControlled,
+	useEventCallback: useEventCallback,
+	useForkRef: useForkRef,
+	useIsFocusVisible: useIsFocusVisible
+});
+
+var Email = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 4-8 5-8-5V6l8 5 8-5z"
 }), 'Email');
 
-var Facebook = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
+var Facebook = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m13 2h-2.5A3.5 3.5 0 0 0 12 8.5V11h-2v3h2v7h3v-7h3v-3h-3V9a1 1 0 0 1 1-1h2V5z"
 }), 'Facebook');
 
-var Handyman = createSvgIcon([/*#__PURE__*/jsxRuntimeExports.jsx("path", {
+var Handyman = createSvgIcon$1([/*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "m21.67 18.17-5.3-5.3h-.99l-2.54 2.54v.99l5.3 5.3c.39.39 1.02.39 1.41 0l2.12-2.12c.39-.38.39-1.02 0-1.41"
 }, "0"), /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "m17.34 10.19 1.41-1.41 2.12 2.12c1.17-1.17 1.17-3.07 0-4.24l-3.54-3.54-1.41 1.41V1.71l-.7-.71-3.54 3.54.71.71h2.83l-1.41 1.41 1.06 1.06-2.89 2.89-4.13-4.13V5.06L4.83 2.04 2 4.87 5.03 7.9h1.41l4.13 4.13-.85.85H7.6l-5.3 5.3c-.39.39-.39 1.02 0 1.41l2.12 2.12c.39.39 1.02.39 1.41 0l5.3-5.3v-2.12l5.15-5.15z"
 }, "1")], 'Handyman');
 
-var Instagram = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
+var Instagram = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z"
 }), 'Instagram');
 
-var OpenInNew = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
-  d: "M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3z"
-}), 'OpenInNew');
-
-var PhoneEnabled = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
+var PhoneEnabled = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "m17.38 10.79-2.2-2.2c-.28-.28-.36-.67-.25-1.02.37-1.12.57-2.32.57-3.57 0-.55.45-1 1-1H20c.55 0 1 .45 1 1 0 9.39-7.61 17-17 17-.55 0-1-.45-1-1v-3.49c0-.55.45-1 1-1 1.24 0 2.45-.2 3.57-.57.35-.12.75-.03 1.02.24l2.2 2.2c2.83-1.45 5.15-3.76 6.59-6.59"
 }), 'PhoneEnabled');
 
-var ThreeP = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
+var ThreeP = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M20 2H4.01c-1.1 0-2 .9-2 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-8 4c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m4 8H8v-.57c0-.81.48-1.53 1.22-1.85.85-.37 1.79-.58 2.78-.58.99 0 1.93.21 2.78.58.74.32 1.22 1.04 1.22 1.85z"
 }), 'ThreeP');
 
-var WhatsApp = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
+var WhatsApp = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M16.75 13.96c.25.13.41.2.46.3.06.11.04.61-.21 1.18-.2.56-1.24 1.1-1.7 1.12-.46.02-.47.36-2.96-.73-2.49-1.09-3.99-3.75-4.11-3.92-.12-.17-.96-1.38-.92-2.61.05-1.22.69-1.8.95-2.04.24-.26.51-.29.68-.26h.47c.15 0 .36-.06.55.45l.69 1.87c.06.13.1.28.01.44l-.27.41-.39.42c-.12.12-.26.25-.12.5.12.26.62 1.09 1.32 1.78.91.88 1.71 1.17 1.95 1.3.24.14.39.12.54-.04l.81-.94c.19-.25.35-.19.58-.11l1.67.88M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10c-1.97 0-3.8-.57-5.35-1.55L2 22l1.55-4.65A9.969 9.969 0 0 1 2 12 10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8c0 1.72.54 3.31 1.46 4.61L4.5 19.5l2.89-.96A7.95 7.95 0 0 0 12 20a8 8 0 0 0 8-8 8 8 0 0 0-8-8z"
 }), 'WhatsApp');
 
+var ArrowForward = {};
+
+var createSvgIcon = {};
+
+var require$$0 = /*@__PURE__*/getAugmentedNamespace(utils);
+
+var hasRequiredCreateSvgIcon;
+
+function requireCreateSvgIcon () {
+	if (hasRequiredCreateSvgIcon) return createSvgIcon;
+	hasRequiredCreateSvgIcon = 1;
+	(function (exports) {
+		'use client';
+
+		Object.defineProperty(exports, "__esModule", {
+		  value: true
+		});
+		Object.defineProperty(exports, "default", {
+		  enumerable: true,
+		  get: function () {
+		    return _utils.createSvgIcon;
+		  }
+		});
+		var _utils = require$$0; 
+	} (createSvgIcon));
+	return createSvgIcon;
+}
+
+var _interopRequireDefault$1 = interopRequireDefaultExports;
+Object.defineProperty(ArrowForward, "__esModule", {
+  value: true
+});
+var default_1$1 = ArrowForward.default = void 0;
+var _createSvgIcon$1 = _interopRequireDefault$1(requireCreateSvgIcon());
+var _jsxRuntime$1 = jsxRuntimeExports;
+default_1$1 = ArrowForward.default = (0, _createSvgIcon$1.default)( /*#__PURE__*/(0, _jsxRuntime$1.jsx)("path", {
+  d: "m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
+}), 'ArrowForward');
+
+var Message = {};
+
+var _interopRequireDefault = interopRequireDefaultExports;
+Object.defineProperty(Message, "__esModule", {
+  value: true
+});
+var default_1 = Message.default = void 0;
+var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
+var _jsxRuntime = jsxRuntimeExports;
+default_1 = Message.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+  d: "M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-2 12H6v-2h12zm0-3H6V9h12zm0-3H6V6h12z"
+}), 'Message');
+
 const ButtonsContainer = styled$3(Box)(({ theme }) => ({
     position: 'absolute',
     top: 8,
     right: 8,
     display: 'flex',
+    flexDirection: 'column',
     gap: 4,
     zIndex: 1,
     //@ts-ignore
@@ -8294,6 +8792,7 @@ const HeaderContainer = styled$3(Box)({
     flexDirection: 'column',
     alignItems: 'center',
     marginBottom: '16px',
+    position: 'relative',
 });
 const ContactAvatar = styled$3(Avatar)({
     width: 60,
@@ -8307,14 +8806,59 @@ const ContactName = styled$3(Typography)({
     maxWidth: 200,
     textAlign: 'center',
 });
-const Header = ({ imgUrl, name, contactId, }) => {
-    const handleOpenInNewTab = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        const url = `/a/contacts/contacts/${contactId}`;
-        window.open(url, '_blank');
-    };
-    return (jsxRuntimeExports.jsxs(HeaderContainer, { children: [jsxRuntimeExports.jsx(ButtonsContainer, { children: jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: handleOpenInNewTab, children: jsxRuntimeExports.jsx(OpenInNew, { fontSize: "small" }) }) }), jsxRuntimeExports.jsx(ContactAvatar, { src: imgUrl, alt: "Contact Avatar" }), jsxRuntimeExports.jsx(ContactName, { variant: "h6", children: name })] }));
+const LoadingContainer = styled$3(Box)({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 60,
+    height: 60,
+    marginBottom: 8,
+});
+const Header = ({ imgUrl, name, contactId, navigate, isLoading = false, onError, onClose, isBusiness }) => {
+    const handleNavigation = useCallback((url) => (event) => {
+        try {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!url) {
+                throw new Error('Navigation URL is required');
+            }
+            const isNewTab = event.ctrlKey || event.metaKey || event.button === 1; // Ctrl+Click, Cmd+Click, Middle Mouse
+            if (isNewTab) {
+                window.open(url, '_blank', 'noopener,noreferrer');
+            }
+            else {
+                navigate(url);
+            }
+        }
+        catch (error) {
+            onError?.(error instanceof Error ? error : new Error('Navigation failed'));
+        }
+    }, [navigate, onError]);
+    const handleNavigateToContacts = handleNavigation(isBusiness
+        ? `/a/contacts/business/${contactId}`
+        : `/a/contacts/contacts/${contactId}`);
+    const handleNavigateToConversations = handleNavigation('/a/conversations/conversations');
+    const displayName = name || 'Unknown Contact';
+    const avatarAlt = `Avatar for ${displayName}`;
+    return (jsxRuntimeExports.jsxs(HeaderContainer, { children: [jsxRuntimeExports.jsxs(ButtonsContainer, { children: [jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: (e) => {
+                            handleNavigateToContacts(e);
+                            onClose();
+                        }, onMouseDown: (e) => {
+                            if (e.button === 1) {
+                                // Middle mouse button
+                                handleNavigateToContacts(e);
+                                onClose();
+                            }
+                        }, disabled: !contactId, "aria-label": "View contact details", children: jsxRuntimeExports.jsx(default_1$1, { fontSize: "small" }) }), jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: (e) => {
+                            handleNavigateToConversations(e);
+                            onClose();
+                        }, onMouseDown: (e) => {
+                            if (e.button === 1) {
+                                // Middle mouse button
+                                handleNavigateToConversations(e);
+                                onClose();
+                            }
+                        }, "aria-label": "Go to conversations", children: jsxRuntimeExports.jsx(default_1, { fontSize: "small" }) })] }), isLoading ? (jsxRuntimeExports.jsx(LoadingContainer, { children: jsxRuntimeExports.jsx(CircularProgress, { size: 24 }) })) : (jsxRuntimeExports.jsx(ContactAvatar, { src: imgUrl, alt: avatarAlt, onError: () => onError?.(new Error('Failed to load avatar')) })), jsxRuntimeExports.jsx(ContactName, { variant: "h6", title: displayName, children: displayName })] }));
 };
 
 const Container$1 = styled$3(Box)({
@@ -14163,7 +14707,7 @@ const Container = styled$3(Box)({
     alignItems: 'center',
     gap: 8,
 });
-const SectionTitle$1 = styled$3(Typography)({
+const SectionTitle$3 = styled$3(Typography)({
     borderBottom: `1px solid lightgray`,
     width: '100%',
 });
@@ -14221,7 +14765,105 @@ const Properties = ({ properties, title }) => {
         }
         return value;
     };
-    return (jsxRuntimeExports.jsxs(Container, { children: [jsxRuntimeExports.jsx(SectionTitle$1, { fontWeight: "bold", gutterBottom: true, mt: 2, variant: "subtitle1", children: title }), properties?.map((property, i) => property.value.length > 0 && (jsxRuntimeExports.jsxs(PropertyItem, { children: [jsxRuntimeExports.jsx(PropertyIcon, {}), jsxRuntimeExports.jsxs(PropertyText, { children: [getPropertyTitle(property.nameKey), ":", ' ', formatPropertyValue(property.value, property.type)] })] }, i)))] }));
+    return (jsxRuntimeExports.jsxs(Container, { children: [jsxRuntimeExports.jsx(SectionTitle$3, { fontWeight: "bold", gutterBottom: true, mt: 2, variant: "subtitle1", children: title }), properties?.map((property, i) => property.value.length > 0 && (jsxRuntimeExports.jsxs(PropertyItem, { children: [jsxRuntimeExports.jsx(PropertyIcon, {}), jsxRuntimeExports.jsxs(PropertyText, { children: [getPropertyTitle(property.nameKey), ":", ' ', formatPropertyValue(property.value, property.type)] })] }, i)))] }));
+};
+
+const SectionTitle$2 = styled$3(Typography)({
+    fontWeight: 'bold',
+    marginBottom: '8px',
+    marginTop: '16px',
+    borderBottom: `1px solid lightgray`,
+});
+const TagContainer = styled$3(Box)({
+    marginBottom: 16,
+});
+const StyledChip = styled$3(Chip)(({ theme }) => ({
+    marginRight: 8,
+    marginBottom: 8,
+    backgroundColor: `${theme.palette.primary.main}b3`,
+}));
+const LabelsSection = ({ contactData, title }) => {
+    if (!contactData)
+        return null;
+    if (!contactData.tags?.length)
+        return null;
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionTitle$2, { gutterBottom: true, mt: 2, variant: "subtitle1", children: title }), jsxRuntimeExports.jsx(TagContainer, { children: contactData?.tags
+                    ?.filter((tag) => tag.name?.trim())
+                    .map((tag) => (jsxRuntimeExports.jsx(StyledChip, { label: tag.name, color: "primary", size: "small" }, tag.id))) })] }));
+};
+
+/**
+ * Type guard to check if an object is an IContact
+ * @param obj The object to check
+ * @returns True if the object is an IContact
+ */
+function isContact(obj) {
+    return (obj !== null &&
+        typeof obj === 'object' &&
+        typeof obj.id === 'string' &&
+        typeof obj.spaceId === 'string' &&
+        typeof obj.name === 'string' &&
+        typeof obj.firstName === 'string' &&
+        typeof obj.lastName === 'string' &&
+        Array.isArray(obj.phones) &&
+        Array.isArray(obj.emails) &&
+        'origin' in obj &&
+        typeof obj.isSpam === 'boolean' &&
+        (!obj.businessId || typeof obj.businessId === 'string'));
+}
+
+const SectionTitle$1 = styled$3(Typography)({
+    fontWeight: 'bold',
+    marginBottom: '8px',
+    marginTop: '16px',
+    borderBottom: `1px solid lightgray`,
+});
+const BusinessSection = ({ contactData, title }) => {
+    if (!contactData || !isContact(contactData))
+        return null;
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionTitle$1, { gutterBottom: true, mt: 2, variant: "subtitle1", children: title }), jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", children: contactData?.businessName })] }));
+};
+
+/**
+ * Type guard to check if an object is an IBusiness
+ * @param obj The object to check
+ * @returns True if the object is an IBusiness
+ */
+function isBusiness(obj) {
+    // Si el objeto tiene explícitamente la propiedad isBusiness como true, lo consideramos un negocio
+    if (obj?.isBusiness === true) {
+        return true;
+    }
+    // De lo contrario, realizamos las comprobaciones tradicionales
+    return (obj !== null &&
+        typeof obj === 'object' &&
+        typeof obj.id === 'string' &&
+        typeof obj.spaceId === 'string' &&
+        typeof obj.name === 'string' &&
+        Array.isArray(obj.membersId) &&
+        Array.isArray(obj.members) &&
+        Array.isArray(obj.phones) &&
+        Array.isArray(obj.emails) &&
+        typeof obj.imageUrl === 'string' &&
+        !('firstName' in obj) &&
+        !('lastName' in obj));
+}
+
+// Components
+const MemberItem = ({ name }) => {
+    return (jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", children: name }));
+};
+
+const SectionTitle = styled$3(Typography)({
+    fontWeight: 'bold',
+    marginBottom: '8px',
+    marginTop: '16px',
+    borderBottom: `1px solid lightgray`,
+});
+const MembersSection = ({ contactData, title }) => {
+    if (!contactData || !isBusiness(contactData) || !contactData.members?.length)
+        return null;
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionTitle, { gutterBottom: true, mt: 2, variant: "subtitle1", children: title }), jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", children: contactData?.members.map((member) => (jsxRuntimeExports.jsx(MemberItem, { name: member.name }, member.id))) })] }));
 };
 
 const PopupContainer = styled$3(Box)(({ theme }) => ({
@@ -14251,28 +14893,17 @@ const PopupContainer = styled$3(Box)(({ theme }) => ({
         background: '#616161',
     },
 }));
-const SectionTitle = styled$3(Typography)({
-    fontWeight: 'bold',
-    marginBottom: '8px',
-    marginTop: '16px',
-    borderBottom: `1px solid lightgray`,
-});
-const TagContainer = styled$3(Box)({
-    marginBottom: 16,
-});
-const StyledChip = styled$3(Chip)(({ theme }) => ({
-    marginRight: 8,
-    marginBottom: 8,
-    backgroundColor: `${theme.palette.primary.main}b3`
-}));
-const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl, t = (key) => ({
+const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl, navigate, t = (key) => ({
     labels: 'Etiquetas',
     phone: 'Teléfono',
     business: 'Empresa',
+    businessMembers: 'Miembros de la empresa',
     properties: 'Propiedades',
     view: 'Ver',
-    'E-mail Address': 'Correo Electrónico'
+    email: 'Correo Electrónico',
 }[key] || key), }) => {
+    const dataIsBusiness = isBusiness(contactData);
+    const dataIsContact = isContact(contactData);
     const contactMethods = [
         {
             icon: jsxRuntimeExports.jsx(PhoneEnabled, { fontSize: "small" }),
@@ -14282,7 +14913,7 @@ const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl,
         },
         {
             icon: jsxRuntimeExports.jsx(Email, { fontSize: "small" }),
-            title: t('E-mail Address'),
+            title: t('email'),
             contactList: contactData?.emails || [],
             showTitle: true,
         },
@@ -14321,7 +14952,7 @@ const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl,
             window.removeEventListener('keydown', handleKeyDown);
         };
     }, [open, onClose]);
-    return (jsxRuntimeExports.jsx(Popper, { sx: { zIndex: 1300 }, open: open, anchorEl: anchorEl, placement: "bottom-start", "data-popper-child": "true", children: jsxRuntimeExports.jsx(ClickAwayListener, { onClickAway: onClose, children: jsxRuntimeExports.jsx(PopupContainer, { children: jsxRuntimeExports.jsxs(CardContent, { children: [jsxRuntimeExports.jsx(Header, { contactId: contactData?.id, imgUrl: avatarImgUrl, name: contactData?.name }), jsxRuntimeExports.jsx(SectionTitle, { gutterBottom: true, mt: 2, variant: "subtitle1", children: t('labels') }), jsxRuntimeExports.jsx(TagContainer, { children: contactData?.tags?.map((tag) => (jsxRuntimeExports.jsx(StyledChip, { label: tag.name, color: "primary", size: "small" }, tag.id))) }), jsxRuntimeExports.jsx(SectionTitle, { gutterBottom: true, mt: 2, variant: "subtitle1", children: t('business') }), jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", children: contactData?.businessName }), contactMethods.map((method, index) => (jsxRuntimeExports.jsx(ContactMethod, { icon: method.icon, title: method.title, contactList: method.contactList, showTitle: method.showTitle }, index))), jsxRuntimeExports.jsx(Properties, { properties: contactData?.properties, title: t('properties') })] }) }) }) }));
+    return (jsxRuntimeExports.jsx(Popper, { sx: { zIndex: 1300 }, open: open, anchorEl: anchorEl, placement: "bottom-start", "data-popper-child": "true", children: jsxRuntimeExports.jsx(ClickAwayListener, { onClickAway: onClose, children: jsxRuntimeExports.jsx(PopupContainer, { children: jsxRuntimeExports.jsxs(CardContent, { children: [jsxRuntimeExports.jsx(Header, { navigate: navigate, contactId: contactData?.id, imgUrl: avatarImgUrl, name: contactData?.name, onClose: onClose, isBusiness: dataIsBusiness }), jsxRuntimeExports.jsx(LabelsSection, { contactData: contactData, title: t('labels') }), dataIsContact && (jsxRuntimeExports.jsx(BusinessSection, { contactData: contactData, title: t('business') })), dataIsBusiness && (jsxRuntimeExports.jsx(MembersSection, { contactData: contactData, title: t('businessMembers') })), contactMethods.map((method, index) => (jsxRuntimeExports.jsx(ContactMethod, { icon: method.icon, title: method.title, contactList: method.contactList, showTitle: method.showTitle }, index))), jsxRuntimeExports.jsx(Properties, { properties: contactData?.properties, title: t('properties') })] }) }) }) }));
 };
 
 export { ContactInfoPopup, TestBox };