@sendbird/uikit-react 3.1.1 → 3.1.2

package/cjs/ui/IconButton.js

@@ -1,83 +1,60 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-92e5e012.js');
+var tslib_es6 = require('../tslib.es6-ba69891c.js');
 var React = require('react');
-var PropTypes = require('prop-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 var IconButton = /*#__PURE__*/React__default["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;
-
-  var _useState = React.useState(''),
-      _useState2 = _rollupPluginBabelHelpers._slicedToArray(_useState, 2),
-      pressed = _useState2[0],
-      setPressed = _useState2[1];
-
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line react/button-has-type
-    React__default["default"].createElement("button", {
-      className: [].concat(_rollupPluginBabelHelpers._toConsumableArray(Array.isArray(className) ? className : [className]), ['sendbird-iconbutton', pressed]).join(' '),
-      disabled: disabled,
-      ref: ref,
-      type: type // eslint-disable-line react/button-has-type
-      ,
-      style: _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._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);
+      _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 _j = React.useState(false),
+      isPressed = _j[0],
+      setIsPressed = _j[1];
+
+  return /*#__PURE__*/React__default["default"].createElement("button", {
+    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-iconbutton', isPressed ? 'sendbird-iconbutton--pressed' : ''], false).join(' '),
+    disabled: disabled,
+    ref: ref,
+    type: type,
+    style: tslib_es6.__assign(tslib_es6.__assign({}, style), {
+      height: height,
+      width: width
+    }),
+    onClick: function onClick(e) {
+      if (disabled) {
+        return;
       }
-    }, /*#__PURE__*/React__default["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["default"].createElement("span", {
+    className: "sendbird-iconbutton__inner"
+  }, children));
 });
-IconButton.propTypes = {
-  className: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)]),
-  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].element, PropTypes__default["default"].arrayOf(PropTypes__default["default"].element), PropTypes__default["default"].any]).isRequired,
-  disabled: PropTypes__default["default"].bool,
-  width: PropTypes__default["default"].string,
-  height: PropTypes__default["default"].string,
-  type: PropTypes__default["default"].string,
-  onClick: PropTypes__default["default"].func,
-  onBlur: PropTypes__default["default"].func,
-  style: PropTypes__default["default"].shape({})
-};
-IconButton.defaultProps = {
-  className: '',
-  disabled: false,
-  width: '56px',
-  height: '56px',
-  type: 'button',
-  onClick: function onClick() {},
-  onBlur: function onBlur() {},
-  style: {}
-};
 
 module.exports = IconButton;
 //# sourceMappingURL=IconButton.js.map

package/cjs/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,yBAAK,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,cAAQ,CAAC,KAAD,CAApC;AAAA,MAACC,SAAS,QAAV;AAAA,MAAYC,YAAY,QAAxB;;AACN,sBACExB;AACE,IAAA,SAAS,EAAEyB,oDACLC,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,4CACAE;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/cjs/ui/ImageRenderer.js

@@ -1,69 +1,59 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-92e5e012.js');
+var tslib_es6 = require('../tslib.es6-ba69891c.js');
 var React = require('react');
-var PropTypes = require('prop-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-/*
-  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 = React.useState(false),
+      showDefaultComponent = _m[0],
+      setShowDefaultComponent = _m[1];
 
-  var _useState = React.useState(false),
-      _useState2 = _rollupPluginBabelHelpers._slicedToArray(_useState, 2),
-      showDefaultComponent = _useState2[0],
-      setShowDefaultComponent = _useState2[1];
-
-  var _useState3 = React.useState(true),
-      _useState4 = _rollupPluginBabelHelpers._slicedToArray(_useState3, 2),
-      showPlaceHolder = _useState4[0],
-      setShowPlaceHolder = _useState4[1];
+  var _o = React.useState(true),
+      showPlaceHolder = _o[0],
+      setShowPlaceHolder = _o[1];
 
   var DefaultComponent = React.useMemo(function () {
-    if (typeof defaultComponent === 'function') {
-      return defaultComponent();
-    }
-
-    return defaultComponent;
+    return typeof defaultComponent === 'function' ? defaultComponent() : defaultComponent;
   }, [defaultComponent]);
   var PlaceHolder = React.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 = React.useMemo(function () {
     setShowDefaultComponent(false); // reset the state when url is changed
@@ -85,7 +75,7 @@ function ImageRenderer(_ref) {
     });
   }, [url]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: [].concat(_rollupPluginBabelHelpers._toConsumableArray(Array.isArray(className) ? className : [className]), ['sendbird-image-renderer']).join(' '),
+    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-image-renderer'], false).join(' '),
     style: {
       width: '100%',
       minWidth: width,
@@ -107,31 +97,6 @@ function ImageRenderer(_ref) {
       borderRadius: circle ? '50%' : null
     }
   }), HiddenImageLoader);
-}
-ImageRenderer.propTypes = {
-  className: PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].string), PropTypes__default["default"].string]),
-  url: PropTypes__default["default"].string.isRequired,
-  alt: PropTypes__default["default"].string,
-  width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-  height: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-  fixedSize: PropTypes__default["default"].bool,
-  defaultComponent: PropTypes__default["default"].oneOfType([PropTypes__default["default"].element, PropTypes__default["default"].func]),
-  placeHolder: PropTypes__default["default"].func,
-  circle: PropTypes__default["default"].bool,
-  onLoad: PropTypes__default["default"].func,
-  onError: PropTypes__default["default"].func
-};
-ImageRenderer.defaultProps = {
-  className: '',
-  defaultComponent: null,
-  placeHolder: null,
-  alt: '',
-  width: null,
-  height: null,
-  fixedSize: false,
-  circle: false,
-  onLoad: function onLoad() {},
-  onError: function onError() {}
 };
 
 module.exports = ImageRenderer;

package/cjs/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/cjs/ui/Input.js

@@ -2,40 +2,34 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-92e5e012.js');
 var React = require('react');
-var PropTypes = require('prop-types');
-var ui_Label = require('../index-cce2b8c0.js');
-require('../stringSet-afc1ff3b.js');
+var ui_Label = require('../index-089e0fba.js');
+require('../_rollupPluginBabelHelpers-4265e501.js');
+require('prop-types');
+require('../stringSet-857a128c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var InputLabel = function InputLabel(_ref) {
-  var children = _ref.children;
+var InputLabel = function InputLabel(_a) {
+  var children = _a.children;
   return /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     className: "sendbird-input-label",
     type: ui_Label.LabelTypography.CAPTION_3,
     color: ui_Label.LabelColors.ONBACKGROUND_1
   }, children);
 };
-InputLabel.propTypes = {
-  children: PropTypes__default["default"].string.isRequired
-}; // future: add validations? onChange? more props etc etc
-
 var Input = /*#__PURE__*/React__default["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 = React.useState(value),
-      _useState2 = _rollupPluginBabelHelpers._slicedToArray(_useState, 2),
-      inputValue = _useState2[0],
-      setInputValue = _useState2[1];
+  var _a = React.useState(value),
+      inputValue = _a[0],
+      setInputValue = _a[1];
 
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-input"
@@ -55,19 +49,6 @@ var Input = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
     color: ui_Label.LabelColors.ONBACKGROUND_3
   }, placeHolder));
 });
-Input.propTypes = {
-  name: PropTypes__default["default"].string.isRequired,
-  required: PropTypes__default["default"].bool,
-  disabled: PropTypes__default["default"].bool,
-  placeHolder: PropTypes__default["default"].string,
-  value: PropTypes__default["default"].string
-};
-Input.defaultProps = {
-  required: false,
-  disabled: false,
-  placeHolder: '',
-  value: ''
-};
 
 exports.InputLabel = InputLabel;
 exports["default"] = Input;

package/cjs/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","Label","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,wCAACC,cAAD;AACE,IAAA,SAAS,EAAC,sBADZ;AAEE,IAAA,IAAI,EAAEC,wBAAe,CAACC,SAFxB;AAGE,IAAA,KAAK,EAAEC,oBAAW,CAACC;AAHrB,KAKGN,QALH,CADwB;AAAA;AAU1BD,UAAU,CAACQ,SAAX,GAAuB;AACrBP,EAAAA,QAAQ,EAAEQ,6BAAS,CAACC,MAAV,CAAiBC;AADN,CAAvB;;IAKMC,KAAK,gBAAGV,yBAAK,CAACW,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,cAAQ,CAACD,KAAD,CAA5C;AAAA;AAAA,MAAOE,UAAP;AAAA,MAAmBC,aAAnB;;AACA,sBACErB;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA;AACE,IAAA,SAAS,EAAC,uBADZ;AAEE,IAAA,GAAG,EAAEa,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,iBACCpB,wCAACC,cAAD;AACE,IAAA,SAAS,EAAC,6BADZ;AAEE,IAAA,IAAI,EAAEC,wBAAe,CAACsB,MAFxB;AAGE,IAAA,KAAK,EAAEpB,oBAAW,CAACqB;AAHrB,KAKGR,WALH,CAbJ,CADF;AAwBD,CAjCa;AAmCdP,KAAK,CAACJ,SAAN,GAAkB;AAChBQ,EAAAA,IAAI,EAAEP,6BAAS,CAACC,MAAV,CAAiBC,UADP;AAEhBM,EAAAA,QAAQ,EAAER,6BAAS,CAACmB,IAFJ;AAGhBV,EAAAA,QAAQ,EAAET,6BAAS,CAACmB,IAHJ;AAIhBT,EAAAA,WAAW,EAAEV,6BAAS,CAACC,MAJP;AAKhBU,EAAAA,KAAK,EAAEX,6BAAS,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","Label","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,wCAACC,cAAD;AACE,IAAA,SAAS,EAAC,sBADZ;AAEE,IAAA,IAAI,EAAEC,wBAAe,CAACC,SAFxB;AAGE,IAAA,KAAK,EAAEC,oBAAW,CAACC;AAHrB,KAKGN,QALH,CADyE;AAQ1E;IASKO,KAAK,gBAAGN,yBAAK,CAACO,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,MAAAV,KAA8BiB,cAAQ,CAACF,KAAD,CAAtC;AAAA,MAACG,UAAU,QAAX;AAAA,MAAaC,aAAa,QAA1B;;AACN,sBACEjB;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA;AACE,IAAA,SAAS,EAAC,uBADZ;AAEE,IAAA,GAAG,EAAES,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,iBACChB,wCAACC,cAAD;AACE,IAAA,SAAS,EAAC,6BADZ;AAEE,IAAA,IAAI,EAAEC,wBAAe,CAACkB,MAFxB;AAGE,IAAA,KAAK,EAAEhB,oBAAW,CAACiB;AAHrB,KAKGP,WALH,CAbJ,CADF;AAwBD,CAjCa;;;;;"}

package/cjs/ui/Label.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../_rollupPluginBabelHelpers-92e5e012.js');
+require('../_rollupPluginBabelHelpers-4265e501.js');
 require('react');
 require('prop-types');
-var ui_Label = require('../index-cce2b8c0.js');
-require('../stringSet-afc1ff3b.js');
+var ui_Label = require('../index-089e0fba.js');
+require('../stringSet-857a128c.js');
 
 
 

package/cjs/ui/LinkLabel.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-92e5e012.js');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-4265e501.js');
 var React = require('react');
 var PropTypes = require('prop-types');
-var ui_Label = require('../index-cce2b8c0.js');
-require('../stringSet-afc1ff3b.js');
+var ui_Label = require('../index-089e0fba.js');
+require('../stringSet-857a128c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/Loader.js

@@ -1,44 +1,35 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-92e5e012.js');
+var tslib_es6 = require('../tslib.es6-ba69891c.js');
 var React = require('react');
-var PropTypes = require('prop-types');
 var ui_Icon = require('./Icon.js');
+require('../_rollupPluginBabelHelpers-4265e501.js');
+require('prop-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-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["default"].createElement("div", {
-    className: [].concat(_rollupPluginBabelHelpers._toConsumableArray(Array.isArray(className) ? className : [className]), ['sendbird-loader']).join(' '),
+    className: tslib_es6.__spreadArray(tslib_es6.__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__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)]),
-  width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-  height: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-  children: PropTypes__default["default"].element
-};
-Loader.defaultProps = {
-  className: '',
-  width: '26px',
-  height: '26px',
-  children: /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+  }, children || /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
     type: ui_Icon.IconTypes.SPINNER,
     width: "26px",
     height: "26px"
-  })
-};
+  }));
+}
 
 module.exports = Loader;
 //# sourceMappingURL=Loader.js.map

package/cjs/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","Icon","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,uDACLC,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,6BAAS,CAACC,SAAV,CAAoB,CAC7BD,6BAAS,CAACE,MADmB,EAE7BF,6BAAS,CAACG,OAAV,CAAkBH,6BAAS,CAACE,MAA5B,CAF6B,CAApB,CADM;AAKjBV,EAAAA,KAAK,EAAEQ,6BAAS,CAACC,SAAV,CAAoB,CACzBD,6BAAS,CAACE,MADe,EAEzBF,6BAAS,CAACI,MAFe,CAApB,CALU;AASjBX,EAAAA,MAAM,EAAEO,6BAAS,CAACC,SAAV,CAAoB,CAC1BD,6BAAS,CAACE,MADgB,EAE1BF,6BAAS,CAACI,MAFgB,CAApB,CATS;AAajBV,EAAAA,QAAQ,EAAEM,6BAAS,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,wCAACY,kBAAD;AACR,IAAA,IAAI,EAAEC,iBAAS,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","Icon","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,oDACLC,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,wCAACK,kBAAD;AACE,IAAA,IAAI,EAAEC,iBAAS,CAACC,OADlB;AAEE,IAAA,KAAK,EAAC,MAFR;AAGE,IAAA,MAAM,EAAC;AAHT,IAbN,CADF;AAuBD;;;;"}

package/cjs/ui/MentionLabel.js

@@ -2,27 +2,27 @@
 
 var React = require('react');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../index-cce2b8c0.js');
+var ui_Label = require('../index-089e0fba.js');
 var ui_UserProfile = require('./UserProfile.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-require('../_rollupPluginBabelHelpers-92e5e012.js');
-require('prop-types');
-require('../index-10b68ab4.js');
-require('../tslib.es6-12c25052.js');
+require('../tslib.es6-ba69891c.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../stringSet-afc1ff3b.js');
-require('../LocalizationContext-f05328b8.js');
-require('../index-2dacade8.js');
+require('../uuid-49679ac2.js');
+require('../index-06c3dca9.js');
+require('../_rollupPluginBabelHelpers-4265e501.js');
+require('prop-types');
+require('../stringSet-857a128c.js');
+require('../LocalizationContext-da62a103.js');
+require('../index-25336220.js');
 require('../withSendbird.js');
 require('../sendbirdSelectors.js');
-require('../topics-57ad0394.js');
-require('../utils-6f828dbd.js');
+require('../topics-a755c9c6.js');
+require('../utils-bf57a41a.js');
 require('./Avatar.js');
 require('./ImageRenderer.js');
 require('./Icon.js');
-require('../uuid-920ae00d.js');
-require('../index-188e8e7f.js');
+require('../index-05692021.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }