agora-ui-foundation 3.2.0 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/lib/components/action-bar/device/index.css +1 -1
  2. package/lib/components/button/index.css +0 -3
  3. package/lib/components/button/index.js +1 -1
  4. package/lib/components/card/index.css +1 -1
  5. package/lib/components/chat-manager/index.css +13 -5
  6. package/lib/components/chat-manager/index.js +25 -2
  7. package/lib/components/checkbox/index.css +2 -2
  8. package/lib/components/confirm-content/index.css +37 -14
  9. package/lib/components/confirm-content/index.js +11 -8
  10. package/lib/components/device-pretest/index.js +1 -1
  11. package/lib/components/dialog/index.css +1 -1
  12. package/lib/components/dialog/index.d.ts +1 -0
  13. package/lib/components/drop-menu/index.css +24 -13
  14. package/lib/components/drop-menu/index.d.ts +1 -0
  15. package/lib/components/drop-menu/index.js +6 -5
  16. package/lib/components/icon/paths/fcr_cameraoff.d.ts +2 -2
  17. package/lib/components/icon/paths/fcr_cameraoff.js +8 -6
  18. package/lib/components/icon/paths/fcr_exclamationmask.js +1 -1
  19. package/lib/components/icon/paths/fcr_put_waiting_room.d.ts +3 -0
  20. package/lib/components/icon/paths/fcr_put_waiting_room.js +22 -0
  21. package/lib/components/icon/paths/fcr_waiting_room.d.ts +3 -0
  22. package/lib/components/icon/paths/fcr_waiting_room.js +22 -0
  23. package/lib/components/icon/paths/fcr_web_fullscream.js +1 -1
  24. package/lib/components/icon/paths/fcr_windowpage_lonely.d.ts +1 -1
  25. package/lib/components/icon/paths/fcr_windowpage_lonely.js +8 -20
  26. package/lib/components/icon/svg-dict.d.ts +1 -1
  27. package/lib/components/icon/svg-exports.d.ts +2 -0
  28. package/lib/components/icon/svg-exports.js +6 -2
  29. package/lib/components/icon/type.d.ts +2 -0
  30. package/lib/components/icon/type.js +2 -0
  31. package/lib/components/icon-text/index.css +4 -0
  32. package/lib/components/icon-text/index.d.ts +1 -0
  33. package/lib/components/icon-text/index.js +7 -4
  34. package/lib/components/input/index.css +13 -6
  35. package/lib/components/live-streaming/container.css +12 -0
  36. package/lib/components/live-streaming/container.js +3 -2
  37. package/lib/components/local-video-player/index.css +7 -2
  38. package/lib/components/notification/index.d.ts +9 -0
  39. package/lib/components/notification/index.js +40 -0
  40. package/lib/components/participants/attendee/index.css +13 -1
  41. package/lib/components/participants/attendee/index.d.ts +50 -1
  42. package/lib/components/participants/attendee/index.js +52 -7
  43. package/lib/components/participants/index.css +4 -1
  44. package/lib/components/participants/index.d.ts +3 -2
  45. package/lib/components/participants/index.js +8 -2
  46. package/lib/components/participants/index.stories.d.ts +1 -4
  47. package/lib/components/participants/index.stories.js +1 -39
  48. package/lib/components/participants/participants-more/index.d.ts +3 -2
  49. package/lib/components/participants/participants-more/index.js +106 -86
  50. package/lib/components/radio/index.css +2 -2
  51. package/lib/components/room-screen-share-state-bar/camera-state/index.js +2 -1
  52. package/lib/components/room-screen-share-state-bar/device/index.css +16 -1
  53. package/lib/components/room-screen-share-state-bar/device/index.js +2 -1
  54. package/lib/components/room-screen-share-state-bar/more/index.js +1 -1
  55. package/lib/components/room-screen-share-state-bar/share-action-nav/index.css +2 -1
  56. package/lib/components/room-screen-share-state-bar/share-audio/index.css +28 -4
  57. package/lib/components/room-screen-share-state-bar/share-audio/index.js +3 -3
  58. package/lib/components/state-bar/index.css +2 -2
  59. package/lib/components/tabs/index.css +1 -1
  60. package/lib/components/tabs/index.d.ts +1 -1
  61. package/lib/components/tooltips-button/tooltip-button.css +2 -2
  62. package/lib/components/watermark/index.css +3 -0
  63. package/lib/components/watermark/index.d.ts +47 -0
  64. package/lib/components/watermark/index.js +195 -0
  65. package/lib/components/window-header/index.js +9 -14
  66. package/lib/theme/fcr-ui-config.d.ts +74 -6
  67. package/lib/theme/fcr-ui-config.js +79 -11
  68. package/package.json +4 -3
  69. package/patches/rc-notification+5.6.2.patch +13 -0
@@ -101,7 +101,7 @@
101
101
  .fcr-device-popover-content-device-options .fcr-radio-label {
102
102
  padding-left: 8px;
103
103
  color: var(--fcr_ui_scene_icontext1);
104
- font-size: 13px;
104
+ font-size: 14px;
105
105
  line-height: 100%;
106
106
  transition: all 0.1s ease;
107
107
  }
@@ -418,9 +418,6 @@
418
418
  .fcr-button-XS:not(.fcr-button-icon-only) > div:first-child {
419
419
  padding-right: 8px;
420
420
  }
421
- .fcr-button-XS:not(.fcr-button-icon-only, .fcr-button-with-extra) > div:last-child {
422
- padding-left: 8px;
423
- }
424
421
  .fcr-button-XS:not(.fcr-button-link) {
425
422
  min-width: 90px;
426
423
  height: 32px;
@@ -49,7 +49,7 @@ var FcrButton = exports.FcrButton = function FcrButton(props) {
49
49
  _props$type = props.type,
50
50
  type = _props$type === void 0 ? 'primary' : _props$type,
51
51
  _props$shape = props.shape,
52
- shape = _props$shape === void 0 ? 'circle' : _props$shape,
52
+ shape = _props$shape === void 0 ? 'rounded' : _props$shape,
53
53
  styleType = props.styleType,
54
54
  _props$size = props.size,
55
55
  size = _props$size === void 0 ? 'L' : _props$size,
@@ -38,7 +38,7 @@
38
38
  position: absolute;
39
39
  left: 0;
40
40
  top: 0;
41
- color: var(--fcr_ui_scene_white10);
41
+ color: var(--fcr_ui_scene_icontext7);
42
42
  display: flex;
43
43
 
44
44
  }
@@ -11,10 +11,6 @@
11
11
  justify-content: flex-start;
12
12
  }
13
13
 
14
- .fcr-icon-text-wrapper .fcr-icon-text--selected {
15
- color: var(--fcr_web_ui_scene_mainicon2);
16
- }
17
-
18
14
  .fcr-drop-menu-option-text .fcr_chat_drop_menu .fcr-icon-text-wrapper {
19
15
  align-content: flex-start;
20
16
  }
@@ -34,6 +30,18 @@
34
30
  color: var(--fcr_ui_scene_icontext1);
35
31
  }
36
32
  .fcr_chat_manager_popover_overlay {
37
- opacity: 1!important;
33
+ opacity: 1 !important;
38
34
  top: 36px;
39
35
  }
36
+
37
+ .fcr-drop-menu-option-primary:hover .fcr-icon-text__text {
38
+ color: var(--fcr_web_ui_scene_mainicon2);
39
+ }
40
+
41
+ .fcr-drop-menu-option-primary:hover path {
42
+ fill: var(--fcr_ui_scene_ramp_brand6);
43
+ }
44
+
45
+ .fcr-drop-menu-option-primary-selected:hover svg g path {
46
+ fill: var(--fcr_web_ui_scene_mainicon2);
47
+ }
@@ -1,13 +1,26 @@
1
1
  "use strict";
2
2
 
3
+ require("core-js/modules/es.symbol.js");
4
+ require("core-js/modules/es.array.filter.js");
5
+ require("core-js/modules/es.array.for-each.js");
3
6
  require("core-js/modules/es.array.iterator.js");
7
+ require("core-js/modules/es.array.push.js");
8
+ require("core-js/modules/es.object.define-properties.js");
4
9
  require("core-js/modules/es.object.define-property.js");
5
10
  require("core-js/modules/es.object.get-own-property-descriptor.js");
11
+ require("core-js/modules/es.object.get-own-property-descriptors.js");
12
+ require("core-js/modules/es.object.keys.js");
6
13
  require("core-js/modules/es.object.to-string.js");
7
14
  require("core-js/modules/es.string.iterator.js");
8
15
  require("core-js/modules/es.weak-map.js");
16
+ require("core-js/modules/esnext.async-iterator.filter.js");
17
+ require("core-js/modules/esnext.async-iterator.for-each.js");
18
+ require("core-js/modules/esnext.iterator.constructor.js");
19
+ require("core-js/modules/esnext.iterator.filter.js");
20
+ require("core-js/modules/esnext.iterator.for-each.js");
9
21
  require("core-js/modules/esnext.weak-map.delete-all.js");
10
22
  require("core-js/modules/esnext.weak-map.emplace.js");
23
+ require("core-js/modules/web.dom-collections.for-each.js");
11
24
  require("core-js/modules/web.dom-collections.iterator.js");
12
25
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
13
26
  var _typeof = require("@babel/runtime/helpers/typeof");
@@ -15,6 +28,10 @@ Object.defineProperty(exports, "__esModule", {
15
28
  value: true
16
29
  });
17
30
  exports.ChatManager = void 0;
31
+ require("core-js/modules/es.array.map.js");
32
+ require("core-js/modules/esnext.async-iterator.map.js");
33
+ require("core-js/modules/esnext.iterator.map.js");
34
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
18
35
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
36
  var _react = _interopRequireWildcard(require("react"));
20
37
  var _type = require("../icon/type");
@@ -28,6 +45,8 @@ var _iconText = require("../icon-text");
28
45
  var _jsxRuntime = require("react/jsx-runtime");
29
46
  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); }
30
47
  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; }
48
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
49
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
31
50
  var ChatLevelOption = function ChatLevelOption(_ref) {
32
51
  var txt = _ref.txt,
33
52
  _ref$selected = _ref.selected,
@@ -36,7 +55,7 @@ var ChatLevelOption = function ChatLevelOption(_ref) {
36
55
  icon: _type.FcrIconType.FCR_CHOOSEIT,
37
56
  txt: txt,
38
57
  colors: selected ? {
39
- iconPrimary: 'var(--fcr_web_ui_scene_mainicon2)'
58
+ iconPrimary: 'var(--fcr_ui_scene_icontext1)'
40
59
  } : {},
41
60
  classnames: selected ? {
42
61
  'fcr-icon-text--selected': true
@@ -131,7 +150,11 @@ var ChatManager = exports.ChatManager = function ChatManager(_ref2) {
131
150
  className: "fcr_chat_drop_menu",
132
151
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
133
152
  title: t('fmt_chat_setting_value'),
134
- options: actions
153
+ options: actions.map(function (data) {
154
+ return _objectSpread(_objectSpread({}, data), {}, {
155
+ classNames: allowChatLevel === data.key ? 'fcr-drop-menu-option-primary-selected' : ''
156
+ });
157
+ })
135
158
  })
136
159
  }),
137
160
  onVisibleChange: function onVisibleChange(visible) {
@@ -56,9 +56,9 @@
56
56
  display: block;
57
57
  }
58
58
  .fcr-checkbox-label {
59
- font-size: 12px;
59
+ font-size: 14px;
60
60
  line-height: 16px;
61
- font-weight: 300;
61
+ font-weight: 400;
62
62
  color: var(--fcr_ui_scene_icontext1);
63
63
  padding-left: 4px;
64
64
  user-select: none;
@@ -1,14 +1,21 @@
1
- .fcr-confirm-content-wrapper{
2
- min-width: 200px;
3
- padding: 30px;
4
- position: relative;
5
- /* border: 1px solid #e8e8e8; */
6
- border-radius: var(--fcr_cornerradius_xl);
1
+ .fcr-confirm-content-wrapper {
2
+ min-width: 200px;
3
+ padding: 32px 32px 24px 30px;
4
+ position: relative;
5
+ /* border: 1px solid #e8e8e8; */
6
+ border-radius: var(--fcr_cornerradius_xl);
7
+ height: 100%;
8
+ width: 100%;
9
+ }
10
+
11
+ .fcr-confirm-content-wrapper__center {
12
+ padding: 24px 20px 20px;
7
13
  }
14
+
8
15
  .fcr-confirm-content-dialog-close {
9
16
  border-radius: var(--fcr_cornerradius_round);
10
- width: 24px;
11
- height: 24px;
17
+ width: 28px;
18
+ height: 28px;
12
19
  cursor: pointer;
13
20
  display: flex;
14
21
  justify-content: center;
@@ -39,13 +46,13 @@
39
46
  .fcr-confirm-content-icon path {
40
47
  fill: #fff;
41
48
  }
42
- .fcr-confirm-content-title{
43
- color: var(--fcr_ui_scene_icontext1);
49
+ .fcr-confirm-content-title {
50
+ color: var(--fcr_ui_scene_icontext1);
44
51
  font-size: 16px;
45
52
  line-height: 20px;
46
53
  font-weight: var(--fcr_font_weight_x);
47
54
  }
48
- .fcr-confirm-content-content{
55
+ .fcr-confirm-content-content {
49
56
  color: var(--fcr_ui_scene_icontext1);
50
57
  font-weight: 300;
51
58
  font-size: 14px;
@@ -56,10 +63,18 @@ color: var(--fcr_ui_scene_icontext1);
56
63
  word-break: break-word;
57
64
  overflow: hidden;
58
65
  }
66
+
59
67
  .fcr-confirm-content-title.align-center,
60
68
  .fcr-confirm-content-content.align-center {
61
- text-align: center;
69
+ display: flex;
70
+ justify-items: center;
71
+ justify-content: center;
72
+ }
73
+
74
+ .fcr-confirm-content-content.align-center {
75
+ padding: 12px 0 20px;
62
76
  }
77
+
63
78
  .fcr-confirm-content-footer {
64
79
  display: flex;
65
80
  justify-content: flex-end;
@@ -67,6 +82,14 @@ color: var(--fcr_ui_scene_icontext1);
67
82
  margin-left: auto;
68
83
  }
69
84
 
85
+ .fcr-confirm-content-footer__center {
86
+ justify-content: center;
87
+ }
88
+
89
+ .fcr-confirm-content-footer__center button {
90
+ flex: 1;
91
+ }
92
+
70
93
  .fcr-confirm-content-footer .fcr-button-secondary,
71
94
  .fcr-confirm-content-footer .fcr-button-secondary:hover {
72
95
  background-color: var(--fcr_ui_scene_btn2);
@@ -75,5 +98,5 @@ color: var(--fcr_ui_scene_icontext1);
75
98
  .fcr-confirm-content-footer.fcr-button-flex-column {
76
99
  display: flex;
77
100
  flex-direction: column;
78
- gap: 12px
79
- }
101
+ gap: 12px;
102
+ }
@@ -46,9 +46,8 @@ var ConfirmContent = exports.ConfirmContent = function ConfirmContent(props) {
46
46
  _props$okText = props.okText,
47
47
  okText = _props$okText === void 0 ? t('fmt_uimanager_button_determine') : _props$okText,
48
48
  _props$showCancel = props.showCancel,
49
- showCancel = _props$showCancel === void 0 ? false : _props$showCancel,
50
- _props$width = props.width,
51
- width = _props$width === void 0 ? 400 : _props$width,
49
+ showCancel = _props$showCancel === void 0 ? true : _props$showCancel,
50
+ width = props.width,
52
51
  title = props.title,
53
52
  content = props.content,
54
53
  icon = props.icon,
@@ -74,23 +73,26 @@ var ConfirmContent = exports.ConfirmContent = function ConfirmContent(props) {
74
73
  wrapperRef.current.style.setProperty('width', width + 'px');
75
74
  }
76
75
  }, [width]);
77
- var buttons = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, _objectSpread(_objectSpread({
76
+ var buttons = [showCancel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, _objectSpread(_objectSpread({
78
77
  size: "XS",
79
- shape: "circle",
80
78
  type: "secondary",
81
79
  onClick: onCancel
82
80
  }, cancelButtonProps), {}, {
83
81
  children: cancelText
84
82
  })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, _objectSpread(_objectSpread({
85
83
  size: "XS",
86
- shape: "circle",
87
84
  onClick: onOk
88
85
  }, okButtonProps), {}, {
89
86
  children: okText
90
87
  }))];
88
+ var layoutType = (0, _react.useMemo)(function () {
89
+ return alignCenter ? 'center' : 'space-between';
90
+ }, [alignCenter]);
91
91
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
92
92
  ref: wrapperRef,
93
- className: "fcr-confirm-content-wrapper",
93
+ className: (0, _classnames["default"])('fcr-confirm-content-wrapper', {
94
+ 'fcr-confirm-content-wrapper__center': layoutType === 'center'
95
+ }),
94
96
  children: [closable ? closeIcon ? closeIcon : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
95
97
  onClick: onCancel,
96
98
  className: (0, _classnames["default"])('fcr-confirm-content-dialog-close'),
@@ -120,7 +122,8 @@ var ConfirmContent = exports.ConfirmContent = function ConfirmContent(props) {
120
122
  })]
121
123
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
122
124
  className: (0, _classnames["default"])('fcr-confirm-content-footer', {
123
- 'fcr-button-flex-column': (cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.block) || (okButtonProps === null || okButtonProps === void 0 ? void 0 : okButtonProps.block)
125
+ 'fcr-button-flex-column': (cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.block) || (okButtonProps === null || okButtonProps === void 0 ? void 0 : okButtonProps.block),
126
+ 'fcr-confirm-content-footer__center': layoutType === 'center'
124
127
  }),
125
128
  children: reverseButton ? buttons.reverse() : buttons
126
129
  })]
@@ -111,7 +111,7 @@ var FcrDevicePretestPage = exports.FcrDevicePretestPage = function FcrDevicePret
111
111
  type: icon,
112
112
  colors: {
113
113
  iconPrimary: bgType === 'noDevice' ? 'var(fcr_ui_scene_icontext5)' : bgType === 'gray' ? 'var(--fcr_web_ui_scene_mainicon1)' : 'var(--fcr_ui_scene_white10)',
114
- iconSecondary: bgType === 'noDevice' ? 'var(--fcr_ui_scene_ramp_red6)' : undefined
114
+ iconSecondary: bgType === 'noDevice' ? 'var(--fcr_ui_scene_ramp_red6)' : 'var(--fcr_ui_scene_white10)'
115
115
  }
116
116
  })
117
117
  }, key);
@@ -24,7 +24,7 @@
24
24
  backdrop-filter: blur(25px);
25
25
  }
26
26
  .fcr-dialog-body {
27
- padding: 36px 32px 24px;
27
+ padding: 32px 32px 24px 30px;
28
28
  }
29
29
  .fcr-dialog-zoom-enter,
30
30
  .fcr-dialog-zoom-appear {
@@ -56,6 +56,7 @@ export interface BaseDialogProps {
56
56
  afterClose?: () => void;
57
57
  mask?: boolean;
58
58
  bodyStyle?: CSSProperties;
59
+ style?: CSSProperties;
59
60
  wrapClassName?: string;
60
61
  getContainer?: false | string | HTMLElement | (() => HTMLElement) | undefined;
61
62
  center?: boolean;
@@ -2,11 +2,10 @@
2
2
  box-sizing: border-box;
3
3
  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
4
4
  border: 1px solid var(--fcr_ui_scene_line1);
5
- box-shadow: 0px 0px 15px var(--fcr_web_light_dropup_m);
5
+ box-shadow: var(--fcr_web_light_dropup_l);
6
6
  border-radius: var(--fcr_cornerradius_l);
7
7
  width: 100%;
8
8
  padding: 10px;
9
-
10
9
  }
11
10
 
12
11
  .fcr-drop-menu-option {
@@ -24,8 +23,7 @@
24
23
  cursor: pointer;
25
24
  }
26
25
 
27
-
28
- .fcr-drop-menu-options{
26
+ .fcr-drop-menu-options {
29
27
  display: flex;
30
28
  flex-direction: column;
31
29
  gap: 10px;
@@ -42,11 +40,15 @@
42
40
  background-color: var(--fcr_web_ui_scene_hover);
43
41
  color: var(--fcr_web_ui_scene_mainicon2);
44
42
  }
43
+ .fcr-drop-menu-option-primary:hover .fcr-checkbox-label {
44
+ color: var(--fcr_web_ui_scene_mainicon2);
45
+ }
45
46
 
46
- .fcr-drop-menu-title{
47
+ .fcr-drop-menu-title {
47
48
  font-size: 12px;
48
- color: var(--fcr_ui_scene_icontext2);
49
+ color: var(--fcr_ui_scene_icontext1);
49
50
  }
51
+
50
52
  .fcr-drop-menu-option-danger {
51
53
  border-radius: var(--fcr_cornerradius_xxs);
52
54
  width: 100%;
@@ -57,20 +59,28 @@
57
59
  flex-wrap: nowrap;
58
60
  gap: 8px;
59
61
  height: 30px;
60
- color: var(--fcr_ui_scene_ramp_red6);
62
+ color: var(--fcr_ui_scene_icontext5);
61
63
  padding: 0 8px;
62
64
  }
63
65
 
66
+ .fcr-drop-menu-option-danger .fcr-checkbox-label {
67
+ color: var(--fcr_ui_scene_ramp_red6);
68
+ }
69
+
70
+ .fcr-drop-menu-option-danger svg path{
71
+ fill: var(--fcr_web_ui_scene_mainicon1);
72
+ }
73
+
64
74
  .fcr-drop-menu-option-danger:hover {
65
- background-color: var(--fcr_ui_scene_ramp_red6);
66
- color: var(--fcr_ui_scene_white10);
75
+ background-color: var(--fcr_ui_scene_ramp_red1);
76
+ color: var(--fcr_ui_scene_ramp_red6);
67
77
  }
68
78
 
69
79
  .fcr-drop-menu-option-danger:hover svg path {
70
- fill: var(--fcr_ui_scene_white10)
80
+ fill: var(--fcr_ui_scene_ramp_red6);
71
81
  }
72
82
 
73
- .fcr-drop-menu-option-text{
83
+ .fcr-drop-menu-option-text {
74
84
  flex: 1;
75
85
  text-align: left;
76
86
  }
@@ -79,8 +89,9 @@
79
89
  width: 16px;
80
90
  height: 16px;
81
91
  }
92
+
82
93
  .fcr-drop-menu svg.fcr-drop-menu-item-icon path {
83
- fill: rgb(172, 172, 172)
94
+ fill: rgb(172, 172, 172);
84
95
  }
85
96
 
86
97
  .fcr-drop-menu .fcr-drop-menu-item-loading {
@@ -91,4 +102,4 @@
91
102
  100% {
92
103
  transform: rotate(360deg);
93
104
  }
94
- }
105
+ }
@@ -18,6 +18,7 @@ export interface FcrDropMenuProps {
18
18
  footer?: ReactNode;
19
19
  options?: MenuData[];
20
20
  children?: ReactNode;
21
+ className?: string;
21
22
  }
22
23
  export declare const FcrDropOption: FC<MenuData>;
23
24
  export declare const FcrDropMenu: FC<FcrDropMenuProps>;
@@ -26,7 +26,7 @@ require("core-js/modules/esnext.async-iterator.map.js");
26
26
  require("core-js/modules/esnext.iterator.map.js");
27
27
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
28
28
  require("./index.css");
29
- var _classnames = _interopRequireDefault(require("classnames"));
29
+ var _classnames2 = _interopRequireDefault(require("classnames"));
30
30
  var _icon = require("../icon");
31
31
  var _type = require("../icon/type");
32
32
  var _jsxRuntime = require("react/jsx-runtime");
@@ -44,7 +44,7 @@ var FcrDropOption = exports.FcrDropOption = function FcrDropOption(option) {
44
44
  });
45
45
  }
46
46
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
47
- className: (0, _classnames["default"])(option.classNames, 'fcr-drop-menu-option', (0, _defineProperty2["default"])({}, "fcr-drop-menu-option-".concat(type), !!type), {
47
+ className: (0, _classnames2["default"])(option.classNames, 'fcr-drop-menu-option', (0, _defineProperty2["default"])({}, "fcr-drop-menu-option-".concat(type), !!type), {
48
48
  'fcr-drop-menu-option-disabled': option.disabled
49
49
  }),
50
50
  onClick: !option.disabled ? option.onButtonClick : undefined,
@@ -52,7 +52,7 @@ var FcrDropOption = exports.FcrDropOption = function FcrDropOption(option) {
52
52
  className: "fcr-drop-menu-option-text",
53
53
  children: option.title
54
54
  }), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
55
- className: (0, _classnames["default"])('fcr-drop-menu-item-icon', {
55
+ className: (0, _classnames2["default"])('fcr-drop-menu-item-icon', {
56
56
  'fcr-drop-menu-item-loading': loading
57
57
  }),
58
58
  type: _type.FcrIconType.FCR_BTN_LOADING
@@ -63,9 +63,10 @@ var FcrDropMenu = exports.FcrDropMenu = function FcrDropMenu(props) {
63
63
  var title = props.title,
64
64
  options = props.options,
65
65
  children = props.children,
66
- styles = props.styles;
66
+ styles = props.styles,
67
+ className = props.className;
67
68
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
68
- className: "fcr-drop-menu",
69
+ className: (0, _classnames2["default"])("fcr-drop-menu", className),
69
70
  children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
70
71
  className: "fcr-drop-menu-title",
71
72
  children: title
@@ -1,3 +1,3 @@
1
1
  import { PathOptions } from '../svg-dict';
2
- export declare const path: ({ iconPrimary }: PathOptions) => import("react/jsx-runtime").JSX.Element;
3
- export declare const viewBox = "0 0 28 28";
2
+ export declare const path: ({ iconPrimary, iconSecondary, }: PathOptions) => import("react/jsx-runtime").JSX.Element;
3
+ export declare const viewBox = "0 0 30 30";
@@ -9,20 +9,22 @@ exports.viewBox = exports.path = void 0;
9
9
  var _react = _interopRequireDefault(require("react"));
10
10
  var _jsxRuntime = require("react/jsx-runtime");
11
11
  var path = exports.path = function path(_ref) {
12
- var iconPrimary = _ref.iconPrimary;
12
+ var iconPrimary = _ref.iconPrimary,
13
+ _ref$iconSecondary = _ref.iconSecondary,
14
+ iconSecondary = _ref$iconSecondary === void 0 ? 'var(--fcr_ui_scene_ramp_red6)' : _ref$iconSecondary;
13
15
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
14
16
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
15
17
  fillRule: "evenodd",
16
18
  clipRule: "evenodd",
17
- d: "M5.25 11.664C5.25 11.0749 5.39558 10.5197 5.65274 10.0325L15.7754 19.6224C15.4033 19.7572 15.0019 19.8307 14.5833 19.8307H8.74998C6.81699 19.8307 5.25 18.2637 5.25 16.3307V11.664ZM18.0833 16.3307C18.0833 16.7691 18.0027 17.1886 17.8555 17.5753L8.00519 8.24347C8.2452 8.19146 8.49439 8.16406 8.74998 8.16406H14.5833C16.5163 8.16406 18.0833 9.73106 18.0833 11.664V16.3307ZM20.9052 9.48311C21.6773 8.93155 22.7499 9.48353 22.7499 10.4325V17.565C22.7499 18.5139 21.6773 19.0659 20.9052 18.5143L19.1552 17.2643C18.8486 17.0453 18.6666 16.6918 18.6666 16.315V11.6824C18.6666 11.3057 18.8486 10.9521 19.1552 10.7331L20.9052 9.48311Z",
19
+ d: "M5.625 12.5C5.625 11.8687 5.78098 11.2739 6.0565 10.7519L16.9023 21.0269C16.5036 21.1713 16.0735 21.25 15.625 21.25H9.375C7.30393 21.25 5.625 19.5711 5.625 17.5V12.5ZM19.375 17.5C19.375 17.9697 19.2886 18.4192 19.131 18.8336L8.57701 8.83508C8.83417 8.77935 9.10116 8.75 9.375 8.75H15.625C17.6961 8.75 19.375 10.4289 19.375 12.5V17.5ZM22.3985 10.1618C23.2258 9.57087 24.375 10.1623 24.375 11.179V18.821C24.375 19.8377 23.2258 20.4291 22.3985 19.8382L20.5235 18.4989C20.195 18.2643 20 17.8854 20 17.4817V12.5183C20 12.1146 20.195 11.7357 20.5235 11.5011L22.3985 10.1618Z",
18
20
  fill: iconPrimary
19
21
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
20
- d: "M17.4993 19.25L6.41602 8.75007",
21
- stroke: "#F5655C",
22
- strokeWidth: "1.74999",
22
+ d: "M18.75 20.625L6.875 9.375",
23
+ stroke: iconSecondary,
24
+ strokeWidth: "1.875",
23
25
  strokeLinecap: "round",
24
26
  strokeLinejoin: "round"
25
27
  })]
26
28
  });
27
29
  };
28
- var viewBox = exports.viewBox = '0 0 28 28';
30
+ var viewBox = exports.viewBox = '0 0 30 30';
@@ -15,7 +15,7 @@ var path = exports.path = function path(_ref) {
15
15
  fillRule: "evenodd",
16
16
  clipRule: "evenodd",
17
17
  d: "M19.5 12C19.5 16.1421 16.1421 19.5 12 19.5C7.85786 19.5 4.5 16.1421 4.5 12C4.5 7.85786 7.85786 4.5 12 4.5C16.1421 4.5 19.5 7.85786 19.5 12ZM10.5 8C10.5 7.44772 10.9477 7 11.5 7H12.5C13.0523 7 13.5 7.44772 13.5 8V11.5C13.5 12.0523 13.0523 12.5 12.5 12.5H11.5C10.9477 12.5 10.5 12.0523 10.5 11.5V8ZM11.5 14C10.9477 14 10.5 14.4477 10.5 15V16C10.5 16.5523 10.9477 17 11.5 17H12.5C13.0523 17 13.5 16.5523 13.5 16V15C13.5 14.4477 13.0523 14 12.5 14H11.5Z",
18
- fill: "#FF8C38"
18
+ fill: iconPrimary || "#FF8C38"
19
19
  })
20
20
  });
21
21
  };
@@ -0,0 +1,3 @@
1
+ import { PathOptions } from '../svg-dict';
2
+ export declare const path: ({ iconPrimary }: PathOptions) => import("react/jsx-runtime").JSX.Element;
3
+ export declare const viewBox = "0 0 20 20";
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+
3
+ require("core-js/modules/es.object.define-property.js");
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.viewBox = exports.path = void 0;
9
+ var _react = _interopRequireDefault(require("react"));
10
+ var _jsxRuntime = require("react/jsx-runtime");
11
+ var path = exports.path = function path(_ref) {
12
+ var iconPrimary = _ref.iconPrimary;
13
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
14
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
15
+ d: "M6.24996 6.81782V6.33941C6.24996 5.48395 6.8614 4.75075 7.70294 4.59708L7.8941 4.56217C9.27395 4.31021 10.6879 4.30913 12.0682 4.55901L12.2943 4.59995C13.1371 4.75253 13.75 5.48629 13.75 6.34276V6.81517C12.8275 7.15451 12.1695 8.04104 12.1695 9.08125V10.7094L11.2502 10.5808C10.4076 10.463 9.55276 10.463 8.71018 10.5808L7.79091 10.7094V9.04174C7.79091 8.02369 7.15017 7.1553 6.24996 6.81782ZM14.5833 6.34276V6.66746V7.50079C13.7104 7.50079 13.0028 8.20839 13.0028 9.08125V11.0886C13.0028 11.3944 12.7324 11.6296 12.4295 11.5873L11.1348 11.4061C10.3688 11.299 9.59162 11.299 8.82564 11.4061L7.53089 11.5873C7.22799 11.6296 6.95757 11.3944 6.95757 11.0886V9.04174C6.95757 8.1907 6.26767 7.50079 5.41663 7.50079V6.66746V6.33941C5.41663 5.08145 6.31575 4.00328 7.55325 3.7773L7.74441 3.7424C9.22282 3.47243 10.7378 3.47128 12.2166 3.739L12.4428 3.77995C13.6821 4.00431 14.5833 5.08331 14.5833 6.34276ZM7.40963 14.224H6.72567L6.41754 14.1237C5.59368 13.8555 4.99996 13.0809 4.99996 12.1699V9.07688C4.99996 8.89679 5.14595 8.75079 5.32605 8.75079C5.50614 8.75079 5.65213 8.89679 5.65213 9.07688V10.9934C5.65213 12.1753 6.68447 13.092 7.85812 12.9521L8.75654 12.845C9.57053 12.748 10.3932 12.748 11.2071 12.845L12.1056 12.9521C13.2792 13.092 14.3116 12.1753 14.3116 10.9934V9.095C14.3116 8.9049 14.4657 8.75079 14.6558 8.75079C14.8459 8.75079 15 8.9049 15 9.095V12.1699C15 13.076 14.4127 13.8471 13.5957 14.1193L13.2815 14.224H12.609H7.40963ZM12.609 15.0573H11.7757H8.24296H7.40963V15.2321C7.40963 15.5773 7.12981 15.8571 6.78463 15.8571C6.43945 15.8571 6.15963 15.5773 6.15963 15.2321V14.9161C5.00275 14.5396 4.16663 13.4523 4.16663 12.1699V9.07688C4.16663 8.43655 4.68572 7.91746 5.32605 7.91746C5.96638 7.91746 6.48547 8.43655 6.48547 9.07688V10.9934C6.48547 11.676 7.08168 12.2054 7.75951 12.1246L8.65793 12.0176C9.53743 11.9127 10.4263 11.9127 11.3058 12.0176L12.2042 12.1246C12.882 12.2054 13.4782 11.676 13.4782 10.9934V9.095C13.4782 8.44466 14.0054 7.91746 14.6558 7.91746C15.3061 7.91746 15.8333 8.44466 15.8333 9.095V12.1699C15.8333 13.4454 15.0062 14.5278 13.859 14.9099V15.2322C13.859 15.5773 13.5792 15.8572 13.234 15.8572C12.8888 15.8572 12.609 15.5773 12.609 15.2322V15.0573Z",
16
+ fill: "#F5655C",
17
+ fillRule: "evenodd",
18
+ clipRule: "evenodd"
19
+ })
20
+ });
21
+ };
22
+ var viewBox = exports.viewBox = '0 0 20 20';
@@ -0,0 +1,3 @@
1
+ import { PathOptions } from '../svg-dict';
2
+ export declare const path: ({ iconPrimary }: PathOptions) => import("react/jsx-runtime").JSX.Element;
3
+ export declare const viewBox = "0 0 48 48";
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+
3
+ require("core-js/modules/es.object.define-property.js");
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.viewBox = exports.path = void 0;
9
+ var _react = _interopRequireDefault(require("react"));
10
+ var _jsxRuntime = require("react/jsx-runtime");
11
+ var path = exports.path = function path(_ref) {
12
+ var iconPrimary = _ref.iconPrimary;
13
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
14
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
15
+ fillRule: "evenodd",
16
+ clipRule: "evenodd",
17
+ d: "M13.1928 19.3009L23.3031 11.8316C23.9132 11.3808 24.7485 11.3905 25.348 11.8553L35.1147 19.4271C35.5286 19.748 35.7709 20.2424 35.7709 20.7661V22.0304C35.7709 22.4909 35.2495 22.7578 34.8759 22.4886L28.3504 17.7862C27.7301 17.3392 26.8872 17.363 26.2931 17.8445L21.2911 21.8982C20.8941 22.2199 20.6636 22.7036 20.6636 23.2145V34.9401C20.6636 35.5639 20.1579 36.0696 19.5341 36.0696H15.7219C13.8505 36.0696 12.3334 34.5525 12.3334 32.681V21.0043C12.3334 20.3324 12.6523 19.7002 13.1928 19.3009ZM32.3324 25.6505C32.3324 27.7204 30.6541 29.3982 28.5834 29.3982C26.5127 29.3982 24.8343 27.7204 24.8343 25.6505C24.8343 23.5806 26.5127 21.9029 28.5834 21.9029C30.6541 21.9029 32.3324 23.5806 32.3324 25.6505ZM22.3334 33.6075C22.3334 32.2492 25.1317 31.1471 28.5834 31.1471C32.035 31.1471 34.8334 32.2508 34.8334 33.6091C34.8334 34.9674 32.035 36.0696 28.5834 36.0696C25.1317 36.0696 22.3334 34.9658 22.3334 33.6075Z",
18
+ fill: "white"
19
+ })
20
+ });
21
+ };
22
+ var viewBox = exports.viewBox = '0 0 48 48';
@@ -17,7 +17,7 @@ var path = exports.path = function path(_ref) {
17
17
  width: "13.65",
18
18
  height: "10.65",
19
19
  stroke: iconPrimary,
20
- "stroke-width": "1.35"
20
+ strokeWidth: "1.35"
21
21
  })
22
22
  });
23
23
  };
@@ -1,3 +1,3 @@
1
1
  import { PathOptions } from '../svg-dict';
2
2
  export declare const path: ({ iconPrimary }: PathOptions) => import("react/jsx-runtime").JSX.Element;
3
- export declare const viewBox = "0 0 20 20";
3
+ export declare const viewBox = "0 0 48 48";
@@ -1,32 +1,20 @@
1
1
  "use strict";
2
2
 
3
3
  require("core-js/modules/es.object.define-property.js");
4
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.viewBox = exports.path = void 0;
9
- var _react = _interopRequireDefault(require("react"));
10
8
  var _jsxRuntime = require("react/jsx-runtime");
11
9
  var path = exports.path = function path(_ref) {
12
10
  var iconPrimary = _ref.iconPrimary;
13
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
14
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
15
- d: "M10.4165 5.41797H14.1665C15.3171 5.41797 16.2498 6.35071 16.2498 7.5013V12.918C16.2498 14.0686 15.3171 15.0013 14.1665 15.0013H6.24984C5.09924 15.0013 4.1665 14.0686 4.1665 12.918V10.8346",
16
- stroke: iconPrimary,
17
- strokeWidth: "1.125",
18
- strokeLinecap: "round",
19
- fill: "none"
20
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
21
- x: "3.0625",
22
- y: "4.9375",
23
- width: "5.95833",
24
- height: "4.29167",
25
- rx: "1.10417",
26
- stroke: iconPrimary,
27
- strokeWidth: "1.125",
28
- fill: "none"
29
- })]
11
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
12
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
13
+ fillRule: "evenodd",
14
+ clipRule: "evenodd",
15
+ d: "M10 13.2H19C19.718 13.2 20.3 13.782 20.3 14.5V19.5C20.3 20.218 19.718 20.8 19 20.8H10C9.28203 20.8 8.7 20.218 8.7 19.5V14.5C8.7 13.782 9.28203 13.2 10 13.2ZM6 14.5C6 12.2909 7.79086 10.5 10 10.5H19C21.2091 10.5 23 12.2909 23 14.5V19.5C23 21.7091 21.2091 23.5 19 23.5H10C7.79086 23.5 6 21.7091 6 19.5V14.5ZM25.0004 11.6499C24.2548 11.6499 23.6504 12.2543 23.6504 12.9999C23.6504 13.7455 24.2548 14.3499 25.0004 14.3499H34.0004C36.0162 14.3499 37.6504 15.9841 37.6504 17.9999V30.9999C37.6504 33.0157 36.0162 34.6499 34.0004 34.6499H15.0004C12.9846 34.6499 11.3504 33.0157 11.3504 30.9999V25.9999C11.3504 25.2543 10.746 24.6499 10.0004 24.6499C9.25481 24.6499 8.65039 25.2543 8.65039 25.9999V30.9999C8.65039 34.5069 11.4934 37.3499 15.0004 37.3499H34.0004C37.5074 37.3499 40.3504 34.5069 40.3504 30.9999V17.9999C40.3504 14.4929 37.5074 11.6499 34.0004 11.6499H25.0004Z",
16
+ fill: iconPrimary
17
+ })
30
18
  });
31
19
  };
32
- var viewBox = exports.viewBox = '0 0 20 20';
20
+ var viewBox = exports.viewBox = '0 0 48 48';