@sendbird/uikit-react 3.0.0-beta.4 → 3.0.0-beta.5

package/cjs/index-8479199c.js

@@ -0,0 +1,175 @@
+'use strict';
+
+var React = require('react');
+var ui_Modal = require('./ui/Modal.js');
+var LocalizationContext = require('./LocalizationContext-4c0a4a70.js');
+var useSendbirdStateContext = require('./useSendbirdStateContext.js');
+var ui_Input = require('./ui/Input.js');
+var ui_Avatar = require('./ui/Avatar.js');
+var ui_Icon = require('./ui/Icon.js');
+var ui_Button = require('./index-630f8d1b.js');
+var ui_Label = require('./index-30e8e785.js');
+var ui_TextButton = require('./ui/TextButton.js');
+var utils = require('./utils-b88eb3e0.js');
+var actionTypes = require('./actionTypes-03bdd863.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var EditUserProfileProviderContext = /*#__PURE__*/React__default["default"].createContext(undefined);
+
+var EditUserProfileProvider = function EditUserProfileProvider(props) {
+  var children = props.children,
+      onEditProfile = props.onEditProfile,
+      onCancel = props.onCancel,
+      onThemeChange = props.onThemeChange;
+  var value = React.useMemo(function () {
+    return {
+      onEditProfile: onEditProfile,
+      onCancel: onCancel,
+      onThemeChange: onThemeChange
+    };
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement(EditUserProfileProviderContext.Provider, {
+    value: value
+  }, children);
+};
+
+var useEditUserProfileProvider = function useEditUserProfileProvider() {
+  return React__default["default"].useContext(EditUserProfileProviderContext);
+};
+
+function EditUserProfile() {
+  var _a, _b, _c, _d, _e, _f, _g;
+
+  var editProfileProps = useEditUserProfileProvider();
+  var store = useSendbirdStateContext();
+  var hiddenInputRef = React.useRef(null);
+  var inputRef = React.useRef(null);
+  var formRef = React.useRef(null);
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+
+  var _h = React.useState(null),
+      currentImg = _h[0],
+      setCurrentImg = _h[1];
+
+  var _j = React.useState(null),
+      newFile = _j[0],
+      setNewFile = _j[1];
+
+  var onEditProfile = editProfileProps.onEditProfile,
+      onCancel = editProfileProps.onCancel,
+      onThemeChange = editProfileProps.onThemeChange;
+  var theme = ((_a = store === null || store === void 0 ? void 0 : store.config) === null || _a === void 0 ? void 0 : _a.theme) || 'light';
+  var changeTheme = ((_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.setCurrenttheme) || utils.noop;
+  var user = (_d = (_c = store === null || store === void 0 ? void 0 : store.stores) === null || _c === void 0 ? void 0 : _c.userStore) === null || _d === void 0 ? void 0 : _d.user;
+  var sdk = (_f = (_e = store === null || store === void 0 ? void 0 : store.stores) === null || _e === void 0 ? void 0 : _e.sdkStore) === null || _f === void 0 ? void 0 : _f.sdk;
+  var userDispatcher = (_g = store === null || store === void 0 ? void 0 : store.dispatchers) === null || _g === void 0 ? void 0 : _g.userDispatcher;
+  return /*#__PURE__*/React__default["default"].createElement(ui_Modal["default"], {
+    titleText: stringSet.EDIT_PROFILE__TITLE,
+    submitText: stringSet.BUTTON__SAVE,
+    type: ui_Button.Type.PRIMARY,
+    onCancel: onCancel,
+    onSubmit: function onSubmit() {
+      var _a;
+
+      if ((user === null || user === void 0 ? void 0 : user.nickname) !== '' && !inputRef.current.value) {
+        if (formRef.current.reportValidity) {
+          // might not work in explorer
+          formRef.current.reportValidity();
+        }
+
+        return;
+      }
+
+      sdk === null || sdk === void 0 ? void 0 : sdk.updateCurrentUserInfoWithProfileImage((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.value, newFile, function (updatedUser) {
+        userDispatcher({
+          type: actionTypes.UPDATE_USER_INFO,
+          payload: updatedUser
+        });
+
+        if (onEditProfile && typeof onEditProfile === 'function') {
+          onEditProfile(updatedUser);
+        }
+      });
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("form", {
+    className: "sendbird-edit-user-profile",
+    ref: formRef,
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("section", {
+    className: "sendbird-edit-user-profile__img"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Input.InputLabel, null, stringSet.EDIT_PROFILE__IMAGE_LABEL), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-edit-user-profile__img__avatar"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+    width: "80px",
+    height: "80px",
+    src: currentImg || (user === null || user === void 0 ? void 0 : user.profileUrl)
+  })), /*#__PURE__*/React__default["default"].createElement("input", {
+    ref: hiddenInputRef,
+    type: "file",
+    accept: "image/gif, image/jpeg, image/png",
+    style: {
+      display: 'none'
+    },
+    onChange: function onChange(e) {
+      setCurrentImg(URL.createObjectURL(e.target.files[0]));
+      setNewFile(e.target.files[0]);
+      hiddenInputRef.current.value = '';
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(ui_TextButton, {
+    className: "sendbird-edit-user-profile__img__avatar-button",
+    notUnderline: true,
+    onClick: function onClick() {
+      return hiddenInputRef.current.click();
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    type: ui_Label.LabelTypography.BUTTON_1,
+    color: ui_Label.LabelColors.PRIMARY
+  }, stringSet.EDIT_PROFILE__IMAGE_UPLOAD))), /*#__PURE__*/React__default["default"].createElement("section", {
+    className: "sendbird-edit-user-profile__name"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Input.InputLabel, null, stringSet.EDIT_PROFILE__NICKNAME_LABEL), /*#__PURE__*/React__default["default"].createElement(ui_Input["default"], {
+    required: (user === null || user === void 0 ? void 0 : user.nickname) !== '',
+    name: "sendbird-edit-user-profile__name__input",
+    ref: inputRef,
+    value: user === null || user === void 0 ? void 0 : user.nickname,
+    placeHolder: stringSet.EDIT_PROFILE__NICKNAME_PLACEHOLDER
+  })), /*#__PURE__*/React__default["default"].createElement("section", {
+    className: "sendbird-edit-user-profile__userid"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Input.InputLabel, null, stringSet.EDIT_PROFILE__USERID_LABEL), /*#__PURE__*/React__default["default"].createElement(ui_Input["default"], {
+    disabled: true,
+    name: "sendbird-edit-user-profile__userid__input",
+    value: user === null || user === void 0 ? void 0 : user.userId
+  })), /*#__PURE__*/React__default["default"].createElement("section", {
+    className: "sendbird-edit-user-profile__theme"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Input.InputLabel, null, stringSet.EDIT_PROFILE__THEME_LABEL), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-edit-user-profile__theme__theme-icon"
+  }, theme === 'dark' ? /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    onClick: function onClick() {
+      changeTheme('light');
+      onThemeChange === null || onThemeChange === void 0 ? void 0 : onThemeChange('light'); // if (onThemeChange && typeof onThemeChange === 'function') {
+      //   onThemeChange('light');
+      // }
+    },
+    type: ui_Icon.IconTypes.TOGGLE_ON,
+    width: 44,
+    height: 24
+  }) : /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    onClick: function onClick() {
+      changeTheme('dark');
+      onThemeChange === null || onThemeChange === void 0 ? void 0 : onThemeChange('dark'); // if (onThemeChange && typeof onThemeChange === 'function') {
+      //   onThemeChange('dark');
+      // }
+    },
+    type: ui_Icon.IconTypes.TOGGLE_OFF,
+    width: 44,
+    height: 24
+  })))));
+}
+
+exports.EditUserProfile = EditUserProfile;
+exports.EditUserProfileProvider = EditUserProfileProvider;
+//# sourceMappingURL=index-8479199c.js.map

package/cjs/index-8479199c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-8479199c.js","sources":["../../src/smart-components/EditUserProfile/context/EditUserProfIleProvider.tsx","../../src/smart-components/EditUserProfile/components/EditUserProfileUI/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport Sendbird from 'sendbird';\n\nconst EditUserProfileProviderContext = React.createContext(undefined);\n\nexport interface EditUserProfileProps {\n  children?: React.ReactNode;\n  onCancel?(): void;\n  onThemeChange?(theme: string): void;\n  onEditProfile?(updatedUser: Sendbird.User): void;\n}\n\nexport interface EditUserProfileProviderInterface {\n  onCancel?(): void;\n  onThemeChange?(theme: string): void;\n  onEditProfile?(updatedUser: Sendbird.User): void;\n}\n\nconst EditUserProfileProvider: React.FC<EditUserProfileProps> = (props: EditUserProfileProps) => {\n  const {\n    children,\n    onEditProfile,\n    onCancel,\n    onThemeChange,\n  } = props;\n\n  const value = useMemo(() => {\n    return {\n      onEditProfile,\n      onCancel,\n      onThemeChange,\n    };\n  }, []);\n\n  return (\n    <EditUserProfileProviderContext.Provider value={value}>\n      {children}\n    </EditUserProfileProviderContext.Provider>\n  );\n}\n\nconst useEditUserProfileProvider = (): EditUserProfileProviderInterface => (\n  React.useContext(EditUserProfileProviderContext)\n);\n\nexport {\n  EditUserProfileProvider,\n  useEditUserProfileProvider,\n};\n","import './edit-user-profile.scss';\n\nimport React, {\n  ReactElement,\n  useRef,\n  useState,\n  useContext,\n} from 'react';\nimport { useEditUserProfileProvider } from '../../context/EditUserProfIleProvider';\n\nimport Modal from '../../../../ui/Modal';\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\n\nimport Input, { InputLabel } from '../../../../ui/Input';\nimport Avatar from '../../../../ui/Avatar';\nimport Icon, { IconTypes } from '../../../../ui/Icon';\nimport { Type as ButtonType } from '../../../../ui/Button/type';\nimport Label, { LabelColors, LabelTypography } from '../../../../ui/Label';\nimport TextButton from '../../../../ui/TextButton';\nimport { noop } from '../../../../utils/utils';\nimport * as userActions from '../../../../lib/dux/user/actionTypes';\n\nexport default function EditUserProfile(): ReactElement {\n  const editProfileProps = useEditUserProfileProvider();\n  const store = useSendbirdStateContext();\n  const hiddenInputRef = useRef(null);\n  const inputRef = useRef(null);\n  const formRef = useRef(null);\n  const { stringSet } = useContext(LocalizationContext);\n  const [currentImg, setCurrentImg] = useState(null);\n  const [newFile, setNewFile] = useState(null);\n\n  const {\n    onEditProfile,\n    onCancel,\n    onThemeChange,\n  } = editProfileProps;\n\n  const theme = store?.config?.theme || 'light';\n  const changeTheme = store?.config?.setCurrenttheme || noop;\n  const user = store?.stores?.userStore?.user;\n  const sdk = store?.stores?.sdkStore?.sdk;\n  const userDispatcher = store?.dispatchers?.userDispatcher;\n\n  return (\n    <Modal\n      titleText={stringSet.EDIT_PROFILE__TITLE}\n      submitText={stringSet.BUTTON__SAVE}\n      type={ButtonType.PRIMARY}\n      onCancel={onCancel}\n      onSubmit={() => {\n        if (user?.nickname !== '' && !inputRef.current.value) {\n          if (formRef.current.reportValidity) { // might not work in explorer\n            formRef.current.reportValidity();\n          }\n          return;\n        }\n        sdk?.updateCurrentUserInfoWithProfileImage(inputRef?.current?.value, newFile, (updatedUser) => {\n          userDispatcher({ type: userActions.UPDATE_USER_INFO, payload: updatedUser });\n          if (onEditProfile && typeof onEditProfile === 'function') {\n            onEditProfile(updatedUser);\n          }\n        });\n      }}\n    >\n      <form\n        className=\"sendbird-edit-user-profile\"\n        ref={formRef}\n        onSubmit={(e) => { e.preventDefault(); }}\n      >\n        <section className=\"sendbird-edit-user-profile__img\">\n          <InputLabel>\n            {stringSet.EDIT_PROFILE__IMAGE_LABEL}\n          </InputLabel>\n          <div className=\"sendbird-edit-user-profile__img__avatar\">\n            <Avatar\n              width=\"80px\"\n              height=\"80px\"\n              src={currentImg || user?.profileUrl}\n            />\n          </div>\n          <input\n            ref={hiddenInputRef}\n            type=\"file\"\n            accept=\"image/gif, image/jpeg, image/png\"\n            style={{ display: 'none' }}\n            onChange={(e) => {\n              setCurrentImg(URL.createObjectURL(e.target.files[0]));\n              setNewFile(e.target.files[0]);\n              hiddenInputRef.current.value = '';\n            }}\n          />\n          <TextButton\n            className=\"sendbird-edit-user-profile__img__avatar-button\"\n            notUnderline\n            onClick={() => hiddenInputRef.current.click()}\n          >\n            <Label type={LabelTypography.BUTTON_1} color={LabelColors.PRIMARY}>\n              {stringSet.EDIT_PROFILE__IMAGE_UPLOAD}\n            </Label>\n          </TextButton>\n        </section>\n        <section className=\"sendbird-edit-user-profile__name\">\n          <InputLabel>\n            {stringSet.EDIT_PROFILE__NICKNAME_LABEL}\n          </InputLabel>\n          <Input\n            required={user?.nickname !== ''}\n            name=\"sendbird-edit-user-profile__name__input\"\n            ref={inputRef}\n            value={user?.nickname}\n            placeHolder={stringSet.EDIT_PROFILE__NICKNAME_PLACEHOLDER}\n          />\n        </section>\n        <section className=\"sendbird-edit-user-profile__userid\">\n          <InputLabel>\n            {/*  userID */}\n            {stringSet.EDIT_PROFILE__USERID_LABEL}\n          </InputLabel>\n          <Input\n            disabled\n            name=\"sendbird-edit-user-profile__userid__input\"\n            value={user?.userId}\n          />\n        </section>\n        <section className=\"sendbird-edit-user-profile__theme\">\n          <InputLabel>\n            {stringSet.EDIT_PROFILE__THEME_LABEL}\n          </InputLabel>\n          <div className=\"sendbird-edit-user-profile__theme__theme-icon\">\n            {\n              theme === 'dark'\n                ? (\n                  <Icon\n                    onClick={() => {\n                      changeTheme('light');\n                      onThemeChange?.('light');\n                      // if (onThemeChange && typeof onThemeChange === 'function') {\n                      //   onThemeChange('light');\n                      // }\n                    }}\n                    type={IconTypes.TOGGLE_ON}\n                    width={44}\n                    height={24}\n                  />\n                )\n                : (\n                  <Icon\n                    onClick={() => {\n                      changeTheme('dark');\n                      onThemeChange?.('dark');\n                      // if (onThemeChange && typeof onThemeChange === 'function') {\n                      //   onThemeChange('dark');\n                      // }\n                    }}\n                    type={IconTypes.TOGGLE_OFF}\n                    width={44}\n                    height={24}\n                  />\n                )\n            }\n          </div>\n        </section>\n      </form>\n    </Modal>\n  );\n}\n\n"],"names":["EditUserProfileProviderContext","React","createContext","undefined","EditUserProfileProvider","props","children","onEditProfile","onCancel","onThemeChange","value","useMemo","useEditUserProfileProvider","useContext","EditUserProfile","editProfileProps","store","useSendbirdStateContext","hiddenInputRef","useRef","inputRef","formRef","stringSet","LocalizationContext","_h","useState","currentImg","setCurrentImg","_j","newFile","setNewFile","theme","config","changeTheme","setCurrenttheme","noop","user","stores","userStore","sdk","sdkStore","userDispatcher","dispatchers","Modal","EDIT_PROFILE__TITLE","BUTTON__SAVE","ButtonType","PRIMARY","nickname","current","reportValidity","updateCurrentUserInfoWithProfileImage","updatedUser","type","userActions","payload","e","preventDefault","InputLabel","EDIT_PROFILE__IMAGE_LABEL","Avatar","profileUrl","display","URL","createObjectURL","target","files","TextButton","click","Label","LabelTypography","BUTTON_1","LabelColors","EDIT_PROFILE__IMAGE_UPLOAD","EDIT_PROFILE__NICKNAME_LABEL","Input","EDIT_PROFILE__NICKNAME_PLACEHOLDER","EDIT_PROFILE__USERID_LABEL","userId","EDIT_PROFILE__THEME_LABEL","Icon","IconTypes","TOGGLE_ON","TOGGLE_OFF"],"mappings":"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"}

package/cjs/index-94e8cf13.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var React = require('react');
+var ui_Label = require('./index-30e8e785.js');
+var ui_LinkLabel = require('./ui/LinkLabel.js');
+var uuid = require('./uuid-086f0c34.js');
+var index = require('./index-a40d57a5.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function Word(props) {
+  var word = props.word,
+      message = props.message,
+      _a = props.isByMe,
+      isByMe = _a === void 0 ? false : _a,
+      _b = props.mentionTemplate,
+      mentionTemplate = _b === void 0 ? '@' : _b,
+      _c = props.renderString,
+      renderString = _c === void 0 ? null : _c;
+  return /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "sendbird-word"
+  }, index.convertWordToStringObj(word, message === null || message === void 0 ? void 0 : message.mentionedUsers).map(function (stringObj) {
+    var type = stringObj.type,
+        value = stringObj.value;
+
+    if (renderString && typeof renderString === 'function') {
+      return renderString(stringObj);
+    }
+
+    if (type === index.StringObjType.mention) {
+      return /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+        key: uuid.uuidv4(),
+        className: "sendbird-word__mention",
+        type: ui_Label.LabelTypography.CAPTION_1,
+        color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1
+      }, "" + mentionTemplate + value);
+    } else if (type === index.StringObjType.url) {
+      return /*#__PURE__*/React__default["default"].createElement(ui_LinkLabel["default"], {
+        className: "sendbird-word__url",
+        key: uuid.uuidv4(),
+        src: word,
+        type: ui_Label.LabelTypography.BODY_1,
+        color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1
+      }, value);
+    } else {
+      return value;
+    }
+  }));
+}
+
+exports.Word = Word;
+//# sourceMappingURL=index-94e8cf13.js.map

package/cjs/index-94e8cf13.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-94e8cf13.js","sources":["../../src/ui/Word/index.tsx"],"sourcesContent":["import React from 'react';\nimport SendBird from 'sendbird';\nimport './index.scss';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport LinkLabel from '../LinkLabel';\nimport uuidv4 from '../../utils/uuid';\nimport { convertWordToStringObj, StringObjType, StringObj } from '../../utils';\n\ninterface WordProps {\n  word: string;\n  message: SendBird.UserMessage;\n  isByMe?: boolean;\n  mentionTemplate?: string;\n  renderString?: (stringObj: StringObj) => JSX.Element;\n}\n\n// Word and StringObj will include types: normal, mention, url\nexport default function Word(props: WordProps): JSX.Element {\n  const {\n    word,\n    message,\n    isByMe = false,\n    mentionTemplate = '@',\n    renderString = null,\n  } = props;\n  return (\n    <span className=\"sendbird-word\">\n      {\n        convertWordToStringObj(word, message?.mentionedUsers).map((stringObj) => {\n          const { type, value } = stringObj;\n          if (renderString && typeof renderString === 'function') {\n            return renderString(stringObj);\n          }\n          if (type === StringObjType.mention) {\n            return (\n              <Label\n                key={uuidv4()}\n                className=\"sendbird-word__mention\"\n                type={LabelTypography.CAPTION_1}\n                color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n              >\n                {`${mentionTemplate}${value}`}\n              </Label>\n            );\n          } else if (type === StringObjType.url) {\n            return (\n              <LinkLabel\n                className=\"sendbird-word__url\"\n                key={uuidv4()}\n                src={word}\n                type={LabelTypography.BODY_1}\n                color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n              >\n                {value}\n              </LinkLabel>\n            );\n          } else {\n            return value\n          }\n        })\n      }\n    </span>\n  );\n}\n"],"names":["Word","props","word","message","_a","isByMe","_b","mentionTemplate","_c","renderString","React","convertWordToStringObj","mentionedUsers","map","stringObj","type","value","StringObjType","mention","Label","uuidv4","LabelTypography","CAPTION_1","LabelColors","ONCONTENT_1","ONBACKGROUND_1","url","LinkLabel","BODY_1"],"mappings":";;;;;;;;;;;;SAkBwBA,KAAKC;AAEzB,MAAAC,IAAI,GAKFD,KAAK,KALP;AAAA,MACAE,OAAO,GAILF,KAAK,QALP;AAAA,MAEAG,KAGEH,KAAK,OALP;AAAA,MAEAI,MAAM,mBAAG,UAFT;AAAA,MAGAC,KAEEL,KAAK,gBALP;AAAA,MAGAM,eAAe,mBAAG,QAHlB;AAAA,MAIAC,KACEP,KAAK,aALP;AAAA,MAIAQ,YAAY,mBAAG,SAJf;AAMF,sBACEC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAEIC,4BAAsB,CAACT,IAAD,EAAOC,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAES,cAAhB,CAAtB,CAAsDC,GAAtD,CAA0D,UAACC,SAAD;AAChD,QAAAC,IAAI,GAAYD,SAAS,KAAzB;AAAA,QAAME,KAAK,GAAKF,SAAS,MAAzB;;AACR,QAAIL,YAAY,IAAI,OAAOA,YAAP,KAAwB,UAA5C,EAAwD;AACtD,aAAOA,YAAY,CAACK,SAAD,CAAnB;AACD;;AACD,QAAIC,IAAI,KAAKE,mBAAa,CAACC,OAA3B,EAAoC;AAClC,0BACER,wCAACS,cAAD;AACE,QAAA,GAAG,EAAEC,WAAM,EADb;AAEE,QAAA,SAAS,EAAC,wBAFZ;AAGE,QAAA,IAAI,EAAEC,wBAAe,CAACC,SAHxB;AAIE,QAAA,KAAK,EAAEjB,MAAM,GAAGkB,oBAAW,CAACC,WAAf,GAA6BD,oBAAW,CAACE;AAJxD,SAMG,KAAGlB,eAAH,GAAqBS,KANxB,CADF;AAUD,KAXD,MAWO,IAAID,IAAI,KAAKE,mBAAa,CAACS,GAA3B,EAAgC;AACrC,0BACEhB,wCAACiB,uBAAD;AACE,QAAA,SAAS,EAAC,oBADZ;AAEE,QAAA,GAAG,EAAEP,WAAM,EAFb;AAGE,QAAA,GAAG,EAAElB,IAHP;AAIE,QAAA,IAAI,EAAEmB,wBAAe,CAACO,MAJxB;AAKE,QAAA,KAAK,EAAEvB,MAAM,GAAGkB,oBAAW,CAACC,WAAf,GAA6BD,oBAAW,CAACE;AALxD,SAOGT,KAPH,CADF;AAWD,KAZM,MAYA;AACL,aAAOA,KAAP;AACD;AACF,GA/BD,CAFJ,CADF;AAsCD;;;;"}