@sendbird/uikit-react 3.1.1-rc.5 → 3.1.2-rc.1

package/ui/IconButton.js

@@ -1,76 +1,54 @@
-import { a as _slicedToArray, b as _toConsumableArray, _ as _objectSpread2 } from '../_rollupPluginBabelHelpers-c13d9e3e.js';
+import { a as __spreadArray, _ as __assign } from '../tslib.es6-b4d5e936.js';
 import React__default, { useState } from 'react';
-import PropTypes from 'prop-types';
 
 var IconButton = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  var className = props.className,
+  var _a = props.className,
+      className = _a === void 0 ? '' : _a,
       children = props.children,
-      disabled = props.disabled,
-      width = props.width,
-      height = props.height,
-      type = props.type,
-      _onClick = props.onClick,
-      _onBlur = props.onBlur,
-      style = props.style;
+      _b = props.disabled,
+      disabled = _b === void 0 ? false : _b,
+      _c = props.width,
+      width = _c === void 0 ? '56px' : _c,
+      _d = props.height,
+      height = _d === void 0 ? '56px' : _d,
+      _e = props.type,
+      type = _e === void 0 ? 'button' : _e,
+      _f = props.style,
+      style = _f === void 0 ? {} : _f,
+      _g = props.onBlur,
+      _onBlur = _g === void 0 ? function () {} : _g,
+      _h = props.onClick,
+      _onClick = _h === void 0 ? function () {} : _h;
 
-  var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      pressed = _useState2[0],
-      setPressed = _useState2[1];
+  var _j = useState(false),
+      isPressed = _j[0],
+      setIsPressed = _j[1];
 
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line react/button-has-type
-    React__default.createElement("button", {
-      className: [].concat(_toConsumableArray(Array.isArray(className) ? className : [className]), ['sendbird-iconbutton', pressed]).join(' '),
-      disabled: disabled,
-      ref: ref,
-      type: type // eslint-disable-line react/button-has-type
-      ,
-      style: _objectSpread2(_objectSpread2({}, style), {}, {
-        height: height,
-        width: width
-      }),
-      onClick: function onClick(e) {
-        if (disabled) {
-          return;
-        }
-
-        setPressed('sendbird-iconbutton--pressed');
-
-        _onClick(e);
-      },
-      onBlur: function onBlur(e) {
-        setPressed('');
-
-        _onBlur(e);
+  return /*#__PURE__*/React__default.createElement("button", {
+    className: __spreadArray(__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-iconbutton', isPressed ? 'sendbird-iconbutton--pressed' : ''], false).join(' '),
+    disabled: disabled,
+    ref: ref,
+    type: type,
+    style: __assign(__assign({}, style), {
+      height: height,
+      width: width
+    }),
+    onClick: function onClick(e) {
+      if (disabled) {
+        return;
       }
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: "sendbird-iconbutton__inner"
-    }, children))
-  );
+
+      setIsPressed(true);
+      _onClick === null || _onClick === void 0 ? void 0 : _onClick(e);
+    },
+    onBlur: function onBlur(e) {
+      setIsPressed(false);
+      _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(e);
+    }
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "sendbird-iconbutton__inner"
+  }, children));
 });
-IconButton.propTypes = {
-  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element), PropTypes.any]).isRequired,
-  disabled: PropTypes.bool,
-  width: PropTypes.string,
-  height: PropTypes.string,
-  type: PropTypes.string,
-  onClick: PropTypes.func,
-  onBlur: PropTypes.func,
-  style: PropTypes.shape({})
-};
-IconButton.defaultProps = {
-  className: '',
-  disabled: false,
-  width: '56px',
-  height: '56px',
-  type: 'button',
-  onClick: function onClick() {},
-  onBlur: function onBlur() {},
-  style: {}
-};
 
 export { IconButton as default };
 //# sourceMappingURL=IconButton.js.map

package/ui/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../src/ui/IconButton/index.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport './index.scss';\n\nconst IconButton = React.forwardRef((props, ref) => {\n  const {\n    className,\n    children,\n    disabled,\n    width,\n    height,\n    type,\n    onClick,\n    onBlur,\n    style,\n  } = props;\n\n  const [pressed, setPressed] = useState('');\n\n  return (\n    // eslint-disable-next-line react/button-has-type\n    <button\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-iconbutton',\n        pressed,\n      ].join(' ')}\n      disabled={disabled}\n      ref={ref}\n      type={type} // eslint-disable-line react/button-has-type\n      style={{\n        ...style,\n        height,\n        width,\n      }}\n      onClick={(e) => {\n        if (disabled) { return; }\n        setPressed('sendbird-iconbutton--pressed');\n        onClick(e);\n      }}\n      onBlur={(e) => {\n        setPressed('');\n        onBlur(e);\n      }}\n    >\n      <span className=\"sendbird-iconbutton__inner\">\n        {children}\n      </span>\n    </button>\n  );\n});\n\nIconButton.propTypes = {\n  className: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n  ]),\n  children: PropTypes.oneOfType([\n    PropTypes.element,\n    PropTypes.arrayOf(PropTypes.element),\n    PropTypes.any,\n  ]).isRequired,\n  disabled: PropTypes.bool,\n  width: PropTypes.string,\n  height: PropTypes.string,\n  type: PropTypes.string,\n  onClick: PropTypes.func,\n  onBlur: PropTypes.func,\n  style: PropTypes.shape({}),\n};\n\nIconButton.defaultProps = {\n  className: '',\n  disabled: false,\n  width: '56px',\n  height: '56px',\n  type: 'button',\n  onClick: () => { },\n  onBlur: () => { },\n  style: {},\n};\n\nexport default IconButton;\n"],"names":["IconButton","React","forwardRef","props","ref","className","children","disabled","width","height","type","onClick","onBlur","style","useState","pressed","setPressed","Array","isArray","join","e","propTypes","PropTypes","oneOfType","string","arrayOf","element","any","isRequired","bool","func","shape","defaultProps"],"mappings":"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"}
+{"version":3,"file":"IconButton.js","sources":["../../src/ui/IconButton/index.tsx"],"sourcesContent":["import React, {\n  FocusEvent,\n  MouseEvent,\n  ReactElement,\n  RefObject,\n  useState,\n} from 'react';\n\nimport './index.scss';\n\nexport interface IconButtonProps {\n  className?: string | Array<string>;\n  children: ReactElement;\n  disabled?: boolean;\n  width?: string;\n  height?: string;\n  type?: 'button' | 'submit' | 'reset';\n  style?: { [key: string]: string };\n  onBlur?: (e: FocusEvent<HTMLButtonElement>) => void;\n  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst IconButton = React.forwardRef((\n  props: IconButtonProps,\n  ref: RefObject<HTMLButtonElement>,\n): ReactElement => {\n  const {\n    className = '',\n    children,\n    disabled = false,\n    width = '56px',\n    height = '56px',\n    type = 'button',\n    style = {},\n    onBlur = () => {/* noop */},\n    onClick = () => {/* noop */},\n  } = props;\n  const [isPressed, setIsPressed] = useState(false);\n  return (\n    <button\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-iconbutton',\n        isPressed ? 'sendbird-iconbutton--pressed' : '',\n      ].join(' ')}\n      disabled={disabled}\n      ref={ref}\n      type={type}\n      style={{\n        ...style,\n        height,\n        width,\n      }}\n      onClick={(e) => {\n        if (disabled) { return; }\n        setIsPressed(true);\n        onClick?.(e);\n      }}\n      onBlur={(e) => {\n        setIsPressed(false);\n        onBlur?.(e);\n      }}\n    >\n      <span className=\"sendbird-iconbutton__inner\">\n        {children}\n      </span>\n    </button>\n  );\n});\n\nexport default IconButton;\n"],"names":["IconButton","React","forwardRef","props","ref","_a","className","children","_b","disabled","_c","width","_d","height","_e","type","_f","style","_g","onBlur","_h","onClick","_j","useState","isPressed","setIsPressed","__spreadArray","Array","isArray","join","e"],"mappings":";;;IAsBMA,UAAU,gBAAGC,cAAK,CAACC,UAAN,CAAiB,UAClCC,KADkC,EAElCC,GAFkC;AAKhC,MAAAC,KASEF,KAAK,UATP;AAAA,MAAAG,SAAS,mBAAG,OAAZ;AAAA,MACAC,QAAQ,GAQNJ,KAAK,SATP;AAAA,MAEAK,KAOEL,KAAK,SATP;AAAA,MAEAM,QAAQ,mBAAG,UAFX;AAAA,MAGAC,KAMEP,KAAK,MATP;AAAA,MAGAQ,KAAK,mBAAG,WAHR;AAAA,MAIAC,KAKET,KAAK,OATP;AAAA,MAIAU,MAAM,mBAAG,WAJT;AAAA,MAKAC,KAIEX,KAAK,KATP;AAAA,MAKAY,IAAI,mBAAG,aALP;AAAA,MAMAC,KAGEb,KAAK,MATP;AAAA,MAMAc,KAAK,mBAAG,OANR;AAAA,MAOAC,KAEEf,KAAK,OATP;AAAA,MAOAgB,OAAM,mBAAG,mBAPT;AAAA,MAQAC,KACEjB,KAAK,QATP;AAAA,MAQAkB,QAAO,mBAAG,mBARV;;AAUI,MAAAC,KAA4BC,QAAQ,CAAC,KAAD,CAApC;AAAA,MAACC,SAAS,QAAV;AAAA,MAAYC,YAAY,QAAxB;;AACN,sBACExB;AACE,IAAA,SAAS,EAAEyB,gCACLC,KAAK,CAACC,OAAN,CAActB,SAAd,IAA2BA,SAA3B,GAAuC,CAACA,SAAD,WAC3C,uBACAkB,SAAS,GAAG,8BAAH,GAAoC,WAHpC,CAITK,IAJS,CAIJ,GAJI,CADb;AAME,IAAA,QAAQ,EAAEpB,QANZ;AAOE,IAAA,GAAG,EAAEL,GAPP;AAQE,IAAA,IAAI,EAAEW,IARR;AASE,IAAA,KAAK,wBACAE;AACHJ,MAAAA,MAAM;AACNF,MAAAA,KAAK;MAZT;AAcE,IAAA,OAAO,EAAE,iBAACmB,CAAD;AACP,UAAIrB,QAAJ,EAAc;AAAE;AAAS;;AACzBgB,MAAAA,YAAY,CAAC,IAAD,CAAZ;AACAJ,MAAAA,QAAO,SAAP,IAAAA,QAAO,WAAP,SAAA,GAAAA,QAAO,CAAGS,CAAH,CAAP;AACD,KAlBH;AAmBE,IAAA,MAAM,EAAE,gBAACA,CAAD;AACNL,MAAAA,YAAY,CAAC,KAAD,CAAZ;AACAN,MAAAA,OAAM,SAAN,IAAAA,OAAM,WAAN,SAAA,GAAAA,OAAM,CAAGW,CAAH,CAAN;AACD;AAtBH,kBAwBE7B;AAAM,IAAA,SAAS,EAAC;AAAhB,KACGM,QADH,CAxBF,CADF;AA8BD,CA9CkB;;;;"}

package/ui/ImageRenderer.js

@@ -1,62 +1,53 @@
-import { a as _slicedToArray, b as _toConsumableArray } from '../_rollupPluginBabelHelpers-c13d9e3e.js';
+import { a as __spreadArray } from '../tslib.es6-b4d5e936.js';
 import React__default, { useState, useMemo } from 'react';
-import PropTypes from 'prop-types';
 
-/*
-  ImageRenderer displays image with url or source
-  it checks if the source exist with img tag first
-  if it exists onLoad is called, if not onError is called
-  and those properties switch img tag to real purposing element
-*/
-// TODO: Set up the official constant of width and height with DesignTeam
+var ImageRenderer = function ImageRenderer(_a) {
+  var _b = _a.className,
+      className = _b === void 0 ? '' : _b,
+      url = _a.url,
+      _c = _a.alt,
+      alt = _c === void 0 ? '' : _c,
+      _d = _a.width,
+      width = _d === void 0 ? null : _d,
+      _e = _a.height,
+      height = _e === void 0 ? null : _e,
+      _f = _a.circle,
+      circle = _f === void 0 ? false : _f,
+      _g = _a.fixedSize,
+      fixedSize = _g === void 0 ? false : _g,
+      _h = _a.placeHolder,
+      placeHolder = _h === void 0 ? null : _h,
+      _j = _a.defaultComponent,
+      defaultComponent = _j === void 0 ? null : _j,
+      _k = _a.onLoad,
+      _onLoad = _k === void 0 ? function () {} : _k,
+      _l = _a.onError,
+      _onError = _l === void 0 ? function () {} : _l;
 
-function ImageRenderer(_ref) {
-  var className = _ref.className,
-      url = _ref.url,
-      alt = _ref.alt,
-      width = _ref.width,
-      height = _ref.height,
-      fixedSize = _ref.fixedSize,
-      defaultComponent = _ref.defaultComponent,
-      circle = _ref.circle,
-      placeHolder = _ref.placeHolder,
-      _onLoad = _ref.onLoad,
-      _onError = _ref.onError;
+  var _m = useState(false),
+      showDefaultComponent = _m[0],
+      setShowDefaultComponent = _m[1];
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showDefaultComponent = _useState2[0],
-      setShowDefaultComponent = _useState2[1];
-
-  var _useState3 = useState(true),
-      _useState4 = _slicedToArray(_useState3, 2),
-      showPlaceHolder = _useState4[0],
-      setShowPlaceHolder = _useState4[1];
+  var _o = useState(true),
+      showPlaceHolder = _o[0],
+      setShowPlaceHolder = _o[1];
 
   var DefaultComponent = useMemo(function () {
-    if (typeof defaultComponent === 'function') {
-      return defaultComponent();
-    }
-
-    return defaultComponent;
+    return typeof defaultComponent === 'function' ? defaultComponent() : defaultComponent;
   }, [defaultComponent]);
   var PlaceHolder = useMemo(function () {
-    if (placeHolder && typeof placeHolder === 'function') {
-      return placeHolder({
-        style: {
-          width: '100%',
-          minWidth: width,
-          maxWidth: fixedSize ? width : '400px',
-          height: height,
-          position: 'absolute',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center'
-        }
-      });
-    }
-
-    return null;
+    return placeHolder && typeof placeHolder === 'function' ? placeHolder({
+      style: {
+        width: '100%',
+        minWidth: width,
+        maxWidth: fixedSize ? width : '400px',
+        height: height,
+        position: 'absolute',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }
+    }) : null;
   }, [placeHolder]);
   var HiddenImageLoader = useMemo(function () {
     setShowDefaultComponent(false); // reset the state when url is changed
@@ -78,7 +69,7 @@ function ImageRenderer(_ref) {
     });
   }, [url]);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: [].concat(_toConsumableArray(Array.isArray(className) ? className : [className]), ['sendbird-image-renderer']).join(' '),
+    className: __spreadArray(__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-image-renderer'], false).join(' '),
     style: {
       width: '100%',
       minWidth: width,
@@ -100,31 +91,6 @@ function ImageRenderer(_ref) {
       borderRadius: circle ? '50%' : null
     }
   }), HiddenImageLoader);
-}
-ImageRenderer.propTypes = {
-  className: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),
-  url: PropTypes.string.isRequired,
-  alt: PropTypes.string,
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  fixedSize: PropTypes.bool,
-  defaultComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-  placeHolder: PropTypes.func,
-  circle: PropTypes.bool,
-  onLoad: PropTypes.func,
-  onError: PropTypes.func
-};
-ImageRenderer.defaultProps = {
-  className: '',
-  defaultComponent: null,
-  placeHolder: null,
-  alt: '',
-  width: null,
-  height: null,
-  fixedSize: false,
-  circle: false,
-  onLoad: function onLoad() {},
-  onError: function onError() {}
 };
 
 export { ImageRenderer as default };

package/ui/ImageRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageRenderer.js","sources":["../../src/ui/ImageRenderer/index.jsx"],"sourcesContent":["import React, { useState, useMemo } from 'react';\nimport PropTypes from 'prop-types';\n\nimport './index.scss';\n\n/*\n  ImageRenderer displays image with url or source\n  it checks if the source exist with img tag first\n  if it exists onLoad is called, if not onError is called\n  and those properties switch img tag to real purposing element\n*/\n\n// TODO: Set up the official constant of width and height with DesignTeam\n\nexport default function ImageRenderer({\n  className,\n  url,\n  alt,\n  width,\n  height,\n  fixedSize,\n  defaultComponent,\n  circle,\n  placeHolder, // a function returing JSX / (style) => Element\n  onLoad,\n  onError,\n}) {\n  const [showDefaultComponent, setShowDefaultComponent] = useState(false);\n  const [showPlaceHolder, setShowPlaceHolder] = useState(true);\n\n  const DefaultComponent = useMemo(() => {\n    if (typeof defaultComponent === 'function') {\n      return defaultComponent();\n    }\n    return defaultComponent;\n  }, [defaultComponent]);\n\n  const PlaceHolder = useMemo(() => {\n    if (placeHolder && typeof placeHolder === 'function') {\n      return placeHolder({\n        style: {\n          width: '100%',\n          minWidth: width,\n          maxWidth: fixedSize ? width : '400px',\n          height,\n          position: 'absolute',\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n        },\n      });\n    }\n    return null;\n  }, [placeHolder]);\n\n  const HiddenImageLoader = useMemo(() => {\n    setShowDefaultComponent(false);\n    // reset the state when url is changed\n    return (\n      <img\n        className=\"sendbird-image-renderer__hidden-image-loader\"\n        src={url}\n        alt={alt}\n        onLoad={() => {\n          setShowPlaceHolder(false);\n          onLoad();\n        }}\n        onError={() => {\n          setShowDefaultComponent(true);\n          onError();\n        }}\n      />\n    );\n  }, [url]);\n\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-image-renderer',\n      ].join(' ')}\n      style={{\n        width: '100%',\n        minWidth: width,\n        maxWidth: fixedSize ? width : '400px',\n        height,\n      }}\n    >\n      {showPlaceHolder && PlaceHolder}\n      {\n        showDefaultComponent\n          ? DefaultComponent\n          : (\n            <div\n              className=\"sendbird-image-renderer__image\"\n              style={{\n                width: '100%',\n                minWidth: width,\n                maxWidth: fixedSize ? width : '400px',\n                height,\n                position: 'absolute',\n                backgroundRepeat: 'no-repeat',\n                backgroundPosition: 'center',\n                backgroundSize: 'cover',\n                backgroundImage: `url(${url})`,\n                borderRadius: circle ? '50%' : null,\n              }}\n            />\n          )\n      }\n      {HiddenImageLoader}\n    </div>\n  );\n}\n\nImageRenderer.propTypes = {\n  className: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.string),\n    PropTypes.string,\n  ]),\n  url: PropTypes.string.isRequired,\n  alt: PropTypes.string,\n  width: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n  ]),\n  height: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n  ]),\n  fixedSize: PropTypes.bool,\n  defaultComponent: PropTypes.oneOfType([\n    PropTypes.element,\n    PropTypes.func,\n  ]),\n  placeHolder: PropTypes.func,\n  circle: PropTypes.bool,\n  onLoad: PropTypes.func,\n  onError: PropTypes.func,\n};\nImageRenderer.defaultProps = {\n  className: '',\n  defaultComponent: null,\n  placeHolder: null,\n  alt: '',\n  width: null,\n  height: null,\n  fixedSize: false,\n  circle: false,\n  onLoad: () => { },\n  onError: () => { },\n};\n"],"names":["ImageRenderer","className","url","alt","width","height","fixedSize","defaultComponent","circle","placeHolder","onLoad","onError","useState","showDefaultComponent","setShowDefaultComponent","showPlaceHolder","setShowPlaceHolder","DefaultComponent","useMemo","PlaceHolder","style","minWidth","maxWidth","position","display","justifyContent","alignItems","HiddenImageLoader","React","Array","isArray","join","backgroundRepeat","backgroundPosition","backgroundSize","backgroundImage","borderRadius","propTypes","PropTypes","oneOfType","arrayOf","string","isRequired","number","bool","element","func","defaultProps"],"mappings":"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"}
+{"version":3,"file":"ImageRenderer.js","sources":["../../src/ui/ImageRenderer/index.tsx"],"sourcesContent":["import React, { useState, useMemo, ReactElement } from 'react';\n\nimport './index.scss';\n\n/*\n  ImageRenderer displays image with url or source\n  it checks if the source exist with img tag first\n  if it exists onLoad is called, if not onError is called\n  and those properties switch img tag to real purposing element\n*/\n\nexport interface ImageRendererProps {\n  className?: string | Array<string>;\n  url: string;\n  alt?: string;\n  width?: string | number;\n  height?: string | number;\n  circle?: boolean;\n  fixedSize?: boolean;\n  placeHolder?: ((props: { style: { [key: string]: string | number } }) => ReactElement) | ReactElement;\n  defaultComponent?: (() => ReactElement) | ReactElement;\n  onLoad?: () => void;\n  onError?: () => void;\n}\n\nconst ImageRenderer = ({\n  className = '',\n  url,\n  alt = '',\n  width = null,\n  height = null,\n  circle = false,\n  fixedSize = false,\n  placeHolder = null,\n  defaultComponent = null,\n  onLoad = () => {/* noop */},\n  onError = () => {/* noop */},\n}: ImageRendererProps): ReactElement => {\n  const [showDefaultComponent, setShowDefaultComponent] = useState(false);\n  const [showPlaceHolder, setShowPlaceHolder] = useState(true);\n\n  const DefaultComponent = useMemo(() => {\n    return typeof defaultComponent === 'function'\n      ? defaultComponent()\n      : defaultComponent;\n  }, [defaultComponent]);\n\n  const PlaceHolder = useMemo(() => {\n    return (placeHolder && typeof placeHolder === 'function')\n      ? placeHolder({\n        style: {\n          width: '100%',\n          minWidth: width,\n          maxWidth: fixedSize ? width : '400px',\n          height,\n          position: 'absolute',\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n        }\n      })\n      : null;\n  }, [placeHolder]);\n\n  const HiddenImageLoader = useMemo(() => {\n    setShowDefaultComponent(false);\n    // reset the state when url is changed\n    return (\n      <img\n        className=\"sendbird-image-renderer__hidden-image-loader\"\n        src={url}\n        alt={alt}\n        onLoad={() => {\n          setShowPlaceHolder(false);\n          onLoad();\n        }}\n        onError={() => {\n          setShowDefaultComponent(true);\n          onError();\n        }}\n      />\n    );\n  }, [url]);\n\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-image-renderer',\n      ].join(' ')}\n      style={{\n        width: '100%',\n        minWidth: width,\n        maxWidth: fixedSize ? width : '400px',\n        height,\n      }}\n    >\n      {showPlaceHolder && PlaceHolder}\n      {\n        showDefaultComponent\n          ? DefaultComponent\n          : (\n            <div\n              className=\"sendbird-image-renderer__image\"\n              style={{\n                width: '100%',\n                minWidth: width,\n                maxWidth: fixedSize ? width : '400px',\n                height,\n                position: 'absolute',\n                backgroundRepeat: 'no-repeat',\n                backgroundPosition: 'center',\n                backgroundSize: 'cover',\n                backgroundImage: `url(${url})`,\n                borderRadius: circle ? '50%' : null,\n              }}\n            />\n          )\n      }\n      {HiddenImageLoader}\n    </div>\n  );\n};\n\nexport default ImageRenderer;\n"],"names":["ImageRenderer","_a","_b","className","url","_c","alt","_d","width","_e","height","_f","circle","_g","fixedSize","_h","placeHolder","_j","defaultComponent","_k","onLoad","_l","onError","_m","useState","showDefaultComponent","setShowDefaultComponent","_o","showPlaceHolder","setShowPlaceHolder","DefaultComponent","useMemo","PlaceHolder","style","minWidth","maxWidth","position","display","justifyContent","alignItems","HiddenImageLoader","React","__spreadArray","Array","isArray","join","backgroundRepeat","backgroundPosition","backgroundSize","backgroundImage","borderRadius"],"mappings":"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"}

package/ui/Input.js

@@ -1,32 +1,27 @@
-import { a as _slicedToArray } from '../_rollupPluginBabelHelpers-c13d9e3e.js';
 import React__default, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-3bb932f2.js';
-import '../stringSet-c851aa33.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-ed66e9b7.js';
+import '../_rollupPluginBabelHelpers-c664d679.js';
+import 'prop-types';
+import '../stringSet-a761f45e.js';
 
-var InputLabel = function InputLabel(_ref) {
-  var children = _ref.children;
+var InputLabel = function InputLabel(_a) {
+  var children = _a.children;
   return /*#__PURE__*/React__default.createElement(Label, {
     className: "sendbird-input-label",
     type: LabelTypography.CAPTION_3,
     color: LabelColors.ONBACKGROUND_1
   }, children);
 };
-InputLabel.propTypes = {
-  children: PropTypes.string.isRequired
-}; // future: add validations? onChange? more props etc etc
-
 var Input = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   var name = props.name,
       required = props.required,
       disabled = props.disabled,
-      placeHolder = props.placeHolder,
-      value = props.value;
+      value = props.value,
+      placeHolder = props.placeHolder;
 
-  var _useState = useState(value),
-      _useState2 = _slicedToArray(_useState, 2),
-      inputValue = _useState2[0],
-      setInputValue = _useState2[1];
+  var _a = useState(value),
+      inputValue = _a[0],
+      setInputValue = _a[1];
 
   return /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-input"
@@ -46,19 +41,6 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     color: LabelColors.ONBACKGROUND_3
   }, placeHolder));
 });
-Input.propTypes = {
-  name: PropTypes.string.isRequired,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  placeHolder: PropTypes.string,
-  value: PropTypes.string
-};
-Input.defaultProps = {
-  required: false,
-  disabled: false,
-  placeHolder: '',
-  value: ''
-};
 
 export { InputLabel, Input as default };
 //# sourceMappingURL=Input.js.map

package/ui/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../src/ui/Input/index.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport './index.scss';\n\nexport const InputLabel = ({ children }) => (\n  <Label\n    className=\"sendbird-input-label\"\n    type={LabelTypography.CAPTION_3}\n    color={LabelColors.ONBACKGROUND_1}\n  >\n    {children}\n  </Label>\n);\n\nInputLabel.propTypes = {\n  children: PropTypes.string.isRequired,\n};\n\n// future: add validations? onChange? more props etc etc\nconst Input = React.forwardRef((props, ref) => {\n  const {\n    name,\n    required,\n    disabled,\n    placeHolder,\n    value,\n  } = props;\n  const [inputValue, setInputValue] = useState(value);\n  return (\n    <div className=\"sendbird-input\">\n      <input\n        className=\"sendbird-input__input\"\n        ref={ref}\n        name={name}\n        required={required}\n        disabled={disabled}\n        value={inputValue}\n        onChange={(e) => {\n          setInputValue(e.target.value);\n        }}\n      />\n      {(placeHolder && !inputValue) && (\n        <Label\n          className=\"sendbird-input__placeholder\"\n          type={LabelTypography.BODY_1}\n          color={LabelColors.ONBACKGROUND_3}\n        >\n          {placeHolder}\n        </Label>\n      )}\n    </div>\n  );\n});\n\nInput.propTypes = {\n  name: PropTypes.string.isRequired,\n  required: PropTypes.bool,\n  disabled: PropTypes.bool,\n  placeHolder: PropTypes.string,\n  value: PropTypes.string,\n};\n\nInput.defaultProps = {\n  required: false,\n  disabled: false,\n  placeHolder: '',\n  value: '',\n};\n\nexport default Input;\n"],"names":["InputLabel","children","React","LabelTypography","CAPTION_3","LabelColors","ONBACKGROUND_1","propTypes","PropTypes","string","isRequired","Input","forwardRef","props","ref","name","required","disabled","placeHolder","value","useState","inputValue","setInputValue","e","target","BODY_1","ONBACKGROUND_3","bool","defaultProps"],"mappings":";;;;;;IAMaA,UAAU,GAAG,SAAbA,UAAa;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,sBACxBC,6BAAC,KAAD;AACE,IAAA,SAAS,EAAC,sBADZ;AAEE,IAAA,IAAI,EAAEC,eAAe,CAACC,SAFxB;AAGE,IAAA,KAAK,EAAEC,WAAW,CAACC;AAHrB,KAKGL,QALH,CADwB;AAAA;AAU1BD,UAAU,CAACO,SAAX,GAAuB;AACrBN,EAAAA,QAAQ,EAAEO,SAAS,CAACC,MAAV,CAAiBC;AADN,CAAvB;;IAKMC,KAAK,gBAAGT,cAAK,CAACU,UAAN,CAAiB,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAC7C,MACEC,IADF,GAMIF,KANJ,CACEE,IADF;AAAA,MAEEC,QAFF,GAMIH,KANJ,CAEEG,QAFF;AAAA,MAGEC,QAHF,GAMIJ,KANJ,CAGEI,QAHF;AAAA,MAIEC,WAJF,GAMIL,KANJ,CAIEK,WAJF;AAAA,MAKEC,KALF,GAMIN,KANJ,CAKEM,KALF;;AAOA,kBAAoCC,QAAQ,CAACD,KAAD,CAA5C;AAAA;AAAA,MAAOE,UAAP;AAAA,MAAmBC,aAAnB;;AACA,sBACEpB;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA;AACE,IAAA,SAAS,EAAC,uBADZ;AAEE,IAAA,GAAG,EAAEY,GAFP;AAGE,IAAA,IAAI,EAAEC,IAHR;AAIE,IAAA,QAAQ,EAAEC,QAJZ;AAKE,IAAA,QAAQ,EAAEC,QALZ;AAME,IAAA,KAAK,EAAEI,UANT;AAOE,IAAA,QAAQ,EAAE,kBAACE,CAAD,EAAO;AACfD,MAAAA,aAAa,CAACC,CAAC,CAACC,MAAF,CAASL,KAAV,CAAb;AACD;AATH,IADF,EAYID,WAAW,IAAI,CAACG,UAAjB,iBACCnB,6BAAC,KAAD;AACE,IAAA,SAAS,EAAC,6BADZ;AAEE,IAAA,IAAI,EAAEC,eAAe,CAACsB,MAFxB;AAGE,IAAA,KAAK,EAAEpB,WAAW,CAACqB;AAHrB,KAKGR,WALH,CAbJ,CADF;AAwBD,CAjCa;AAmCdP,KAAK,CAACJ,SAAN,GAAkB;AAChBQ,EAAAA,IAAI,EAAEP,SAAS,CAACC,MAAV,CAAiBC,UADP;AAEhBM,EAAAA,QAAQ,EAAER,SAAS,CAACmB,IAFJ;AAGhBV,EAAAA,QAAQ,EAAET,SAAS,CAACmB,IAHJ;AAIhBT,EAAAA,WAAW,EAAEV,SAAS,CAACC,MAJP;AAKhBU,EAAAA,KAAK,EAAEX,SAAS,CAACC;AALD,CAAlB;AAQAE,KAAK,CAACiB,YAAN,GAAqB;AACnBZ,EAAAA,QAAQ,EAAE,KADS;AAEnBC,EAAAA,QAAQ,EAAE,KAFS;AAGnBC,EAAAA,WAAW,EAAE,EAHM;AAInBC,EAAAA,KAAK,EAAE;AAJY,CAArB;;;;"}
+{"version":3,"file":"Input.js","sources":["../../src/ui/Input/index.tsx"],"sourcesContent":["import React, { ReactElement, RefObject, useState } from 'react';\n\nimport './index.scss';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nexport interface InputLabelProps {\n  children: ReactElement;\n}\nexport const InputLabel = ({ children }: InputLabelProps): ReactElement => (\n  <Label\n    className=\"sendbird-input-label\"\n    type={LabelTypography.CAPTION_3}\n    color={LabelColors.ONBACKGROUND_1}\n  >\n    {children}\n  </Label>\n);\n\nexport interface InputProps {\n  name: string;\n  required?: boolean;\n  disabled?: boolean;\n  value?: string;\n  placeHolder?: string;\n}\nconst Input = React.forwardRef((props: InputProps, ref: RefObject<HTMLInputElement>) => {\n  const {\n    name,\n    required,\n    disabled,\n    value,\n    placeHolder,\n  } = props;\n  const [inputValue, setInputValue] = useState(value);\n  return (\n    <div className=\"sendbird-input\">\n      <input\n        className=\"sendbird-input__input\"\n        ref={ref}\n        name={name}\n        required={required}\n        disabled={disabled}\n        value={inputValue}\n        onChange={(e) => {\n          setInputValue(e.target.value);\n        }}\n      />\n      {(placeHolder && !inputValue) && (\n        <Label\n          className=\"sendbird-input__placeholder\"\n          type={LabelTypography.BODY_1}\n          color={LabelColors.ONBACKGROUND_3}\n        >\n          {placeHolder}\n        </Label>\n      )}\n    </div>\n  );\n});\n\nexport default Input;\n"],"names":["InputLabel","_a","children","React","LabelTypography","CAPTION_3","LabelColors","ONBACKGROUND_1","Input","forwardRef","props","ref","name","required","disabled","value","placeHolder","useState","inputValue","setInputValue","e","target","BODY_1","ONBACKGROUND_3"],"mappings":";;;;;;IASaA,UAAU,GAAG,SAAbA,UAAa,CAACC,EAAD;MAAGC,QAAQ;AAAsC,sBACzEC,6BAAC,KAAD;AACE,IAAA,SAAS,EAAC,sBADZ;AAEE,IAAA,IAAI,EAAEC,eAAe,CAACC,SAFxB;AAGE,IAAA,KAAK,EAAEC,WAAW,CAACC;AAHrB,KAKGL,QALH,CADyE;AAQ1E;IASKM,KAAK,gBAAGL,cAAK,CAACM,UAAN,CAAiB,UAACC,KAAD,EAAoBC,GAApB;AAE3B,MAAAC,IAAI,GAKFF,KAAK,KALP;AAAA,MACAG,QAAQ,GAINH,KAAK,SALP;AAAA,MAEAI,QAAQ,GAGNJ,KAAK,SALP;AAAA,MAGAK,KAAK,GAEHL,KAAK,MALP;AAAA,MAIAM,WAAW,GACTN,KAAK,YALP;;AAMI,MAAAT,KAA8BgB,QAAQ,CAACF,KAAD,CAAtC;AAAA,MAACG,UAAU,QAAX;AAAA,MAAaC,aAAa,QAA1B;;AACN,sBACEhB;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA;AACE,IAAA,SAAS,EAAC,uBADZ;AAEE,IAAA,GAAG,EAAEQ,GAFP;AAGE,IAAA,IAAI,EAAEC,IAHR;AAIE,IAAA,QAAQ,EAAEC,QAJZ;AAKE,IAAA,QAAQ,EAAEC,QALZ;AAME,IAAA,KAAK,EAAEI,UANT;AAOE,IAAA,QAAQ,EAAE,kBAACE,CAAD;AACRD,MAAAA,aAAa,CAACC,CAAC,CAACC,MAAF,CAASN,KAAV,CAAb;AACD;AATH,IADF,EAYIC,WAAW,IAAI,CAACE,UAAjB,iBACCf,6BAAC,KAAD;AACE,IAAA,SAAS,EAAC,6BADZ;AAEE,IAAA,IAAI,EAAEC,eAAe,CAACkB,MAFxB;AAGE,IAAA,KAAK,EAAEhB,WAAW,CAACiB;AAHrB,KAKGP,WALH,CAbJ,CADF;AAwBD,CAjCa;;;;"}

package/ui/Label.js

@@ -1,6 +1,6 @@
-import '../_rollupPluginBabelHelpers-c13d9e3e.js';
+import '../_rollupPluginBabelHelpers-c664d679.js';
 import 'react';
 import 'prop-types';
-export { b as LabelColors, c as LabelStringSet, a as LabelTypography, L as default } from '../index-3bb932f2.js';
-import '../stringSet-c851aa33.js';
+export { b as LabelColors, c as LabelStringSet, a as LabelTypography, L as default } from '../index-ed66e9b7.js';
+import '../stringSet-a761f45e.js';
 //# sourceMappingURL=Label.js.map

package/ui/LinkLabel.js

@@ -1,8 +1,8 @@
-import { b as _toConsumableArray } from '../_rollupPluginBabelHelpers-c13d9e3e.js';
+import { b as _toConsumableArray } from '../_rollupPluginBabelHelpers-c664d679.js';
 import React__default from 'react';
 import PropTypes from 'prop-types';
-import { a as LabelTypography, b as LabelColors, d as changeColorToClassName, L as Label } from '../index-3bb932f2.js';
-import '../stringSet-c851aa33.js';
+import { a as LabelTypography, b as LabelColors, d as changeColorToClassName, L as Label } from '../index-ed66e9b7.js';
+import '../stringSet-a761f45e.js';
 
 var http = /https?:\/\//;
 function LinkLabel(_ref) {

package/ui/Loader.js

@@ -1,37 +1,29 @@
-import { b as _toConsumableArray } from '../_rollupPluginBabelHelpers-c13d9e3e.js';
+import { a as __spreadArray } from '../tslib.es6-b4d5e936.js';
 import React__default from 'react';
-import PropTypes from 'prop-types';
 import Icon, { IconTypes } from './Icon.js';
+import '../_rollupPluginBabelHelpers-c664d679.js';
+import 'prop-types';
 
-function Loader(_ref) {
-  var className = _ref.className,
-      width = _ref.width,
-      height = _ref.height,
-      children = _ref.children;
+function Loader(_a) {
+  var _b = _a.className,
+      className = _b === void 0 ? '' : _b,
+      _c = _a.width,
+      width = _c === void 0 ? '26px' : _c,
+      _d = _a.height,
+      height = _d === void 0 ? '26px' : _d,
+      children = _a.children;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: [].concat(_toConsumableArray(Array.isArray(className) ? className : [className]), ['sendbird-loader']).join(' '),
+    className: __spreadArray(__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-loader'], false).join(' '),
     style: {
       width: typeof width === 'string' ? width : "".concat(width, "px"),
       height: typeof height === 'string' ? height : "".concat(height, "px")
     }
-  }, children);
-}
-Loader.propTypes = {
-  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  children: PropTypes.element
-};
-Loader.defaultProps = {
-  className: '',
-  width: '26px',
-  height: '26px',
-  children: /*#__PURE__*/React__default.createElement(Icon, {
+  }, children || /*#__PURE__*/React__default.createElement(Icon, {
     type: IconTypes.SPINNER,
     width: "26px",
     height: "26px"
-  })
-};
+  }));
+}
 
 export { Loader as default };
 //# sourceMappingURL=Loader.js.map

package/ui/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../src/ui/Loader/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport './index.scss';\nimport Icon, { IconTypes } from '../Icon';\n\nexport default function Loader({\n  className,\n  width,\n  height,\n  children,\n}) {\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-loader',\n      ].join(' ')}\n      style={{\n        width: typeof width === 'string' ? width : `${width}px`,\n        height: typeof height === 'string' ? height : `${height}px`,\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\nLoader.propTypes = {\n  className: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n  ]),\n  width: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n  ]),\n  height: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n  ]),\n  children: PropTypes.element,\n};\n\nLoader.defaultProps = {\n  className: '',\n  width: '26px',\n  height: '26px',\n  children: <Icon\n    type={IconTypes.SPINNER}\n    width=\"26px\"\n    height=\"26px\"\n  />,\n};\n"],"names":["Loader","className","width","height","children","React","Array","isArray","join","propTypes","PropTypes","oneOfType","string","arrayOf","number","element","defaultProps","IconTypes","SPINNER"],"mappings":";;;;;AAMe,SAASA,MAAT,OAKZ;AAAA,MAJDC,SAIC,QAJDA,SAIC;AAAA,MAHDC,KAGC,QAHDA,KAGC;AAAA,MAFDC,MAEC,QAFDA,MAEC;AAAA,MADDC,QACC,QADDA,QACC;AACD,sBACEC;AACE,IAAA,SAAS,EAAE,6BACLC,KAAK,CAACC,OAAN,CAAcN,SAAd,IAA2BA,SAA3B,GAAuC,CAACA,SAAD,CADlC,IAET,iBAFS,GAGTO,IAHS,CAGJ,GAHI,CADb;AAKE,IAAA,KAAK,EAAE;AACLN,MAAAA,KAAK,EAAE,OAAOA,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,aAAuCA,KAAvC,OADF;AAELC,MAAAA,MAAM,EAAE,OAAOA,MAAP,KAAkB,QAAlB,GAA6BA,MAA7B,aAAyCA,MAAzC;AAFH;AALT,KAUGC,QAVH,CADF;AAcD;AAEDJ,MAAM,CAACS,SAAP,GAAmB;AACjBR,EAAAA,SAAS,EAAES,SAAS,CAACC,SAAV,CAAoB,CAC7BD,SAAS,CAACE,MADmB,EAE7BF,SAAS,CAACG,OAAV,CAAkBH,SAAS,CAACE,MAA5B,CAF6B,CAApB,CADM;AAKjBV,EAAAA,KAAK,EAAEQ,SAAS,CAACC,SAAV,CAAoB,CACzBD,SAAS,CAACE,MADe,EAEzBF,SAAS,CAACI,MAFe,CAApB,CALU;AASjBX,EAAAA,MAAM,EAAEO,SAAS,CAACC,SAAV,CAAoB,CAC1BD,SAAS,CAACE,MADgB,EAE1BF,SAAS,CAACI,MAFgB,CAApB,CATS;AAajBV,EAAAA,QAAQ,EAAEM,SAAS,CAACK;AAbH,CAAnB;AAgBAf,MAAM,CAACgB,YAAP,GAAsB;AACpBf,EAAAA,SAAS,EAAE,EADS;AAEpBC,EAAAA,KAAK,EAAE,MAFa;AAGpBC,EAAAA,MAAM,EAAE,MAHY;AAIpBC,EAAAA,QAAQ,eAAEC,6BAAC,IAAD;AACR,IAAA,IAAI,EAAEY,SAAS,CAACC,OADR;AAER,IAAA,KAAK,EAAC,MAFE;AAGR,IAAA,MAAM,EAAC;AAHC;AAJU,CAAtB;;;;"}
+{"version":3,"file":"Loader.js","sources":["../../src/ui/Loader/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\n\nimport './index.scss';\n\nimport Icon, { IconTypes } from '../Icon';\n\nexport interface LoaderProps {\n  className?: string | Array<string>;\n  width?: string | number;\n  height?: string | number;\n  children?: ReactElement;\n}\n\nexport default function Loader({\n  className = '',\n  width = '26px',\n  height = '26px',\n  children,\n}: LoaderProps): ReactElement {\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-loader',\n      ].join(' ')}\n      style={{\n        width: typeof width === 'string' ? width : `${width}px`,\n        height: typeof height === 'string' ? height : `${height}px`,\n      }}\n    >\n      {\n        children\n        || (\n          <Icon\n            type={IconTypes.SPINNER}\n            width=\"26px\"\n            height=\"26px\"\n          />\n        )\n      }\n    </div>\n  );\n}\n"],"names":["Loader","_a","_b","className","_c","width","_d","height","children","React","__spreadArray","Array","isArray","join","IconTypes","SPINNER"],"mappings":";;;;;;SAawBA,OAAOC;MAC7BC;MAAAC,SAAS,mBAAG;MACZC;MAAAC,KAAK,mBAAG;MACRC;MAAAC,MAAM,mBAAG;MACTC,QAAQ;AAER,sBACEC;AACE,IAAA,SAAS,EAAEC,gCACLC,KAAK,CAACC,OAAN,CAAcT,SAAd,IAA2BA,SAA3B,GAAuC,CAACA,SAAD,WAC3C,0BAFS,CAGTU,IAHS,CAGJ,GAHI,CADb;AAKE,IAAA,KAAK,EAAE;AACLR,MAAAA,KAAK,EAAE,OAAOA,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoC,SAAA,CAAGA,KAAH,MAAA,CADtC;AAELE,MAAAA,MAAM,EAAE,OAAOA,MAAP,KAAkB,QAAlB,GAA6BA,MAA7B,GAAsC,SAAA,CAAGA,MAAH,MAAA;AAFzC;AALT,KAWIC,QAAQ,iBAENC,6BAAC,IAAD;AACE,IAAA,IAAI,EAAEK,SAAS,CAACC,OADlB;AAEE,IAAA,KAAK,EAAC,MAFR;AAGE,IAAA,MAAM,EAAC;AAHT,IAbN,CADF;AAuBD;;;;"}

package/ui/MentionLabel.js

@@ -1,26 +1,26 @@
 import React__default, { useRef, useState, useCallback } from 'react';
 import ContextMenu, { MenuItems } from './ContextMenu.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-3bb932f2.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-ed66e9b7.js';
 import ConnectedUserProfile from './UserProfile.js';
 import useSendbirdStateContext from '../useSendbirdStateContext.js';
-import '../_rollupPluginBabelHelpers-c13d9e3e.js';
-import 'prop-types';
-import '../index-50027bce.js';
-import '../tslib.es6-99120ac2.js';
+import '../tslib.es6-b4d5e936.js';
 import 'react-dom';
 import './SortByRow.js';
-import '../stringSet-c851aa33.js';
-import '../LocalizationContext-ca7349bf.js';
-import '../index-5ebb19e0.js';
+import '../uuid-bf4fe830.js';
+import '../index-639db833.js';
+import '../_rollupPluginBabelHelpers-c664d679.js';
+import 'prop-types';
+import '../stringSet-a761f45e.js';
+import '../LocalizationContext-a8de2fdc.js';
+import '../index-f392bd44.js';
 import '../withSendbird.js';
 import '../sendbirdSelectors.js';
-import '../topics-2f6ae0e6.js';
-import '../utils-6de0cc82.js';
+import '../topics-6f5089f9.js';
+import '../utils-4a93fe15.js';
 import './Avatar.js';
 import './ImageRenderer.js';
 import './Icon.js';
-import '../uuid-bd559a90.js';
-import '../index-989585e2.js';
+import '../index-8b26f4f3.js';
 
 function MentionLabel(props) {
   var _a, _b, _c;

package/ui/MessageContent.js

@@ -1,12 +1,12 @@
 import React__default, { useContext, useRef, useState } from 'react';
-import { f as format } from '../index-14742522.js';
+import { f as format } from '../index-c6093226.js';
 import Avatar from './Avatar.js';
 import ConnectedUserProfile from './UserProfile.js';
 import MessageStatus from './MessageStatus.js';
 import MessageItemMenu from './MessageItemMenu.js';
 import MessageItemReactionMenu from './MessageItemReactionMenu.js';
 import ContextMenu, { MenuItems } from './ContextMenu.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-3bb932f2.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-ed66e9b7.js';
 import EmojiReactions from './EmojiReactions.js';
 import AdminMessage from './AdminMessage.js';
 import TextMessageItemBody from './TextMessageItemBody.js';
@@ -15,24 +15,24 @@ import ThumbnailMessageItemBody from './ThumbnailMessageItemBody.js';
 import OGMessageItemBody from './OGMessageItemBody.js';
 import UnknownMessageItemBody from './UnknownMessageItemBody.js';
 import QuoteMessage from './QuoteMessage.js';
-import { v as getUIKitMessageTypes, k as getClassName, w as getSenderName, x as isTextMessage, y as isOGMessage, z as getUIKitMessageType, p as isThumbnailMessage } from '../index-50027bce.js';
-import { a as UserProfileContext } from '../UserProfileContext-5afc8b47.js';
-import { u as useLocalization } from '../LocalizationContext-ca7349bf.js';
+import { v as getUIKitMessageTypes, k as getClassName, w as getSenderName, x as isTextMessage, y as isOGMessage, z as getUIKitMessageType, p as isThumbnailMessage } from '../index-639db833.js';
+import { a as UserProfileContext } from '../UserProfileContext-929b77e4.js';
+import { u as useLocalization } from '../LocalizationContext-a8de2fdc.js';
 import useSendbirdStateContext from '../useSendbirdStateContext.js';
-import '../index-5ebb19e0.js';
-import '../tslib.es6-99120ac2.js';
+import '../index-f392bd44.js';
+import '../tslib.es6-b4d5e936.js';
 import './ImageRenderer.js';
-import '../_rollupPluginBabelHelpers-c13d9e3e.js';
-import 'prop-types';
 import './Icon.js';
-import '../uuid-bd559a90.js';
+import '../_rollupPluginBabelHelpers-c664d679.js';
+import 'prop-types';
+import '../uuid-bf4fe830.js';
 import '../withSendbird.js';
 import '../sendbirdSelectors.js';
-import '../topics-2f6ae0e6.js';
-import '../utils-6de0cc82.js';
-import '../index-989585e2.js';
+import '../topics-6f5089f9.js';
+import '../utils-4a93fe15.js';
+import '../index-8b26f4f3.js';
 import './Loader.js';
-import '../stringSet-c851aa33.js';
+import '../stringSet-a761f45e.js';
 import './IconButton.js';
 import './ReactionButton.js';
 import 'react-dom';
@@ -44,7 +44,7 @@ import './Word.js';
 import './LinkLabel.js';
 import './MentionLabel.js';
 import './TextButton.js';
-import '../color-7099b95c.js';
+import '../color-cb1ed76e.js';
 
 function MessageContent(_a) {
   var _b, _c, _d, _e, _f;