@assembly-js/design-system 2.4.0

package/dist/umd/components/Tooltip/Tooltip.js

@@ -0,0 +1,281 @@
+// This file is generated by a script. Do not edit this file directly.
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "react-dom", "clsx", "../Button", "../TextLink/TextLink", "../Status/Status", "../Chip/Chip"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("react-dom"), require("clsx"), require("../Button"), require("../TextLink/TextLink"), require("../Status/Status"), require("../Chip/Chip"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.reactDom, global.clsx, global.Button, global.TextLink, global.Status, global.Chip);
+    global.Tooltip = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _reactDom, _clsx, _Button, _TextLink, _Status, _Chip) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.Tooltip = void 0;
+  _react = _interopRequireWildcard(_react);
+  _reactDom = _interopRequireDefault(_reactDom);
+  _clsx = _interopRequireDefault(_clsx);
+  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+  function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+  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 _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; } }
+  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 _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 = !0, o = !1; 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 = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+  function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+  var Tooltip = _exports.Tooltip = function Tooltip(_ref) {
+    var content = _ref.content,
+      position = _ref.position,
+      _ref$trigger = _ref.trigger,
+      trigger = _ref$trigger === void 0 ? 'hover' : _ref$trigger,
+      actionProps = _ref.actionProps,
+      actionType = _ref.actionType,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$triggerClassname = _ref.triggerClassname,
+      triggerClassname = _ref$triggerClassname === void 0 ? '' : _ref$triggerClassname,
+      _ref$tooltipClassname = _ref.tooltipClassname,
+      tooltipClassname = _ref$tooltipClassname === void 0 ? '' : _ref$tooltipClassname,
+      _ref$anchorOrigin = _ref.anchorOrigin,
+      anchorOrigin = _ref$anchorOrigin === void 0 ? {
+        vertical: 'center',
+        horizontal: 'right'
+      } : _ref$anchorOrigin,
+      _ref$transformOrigin = _ref.transformOrigin,
+      transformOrigin = _ref$transformOrigin === void 0 ? {
+        vertical: 'center',
+        horizontal: 'left'
+      } : _ref$transformOrigin,
+      _ref$offset = _ref.offset,
+      offset = _ref$offset === void 0 ? {
+        x: 0,
+        y: 0
+      } : _ref$offset,
+      _ref$baseOffset = _ref.baseOffset,
+      baseOffset = _ref$baseOffset === void 0 ? 8 : _ref$baseOffset,
+      _ref$showDelayDuratio = _ref.showDelayDuration,
+      showDelayDuration = _ref$showDelayDuratio === void 0 ? 0 : _ref$showDelayDuratio,
+      children = _ref.children;
+    var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+    var hideTimeoutRef = (0, _react.useRef)(null);
+    var showTimeoutRef = (0, _react.useRef)(null);
+    var triggerRef = (0, _react.useRef)(null);
+    var tooltipRef = (0, _react.useRef)(null);
+    var _useState3 = (0, _react.useState)({
+        top: 0,
+        left: 0
+      }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      coords = _useState4[0],
+      setCoords = _useState4[1];
+    var updateTooltipPosition = (0, _react.useCallback)(function () {
+      var _offset$x, _offset$y;
+      if (!tooltipRef.current || !triggerRef.current) return;
+      var tooltipRect = tooltipRef.current.getBoundingClientRect();
+      var triggerRect = triggerRef.current.getBoundingClientRect();
+      var top = 0;
+      var left = 0;
+      var offsetX = (_offset$x = offset.x) !== null && _offset$x !== void 0 ? _offset$x : 0;
+      var offsetY = (_offset$y = offset.y) !== null && _offset$y !== void 0 ? _offset$y : 0;
+
+      // Determine effective anchor and transform origins
+      // Use position prop for backwards compatibility, otherwise use anchorOrigin/transformOrigin
+      var effectiveAnchorVertical = anchorOrigin.vertical;
+      var effectiveAnchorHorizontal = anchorOrigin.horizontal;
+      var effectiveTransformVertical = transformOrigin.vertical;
+      var effectiveTransformHorizontal = transformOrigin.horizontal;
+      if (position) {
+        switch (position) {
+          case 'top':
+            effectiveAnchorVertical = 'top';
+            effectiveAnchorHorizontal = 'center';
+            effectiveTransformVertical = 'bottom';
+            effectiveTransformHorizontal = 'center';
+            break;
+          case 'bottom':
+            effectiveAnchorVertical = 'bottom';
+            effectiveAnchorHorizontal = 'center';
+            effectiveTransformVertical = 'top';
+            effectiveTransformHorizontal = 'center';
+            break;
+          case 'left':
+            effectiveAnchorVertical = 'center';
+            effectiveAnchorHorizontal = 'left';
+            effectiveTransformVertical = 'center';
+            effectiveTransformHorizontal = 'right';
+            break;
+          case 'right':
+            effectiveAnchorVertical = 'center';
+            effectiveAnchorHorizontal = 'right';
+            effectiveTransformVertical = 'center';
+            effectiveTransformHorizontal = 'left';
+            break;
+        }
+      }
+      switch (effectiveAnchorVertical) {
+        case 'top':
+          top = triggerRect.top - baseOffset + offsetY;
+          break;
+        case 'center':
+          top = triggerRect.top + triggerRect.height / 2 + offsetY;
+          break;
+        case 'bottom':
+          top = triggerRect.bottom + baseOffset + offsetY;
+          break;
+      }
+      switch (effectiveTransformVertical) {
+        case 'center':
+          top -= tooltipRect.height / 2;
+          break;
+        case 'bottom':
+          top -= tooltipRect.height;
+          break;
+      }
+      switch (effectiveAnchorHorizontal) {
+        case 'left':
+          left = triggerRect.left - baseOffset + offsetX;
+          break;
+        case 'center':
+          left = triggerRect.left + triggerRect.width / 2 + offsetX;
+          break;
+        case 'right':
+          left = triggerRect.right + baseOffset + offsetX;
+          break;
+      }
+      switch (effectiveTransformHorizontal) {
+        case 'center':
+          left -= tooltipRect.width / 2;
+          break;
+        case 'right':
+          left -= tooltipRect.width;
+          break;
+      }
+      setCoords({
+        top: top,
+        left: left
+      });
+    }, [anchorOrigin.vertical, anchorOrigin.horizontal, transformOrigin.vertical, transformOrigin.horizontal, position, offset.x, offset.y, baseOffset]);
+    (0, _react.useLayoutEffect)(function () {
+      if (visible) {
+        updateTooltipPosition();
+      }
+    }, [visible, updateTooltipPosition]);
+
+    // Recalculate position on window resize and scroll
+    (0, _react.useEffect)(function () {
+      if (!visible) return;
+      var handlePositionUpdate = function handlePositionUpdate() {
+        updateTooltipPosition();
+      };
+      window.addEventListener('resize', handlePositionUpdate);
+      window.addEventListener('scroll', handlePositionUpdate, true);
+      return function () {
+        window.removeEventListener('resize', handlePositionUpdate);
+        window.removeEventListener('scroll', handlePositionUpdate, true);
+      };
+    }, [visible, updateTooltipPosition]);
+    var handleShow = function handleShow() {
+      if (disabled || !content) return;
+      if (hideTimeoutRef.current) {
+        clearTimeout(hideTimeoutRef.current);
+      }
+      if (showTimeoutRef.current) {
+        clearTimeout(showTimeoutRef.current);
+      }
+      if (showDelayDuration > 0) {
+        showTimeoutRef.current = setTimeout(function () {
+          setVisible(true);
+        }, showDelayDuration);
+      } else {
+        setVisible(true);
+      }
+    };
+    var handleHide = function handleHide() {
+      if (showTimeoutRef.current) {
+        clearTimeout(showTimeoutRef.current);
+      }
+      hideTimeoutRef.current = setTimeout(function () {
+        setVisible(false);
+      }, 150); // Delay before hiding so that user can still interact with the tooltip
+    };
+    var handleClick = function handleClick() {
+      if (disabled || !content) return;
+      setVisible(true);
+    };
+    var tooltipClickEvents = {
+      onClick: handleClick
+    };
+    var tooltipHoverEvents = {
+      onPointerEnter: handleShow,
+      onPointerLeave: handleHide
+    };
+    var triggerEvents = trigger === 'hover' ? tooltipHoverEvents : tooltipClickEvents;
+    var renderAction = function renderAction() {
+      if (!actionType || !actionProps) return null;
+      switch (actionType) {
+        case 'link':
+          return /*#__PURE__*/_react["default"].createElement(_TextLink.TextLink, actionProps);
+        case 'button':
+          return /*#__PURE__*/_react["default"].createElement(_Button.Button, actionProps);
+        case 'status':
+          return /*#__PURE__*/_react["default"].createElement(_Status.Status, actionProps);
+        case 'chip':
+          return /*#__PURE__*/_react["default"].createElement(_Chip.Chip, actionProps);
+        default:
+          return null;
+      }
+    };
+
+    // Close tooltip on outside click
+    (0, _react.useEffect)(function () {
+      if (trigger !== 'click' || !visible) return;
+      var handleOutsideClick = function handleOutsideClick(e) {
+        var _triggerRef$current$c, _triggerRef$current, _tooltipRef$current;
+        var target = e.target;
+        if ((_triggerRef$current$c = (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.contains(target)) !== null && _triggerRef$current$c !== void 0 ? _triggerRef$current$c : (_tooltipRef$current = tooltipRef.current) === null || _tooltipRef$current === void 0 ? void 0 : _tooltipRef$current.contains(target)) {
+          return;
+        }
+        setVisible(false);
+      };
+      document.addEventListener('mousedown', handleOutsideClick);
+      return function () {
+        document.removeEventListener('mousedown', handleOutsideClick);
+      };
+    }, [trigger, visible]);
+
+    // Cleanup timeouts on unmount
+    (0, _react.useEffect)(function () {
+      return function () {
+        if (showTimeoutRef.current) {
+          clearTimeout(showTimeoutRef.current);
+        }
+        if (hideTimeoutRef.current) {
+          clearTimeout(hideTimeoutRef.current);
+        }
+      };
+    }, []);
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({
+      ref: triggerRef,
+      className: (0, _clsx["default"])('cop-cursor-pointer', triggerClassname)
+    }, triggerEvents), children), visible && /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement("div", _extends({
+      ref: tooltipRef,
+      style: {
+        top: coords.top,
+        left: coords.left
+      },
+      className: (0, _clsx["default"])('cop-fixed cop-z-1500 cop-flex cop-items-center cop-gap-2 cop-rounded cop-border cop-border-solid cop-border-input-gray cop-bg-white cop-px-3 cop-py-1 cop-shadow-lg cop-transition-opacity cop-duration-200', tooltipClassname)
+    }, trigger === 'hover' ? tooltipHoverEvents : {}), /*#__PURE__*/_react["default"].createElement("div", null, content), renderAction()), document.body));
+  };
+});

package/dist/umd/components/Typography/Base.js

@@ -0,0 +1,86 @@
+// This file is generated by a script. Do not edit this file directly.
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "../../common/utils"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("../../common/utils"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.utils);
+    global.Base = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _utils) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.Base = void 0;
+  _react = _interopRequireDefault(_react);
+  var _excluded = ["children", "className", "leading", "size", "variant", "tag", "weight"];
+  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+  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], t.indexOf(o) >= 0 || {}.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 (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+  var VARIANT_CLASSNAMES = {
+    body: 'cop-font-sans',
+    display: 'cop-font-sans',
+    heading: 'cop-font-sans'
+  };
+  var SIZE_CLASSNAMES = {
+    '3xs': 'cop-text-3xs',
+    '2xs': 'cop-text-2xs',
+    xs: 'cop-text-xs',
+    sm: 'cop-text-sm',
+    base: 'cop-text-base',
+    lg: 'cop-text-lg',
+    xl: 'cop-text-xl',
+    '2xl': 'cop-text-2xl',
+    '3xl': 'cop-text-3xl',
+    '4xl': 'cop-text-4xl',
+    '5xl': 'cop-text-5xl',
+    '6xl': 'cop-text-6xl'
+  };
+  var LEADING_CLASSNAMES = {
+    tight: 'cop-leading-tight',
+    snug: 'cop-leading-snug',
+    normal: 'cop-leading-normal',
+    relaxed: 'cop-leading-relaxed',
+    loose: 'cop-leading-loose',
+    '8': 'cop-leading-8',
+    '7': 'cop-leading-7',
+    '6': 'cop-leading-6',
+    '5': 'cop-leading-5',
+    '4': 'cop-leading-4',
+    '3': 'cop-leading-3',
+    '2': 'cop-leading-2',
+    '1': 'cop-leading-1',
+    '075': 'cop-leading-075',
+    '050': 'cop-leading-050',
+    '025': 'cop-leading-020'
+  };
+  var WEIGHT_CLASSNAMES = {
+    bold: 'cop-font-bold',
+    semibold: 'cop-font-semibold',
+    medium: 'cop-font-medium',
+    regular: 'cop-font-regular',
+    light: 'cop-font-light'
+  };
+  var Base = _exports.Base = function Base(_ref) {
+    var children = _ref.children,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      leading = _ref.leading,
+      size = _ref.size,
+      variant = _ref.variant,
+      tag = _ref.tag,
+      weight = _ref.weight,
+      props = _objectWithoutProperties(_ref, _excluded);
+    var Tag = tag;
+    return /*#__PURE__*/_react["default"].createElement(Tag, _extends({
+      className: (0, _utils.cn)('cop-m-0', VARIANT_CLASSNAMES[variant], SIZE_CLASSNAMES[size], LEADING_CLASSNAMES[leading], WEIGHT_CLASSNAMES[weight], className)
+    }, props), children);
+  };
+});

package/dist/umd/components/Typography/Body.js

@@ -0,0 +1,46 @@
+// This file is generated by a script. Do not edit this file directly.
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "./Base"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("./Base"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.Base);
+    global.Body = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _Base) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.Body = Body;
+  _react = _interopRequireDefault(_react);
+  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+  var SIZE_MAP = {
+    xs: 'xs',
+    sm: 'sm',
+    base: 'base',
+    lg: 'lg'
+  };
+  function Body(_ref) {
+    var children = _ref.children,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$tag = _ref.tag,
+      tag = _ref$tag === void 0 ? 'p' : _ref$tag,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'base' : _ref$size;
+    return /*#__PURE__*/_react["default"].createElement(_Base.Base, {
+      className: className,
+      size: SIZE_MAP[size],
+      variant: "body",
+      tag: tag,
+      leading: "normal",
+      weight: "regular"
+    }, children);
+  }
+});

package/dist/umd/components/Typography/Heading.js

@@ -0,0 +1,65 @@
+// This file is generated by a script. Do not edit this file directly.
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "./Base"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("./Base"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.Base);
+    global.Heading = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _Base) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.Heading = Heading;
+  _react = _interopRequireDefault(_react);
+  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+  var SIZE_MAP = {
+    '3xs': '3xs',
+    '2xs': '2xs',
+    xs: 'xs',
+    sm: 'sm',
+    base: 'base',
+    lg: 'lg',
+    xl: 'xl',
+    '2xl': '2xl',
+    '3xl': '3xl',
+    '4xl': '4xl'
+  };
+  var LEADING_CLASSNAMES = {
+    '3xs': '025',
+    '2xs': '025',
+    xs: '050',
+    sm: '075',
+    base: '1',
+    lg: '2',
+    xl: '3',
+    '2xl': '4',
+    '3xl': '5',
+    '4xl': '6'
+  };
+  function Heading(_ref) {
+    var children = _ref.children,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$tag = _ref.tag,
+      tag = _ref$tag === void 0 ? 'h1' : _ref$tag,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'base' : _ref$size;
+    return /*#__PURE__*/_react["default"].createElement(_Base.Base, {
+      className: className,
+      size: SIZE_MAP[size],
+      variant: "body",
+      tag: tag,
+      leading: LEADING_CLASSNAMES[size],
+      weight: "medium",
+      "data-typography": "heading"
+    }, children);
+  }
+});

package/dist/umd/components/Typography/index.js

@@ -0,0 +1,42 @@
+// This file is generated by a script. Do not edit this file directly.
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "./Body", "./Heading"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("./Body"), require("./Heading"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.Body, global.Heading);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _Body, _Heading) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _react = _interopRequireDefault(_react);
+  Object.keys(_Body).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    if (key in _exports && _exports[key] === _Body[key]) return;
+    Object.defineProperty(_exports, key, {
+      enumerable: true,
+      get: function get() {
+        return _Body[key];
+      }
+    });
+  });
+  Object.keys(_Heading).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    if (key in _exports && _exports[key] === _Heading[key]) return;
+    Object.defineProperty(_exports, key, {
+      enumerable: true,
+      get: function get() {
+        return _Heading[key];
+      }
+    });
+  });
+  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+});

package/dist/umd/components/UserCompanySelector/LimitedOptionsList.js

@@ -0,0 +1,47 @@
+// This file is generated by a script. Do not edit this file directly.
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "react-select", "../Typography"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("react-select"), require("../Typography"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.reactSelect, global.Typography);
+    global.LimitedOptionsList = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _reactSelect, _Typography) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.LimitedOptionsList = void 0;
+  _react = _interopRequireDefault(_react);
+  var _excluded = ["children", "title", "isGroup"];
+  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": 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], t.indexOf(o) >= 0 || {}.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 (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+  /**
+   * This component is used to limit the number of options in the menu list
+   * and group.
+   * It is used to prevent the menu list from becoming too long and to
+   * make the menu list more readable.
+   */
+  var LimitedOptionsList = _exports.LimitedOptionsList = function LimitedOptionsList(_ref) {
+    var children = _ref.children,
+      title = _ref.title,
+      isGroup = _ref.isGroup,
+      props = _objectWithoutProperties(_ref, _excluded);
+    if (isGroup) {
+      return /*#__PURE__*/_react["default"].createElement(_reactSelect.components.Group, props, children);
+    }
+    return /*#__PURE__*/_react["default"].createElement(_reactSelect.components.MenuList, props, title && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cop-flex cop-items-center cop-px-3 cop-pb-1 cop-pt-2"
+    }, /*#__PURE__*/_react["default"].createElement(_Typography.Heading, {
+      size: "xs",
+      className: "cop-text-secondary"
+    }, title)), children);
+  };
+});

package/dist/umd/components/UserCompanySelector/ListItem.js

@@ -0,0 +1,73 @@
+// This file is generated by a script. Do not edit this file directly.
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "../Avatar/Avatar", "../Typography", "clsx", "../Avatar/UserWithCompanyAvatar", "../../common/utils"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("../Avatar/Avatar"), require("../Typography"), require("clsx"), require("../Avatar/UserWithCompanyAvatar"), require("../../common/utils"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.Avatar, global.Typography, global.clsx, global.UserWithCompanyAvatar, global.utils);
+    global.ListItem = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _Avatar, _Typography, _clsx, _UserWithCompanyAvatar, _utils) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.ListItem = ListItem;
+  _react = _interopRequireDefault(_react);
+  _clsx = _interopRequireDefault(_clsx);
+  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+  function ListItem(_ref) {
+    var _option$avatarSrc, _option$avatarFallbac, _option$label;
+    var option = _ref.data,
+      innerRef = _ref.innerRef,
+      isFocused = _ref.isFocused,
+      innerProps = _ref.innerProps;
+    var avatarSrc = option.avatarSrc,
+      avatarFallbackColor = option.avatarFallbackColor,
+      label = option.label,
+      companyName = option.companyName,
+      companyAvatarSrc = option.companyAvatarSrc,
+      companyAvatarFallbackColor = option.companyAvatarFallbackColor,
+      companyId = option.companyId;
+    return /*#__PURE__*/_react["default"].createElement("div", _extends({
+      key: option.value,
+      ref: innerRef
+    }, innerProps, {
+      className: (0, _clsx["default"])('cop-flex cop-cursor-pointer cop-items-center cop-gap-3 cop-px-3 hover:cop-bg-gray-100', {
+        'cop-h-10': !!companyId,
+        // if an option has company to render, the option should have a height of 40px
+        'cop-h-8': !companyId,
+        // if an option has no company to render, the option should have a height of 32px
+        'cop-bg-primary': isFocused
+      })
+    }), option.type !== 'company' ? /*#__PURE__*/_react["default"].createElement(_UserWithCompanyAvatar.UserWithCompanyAvatar, {
+      size: "sm",
+      avatarSrc: (_option$avatarSrc = option.avatarSrc) !== null && _option$avatarSrc !== void 0 ? _option$avatarSrc : '',
+      fallbackColor: (_option$avatarFallbac = option.avatarFallbackColor) !== null && _option$avatarFallbac !== void 0 ? _option$avatarFallbac : '',
+      text: (0, _utils.getInitials)((_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : '', true),
+      companyText: (0, _utils.getInitials)(companyName !== null && companyName !== void 0 ? companyName : ''),
+      companyAvatarSrc: companyAvatarSrc !== null && companyAvatarSrc !== void 0 ? companyAvatarSrc : '',
+      companyAvatarFallbackColor: companyAvatarFallbackColor !== null && companyAvatarFallbackColor !== void 0 ? companyAvatarFallbackColor : ''
+    }) : /*#__PURE__*/_react["default"].createElement(_Avatar.Avatar, {
+      src: avatarSrc,
+      fallbackColor: avatarFallbackColor !== null && avatarFallbackColor !== void 0 ? avatarFallbackColor : '',
+      text: label.charAt(0).toLocaleUpperCase(),
+      alt: label,
+      size: "sm",
+      variant: 'rounded'
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cop-flex cop-flex-col cop-text-[10px]"
+    }, /*#__PURE__*/_react["default"].createElement(_Typography.Body, {
+      className: "cop-truncate",
+      size: "sm"
+    }, option.label), companyName && /*#__PURE__*/_react["default"].createElement("span", {
+      className: "cop-text-secondary"
+    }, companyName)));
+  }
+});