fcr-ui-scene 3.8.1 → 3.9.0-alpha

package/lib-es/modules/whiteboard/components/pagination/index.css

@@ -0,0 +1,228 @@
+.fcr-pagination {
+  background: var(--fcr_web_ui_scene_fill2);
+  box-shadow: var(--fcr_dark_s_shadow);
+  border-radius: 8px;
+  border-width: 1px;
+  border-style: solid;
+  display: inline-flex;
+  padding: 0 4px;
+  font-size: 14px;
+  height: 36px;
+}
+
+.fcr-pagination .fcr-pagination__prev,
+.fcr-pagination .fcr-pagination__next,
+.fcr-pagination .fcr-pagination__expansion {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.fcr-pagination .fcr-pagination__prev {
+  padding-right: 4px;
+}
+.fcr-pagination .fcr-pagination__next {
+  padding-left: 4px;
+}
+
+.fcr-pagination .fcr-pagination__btn {
+  border-radius: 6px;
+  height: 26px;
+  width: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+}
+
+.fcr-pagination .fcr-pagination__btn:hover:not(.fcr-pagination_btn--disabled) {
+  cursor: pointer;
+  color: var(--color-icon-2);
+  background: var(--color-hover);
+}
+
+.fcr-pagination .fcr-pagination__btn:active:not(.fcr-pagination_btn--disabled) {
+  @apply fcr-bg-brand-8;
+}
+
+.fcr-pagination .fcr-pagination__page {
+  @apply fcr-text-1;
+  text-align: center;
+  width: 58px;
+  font-weight: 700;
+  align-self: center;
+}
+
+.fcr-pagination-small {
+  height: 32px;
+}
+.fcr-pagination-small .fcr-pagination__page {
+  width: 40px;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.fcr-pagination.fcr-pagination-half-r {
+  @apply fcr-rounded-8;
+  height: 32px;
+  min-width: 40px;
+  font-size: 16px;
+  padding: 5px;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border: none;
+  justify-content: center;
+}
+
+.fcr-pagination-half-r .fcr-pagination__extra .fcr-clickabel-icon {
+  @apply fcr-rounded-4;
+  width: 30px;
+  height: 22px;
+}
+
+.fcr-pagination-half-r .fcr-pagination__next .fcr-pagination__btn,
+.fcr-pagination-half-r .fcr-pagination__prev .fcr-pagination__btn {
+  @apply fcr-rounded-4;
+  width: 22px;
+  height: 22px;
+}
+
+.fcr-pagination-half-r .fcr-pagination__page {
+  flex-shrink: 0;
+  width: fit-content;
+  min-width: 35px;
+}
+
+.fcr-pagination-mask {
+  display: inline-flex;
+  width: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition: 0.3s all;
+}
+
+.fcr-pagination-mask--expanded {
+  opacity: 1;
+  width: 148px;
+}
+
+.fcr-pagination__expansion {
+  width: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition: 0.3s all;
+  cursor: pointer;
+}
+
+.fcr-pagination__expansion--expanded {
+  opacity: 1;
+  width: 30px;
+}
+
+.fcr-pagination-half-r .fcr-pagination__extra {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-right: 9px;
+}
+
+.fcr-pagination-half-r .fcr-pagination__btn {
+  @apply fcr-rounded-10;
+  height: 30px;
+  width: 30px;
+}
+
+.fcr-pagination-half-r .fcr-pagination__prev {
+  padding-left: 13px;
+}
+
+.fcr-pagination_btn--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.fcr-pagination-float {
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  --effect-color: theme(colors.brand.4);
+}
+
+.fcr-pagination-float .fcr-pagination-float__prev,
+.fcr-pagination-float .fcr-pagination-float__next {
+  @apply fcr-bg-4 fcr-rounded-8;
+  pointer-events: all;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 12px;
+}
+.fcr-pagination-float .fcr-pagination-float__prev {
+  left: 10px;
+}
+
+.fcr-pagination-float .fcr-pagination-float__next {
+  right: 10px;
+}
+.fcr-pagination-float .fcr-pagination-float__btn,
+.fcr-pagination-list-view .fcr-pagination-float__btn {
+  @apply fcr-rounded-8 fcr-bg-2;
+  width: 40px;
+  height: 40px;
+  /* Note: backdrop-filter has minimal browser support */
+  backdrop-filter: blur(25px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+}
+.fcr-pagination-float .fcr-pagination-float__btn:hover:not(.fcr-pagination_btn--disabled),
+.fcr-pagination-list-view .fcr-pagination-float__btn:hover:not(.fcr-pagination_btn--disabled) {
+  @apply fcr-bg-brand-6;
+  cursor: pointer;
+  color: var(--color-icon-2);
+}
+
+.fcr-pagination-float .fcr-pagination-float__btn:active:not(.fcr-pagination_btn--disabled),
+.fcr-pagination-list-view .fcr-pagination-float__btn:active:not(.fcr-pagination_btn--disabled) {
+  @apply fcr-bg-brand-8;
+}
+
+.fcr-pagination-float__page {
+  @apply fcr-text-1;
+  padding: 3px 0 5px;
+}
+.fcr-pagination-list-view {
+  --effect-color: theme(colors.brand.4);
+  display: flex;
+  gap: 4px;
+}
+.fcr-pagination-list-view-col {
+  flex-direction: column;
+}
+.fcr-pagination-list-view .fcr-pagination-float__btn {
+  @apply fcr-rounded-4;
+}
+.fcr-pagination-list-view-row .fcr-pagination-float__btn {
+  width: 30px;
+  height: 114px;
+}
+.fcr-pagination-list-view-row .fcr-pagination-list-view__next svg {
+  transform: rotate(180deg);
+}
+.fcr-pagination-list-view-col .fcr-pagination-float__btn {
+  width: 192px;
+  height: 30px;
+}
+.fcr-pagination-list-view-col .fcr-pagination-list-view__prev svg {
+  transform: rotate(90deg);
+}
+.fcr-pagination-list-view-col .fcr-pagination-list-view__next svg {
+  transform: rotate(270deg);
+}
+.fcr-pagination-list-view .fcr-pagination-list-view__prev .fcr-pagination-float__btn,
+.fcr-pagination-list-view .fcr-pagination-list-view__next .fcr-pagination-float__btn {
+  @apply fcr-bg-2-a70;
+}

package/lib-es/modules/whiteboard/components/pagination/index.js

@@ -0,0 +1,155 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import './index.css';
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var usePageCounter = function usePageCounter(context) {
+  var _useState = useState(context.current),
+    _useState2 = _slicedToArray(_useState, 2),
+    current = _useState2[0],
+    setCurrent = _useState2[1];
+  useEffect(function () {
+    setCurrent(context.current);
+  }, [context.current]);
+  var handlePrev = function handlePrev() {
+    if (current <= 1) {
+      return;
+    }
+    setCurrent(current - 1);
+  };
+  var handleNext = function handleNext() {
+    if (current >= context.total) {
+      return;
+    }
+    setCurrent(current + 1);
+  };
+  return {
+    current: current,
+    handlePrev: handlePrev,
+    handleNext: handleNext
+  };
+};
+export var HalfRoundedPagination = function HalfRoundedPagination(_ref) {
+  var current = _ref.current,
+    total = _ref.total,
+    _ref$onAdd = _ref.onAdd,
+    onAdd = _ref$onAdd === void 0 ? function () {} : _ref$onAdd,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    addText = _ref.addText,
+    showText = _ref.showText,
+    hideText = _ref.hideText;
+  var cls = classNames('fcr-pagination fcr-pagination-half-r', {});
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    expansionVisible = _useState4[0],
+    setExpansionVisible = _useState4[1];
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    expanded = _useState6[0],
+    setExpanded = _useState6[1];
+  var _usePageCounter = usePageCounter({
+      current: current,
+      total: total
+    }),
+    handleNext = _usePageCounter.handleNext,
+    handlePrev = _usePageCounter.handlePrev,
+    innerCurrent = _usePageCounter.current;
+  useEffect(function () {
+    onChange(innerCurrent);
+  }, [innerCurrent]);
+  var handleExpand = function handleExpand() {
+    setExpanded(function (expanded) {
+      return !expanded;
+    });
+  };
+  var prevCls = classNames('fcr-pagination__btn', innerCurrent <= 1 ? 'fcr-pagination_btn--disabled' : 'fcr-btn-click-effect');
+  var nextCls = classNames('fcr-pagination__btn', innerCurrent >= total ? 'fcr-pagination_btn--disabled' : 'fcr-btn-click-effect');
+  var expansionCls = classNames('fcr-pagination__expansion', {
+    'fcr-pagination__expansion--expanded': !expanded || expansionVisible
+  });
+  var maskCls = classNames('fcr-pagination-mask', {
+    'fcr-pagination-mask--expanded': expanded
+  });
+  var handleHover = function handleHover(visible) {
+    return function () {
+      setExpansionVisible(visible);
+    };
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: "fcr-pagination-half-r-wrapper",
+    onMouseEnter: handleHover(true),
+    onMouseLeave: handleHover(false),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: cls,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: maskCls,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "fcr-pagination__extra",
+          children: /*#__PURE__*/_jsx(FcrToolTip, {
+            content: addText,
+            placement: "top",
+            children: /*#__PURE__*/_jsx(FcrIcon, {
+              type: FcrIconType.FCR_V2_PHONE_MORE1,
+              onClick: onAdd,
+              colors: {
+                iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+              }
+            })
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "fcr-divider"
+        }), /*#__PURE__*/_jsx("div", {
+          className: "fcr-pagination__prev",
+          children: /*#__PURE__*/_jsx("button", {
+            className: prevCls,
+            onClick: handlePrev,
+            children: /*#__PURE__*/_jsx(FcrIcon, {
+              type: FcrIconType.FCR_LEFT4,
+              size: 24,
+              colors: {
+                iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+              }
+            })
+          })
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "fcr-pagination__page",
+          children: [current !== null && current !== void 0 ? current : 0, "/", total !== null && total !== void 0 ? total : 0]
+        }), /*#__PURE__*/_jsx("div", {
+          className: "fcr-pagination__next",
+          children: /*#__PURE__*/_jsx("button", {
+            className: nextCls,
+            onClick: handleNext,
+            children: /*#__PURE__*/_jsx(FcrIcon, {
+              type: FcrIconType.FCR_RIGHT4,
+              size: 24,
+              colors: {
+                iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+              }
+            })
+          })
+        })]
+      }), /*#__PURE__*/_jsx(FcrToolTip, {
+        content: expanded ? hideText : showText,
+        placement: !expanded ? 'right' : 'top',
+        children: /*#__PURE__*/_jsx("div", {
+          className: expansionCls,
+          onClick: handleExpand,
+          children: /*#__PURE__*/_jsx(FcrIcon, {
+            type: FcrIconType.FCR_V2_CHEVRON_LEFT2,
+            size: 16,
+            style: {
+              transform: expanded ? 'rotate(0deg)' : 'rotate(180deg)'
+            },
+            colors: {
+              iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+            }
+          })
+        })
+      })]
+    })
+  });
+};

package/lib-es/modules/whiteboard/components/pagination/store.js

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+var scenePaginationUIContextDefault = {
+  observables: {
+    currentPage: 0,
+    totalPage: 0
+  },
+  addPage: function addPage() {},
+  changePage: function changePage(page) {}
+};
+export var ScenePaginationUIContext = /*#__PURE__*/createContext(scenePaginationUIContextDefault);

package/lib-es/modules/whiteboard/components/progress/index.js

@@ -0,0 +1,36 @@
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import './style.css';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function ProgressDialog(props) {
+  var title = props.title,
+    progress = props.progress;
+  return /*#__PURE__*/_jsxs("div", {
+    className: "progress-dialog-frame",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "progress-dialog-icon",
+      children: /*#__PURE__*/_jsx(FcrIcon, {
+        type: FcrIconType.FCR_DOWNLOAD,
+        size: 24
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "progress-dialog-content",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "progress-dialog-title",
+        children: [/*#__PURE__*/_jsx("span", {
+          children: title
+        }), /*#__PURE__*/_jsxs("span", {
+          children: [progress, "%"]
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: "progress-dialog-progress",
+        children: /*#__PURE__*/_jsx("div", {
+          className: "progress-dialog-progress-bar",
+          style: {
+            width: "".concat(progress, "%")
+          }
+        })
+      })]
+    })]
+  });
+}

package/lib-es/modules/whiteboard/components/progress/style.css

@@ -0,0 +1,51 @@
+.progress-dialog-frame {
+  width: 290px;
+  min-height: 58px;
+  padding: 10px 0;
+  border-radius: var(--fcr_cornerradius_s);
+  background: var(--fcr_ui_scene_white6);
+  box-shadow: var(--fcr_web_light_dropup);
+  display: flex;
+  align-items: center;
+  z-index: 1000;
+  position: absolute;
+  top: calc(100% - 98px);
+  left: calc(100vw - 310px);
+}
+.progress-dialog-icon {
+  width: 32px;
+  height: 32px;
+  margin: 0 18px;
+}
+.progress-dialog-icon svg {
+  width: 32px;
+  height: 32px;
+}
+.progress-dialog-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1;
+  padding-right: 18px;
+}
+.progress-dialog-title {
+  font-size: 13px;
+  color: var(--fcr_ui_scene_icontext1);
+  margin-bottom: 10px;
+  justify-content: space-between;
+  display: flex;
+  flex: 1;
+}
+.progress-dialog-progress {
+  font-size: 12px;
+  height: 9px;
+  background: var(--fcr_ui_scene_ramp_brand1);
+  border-radius: var(--fcr_cornerradius_round);
+  flex: 1;
+}
+.progress-dialog-progress-bar {
+  width: 100%;
+  height: 9px;
+  background: var(--fcr_ui_scene_ramp_brand6);
+  border-radius: var(--fcr_cornerradius_round);
+}

package/lib-es/modules/whiteboard/components/scene-pagination.js

@@ -0,0 +1,23 @@
+import { observer } from 'mobx-react';
+import { useContext } from 'react';
+import { HalfRoundedPagination } from './pagination';
+import { ScenePaginationUIContext } from './pagination/store';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ScenePagination = observer(function () {
+  var _useContext = useContext(ScenePaginationUIContext),
+    observables = _useContext.observables,
+    addPage = _useContext.addPage,
+    changePage = _useContext.changePage;
+  return /*#__PURE__*/_jsx("div", {
+    className: "fcr-board-pagination",
+    children: /*#__PURE__*/_jsx(HalfRoundedPagination, {
+      current: observables.currentPage,
+      total: observables.totalPage,
+      onAdd: addPage,
+      onChange: changePage,
+      addText: 'fcr_board_new_page',
+      showText: 'fcr_board_show_pageration',
+      hideText: 'fcr_board_hide_pageration'
+    })
+  });
+});

package/lib-es/modules/whiteboard/components/switch-theme/index.css

@@ -0,0 +1,99 @@
+.whiteboard-switch-theme {
+  height: 175px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 22px;
+  border-bottom: 1px solid var(--fcr_ui_scene_line1);
+  position: relative;
+}
+.whiteboard-switch-theme-popover {
+  max-width: 100%;
+  width: 100%;
+}
+.whiteboard-switch-theme-popover .fcr-tooltip-inner {
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  border: none !important;
+}
+.whiteboard-switch-theme_item {
+  width: 184px;
+  height: 136px;
+  border: 1px solid var(--fcr_ui_scene_line1);
+  border-radius: 16px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: top;
+  align-items: top;
+  flex-direction: column;
+  background: var(--fcr_web_ui_scene_fill4_popup);
+  color: var(--fcr_ui_scene_icontext1);
+}
+.whiteboard-switch-theme_item-active {
+  color: var(--fcr_ui_scene_white10);
+  background-color: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.whiteboard-switch-theme_item-close {
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  top: 50%;
+  margin-top: -15px;
+  border-radius: 50%;
+  left: calc(50% + 220px * 1.5);
+  background: var(--fcr_web_ui_scene_fill4_popup);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.whiteboard-switch-theme_item-close:hover {
+  background: var(--fcr_web_ui_scene_hover);
+}
+.whiteboard-switch-theme_item-close:hover path {
+  fill: var(--fcr_ui_scene_ramp_brand6);
+}
+.whiteboard-switch-theme_item:hover {
+  border: 2px solid var(--fcr_ui_scene_ramp_brand6);
+}
+.whiteboard-switch-theme_item:hover .whiteboard-switch-theme_item-inner {
+  width: 172px;
+  margin-top: 3px;
+}
+
+.whiteboard-switch-theme_item-inner {
+  width: 174px;
+  height: 100px;
+  border-radius: 12px;
+  background: var(--fcr_ui_scene_white10);
+  margin: 4px 4px 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  row-gap: 12px;
+}
+.whiteboard-switch-theme_item-inner.whiteboard {
+  background: #fff;
+}
+.whiteboard-switch-theme_item-inner.blackboard {
+  background: #000;
+}
+.whiteboard-switch-theme_item-inner.chalkboard {
+  background: #5a7d75;
+}
+.whiteboard-switch-theme_color-group {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 18px;
+}
+.whiteboard-switch-theme_color-group span {
+  display: block;
+  width: 18px;
+  height: 18px;
+  border-radius: 18px;
+  background: var(--fcr_web_ui_scene_fill4_popup);
+}

package/lib-es/modules/whiteboard/components/switch-theme/index.js

@@ -0,0 +1,89 @@
+import "core-js/modules/es.array.find.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.find.js";
+import "core-js/modules/esnext.iterator.map.js";
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrPopover } from 'agora-ui-foundation/lib/components/popover';
+import './index.css';
+import WhiteboardSwitchThemeItem from './item';
+import whiteboardTheme from './libs';
+import { useContext } from 'react';
+import { ToolbarContext } from '../toolbar/store';
+import { transI18n, useI18n } from 'agora-ui-foundation/lib/i18n';
+import { BoardUIContext } from '../../context';
+import { observer } from 'mobx-react';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var WhiteboardSwitchTheme = observer(function () {
+  var _useContext = useContext(ToolbarContext),
+    setTheme = _useContext.setTheme,
+    currentThemeType = _useContext.observables.currentThemeType;
+  // const [visible, setVisible] = useState(false);
+  var _useContext2 = useContext(BoardUIContext),
+    whiteboardVisible = _useContext2.observables.whiteboardVisible,
+    setWhiteboardVisible = _useContext2.setWhiteboardVisible;
+  var t = useI18n();
+  var handleCancel = function handleCancel() {
+    setWhiteboardVisible(false);
+  };
+  return /*#__PURE__*/_jsx(FcrPopover, {
+    trigger: "click",
+    overlayClassName: "whiteboard-switch-theme-popover",
+    overlayInnerStyle: {
+      width: '100%'
+    },
+    overlayOffset: 2,
+    showArrow: false,
+    getTooltipContainer: function getTooltipContainer() {
+      return document.getElementById('whiteboard-controlbar');
+    },
+    visible: whiteboardVisible,
+    content: /*#__PURE__*/_jsxs("div", {
+      className: "whiteboard-switch-theme",
+      children: [whiteboardTheme(t).map(function (theme, idx) {
+        return /*#__PURE__*/_jsx(WhiteboardSwitchThemeItem, {
+          colors: theme.showColors,
+          title: theme.title,
+          theme: theme.theme,
+          isActive: currentThemeType.theme === theme.theme,
+          onClick: function onClick(theme) {
+            var result = whiteboardTheme(t).find(function (item) {
+              return item.theme === theme.theme;
+            });
+            setTheme(result);
+            setWhiteboardVisible(false);
+          }
+        }, theme.theme);
+      }), /*#__PURE__*/_jsx("div", {
+        className: "whiteboard-switch-theme_item-close",
+        onClick: handleCancel,
+        children: /*#__PURE__*/_jsx(FcrIcon, {
+          size: 20,
+          type: FcrIconType.FCR_CLOSE,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+          }
+        })
+      })]
+    }),
+    children: /*#__PURE__*/_jsx(FcrToolTip, {
+      content: transI18n('fmt_screenshare_whiteboard_options_changetheme'),
+      children: /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx(FcrIcon, {
+          type: FcrIconType.FCR_WHITEBOARD_BG,
+          size: 22,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+          },
+          onClick: function onClick() {
+            return setWhiteboardVisible(!whiteboardVisible);
+          }
+        })
+      })
+    })
+  });
+});
+export default WhiteboardSwitchTheme;