@rocket.chat/fuselage 0.6.3-dev.357 → 0.6.3-dev.358

package/dist/fuselage.development.js

@@ -7399,232 +7399,6 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
 
 /***/ }),
 
-/***/ "./src/components/Options/Option/index.js":
-/*!************************************************!*\
-  !*** ./src/components/Options/Option/index.js ***!
-  \************************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "OptionMenu": function() { return /* binding */ OptionMenu; },
-/* harmony export */   "Option": function() { return /* binding */ Option; }
-/* harmony export */ });
-/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/objectWithoutProperties */ "../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js");
-/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../Icon */ "./src/components/Icon/index.js");
-/* harmony import */ var _Skeleton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../Skeleton */ "./src/components/Skeleton/index.js");
-
-var _excluded = ["is", "id", "presence", "children", "label", "focus", "selected", "className", "ref", "icon", "avatar"];
-
-var _jsxFileName = "/home/runner/work/Rocket.Chat.Fuselage/Rocket.Chat.Fuselage/packages/fuselage/src/components/Options/Option/index.js",
-    _this = undefined;
-
-
-
-
-
-var OptionColumn = function OptionColumn(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", Object.assign({
-    className: "rcx-option__column"
-  }, props, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 7,
-      columnNumber: 3
-    }
-  }));
-};
-
-var OptionContent = function OptionContent(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", Object.assign({
-    className: "rcx-option__content"
-  }, props, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 10,
-      columnNumber: 3
-    }
-  }));
-};
-
-var OptionAvatar = function OptionAvatar(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", Object.assign({
-    className: "rcx-option__avatar"
-  }, props, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 13,
-      columnNumber: 3
-    }
-  }));
-};
-
-var OptionDescription = function OptionDescription(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", Object.assign({
-    className: "rcx-option__description"
-  }, props, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 16,
-      columnNumber: 3
-    }
-  }));
-};
-
-var OptionIcon = function OptionIcon(_ref) {
-  var name = _ref.name;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(OptionColumn, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 19,
-      columnNumber: 3
-    }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_2__.Icon, {
-    size: "x20",
-    name: name,
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 20,
-      columnNumber: 5
-    }
-  }));
-};
-
-var OptionSkeleton = function OptionSkeleton(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Option, Object.assign({}, props, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 25,
-      columnNumber: 3
-    }
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Option.Avatar, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 26,
-      columnNumber: 5
-    }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Skeleton__WEBPACK_IMPORTED_MODULE_3__.Skeleton, {
-    variant: "rect",
-    width: 28,
-    height: 28,
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 27,
-      columnNumber: 7
-    }
-  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Option.Content, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 29,
-      columnNumber: 5
-    }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Skeleton__WEBPACK_IMPORTED_MODULE_3__.Skeleton, {
-    width: "100%",
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 30,
-      columnNumber: 7
-    }
-  })));
-};
-
-var OptionMenu = function OptionMenu(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", Object.assign({
-    className: "rcx-box--animated rcx-option__menu-wraper"
-  }, props, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 36,
-      columnNumber: 3
-    }
-  }));
-};
-var Option = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().memo(function (_ref2) {
-  var _ref2$is = _ref2.is,
-      Tag = _ref2$is === void 0 ? 'li' : _ref2$is,
-      id = _ref2.id,
-      presence = _ref2.presence,
-      children = _ref2.children,
-      label = _ref2.label,
-      focus = _ref2.focus,
-      selected = _ref2.selected,
-      className = _ref2.className,
-      ref = _ref2.ref,
-      icon = _ref2.icon,
-      avatar = _ref2.avatar,
-      options = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0___default()(_ref2, _excluded);
-
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Tag, Object.assign({
-    key: id,
-    id: id,
-    ref: ref,
-    "aria-selected": selected
-  }, options, {
-    className: ['rcx-option', className, focus && 'rcx-option--focus', selected && 'rcx-option--selected'].filter(Boolean).join(' '),
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 54,
-      columnNumber: 5
-    }
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", {
-    className: "rcx-option__wrapper",
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 69,
-      columnNumber: 7
-    }
-  }, avatar && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Option.Avatar, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 70,
-      columnNumber: 20
-    }
-  }, avatar), icon && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Option.Icon, {
-    name: icon,
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 71,
-      columnNumber: 18
-    }
-  }), label && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Option.Content, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 72,
-      columnNumber: 19
-    }
-  }, label), label !== children && children));
-});
-Option.Description = OptionDescription;
-Option.Skeleton = OptionSkeleton;
-Option.Avatar = OptionAvatar;
-Option.Menu = OptionMenu;
-Option.Icon = OptionIcon;
-Option.Column = OptionColumn;
-Option.Content = OptionContent;
-
-/***/ }),
-
 /***/ "./src/components/Options/index.js":
 /*!*****************************************!*\
   !*** ./src/components/Options/index.js ***!
@@ -7650,7 +7424,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
 /* harmony import */ var _CheckBox__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../CheckBox */ "./src/components/CheckBox/index.js");
 /* harmony import */ var _Tile__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Tile */ "./src/components/Tile/index.ts");
-/* harmony import */ var _Option__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Option */ "./src/components/Options/Option/index.js");
+/* harmony import */ var _Option__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Option */ "./src/components/Options/Option/index.tsx");
 /* harmony import */ var _useCursor__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./useCursor */ "./src/components/Options/useCursor.ts");
 
 
@@ -7820,232 +7594,6 @@ Options.AvatarSize = 'x20';
 
 /***/ }),
 
-/***/ "./src/components/OptionsPaginated/Option/index.js":
-/*!*********************************************************!*\
-  !*** ./src/components/OptionsPaginated/Option/index.js ***!
-  \*********************************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "OptionMenu": function() { return /* binding */ OptionMenu; },
-/* harmony export */   "Option": function() { return /* binding */ Option; }
-/* harmony export */ });
-/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/objectWithoutProperties */ "../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js");
-/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../Icon */ "./src/components/Icon/index.js");
-/* harmony import */ var _Skeleton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../Skeleton */ "./src/components/Skeleton/index.js");
-
-var _excluded = ["is", "id", "presence", "children", "label", "focus", "selected", "className", "ref", "icon", "avatar"];
-
-var _jsxFileName = "/home/runner/work/Rocket.Chat.Fuselage/Rocket.Chat.Fuselage/packages/fuselage/src/components/OptionsPaginated/Option/index.js",
-    _this = undefined;
-
-
-
-
-
-var OptionColumn = function OptionColumn(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", Object.assign({
-    className: "rcx-option__column"
-  }, props, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 7,
-      columnNumber: 3
-    }
-  }));
-};
-
-var OptionContent = function OptionContent(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", Object.assign({
-    className: "rcx-option__content"
-  }, props, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 10,
-      columnNumber: 3
-    }
-  }));
-};
-
-var OptionAvatar = function OptionAvatar(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", Object.assign({
-    className: "rcx-option__avatar"
-  }, props, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 13,
-      columnNumber: 3
-    }
-  }));
-};
-
-var OptionDescription = function OptionDescription(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", Object.assign({
-    className: "rcx-option__description"
-  }, props, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 16,
-      columnNumber: 3
-    }
-  }));
-};
-
-var OptionIcon = function OptionIcon(_ref) {
-  var name = _ref.name;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(OptionColumn, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 19,
-      columnNumber: 3
-    }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_2__.Icon, {
-    size: "x20",
-    name: name,
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 20,
-      columnNumber: 5
-    }
-  }));
-};
-
-var OptionSkeleton = function OptionSkeleton(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Option, Object.assign({}, props, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 25,
-      columnNumber: 3
-    }
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Option.Avatar, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 26,
-      columnNumber: 5
-    }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Skeleton__WEBPACK_IMPORTED_MODULE_3__.Skeleton, {
-    variant: "rect",
-    width: 28,
-    height: 28,
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 27,
-      columnNumber: 7
-    }
-  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Option.Content, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 29,
-      columnNumber: 5
-    }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Skeleton__WEBPACK_IMPORTED_MODULE_3__.Skeleton, {
-    width: "100%",
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 30,
-      columnNumber: 7
-    }
-  })));
-};
-
-var OptionMenu = function OptionMenu(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", Object.assign({
-    className: "rcx-box--animated rcx-option__menu-wraper"
-  }, props, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 36,
-      columnNumber: 3
-    }
-  }));
-};
-var Option = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().memo(function (_ref2) {
-  var _ref2$is = _ref2.is,
-      Tag = _ref2$is === void 0 ? 'li' : _ref2$is,
-      id = _ref2.id,
-      presence = _ref2.presence,
-      children = _ref2.children,
-      label = _ref2.label,
-      focus = _ref2.focus,
-      selected = _ref2.selected,
-      className = _ref2.className,
-      ref = _ref2.ref,
-      icon = _ref2.icon,
-      avatar = _ref2.avatar,
-      options = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0___default()(_ref2, _excluded);
-
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Tag, Object.assign({
-    key: id,
-    id: id,
-    ref: ref,
-    "aria-selected": selected
-  }, options, {
-    className: ['rcx-option', className, focus && 'rcx-option--focus', selected && 'rcx-option--selected'].filter(Boolean).join(' '),
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 54,
-      columnNumber: 5
-    }
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", {
-    className: "rcx-option__wrapper",
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 69,
-      columnNumber: 7
-    }
-  }, avatar && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Option.Avatar, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 70,
-      columnNumber: 20
-    }
-  }, avatar), icon && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Option.Icon, {
-    name: icon,
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 71,
-      columnNumber: 18
-    }
-  }), label && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Option.Content, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 72,
-      columnNumber: 19
-    }
-  }, label), label !== children && children));
-});
-Option.Description = OptionDescription;
-Option.Skeleton = OptionSkeleton;
-Option.Avatar = OptionAvatar;
-Option.Menu = OptionMenu;
-Option.Icon = OptionIcon;
-Option.Column = OptionColumn;
-Option.Content = OptionContent;
-
-/***/ }),
-
 /***/ "./src/components/OptionsPaginated/index.js":
 /*!**************************************************!*\
   !*** ./src/components/OptionsPaginated/index.js ***!
@@ -8071,8 +7619,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react_virtuoso__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! react-virtuoso */ "../../node_modules/react-virtuoso/dist/index.m.js");
 /* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
 /* harmony import */ var _CheckBox__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../CheckBox */ "./src/components/CheckBox/index.js");
-/* harmony import */ var _Tile__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Tile */ "./src/components/Tile/index.ts");
-/* harmony import */ var _Option__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Option */ "./src/components/OptionsPaginated/Option/index.js");
+/* harmony import */ var _Options_Option__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Options/Option */ "./src/components/Options/Option/index.tsx");
+/* harmony import */ var _Tile__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Tile */ "./src/components/Tile/index.ts");
 
 
 var _excluded = ["selected", "children"],
@@ -8095,7 +7643,7 @@ var prevent = function prevent(e) {
 };
 
 var Empty = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().memo(function () {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(_Option__WEBPACK_IMPORTED_MODULE_7__.Option, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(_Options_Option__WEBPACK_IMPORTED_MODULE_6__.Option, {
     color: "hint",
     label: "Empty",
     __self: _this,
@@ -8111,7 +7659,7 @@ var CheckOption = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().memo
       label = _ref.children,
       options = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(_ref, _excluded);
 
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(_Option__WEBPACK_IMPORTED_MODULE_7__.Option, Object.assign({
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(_Options_Option__WEBPACK_IMPORTED_MODULE_6__.Option, Object.assign({
     label: label,
     selected: selected
   }, options, {
@@ -8139,7 +7687,7 @@ var OptionsPaginated = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default()
       options = _ref2.options,
       cursor = _ref2.cursor,
       _ref2$renderItem = _ref2.renderItem,
-      OptionComponent = _ref2$renderItem === void 0 ? _Option__WEBPACK_IMPORTED_MODULE_7__.Option : _ref2$renderItem,
+      OptionComponent = _ref2$renderItem === void 0 ? _Options_Option__WEBPACK_IMPORTED_MODULE_6__.Option : _ref2$renderItem,
       onSelect = _ref2.onSelect,
       endReached = _ref2.endReached,
       props = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(_ref2, _excluded2);
@@ -8183,7 +7731,7 @@ var OptionsPaginated = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default()
       lineNumber: 64,
       columnNumber: 7
     }
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(_Tile__WEBPACK_IMPORTED_MODULE_6__.default, {
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(_Tile__WEBPACK_IMPORTED_MODULE_7__.default, {
     padding: 0,
     paddingBlock: 'x12',
     paddingInline: 0,
@@ -15343,6 +14891,91 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+/***/ }),
+
+/***/ "./src/components/Options/Option/index.tsx":
+/*!*************************************************!*\
+  !*** ./src/components/Options/Option/index.tsx ***!
+  \*************************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "OptionMenu": function() { return /* binding */ OptionMenu; },
+/* harmony export */   "Option": function() { return /* binding */ Option; }
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../Icon */ "./src/components/Icon/index.js");
+/* harmony import */ var _Skeleton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../Skeleton */ "./src/components/Skeleton/index.js");
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+
+
+
+var OptionColumn = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", __assign({ className: 'rcx-option__column' }, props))); };
+var OptionContent = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", __assign({ className: 'rcx-option__content' }, props))); };
+var OptionAvatar = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", __assign({ className: 'rcx-option__avatar' }, props))); };
+var OptionDescription = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", __assign({ className: 'rcx-option__description' }, props))); };
+var OptionIcon = function (_a) {
+    var name = _a.name;
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(OptionColumn, null,
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_1__.Icon, { size: 'x20', name: name })));
+};
+var OptionSkeleton = function () { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Option, null,
+    react__WEBPACK_IMPORTED_MODULE_0___default().createElement(OptionAvatar, null,
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Skeleton__WEBPACK_IMPORTED_MODULE_2__.Skeleton, { variant: 'rect', width: 28, height: 28 })),
+    react__WEBPACK_IMPORTED_MODULE_0___default().createElement(OptionContent, null,
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Skeleton__WEBPACK_IMPORTED_MODULE_2__.Skeleton, { width: '100%' })))); };
+var OptionMenu = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", __assign({ className: 'rcx-box--animated rcx-option__menu-wraper' }, props))); };
+var Option = react__WEBPACK_IMPORTED_MODULE_0___default().memo(function (_a) {
+    var _b = _a.is, Tag = _b === void 0 ? 'li' : _b, id = _a.id, children = _a.children, label = _a.label, focus = _a.focus, selected = _a.selected, className = _a.className, ref = _a.ref, icon = _a.icon, avatar = _a.avatar, title = _a.title, onClick = _a.onClick, options = __rest(_a, ["is", "id", "children", "label", "focus", "selected", "className", "ref", "icon", "avatar", "title", "onClick"]);
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Tag, __assign({ key: id, id: id, ref: ref, "aria-selected": selected, title: title, onClick: onClick }, options, { className: [
+            'rcx-option',
+            className,
+            focus && 'rcx-option--focus',
+            selected && 'rcx-option--selected',
+        ]
+            .filter(Boolean)
+            .join(' ') }),
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: 'rcx-option__wrapper' },
+            avatar && react__WEBPACK_IMPORTED_MODULE_0___default().createElement(OptionAvatar, null, avatar),
+            icon && react__WEBPACK_IMPORTED_MODULE_0___default().createElement(OptionIcon, { name: icon }),
+            label && react__WEBPACK_IMPORTED_MODULE_0___default().createElement(OptionContent, null, label),
+            label !== children && children)));
+});
+/* harmony default export */ __webpack_exports__["default"] = (Object.assign(Option, {
+    Description: OptionDescription,
+    Skeleton: OptionSkeleton,
+    Avatar: OptionAvatar,
+    Menu: OptionMenu,
+    Icon: OptionIcon,
+    Column: OptionColumn,
+    Content: OptionContent,
+}));
+
+
 /***/ }),
 
 /***/ "./src/components/Options/useCursor.ts":
@@ -16002,7 +15635,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _MultiSelect__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./MultiSelect */ "./src/components/MultiSelect/index.js");
 /* harmony import */ var _NumberInput__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ./NumberInput */ "./src/components/NumberInput/index.js");
 /* harmony import */ var _Options__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ./Options */ "./src/components/Options/index.js");
-/* harmony import */ var _Options_Option__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ./Options/Option */ "./src/components/Options/Option/index.js");
+/* harmony import */ var _Options_Option__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ./Options/Option */ "./src/components/Options/Option/index.tsx");
 /* harmony import */ var _Pagination__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! ./Pagination */ "./src/components/Pagination/index.js");
 /* harmony import */ var _PasswordInput__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ./PasswordInput */ "./src/components/PasswordInput/index.ts");
 /* harmony import */ var _StatusBullet__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ./StatusBullet */ "./src/components/StatusBullet/index.js");