agora-ui-foundation 1.0.0

package/lib/components/device-settings/video-settings/mirror-toggle.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const MirrorToggle: FC;

package/lib/components/device-settings/video-settings/mirror-toggle.js

@@ -0,0 +1,64 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MirrorToggle = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _useNamespace = require("../common/useNamespace");
+var _type = require("../../icon/type");
+var _tooltip = require("../../tooltip");
+var _icon = require("../../icon");
+var _i18n = require("../../../i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var MirrorToggle = exports.MirrorToggle = function MirrorToggle() {
+  var ns = (0, _useNamespace.useNamespace)('device-settings-mirror-toggle');
+  var t = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isLocalMirrorEnabled = _useState2[0],
+    setIsLocalMirrorEnabled = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isIconHovered = _useState4[0],
+    setIsIconHovered = _useState4[1];
+  var iconType = (0, _react.useMemo)(function () {
+    return isLocalMirrorEnabled ? _type.FcrIconType.FCR_MIRRORIMAGE_LEFT : _type.FcrIconType.FCR_MIRRORIMAGE_RIGHT;
+  }, [isLocalMirrorEnabled]);
+  var iconColors = (0, _react.useMemo)(function () {
+    return isIconHovered ? {
+      iconPrimary: 'var(--fcr_web_ui_scene_mainicon2)'
+    } : {
+      iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+    };
+  }, [isIconHovered]);
+  var toggleLocalMirror = function toggleLocalMirror() {
+    setIsLocalMirrorEnabled(!isLocalMirrorEnabled);
+  };
+  var onMouseEnter = function onMouseEnter() {
+    setIsIconHovered(true);
+  };
+  var onMouseLeave = function onMouseLeave() {
+    setIsIconHovered(false);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    trigger: "hover",
+    placement: "top",
+    mouseEnterDelay: 0.2,
+    content: t('fmt_uimanager_labels_mirror'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onClick: toggleLocalMirror,
+      className: ns.b(),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: iconType,
+        colors: iconColors,
+        size: 20
+      })
+    })
+  });
+};

package/lib/components/device-settings/video-settings/video-settings-basic.d.ts

@@ -0,0 +1,2 @@
+import { FC, PropsWithChildren } from 'react';
+export declare const VideoSettingsBasic: FC<PropsWithChildren<{}>>;

package/lib/components/device-settings/video-settings/video-settings-basic.js

@@ -0,0 +1,86 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VideoSettingsBasic = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _useNamespace = require("../common/useNamespace");
+var _advanceLink = require("../common/advance-link");
+var _checkbox = require("../../checkbox");
+var _radio = require("../../radio");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _i18n = require("../../../i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var VideoSettingsBasic = exports.VideoSettingsBasic = function VideoSettingsBasic() {
+  var ns = (0, _useNamespace.useNamespace)('video-settings-basic');
+  var t = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    shouldTurnOffVideo = _useState2[0],
+    setShouldTurnOffVideo = _useState2[1];
+  var _useState3 = (0, _react.useState)(true),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    shouldDisplayPreviewDialog = _useState4[0],
+    setShouldDisplayPreviewDialog = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    shouldHideNonVideoParticipants = _useState6[0],
+    setShouldHideNonVideoParticipants = _useState6[1];
+  var _useState7 = (0, _react.useState)('16'),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    displayedMaxAttendees = _useState8[0],
+    setDisplayedMaxAttendees = _useState8[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.b(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: ns.e('basic-form'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        size: "small",
+        label: t('fmt_internalsetting_options_closevideojoin'),
+        checked: shouldTurnOffVideo,
+        onChange: function onChange(v) {
+          return setShouldTurnOffVideo(v);
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        size: "small",
+        label: t('fmt_internalsetting_options_alwaysbox'),
+        checked: shouldDisplayPreviewDialog,
+        onChange: function onChange(v) {
+          return setShouldDisplayPreviewDialog(v);
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        size: "small",
+        label: t('fmt_internalsetting_options_hidenonvideo'),
+        checked: shouldHideNonVideoParticipants,
+        onChange: function onChange(v) {
+          return setShouldHideNonVideoParticipants(v);
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])(ns.e('basic-form'), ns.e('max-person-form')),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('max-person-label'),
+        children: t('fmt_internalsetting_options_maximumdisplay')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('max-person-radio-group'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_radio.FcrRadioGroup, {
+          value: displayedMaxAttendees,
+          onChange: function onChange(v) {
+            return setDisplayedMaxAttendees(v);
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+            value: "16",
+            label: t('fmt_internalsetting_options_16')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+            value: "25",
+            label: t('fmt_internalsetting_options_25')
+          })]
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_advanceLink.AdvanceLink, {})]
+  });
+};

package/lib/components/device-settings/video-settings/video-settings.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import './index.css';
+export declare const VideoSettings: FC;

package/lib/components/device-settings/video-settings/video-settings.js

@@ -0,0 +1,76 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VideoSettings = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _useNamespace = require("../common/useNamespace");
+var _videoSettingsBasic = require("./video-settings-basic");
+var _mirrorToggle = require("./mirror-toggle");
+var _localVideoPlayer = require("./local-video-player");
+var _cameraSelect = require("./camera-select");
+require("./index.css");
+var _tabs = require("../../tabs");
+var _i18n = require("../../../i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var tabContents = {
+  basic: /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoSettingsBasic.VideoSettingsBasic, {}),
+  'virtual-background': /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: "virtual-background"
+  }),
+  'beauty-filter': /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: "beauty-filter"
+  })
+};
+var VideoSettings = exports.VideoSettings = function VideoSettings() {
+  var ns = (0, _useNamespace.useNamespace)('device-settings-video');
+  var t = (0, _i18n.useI18n)();
+  var tabItems = [{
+    label: t('fmt_setting_option_basics'),
+    key: 'basic'
+  }, {
+    label: t('fmt_setting_option_backgrounds'),
+    key: 'virtual-background'
+  }, {
+    label: t('fmt_device_labels_specialeffects'),
+    key: 'beauty-filter'
+  }];
+  var _useState = (0, _react.useState)('basic'),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    activeTab = _useState2[0],
+    setActiveTab = _useState2[1];
+  var handleActiveTab = function handleActiveTab(tabKey) {
+    setActiveTab(tabKey);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.b(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: ns.e('header'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: t('fmt_setting_label_preview')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mirrorToggle.MirrorToggle, {})]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: ns.e('preview'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_localVideoPlayer.LocalVideoPlayer, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('device-select'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraSelect.CameraSelect, {})
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: ns.e('tab-wrapper'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          fontSize: 0
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tabs.FcrFashionTabs, {
+          items: tabItems,
+          activeKey: activeTab,
+          onChange: handleActiveTab
+        })
+      }), tabContents[activeTab]]
+    })]
+  });
+};

package/lib/components/device-settings/view.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import './index.css';
+export declare const DeviceSettingsView: FC;

package/lib/components/device-settings/view.js

@@ -0,0 +1,84 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeviceSettingsView = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _audioSettings = require("./audio-settings/audio-settings");
+var _videoSettings = require("./video-settings/video-settings");
+require("./index.css");
+var _useNamespace = require("./common/useNamespace");
+var _icon = require("../icon");
+var _type = require("../icon/type");
+var _i18n = require("../../i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var tabContents = {
+  audio: /*#__PURE__*/(0, _jsxRuntime.jsx)(_audioSettings.AudioSettings, {}),
+  video: /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoSettings.VideoSettings, {})
+};
+var DeviceSettingsView = exports.DeviceSettingsView = function DeviceSettingsView() {
+  var _useState = (0, _react.useState)('video'),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    activeTab = _useState2[0],
+    setActiveTab = _useState2[1];
+  var t = (0, _i18n.useI18n)();
+  var ns = (0, _useNamespace.useNamespace)('device-settings');
+  var getListItemCls = function getListItemCls(tabKey) {
+    return (0, _classnames["default"])(ns.e('nav-list-item'), ns.is('active', activeTab === tabKey));
+  };
+  var getSurroundingCls = function getSurroundingCls(color) {
+    return (0, _classnames["default"])(ns.e('surrounding'), ns.em('surrounding', color));
+  };
+  var tabClickHandler = function tabClickHandler(tabKey) {
+    return function () {
+      setActiveTab(tabKey);
+    };
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.b(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: ns.e('nav'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          className: getListItemCls('audio'),
+          onClick: tabClickHandler('audio'),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: getSurroundingCls('green'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_MUTE,
+              colors: {
+                iconPrimary: 'white'
+              },
+              size: 24
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: t('fmt_pstn_options_audio_setting')
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          className: getListItemCls('video'),
+          onClick: tabClickHandler('video'),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: getSurroundingCls('purple'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_CAMERA,
+              colors: {
+                iconPrimary: 'white'
+              },
+              size: 24
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: t('fmt_setting_option_Video')
+          })]
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])(ns.e('tab-content-wrapper'), ns.is('tab-content-video-wrapper', activeTab === 'video')),
+      children: tabContents[activeTab]
+    })]
+  });
+};

package/lib/components/dialog/basic-confirm-dialog.css

@@ -0,0 +1,34 @@
+.basic-confirm-dialog,
+.basic-confirm-dialog__footer {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.basic-confirm-dialog .fcr-dialog-body {
+  padding: 20px;
+}
+.basic-confirm-dialog .fcr-dialog-content {
+  width: 100%;
+}
+
+.basic-confirm-dialog__footer button {
+  flex: 0 0 calc(50% - 5px);
+}
+
+.basic-confirm-dialog__footer .fcr-button-secondary,
+.basic-confirm-dialog__footer .fcr-button-secondary:hover {
+  background-color: var(--fcr_ui_scene_btn2);
+  color: var(--fcr_ui_scene_icontext2);
+}
+
+.basic-confirm-dialog__title {
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 16px;
+  text-align: center;
+}
+.basic-confirm-dialog__text {
+  margin: 12px 0 20px 0;
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 12px;
+}

package/lib/components/dialog/basic-confirm-dialog.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import './basic-confirm-dialog.css';
+interface FcrBasicConfirmDialogProps {
+    title?: string;
+    text?: string;
+    cancelText?: string;
+    okText?: string;
+    onOk?: () => void;
+    onCancel?: () => void;
+    visible?: boolean;
+    getContainer?: false | string | HTMLElement | (() => HTMLElement) | undefined;
+}
+export declare const FcrBasicConfirmDialog: FC<React.PropsWithChildren<FcrBasicConfirmDialogProps>>;
+export {};

package/lib/components/dialog/basic-confirm-dialog.js

@@ -0,0 +1,52 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrBasicConfirmDialog = void 0;
+var _ = require(".");
+var _button = require("../button");
+require("./basic-confirm-dialog.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var FcrBasicConfirmDialog = exports.FcrBasicConfirmDialog = function FcrBasicConfirmDialog(props) {
+  var title = props.title,
+    text = props.text,
+    cancelText = props.cancelText,
+    okText = props.okText,
+    onOk = props.onOk,
+    onCancel = props.onCancel,
+    visible = props.visible,
+    getContainer = props.getContainer;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.BaseDialog, {
+    classNames: "basic-confirm-dialog",
+    closable: false,
+    width: 320,
+    visible: visible,
+    getContainer: getContainer,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "basic-confirm-dialog__content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "basic-confirm-dialog__title",
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "basic-confirm-dialog__text",
+        children: text
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "basic-confirm-dialog__footer",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+          type: "secondary",
+          shape: "rounded",
+          size: "S",
+          onClick: onCancel,
+          children: cancelText
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+          size: "S",
+          shape: "rounded",
+          onClick: onOk,
+          children: okText
+        })]
+      })]
+    })
+  });
+};

package/lib/components/dialog/class-dialog.css

@@ -0,0 +1,41 @@
+.fcr-class-dialog .fcr-dialog-body {
+  padding: 0 32px;
+}
+.fcr-class-dialog-img {
+  width: 100%;
+  height: 129px;
+  background-color: var(--fcr_ui_scene_ramp_brand6);
+  margin-bottom: 24px;
+}
+.fcr-class-dialog-img img {
+  width: 100%;
+  height: 100%;
+}
+.fcr-class-dialog-inner .fcr-class-dialog-title:first-child {
+  padding-top: 36px;
+}
+.fcr-class-dialog-title {
+  font-weight: var(--fcr_font_weight_l);
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 16px;
+  line-height: 22px;
+  text-align: center;
+  padding-bottom: 12px;
+}
+.fcr-class-dialog-content {
+  font-weight: var(--fcr_font_weight_s);
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 14px;
+  line-height: 150%;
+  margin-bottom: 24px;
+  text-align: center;
+}
+.fcr-class-dialog-actions {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 24px;
+  gap: 8px;
+}
+.fcr-class-dialog-cancel {
+  padding-bottom: 24px;
+}

package/lib/components/dialog/class-dialog.d.ts

@@ -0,0 +1,51 @@
+import { FC, ReactNode } from 'react';
+import { ButtonProps } from '../button';
+import { BaseDialogProps } from '.';
+import './class-dialog.css';
+export interface ClassDialogProps extends BaseDialogProps {
+    /**
+     * 对话框标题
+     */
+    /** @en
+     * The dialog Title.
+     */
+    title?: ReactNode;
+    /**
+     * 对话框底部元素
+     */
+    /** @en
+     * Footer content
+     */
+    footer?: ReactNode;
+    /**
+     * 对话框顶部图片地址
+     */
+    /** @en
+     * Set the url for the image on the top of dialog.
+     */
+    imgUrl?: string;
+    /**
+     * 对话框描述内容
+     */
+    /** @en
+     * The dialog content
+     */
+    content?: ReactNode;
+    /**
+     * 对话框按钮组，会在描述内容下方渲染若干操作按钮
+     */
+    /** @en
+     * Set the action buttons on the bottom of the dialog content.
+     */
+    actions?: (ButtonProps & {
+        text?: string;
+    })[];
+    /**
+     * 是否显示取消按钮
+     */
+    /** @en
+     * Wheter the cancel button is visible on bottom of the dialog or not.
+     */
+    cancelBtn?: boolean;
+}
+export declare const FcrClassDialog: FC<React.PropsWithChildren<ClassDialogProps>>;

package/lib/components/dialog/class-dialog.js

@@ -0,0 +1,81 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrClassDialog = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.error.to-string.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.date.to-string.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.regexp.to-string.js");
+var _button = require("../button");
+var _ = require(".");
+require("./class-dialog.css");
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+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; }
+var FcrClassDialog = exports.FcrClassDialog = function FcrClassDialog(props) {
+  var visible = props.visible,
+    onClose = props.onClose,
+    title = props.title,
+    content = props.content,
+    maskClosable = props.maskClosable,
+    imgUrl = props.imgUrl,
+    width = props.width,
+    actions = props.actions,
+    cancelBtn = props.cancelBtn;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.BaseDialog, {
+    closable: false,
+    classNames: "fcr-class-dialog",
+    width: width || 344,
+    maskClosable: maskClosable,
+    visible: visible,
+    onClose: onClose,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-class-dialog-inner",
+      children: [imgUrl && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-class-dialog-img",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: imgUrl
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-class-dialog-title",
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-class-dialog-content",
+        children: content
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-class-dialog-actions",
+        children: actions === null || actions === void 0 ? void 0 : actions.map(function (btnProps, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, _objectSpread(_objectSpread({
+            size: "S",
+            block: true
+          }, btnProps), {}, {
+            children: btnProps.text || 'Text'
+          }), index.toString());
+        })
+      }), cancelBtn && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-class-dialog-cancel",
+        onClick: onClose,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+          size: "S",
+          block: true,
+          children: "Cancel"
+        })
+      })]
+    })
+  });
+};

package/lib/components/dialog/confirm-dialog.css

@@ -0,0 +1,38 @@
+.fcr-dialog-root .fcr-confirm-dialog-wrap.fcr-dialog-wrap,
+.fcr-dialog-root:has(.fcr-confirm-dialog-wrap) .fcr-dialog-mask {
+  z-index: 2000;
+}
+.fcr-confirm-dialog-title {
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: var(--fcr_font_weight_x);
+}
+
+.fcr-confirm-dialog-inner-wrap {
+  display: flex;
+  flex-direction: row;
+}
+.fcr-confirm-dialog-inner-icon {
+  padding-right: 20px;
+}
+.fcr-confirm-dialog-inner {
+  color: var(--fcr_ui_scene_icontext1);
+  font-weight: 300;
+  font-size: 14px;
+  line-height: 150%;
+  word-break: break-all;
+  padding: 12px 0 24px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.fcr-confirm-dialog-footer {
+  display: flex;
+  justify-content: space-between;
+}
+.fcr-confirm-dialog-footer-btns {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-left: auto;
+}