quickblox-react-ui-kit 0.4.6-beta.3 → 0.4.6-beta.4

package/.env

@@ -0,0 +1 @@
+FAST_REFRESH=false

package/dist/index-ui.js

@@ -3193,12 +3193,12 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.loader {
+___CSS_LOADER_EXPORT___.push([module.id, `.qb-loader {
   animation: spin 2s linear infinite;
   min-width: 44;
   min-height: 44;
 }
-.loader svg path {
+.qb-loader svg path {
   fill: var(--main-elements);
 }
 
@@ -3209,7 +3209,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.loader {
   100% {
     transform: rotate(360deg);
   }
-}`, "",{"version":3,"sources":["webpack://./src/Presentation/components/UI/Placeholders/LoaderComponent/LoaderComponent.scss"],"names":[],"mappings":"AAMA;EACE,kCAAA;EAEA,aARmB;EASnB,cARoB;AAEtB;AAIE;EAAU,0BARe;AAO3B;;AAMA;EACE;IACE,uBAAA;EAHF;EAKA;IACE,yBAAA;EAHF;AACF","sourcesContent":["$default-background-color: var(--main-elements);\n$default-width-icon: 44;\n$default-height-icon: 44;\n\n// #Loader{fill: $default-background-color};\n\n.loader {\n  animation: spin 2s linear infinite;\n  svg path {fill: $default-background-color};\n  min-width: $default-width-icon;\n  min-height: $default-height-icon;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n"],"sourceRoot":""}]);
+}`, "",{"version":3,"sources":["webpack://./src/Presentation/components/UI/Placeholders/LoaderComponent/LoaderComponent.scss"],"names":[],"mappings":"AAIA;EACE,kCAAA;EAEA,aANmB;EAOnB,cANoB;AAEtB;AAEE;EAAU,0BANe;AAO3B;;AAIA;EACE;IACE,uBAAA;EADF;EAGA;IACE,yBAAA;EADF;AACF","sourcesContent":["$default-background-color: var(--main-elements);\n$default-width-icon: 44;\n$default-height-icon: 44;\n\n.qb-loader {\n  animation: spin 2s linear infinite;\n  svg path {fill: $default-background-color};\n  min-width: $default-width-icon;\n  min-height: $default-height-icon;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -3478,7 +3478,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.avatar {
+___CSS_LOADER_EXPORT___.push([module.id, `.qb-avatar {
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -3488,45 +3488,45 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.avatar {
   background-color: var(--disabled-elements);
   color: var(--secondary-text);
 }
-.avatar,
-.avatar * {
+.qb-avatar,
+.qb-avatar * {
   box-sizing: border-box;
 }
-.avatar svg {
+.qb-avatar svg {
   height: 100%;
   width: 100%;
   fill: var(--secondary-text);
   padding: 10px;
 }
-.avatar__image {
+.qb-avatar__image {
   object-fit: cover;
   width: 100%;
   height: 100%;
 }
-.avatar--xs {
+.qb-avatar--xs {
   width: 32px;
   height: 32px;
 }
-.avatar--sm {
+.qb-avatar--sm {
   width: 36px;
   height: 36px;
 }
-.avatar--md {
+.qb-avatar--md {
   width: 40px;
   height: 40px;
 }
-.avatar--lg {
+.qb-avatar--lg {
   width: 56px;
   height: 56px;
 }
-.avatar--xl {
+.qb-avatar--xl {
   width: 64px;
   height: 64px;
 }
-.avatar--xxl {
+.qb-avatar--xxl {
   width: 80px;
   height: 80px;
-}`, "",{"version":3,"sources":["webpack://./src/Presentation/ui-components/Avatar/Avatar.scss","webpack://./src/Presentation/themes/styles/_mixins.scss"],"names":[],"mappings":"AAEA;EAEE,aAAA;EACA,cAAA;EACA,mBAAA;EACA,uBAAA;EAEA,gBAAA;EACA,kBAAA;EACA,0CAAA;EACA,4BAAA;AAHF;ACRE;;EAEE,sBAAA;ADUJ;AACE;EACE,YAAA;EACA,WAAA;EAEA,2BAAA;EACA,aAAA;AAAJ;AAGE;EACE,iBAAA;EACA,WAAA;EACA,YAAA;AADJ;AAIE;EACE,WAAA;EACA,YAAA;AAFJ;AAKE;EACE,WAAA;EACA,YAAA;AAHJ;AAME;EACE,WAAA;EACA,YAAA;AAJJ;AAOE;EACE,WAAA;EACA,YAAA;AALJ;AAQE;EACE,WAAA;EACA,YAAA;AANJ;AASE;EACE,WAAA;EACA,YAAA;AAPJ","sourcesContent":["@import '../../themes/styles/mixins';\n\n.avatar {\n  @include applyBorderBox;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n\n  overflow: hidden;\n  border-radius: 50%;\n  background-color: var(--disabled-elements);\n  color: var(--secondary-text);\n\n  svg {\n    height: 100%;\n    width: 100%;\n    \n    fill: var(--secondary-text);\n    padding: 10px;\n  }\n\n  &__image {\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n  }\n\n  &--xs {\n    width: 32px;\n    height: 32px;\n  }\n\n  &--sm {\n    width: 36px;\n    height: 36px;\n  }\n\n  &--md {\n    width: 40px;\n    height: 40px;\n  }\n\n  &--lg {\n    width: 56px;\n    height: 56px;\n  }\n\n  &--xl {\n    width: 64px;\n    height: 64px;\n  }\n\n  &--xxl {\n    width: 80px;\n    height: 80px;\n  }\n}\n","@mixin applyBorderBox {\n  &,\n  * {\n    box-sizing: border-box;\n  }\n}\n"],"sourceRoot":""}]);
+}`, "",{"version":3,"sources":["webpack://./src/Presentation/ui-components/Avatar/Avatar.scss","webpack://./src/Presentation/themes/styles/_mixins.scss"],"names":[],"mappings":"AAEA;EAEE,aAAA;EACA,cAAA;EACA,mBAAA;EACA,uBAAA;EAEA,gBAAA;EACA,kBAAA;EACA,0CAAA;EACA,4BAAA;AAHF;ACRE;;EAEE,sBAAA;ADUJ;AACE;EACE,YAAA;EACA,WAAA;EAEA,2BAAA;EACA,aAAA;AAAJ;AAGE;EACE,iBAAA;EACA,WAAA;EACA,YAAA;AADJ;AAIE;EACE,WAAA;EACA,YAAA;AAFJ;AAKE;EACE,WAAA;EACA,YAAA;AAHJ;AAME;EACE,WAAA;EACA,YAAA;AAJJ;AAOE;EACE,WAAA;EACA,YAAA;AALJ;AAQE;EACE,WAAA;EACA,YAAA;AANJ;AASE;EACE,WAAA;EACA,YAAA;AAPJ","sourcesContent":["@import '../../themes/styles/mixins';\n\n.qb-avatar {\n  @include applyBorderBox;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n\n  overflow: hidden;\n  border-radius: 50%;\n  background-color: var(--disabled-elements);\n  color: var(--secondary-text);\n\n  svg {\n    height: 100%;\n    width: 100%;\n    \n    fill: var(--secondary-text);\n    padding: 10px;\n  }\n\n  &__image {\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n  }\n\n  &--xs {\n    width: 32px;\n    height: 32px;\n  }\n\n  &--sm {\n    width: 36px;\n    height: 36px;\n  }\n\n  &--md {\n    width: 40px;\n    height: 40px;\n  }\n\n  &--lg {\n    width: 56px;\n    height: 56px;\n  }\n\n  &--xl {\n    width: 64px;\n    height: 64px;\n  }\n\n  &--xxl {\n    width: 80px;\n    height: 80px;\n  }\n}\n","@mixin applyBorderBox {\n  &,\n  * {\n    box-sizing: border-box;\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -3553,7 +3553,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.badge {
+___CSS_LOADER_EXPORT___.push([module.id, `.qb-badge {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -3568,10 +3568,10 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.badge {
   background-color: var(--main-elements);
   color: var(--secondary-background);
 }
-.badge--mute {
+.qb-badge--mute {
   background-color: var(--disabled-elements);
   color: var(--secondary-background);
-}`, "",{"version":3,"sources":["webpack://./src/Presentation/ui-components/Badge/Badge.scss"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;EAEA,YAAA;EACA,mBAAA;EACA,gBAAA;EAEA,qBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,qBAAA;EAEA,sCAAA;EACA,kCAAA;AAFF;AAIE;EACE,0CAAA;EACA,kCAAA;AAFJ","sourcesContent":[".badge {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  height: 20px;\n  border-radius: 30px;\n  padding: 2px 6px;\n\n  font-family: 'Roboto';\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 16px;\n  letter-spacing: 0.5px;\n\n  background-color: var(--main-elements);\n  color: var(--secondary-background);\n\n  &--mute {\n    background-color: var(--disabled-elements);\n    color: var(--secondary-background);\n  }\n}\n"],"sourceRoot":""}]);
+}`, "",{"version":3,"sources":["webpack://./src/Presentation/ui-components/Badge/Badge.scss"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;EAEA,YAAA;EACA,mBAAA;EACA,gBAAA;EAEA,qBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,qBAAA;EAEA,sCAAA;EACA,kCAAA;AAFF;AAIE;EACE,0CAAA;EACA,kCAAA;AAFJ","sourcesContent":[".qb-badge {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  height: 20px;\n  border-radius: 30px;\n  padding: 2px 6px;\n\n  font-family: 'Roboto';\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 16px;\n  letter-spacing: 0.5px;\n\n  background-color: var(--main-elements);\n  color: var(--secondary-background);\n\n  &--mute {\n    background-color: var(--disabled-elements);\n    color: var(--secondary-background);\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -3598,7 +3598,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.button {
+___CSS_LOADER_EXPORT___.push([module.id, `.qb-button {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -3619,90 +3619,90 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.button {
   border: none;
   outline: none;
 }
-.button,
-.button * {
+.qb-button,
+.qb-button * {
   box-sizing: border-box;
 }
-.button--default {
+.qb-button--default {
   color: var(--secondary-background);
   background-color: var(--main-elements);
 }
-.button--default:hover {
+.qb-button--default:hover {
   background-color: var(--color-default-hover);
 }
-.button--default:focus {
+.qb-button--default:focus {
   outline: 2px solid var(--color-background-info);
 }
-.button--default:active {
+.qb-button--default:active {
   background-color: var(--color-default-hover);
   color: var(--color-background-info);
 }
-.button--default.button--disabled {
+.qb-button--default.qb-button--disabled {
   cursor: not-allowed;
   background-color: var(--disabled-elements);
   color: var(--secondary-text);
 }
-.button--outlined {
+.qb-button--outlined {
   background-color: inherit;
   border: 1px solid var(--main-elements);
   color: var(--main-elements);
 }
-.button--outlined:hover {
+.qb-button--outlined:hover {
   background-color: var(--outgoing-background);
 }
-.button--outlined:focus {
+.qb-button--outlined:focus {
   border: 2px solid var(--color-background-info);
 }
-.button--outlined:active {
+.qb-button--outlined:active {
   border: 1px solid var(--main-elements);
   color: var(--main-elements);
 }
-.button--outlined.button--disabled {
+.qb-button--outlined.qb-button--disabled {
   cursor: not-allowed;
   border: 1px solid var(--disabled-elements);
   color: var(--disabled-elements);
 }
-.button--danger {
+.qb-button--danger {
   background-color: var(--error);
   color: var(--secondary-background);
 }
-.button--danger:focus {
+.qb-button--danger:focus {
   outline: 2px solid var(--error-secondary);
 }
-.button--danger:active {
+.qb-button--danger:active {
   color: var(--error-secondary);
 }
-.button--danger.button--disabled {
+.qb-button--danger.qb-button--disabled {
   cursor: not-allowed;
   background-color: var(--disabled-elements);
   color: var(--secondary-text);
 }
-.button--text {
+.qb-button--text {
   background-color: inherit;
   color: var(--main-elements);
 }
-.button--text:focus {
+.qb-button--text:focus {
   outline: 2px solid var(--color-background-info);
 }
-.button--text:active {
+.qb-button--text:active {
   color: var(--color-default-hover);
 }
-.button--text.button--disabled {
+.qb-button--text.qb-button--disabled {
   cursor: not-allowed;
   color: var(--disabled-elements);
 }
-.button__loader--default {
+.qb-button__loader--default {
   fill: var(--secondary-background);
 }
-.button__loader--outlined {
+.qb-button__loader--outlined {
   fill: var(--main-elements);
 }
-.button__loader--danger {
+.qb-button__loader--danger {
   fill: var(--secondary-background);
 }
-.button__loader--text {
+.qb-button__loader--text {
   fill: var(--disabled-elements);
-}`, "",{"version":3,"sources":["webpack://./src/Presentation/ui-components/Button/Button.scss","webpack://./src/Presentation/themes/styles/_mixins.scss"],"names":[],"mappings":"AAEA;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,mBAAA;EACA,iBAAA;EAEA,YAAA;EAEA,kBAAA;EAEA,UAAA;EACA,QAAA;EACA,YAAA;EAEA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,qBAAA;EAEA,eAAA;EACA,YAAA;EACA,aAAA;AANF;ACnBE;;EAEE,sBAAA;ADqBJ;AAKE;EACE,kCAAA;EACA,sCAAA;AAHJ;AAKI;EACE,4CAAA;AAHN;AAMI;EACE,+CAAA;AAJN;AAOI;EACE,4CAAA;EACA,mCAAA;AALN;AAQI;EACE,mBAAA;EACA,0CAAA;EACA,4BAAA;AANN;AAUE;EACE,yBAAA;EACA,sCAAA;EACA,2BAAA;AARJ;AAUI;EACE,4CAAA;AARN;AAWI;EACE,8CAAA;AATN;AAYI;EACE,sCAAA;EACA,2BAAA;AAVN;AAaI;EACE,mBAAA;EACA,0CAAA;EACA,+BAAA;AAXN;AAeE;EACE,8BAAA;EACA,kCAAA;AAbJ;AAeI;EACE,yCAAA;AAbN;AAgBI;EACE,6BAAA;AAdN;AAiBI;EACE,mBAAA;EACA,0CAAA;EACA,4BAAA;AAfN;AAmBE;EACE,yBAAA;EACA,2BAAA;AAjBJ;AAmBI;EACE,+CAAA;AAjBN;AAoBI;EACE,iCAAA;AAlBN;AAqBI;EACE,mBAAA;EACA,+BAAA;AAnBN;AAwBI;EACE,iCAAA;AAtBN;AAyBI;EACE,0BAAA;AAvBN;AA0BI;EACE,iCAAA;AAxBN;AA2BI;EACE,8BAAA;AAzBN","sourcesContent":["@import '../../themes/styles/mixins';\n\n.button {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 8px 16px;\n\n  height: 32px;\n\n  border-radius: 4px;\n\n  flex: none;\n  order: 1;\n  flex-grow: 0;\n\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 700;\n  font-size: 14px;\n  line-height: 16px;\n  letter-spacing: 0.4px;\n\n  cursor: pointer;\n  border: none;\n  outline: none;\n  @include applyBorderBox;\n\n  &--default {\n    color: var(--secondary-background);\n    background-color: var(--main-elements);\n\n    &:hover {\n      background-color: var(--color-default-hover);\n    }\n\n    &:focus {\n      outline: 2px solid var(--color-background-info);\n    }\n\n    &:active {\n      background-color: var(--color-default-hover);\n      color: var(--color-background-info);\n    }\n\n    &.button--disabled {\n      cursor: not-allowed;\n      background-color: var(--disabled-elements);\n      color: var(--secondary-text);\n    }\n  }\n\n  &--outlined {\n    background-color: inherit;\n    border: 1px solid var(--main-elements);\n    color: var(--main-elements);\n\n    &:hover {\n      background-color: var(--outgoing-background);\n    }\n\n    &:focus {\n      border: 2px solid var(--color-background-info);\n    }\n\n    &:active {\n      border: 1px solid var(--main-elements);\n      color: var(--main-elements);\n    }\n\n    &.button--disabled {\n      cursor: not-allowed;\n      border: 1px solid var(--disabled-elements);\n      color: var(--disabled-elements);\n    }\n  }\n\n  &--danger {\n    background-color: var(--error);\n    color: var(--secondary-background);\n\n    &:focus {\n      outline: 2px solid var(--error-secondary);\n    }\n\n    &:active {\n      color: var(--error-secondary);\n    }\n\n    &.button--disabled {\n      cursor: not-allowed;\n      background-color: var(--disabled-elements);\n      color: var(--secondary-text);\n    }\n  }\n\n  &--text {\n    background-color: inherit;\n    color: var(--main-elements);\n\n    &:focus {\n      outline: 2px solid var(--color-background-info);\n    }\n\n    &:active {\n      color: var(--color-default-hover);\n    }\n\n    &.button--disabled {\n      cursor: not-allowed;\n      color: var(--disabled-elements);\n    }\n  }\n\n  &__loader {\n    &--default {\n      fill: var(--secondary-background);\n    }\n\n    &--outlined {\n      fill: var(--main-elements);\n    }\n\n    &--danger {\n      fill: var(--secondary-background);\n    }\n\n    &--text {\n      fill: var(--disabled-elements);\n    }\n  }\n}\n","@mixin applyBorderBox {\n  &,\n  * {\n    box-sizing: border-box;\n  }\n}\n"],"sourceRoot":""}]);
+}`, "",{"version":3,"sources":["webpack://./src/Presentation/ui-components/Button/Button.scss","webpack://./src/Presentation/themes/styles/_mixins.scss"],"names":[],"mappings":"AAEA;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,mBAAA;EACA,iBAAA;EAEA,YAAA;EAEA,kBAAA;EAEA,UAAA;EACA,QAAA;EACA,YAAA;EAEA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,qBAAA;EAEA,eAAA;EACA,YAAA;EACA,aAAA;AANF;ACnBE;;EAEE,sBAAA;ADqBJ;AAKE;EACE,kCAAA;EACA,sCAAA;AAHJ;AAKI;EACE,4CAAA;AAHN;AAMI;EACE,+CAAA;AAJN;AAOI;EACE,4CAAA;EACA,mCAAA;AALN;AAQI;EACE,mBAAA;EACA,0CAAA;EACA,4BAAA;AANN;AAUE;EACE,yBAAA;EACA,sCAAA;EACA,2BAAA;AARJ;AAUI;EACE,4CAAA;AARN;AAWI;EACE,8CAAA;AATN;AAYI;EACE,sCAAA;EACA,2BAAA;AAVN;AAaI;EACE,mBAAA;EACA,0CAAA;EACA,+BAAA;AAXN;AAeE;EACE,8BAAA;EACA,kCAAA;AAbJ;AAeI;EACE,yCAAA;AAbN;AAgBI;EACE,6BAAA;AAdN;AAiBI;EACE,mBAAA;EACA,0CAAA;EACA,4BAAA;AAfN;AAmBE;EACE,yBAAA;EACA,2BAAA;AAjBJ;AAmBI;EACE,+CAAA;AAjBN;AAoBI;EACE,iCAAA;AAlBN;AAqBI;EACE,mBAAA;EACA,+BAAA;AAnBN;AAwBI;EACE,iCAAA;AAtBN;AAyBI;EACE,0BAAA;AAvBN;AA0BI;EACE,iCAAA;AAxBN;AA2BI;EACE,8BAAA;AAzBN","sourcesContent":["@import '../../themes/styles/mixins';\n\n.qb-button {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 8px 16px;\n\n  height: 32px;\n\n  border-radius: 4px;\n\n  flex: none;\n  order: 1;\n  flex-grow: 0;\n\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 700;\n  font-size: 14px;\n  line-height: 16px;\n  letter-spacing: 0.4px;\n\n  cursor: pointer;\n  border: none;\n  outline: none;\n  @include applyBorderBox;\n\n  &--default {\n    color: var(--secondary-background);\n    background-color: var(--main-elements);\n\n    &:hover {\n      background-color: var(--color-default-hover);\n    }\n\n    &:focus {\n      outline: 2px solid var(--color-background-info);\n    }\n\n    &:active {\n      background-color: var(--color-default-hover);\n      color: var(--color-background-info);\n    }\n\n    &.qb-button--disabled {\n      cursor: not-allowed;\n      background-color: var(--disabled-elements);\n      color: var(--secondary-text);\n    }\n  }\n\n  &--outlined {\n    background-color: inherit;\n    border: 1px solid var(--main-elements);\n    color: var(--main-elements);\n\n    &:hover {\n      background-color: var(--outgoing-background);\n    }\n\n    &:focus {\n      border: 2px solid var(--color-background-info);\n    }\n\n    &:active {\n      border: 1px solid var(--main-elements);\n      color: var(--main-elements);\n    }\n\n    &.qb-button--disabled {\n      cursor: not-allowed;\n      border: 1px solid var(--disabled-elements);\n      color: var(--disabled-elements);\n    }\n  }\n\n  &--danger {\n    background-color: var(--error);\n    color: var(--secondary-background);\n\n    &:focus {\n      outline: 2px solid var(--error-secondary);\n    }\n\n    &:active {\n      color: var(--error-secondary);\n    }\n\n    &.qb-button--disabled {\n      cursor: not-allowed;\n      background-color: var(--disabled-elements);\n      color: var(--secondary-text);\n    }\n  }\n\n  &--text {\n    background-color: inherit;\n    color: var(--main-elements);\n\n    &:focus {\n      outline: 2px solid var(--color-background-info);\n    }\n\n    &:active {\n      color: var(--color-default-hover);\n    }\n\n    &.qb-button--disabled {\n      cursor: not-allowed;\n      color: var(--disabled-elements);\n    }\n  }\n\n  &__loader {\n    &--default {\n      fill: var(--secondary-background);\n    }\n\n    &--outlined {\n      fill: var(--main-elements);\n    }\n\n    &--danger {\n      fill: var(--secondary-background);\n    }\n\n    &--text {\n      fill: var(--disabled-elements);\n    }\n  }\n}\n","@mixin applyBorderBox {\n  &,\n  * {\n    box-sizing: border-box;\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -3729,7 +3729,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.checkbox {
+___CSS_LOADER_EXPORT___.push([module.id, `.qb-checkbox {
   display: flex;
   align-items: center;
   flex-shrink: 0;
@@ -3738,7 +3738,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.checkbox {
   justify-content: center;
   width: 18px;
   height: 18px;
-}`, "",{"version":3,"sources":["webpack://./src/Presentation/ui-components/CheckBox/CheckBox.scss"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;EACA,YAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;AACF","sourcesContent":[".checkbox {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  border-radius: 4px;\n  padding: 4px;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n}\n"],"sourceRoot":""}]);
+}`, "",{"version":3,"sources":["webpack://./src/Presentation/ui-components/CheckBox/CheckBox.scss"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;EACA,YAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;AACF","sourcesContent":[".qb-checkbox {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  border-radius: 4px;\n  padding: 4px;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -4167,18 +4167,18 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.loader {
+___CSS_LOADER_EXPORT___.push([module.id, `.qb-loader {
   animation: rotate 1s infinite linear;
 }
-.loader--sm {
+.qb-loader--sm {
   width: 24px;
   height: 24px;
 }
-.loader--md {
+.qb-loader--md {
   width: 48px;
   height: 48px;
 }
-.loader--lg {
+.qb-loader--lg {
   width: 52px;
   height: 52px;
 }
@@ -4189,7 +4189,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.loader {
   to {
     transform: rotate(360deg);
   }
-}`, "",{"version":3,"sources":["webpack://./src/Presentation/ui-components/Loader/Loader.scss"],"names":[],"mappings":"AAAA;EAgBE,oCAAA;AAdF;AADE;EACE,WAAA;EACA,YAAA;AAGJ;AAAE;EACE,WAAA;EACA,YAAA;AAEJ;AACE;EACE,WAAA;EACA,YAAA;AACJ;AAIE;EACE;IACE,uBAAA;EAFJ;EAIE;IACE,yBAAA;EAFJ;AACF","sourcesContent":[".loader {\n  &--sm {\n    width: 24px;\n    height: 24px;\n  }\n\n  &--md {\n    width: 48px;\n    height: 48px;\n  }\n\n  &--lg {\n    width: 52px;\n    height: 52px;\n  }\n\n  animation: rotate 1s infinite linear;\n\n  @keyframes rotate {\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(360deg);\n    }\n  }\n}\n"],"sourceRoot":""}]);
+}`, "",{"version":3,"sources":["webpack://./src/Presentation/ui-components/Loader/Loader.scss"],"names":[],"mappings":"AAAA;EAgBE,oCAAA;AAdF;AADE;EACE,WAAA;EACA,YAAA;AAGJ;AAAE;EACE,WAAA;EACA,YAAA;AAEJ;AACE;EACE,WAAA;EACA,YAAA;AACJ;AAIE;EACE;IACE,uBAAA;EAFJ;EAIE;IACE,yBAAA;EAFJ;AACF","sourcesContent":[".qb-loader {\n  &--sm {\n    width: 24px;\n    height: 24px;\n  }\n\n  &--md {\n    width: 48px;\n    height: 48px;\n  }\n\n  &--lg {\n    width: 52px;\n    height: 52px;\n  }\n\n  animation: rotate 1s infinite linear;\n\n  @keyframes rotate {\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(360deg);\n    }\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -5597,18 +5597,18 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.text-field,
-.text-field * {
+___CSS_LOADER_EXPORT___.push([module.id, `.qb-text-field,
+.qb-text-field * {
   box-sizing: border-box;
 }
-.text-field__label {
+.qb-text-field__label {
   font-family: "Roboto";
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.25px;
 }
-.text-field__wrapper {
+.qb-text-field__wrapper {
   background-color: var(----color-background);
   display: flex;
   align-items: center;
@@ -5617,13 +5617,13 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.text-field,
   margin-top: 8px;
   padding: 6px 8px;
 }
-.text-field__wrapper:active {
+.qb-text-field__wrapper:active {
   border: 1px solid var(--main-elements);
 }
-.text-field__icon {
+.qb-text-field__icon {
   margin-right: 6px;
 }
-.text-field__input {
+.qb-text-field__input {
   width: 100%;
   border: none;
   outline: none;
@@ -5633,39 +5633,39 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.text-field,
   line-height: 24px;
   letter-spacing: 0.15px;
 }
-.text-field__input:disabled {
+.qb-text-field__input:disabled {
   background-color: transparent;
   cursor: not-allowed;
   border: none;
   color: inherit;
 }
-.text-field__input::placeholder {
+.qb-text-field__input::placeholder {
   color: var(--secondary-text);
 }
-.text-field__reset {
+.qb-text-field__reset {
   width: 24px;
   height: 24px;
   fill: var(--tertiary-elements);
   cursor: pointer;
 }
-.text-field--disabled *, .text-field--disabled .text-field__label .text-field__reset {
+.qb-text-field--disabled *, .qb-text-field--disabled .qb-text-field__label .qb-text-field__reset {
   color: var(--disabled-elements);
   fill: var(--disabled-elements);
   cursor: not-allowed;
 }
-.text-field--disabled .text-field__wrapper {
+.qb-text-field--disabled .qb-text-field__wrapper {
   background-color: var(--incoming-background);
   border: none;
 }
-.text-field--disabled .text-field__wrapper:active {
+.qb-text-field--disabled .qb-text-field__wrapper:active {
   border: none;
 }
-.text-field--disabled .text-field__input::placeholder {
+.qb-text-field--disabled .qb-text-field__input::placeholder {
   color: var(--disabled-elements);
 }
-.text-field__loader {
+.qb-text-field__loader {
   fill: var(--color-icon);
-}`, "",{"version":3,"sources":["webpack://./src/Presentation/themes/styles/_mixins.scss","webpack://./src/Presentation/ui-components/TextField/TextField.scss"],"names":[],"mappings":"AACE;;EAEE,sBAAA;ACAJ;AAEE;EACE,qBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,sBAAA;AAAJ;AAGE;EACE,2CAAA;EAEA,aAAA;EACA,mBAAA;EAEA,kBAAA;EACA,0CAAA;EACA,eAAA;EACA,gBAAA;AAHJ;AAKI;EACE,sCAAA;AAHN;AAOE;EACE,iBAAA;AALJ;AAQE;EACE,WAAA;EACA,YAAA;EACA,aAAA;EAEA,qBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,sBAAA;AAPJ;AASI;EACE,6BAAA;EACA,mBAAA;EACA,YAAA;EACA,cAAA;AAPN;AAUI;EACE,4BAAA;AARN;AAYE;EACE,WAAA;EACA,YAAA;EACA,8BAAA;EAEA,eAAA;AAXJ;AAcE;EAEE,+BAAA;EACA,8BAAA;EAEA,mBAAA;AAdJ;AAiBE;EACE,4CAAA;EACA,YAAA;AAfJ;AAiBI;EACE,YAAA;AAfN;AAoBI;EACE,+BAAA;AAlBN;AAsBE;EACE,uBAAA;AApBJ","sourcesContent":["@mixin applyBorderBox {\n  &,\n  * {\n    box-sizing: border-box;\n  }\n}\n","@import '../../themes/styles/mixins';\n\n.text-field {\n  @include applyBorderBox;\n\n  &__label {\n    font-family: 'Roboto';\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 20px;\n    letter-spacing: 0.25px;\n  }\n\n  &__wrapper {\n    background-color: var(----color-background);\n\n    display: flex;\n    align-items: center;\n\n    border-radius: 4px;\n    border: 1px solid var(--tertiary-elements);\n    margin-top: 8px;\n    padding: 6px 8px;\n\n    &:active {\n      border: 1px solid var(--main-elements);\n    }\n  }\n\n  &__icon {\n    margin-right: 6px;\n  }\n\n  &__input {\n    width: 100%;\n    border: none;\n    outline: none;\n\n    font-family: 'Roboto';\n    font-weight: 400;\n    font-size: 16px;\n    line-height: 24px;\n    letter-spacing: 0.15px;\n\n    &:disabled {\n      background-color: transparent;\n      cursor: not-allowed;\n      border: none;\n      color: inherit;\n    }\n\n    &::placeholder {\n      color: var(--secondary-text);\n    }\n  }\n\n  &__reset {\n    width: 24px;\n    height: 24px;\n    fill: var(--tertiary-elements);\n\n    cursor: pointer;\n  }\n\n  &--disabled *,\n  &--disabled &__label &__reset {\n    color: var(--disabled-elements);\n    fill: var(--disabled-elements);\n\n    cursor: not-allowed;\n  }\n\n  &--disabled &__wrapper {\n    background-color: var(--incoming-background);\n    border: none;\n\n    &:active {\n      border: none;\n    }\n  }\n\n  &--disabled &__input {\n    &::placeholder {\n      color: var(--disabled-elements);\n    }\n  }\n\n  &__loader {\n    fill: var(--color-icon);\n  }\n}\n"],"sourceRoot":""}]);
+}`, "",{"version":3,"sources":["webpack://./src/Presentation/themes/styles/_mixins.scss","webpack://./src/Presentation/ui-components/TextField/TextField.scss"],"names":[],"mappings":"AACE;;EAEE,sBAAA;ACAJ;AAEE;EACE,qBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,sBAAA;AAAJ;AAGE;EACE,2CAAA;EAEA,aAAA;EACA,mBAAA;EAEA,kBAAA;EACA,0CAAA;EACA,eAAA;EACA,gBAAA;AAHJ;AAKI;EACE,sCAAA;AAHN;AAOE;EACE,iBAAA;AALJ;AAQE;EACE,WAAA;EACA,YAAA;EACA,aAAA;EAEA,qBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,sBAAA;AAPJ;AASI;EACE,6BAAA;EACA,mBAAA;EACA,YAAA;EACA,cAAA;AAPN;AAUI;EACE,4BAAA;AARN;AAYE;EACE,WAAA;EACA,YAAA;EACA,8BAAA;EAEA,eAAA;AAXJ;AAcE;EAEE,+BAAA;EACA,8BAAA;EAEA,mBAAA;AAdJ;AAiBE;EACE,4CAAA;EACA,YAAA;AAfJ;AAiBI;EACE,YAAA;AAfN;AAoBI;EACE,+BAAA;AAlBN;AAsBE;EACE,uBAAA;AApBJ","sourcesContent":["@mixin applyBorderBox {\n  &,\n  * {\n    box-sizing: border-box;\n  }\n}\n","@import '../../themes/styles/mixins';\n\n.qb-text-field {\n  @include applyBorderBox;\n\n  &__label {\n    font-family: 'Roboto';\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 20px;\n    letter-spacing: 0.25px;\n  }\n\n  &__wrapper {\n    background-color: var(----color-background);\n\n    display: flex;\n    align-items: center;\n\n    border-radius: 4px;\n    border: 1px solid var(--tertiary-elements);\n    margin-top: 8px;\n    padding: 6px 8px;\n\n    &:active {\n      border: 1px solid var(--main-elements);\n    }\n  }\n\n  &__icon {\n    margin-right: 6px;\n  }\n\n  &__input {\n    width: 100%;\n    border: none;\n    outline: none;\n\n    font-family: 'Roboto';\n    font-weight: 400;\n    font-size: 16px;\n    line-height: 24px;\n    letter-spacing: 0.15px;\n\n    &:disabled {\n      background-color: transparent;\n      cursor: not-allowed;\n      border: none;\n      color: inherit;\n    }\n\n    &::placeholder {\n      color: var(--secondary-text);\n    }\n  }\n\n  &__reset {\n    width: 24px;\n    height: 24px;\n    fill: var(--tertiary-elements);\n\n    cursor: pointer;\n  }\n\n  &--disabled *,\n  &--disabled &__label &__reset {\n    color: var(--disabled-elements);\n    fill: var(--disabled-elements);\n\n    cursor: not-allowed;\n  }\n\n  &--disabled &__wrapper {\n    background-color: var(--incoming-background);\n    border: none;\n\n    &:active {\n      border: none;\n    }\n  }\n\n  &--disabled &__input {\n    &::placeholder {\n      color: var(--disabled-elements);\n    }\n  }\n\n  &__loader {\n    fill: var(--color-icon);\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -5696,14 +5696,14 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.container {
   width: 25%;
 }
 
-.toast {
+.qb-toast {
   min-height: 24px;
   padding: 4px 12px;
   opacity: 60% !important;
   border-radius: 4px;
   background-color: var(--toast-color);
 }
-.toast__body {
+.qb-toast__body {
   padding: 0;
   font-family: "Roboto";
   font-weight: 500;
@@ -5712,7 +5712,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.container {
   letter-spacing: 0.5px;
   color: var(--main-background);
   text-align: center;
-}`, "",{"version":3,"sources":["webpack://./src/Presentation/ui-components/Toast/Toast.scss"],"names":[],"mappings":"AAAA;EACE,UAAA;AACF;;AAEA;EACE,gBAAA;EACA,iBAAA;EACA,uBAAA;EACA,kBAAA;EACA,oCAAA;AACF;AACE;EACE,UAAA;EACA,qBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,qBAAA;EACA,6BAAA;EACA,kBAAA;AACJ","sourcesContent":[".container {\n  width: 25%;\n}\n\n.toast {\n  min-height: 24px;\n  padding: 4px 12px;\n  opacity: 60% !important;\n  border-radius: 4px;\n  background-color: var(--toast-color);\n\n  &__body {\n    padding: 0;\n    font-family: 'Roboto';\n    font-weight: 500;\n    font-size: 12px;\n    line-height: 16px;\n    letter-spacing: 0.5px;\n    color: var(--main-background);\n    text-align: center;\n  }\n}\n"],"sourceRoot":""}]);
+}`, "",{"version":3,"sources":["webpack://./src/Presentation/ui-components/Toast/Toast.scss"],"names":[],"mappings":"AAAA;EACE,UAAA;AACF;;AAEA;EACE,gBAAA;EACA,iBAAA;EACA,uBAAA;EACA,kBAAA;EACA,oCAAA;AACF;AACE;EACE,UAAA;EACA,qBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,qBAAA;EACA,6BAAA;EACA,kBAAA;AACJ","sourcesContent":[".container {\n  width: 25%;\n}\n\n.qb-toast {\n  min-height: 24px;\n  padding: 4px 12px;\n  opacity: 60% !important;\n  border-radius: 4px;\n  background-color: var(--toast-color);\n\n  &__body {\n    padding: 0;\n    font-family: 'Roboto';\n    font-weight: 500;\n    font-size: 12px;\n    line-height: 16px;\n    letter-spacing: 0.5px;\n    color: var(--main-background);\n    text-align: center;\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -16765,7 +16765,7 @@ var MessageDTOMapper = /** @class */ (function () {
                 MessageDTOMapper.validateQBMessage(qbMessage);
             }
             catch (e) {
-                console.log('Error validating QBChatMessage: (' + JSON.stringify(qbMessage) + ')');
+                console.log("Error validating QBChatMessage: (".concat(JSON.stringify(qbMessage), ")"));
                 console.error(e);
             }
             dto.id = qbMessage._id;
@@ -19597,9 +19597,7 @@ var GetUsersByIdsUseCase = /** @class */ (function () {
         if (this.userIds.length > 0) {
             return this.usersRepository.getUsersFromRemote(this.userIds);
         }
-        else {
-            return this.usersRepository.getUsersFromLocal(this.userIds);
-        }
+        return this.usersRepository.getUsersFromLocal(this.userIds);
     };
     return GetUsersByIdsUseCase;
 }());
@@ -27639,7 +27637,11 @@ var __assign = (undefined && undefined.__assign) || function () {
 
 // eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
 var CreateDialog = function (_a) {
-    var createPrivateDialogOnClick = _a.createPrivateDialogOnClick, createPrivateDialogOnTouch = _a.createPrivateDialogOnTouch, createGroupDialogOnClick = _a.createGroupDialogOnClick, createGroupDialogOnTouch = _a.createGroupDialogOnTouch, createPublicDialogOnClick = _a.createPublicDialogOnClick, createPublicDialogOnTouch = _a.createPublicDialogOnTouch;
+    var createPrivateDialogOnClick = _a.createPrivateDialogOnClick, createPrivateDialogOnTouch = _a.createPrivateDialogOnTouch, createGroupDialogOnClick = _a.createGroupDialogOnClick, createGroupDialogOnTouch = _a.createGroupDialogOnTouch, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    createPublicDialogOnClick = _a.createPublicDialogOnClick, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    createPublicDialogOnTouch = _a.createPublicDialogOnTouch;
     return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components_containers_ColumnContainer_ColumnContainer__WEBPACK_IMPORTED_MODULE_2__["default"], __assign({ gapBetweenItem: "8px" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_UI_Buttons_ActiveButton_ActiveButton__WEBPACK_IMPORTED_MODULE_5__["default"], { content: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "item-type-dialog" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "item-type-dialog-icon" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_UI_svgs_Icons_Contents_Chat__WEBPACK_IMPORTED_MODULE_3__["default"], { width: "24", height: "24", applyZoom: true }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "item-type-dialog-name" }, { children: "Private" }))] })), clickAction: createPrivateDialogOnClick, touchAction: createPrivateDialogOnTouch }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_UI_Buttons_ActiveButton_ActiveButton__WEBPACK_IMPORTED_MODULE_5__["default"], { content: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "item-type-dialog" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "item-type-dialog-icon" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_UI_svgs_Icons_Contents_GroupChat__WEBPACK_IMPORTED_MODULE_4__["default"], { width: "32", height: "32", applyZoom: true }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "item-type-dialog-name" }, { children: "Group" }))] })), clickAction: createGroupDialogOnClick, touchAction: createGroupDialogOnTouch })] })));
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CreateDialog);
@@ -29154,16 +29156,16 @@ function LoaderComponent(theme) {
         }
         : {};
     var loaderClasses = [
-        theme && Object.keys(theme).length > 0 ? '' : 'loader',
+        theme && Object.keys(theme).length > 0 ? '' : 'qb-loader',
     ].join(' ');
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ style: loaderStyles, className: loaderClasses }, { children: theme ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_2__.LoaderSvg, { className: "loader" })) : (
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ style: loaderStyles, className: loaderClasses }, { children: theme ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_2__.LoaderSvg, { className: "qb-loader" })) : (
         // <Loader
         //   color={theme?.color}
         //   width={theme?.width}
         //   height={theme?.height}
         // />
         // <Loader />
-        (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_2__.LoaderSvg, { className: "loader" })) })));
+        (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_2__.LoaderSvg, { className: "qb-loader" })) })));
 }
 
 
@@ -34757,7 +34759,7 @@ function QuickBloxUIKitProvider(_a) {
     if (!accountData.accountKey ||
         !accountData.appId ||
         (!accountData.authKey && !accountData.sessionToken)) {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_toastify__WEBPACK_IMPORTED_MODULE_2__.ToastContainer, { position: "top-center", autoClose: 5000, bodyClassName: "toast__body", toastClassName: "toast", pauseOnHover: false, closeButton: false, hideProgressBar: true }), children] }));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_toastify__WEBPACK_IMPORTED_MODULE_2__.ToastContainer, { position: "top-center", autoClose: 5000, bodyClassName: "qb-toast__body", toastClassName: "qb-toast", pauseOnHover: false, closeButton: false, hideProgressBar: true }), children] }));
     }
     return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Provider, __assign({ value: {
             InitParams: InitParams,
@@ -35116,9 +35118,9 @@ var __assign = (undefined && undefined.__assign) || function () {
 function Avatar(_a) {
     var _b = _a.icon, icon = _b === void 0 ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_2__.UserSvg, {}) : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, className = _a.className, src = _a.src;
     if (src) {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('avatar', "avatar--".concat(size), className) }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: src, className: "avatar__image", alt: "Avatar" }) })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('qb-avatar', "qb-avatar--".concat(size), className) }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: src, className: "qb-avatar__image", alt: "Avatar" }) })));
     }
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('avatar', "avatar--".concat(size), className) }, { children: icon })));
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('qb-avatar', "qb-avatar--".concat(size), className) }, { children: icon })));
 }
 
 
@@ -35210,7 +35212,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 
 function Badge(_a) {
     var count = _a.count, limit = _a.limit, _b = _a.mute, mute = _b === void 0 ? false : _b, classNames = _a.classNames;
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('badge', { 'badge--mute': mute }, classNames) }, { children: limit && count > limit ? "".concat(limit, "+") : count })));
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('qb-badge', { 'qb-badge--mute': mute }, classNames) }, { children: limit && count > limit ? "".concat(limit, "+") : count })));
 }
 
 
@@ -35317,7 +35319,7 @@ function Button(_a) {
     var _b = _a.variant, variant = _b === void 0 ? 'default' : _b, className = _a.className, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.loading, loading = _d === void 0 ? false : _d, children = _a.children, rest = __rest(_a, ["variant", "className", "disabled", "loading", "children"]);
     return (
     // eslint-disable-next-line react/button-has-type
-    (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", __assign({ className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('button', "button--".concat(variant), { 'button--disabled': disabled }, className), disabled: disabled || loading }, rest, { children: loading && !disabled ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Loader_Loader__WEBPACK_IMPORTED_MODULE_2__["default"], { className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('button__loader', "button__loader--".concat(variant)) })) : (children) })));
+    (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", __assign({ className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('qb-button', "qb-button--".concat(variant), { 'qb-button--disabled': disabled }, className), disabled: disabled || loading }, rest, { children: loading && !disabled ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Loader_Loader__WEBPACK_IMPORTED_MODULE_2__["default"], { className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('button__loader', "button__loader--".concat(variant)) })) : (children) })));
 }
 
 
@@ -35395,7 +35397,7 @@ __webpack_require__.r(__webpack_exports__);
 
 function CheckBox(_a) {
     var disabled = _a.disabled, checked = _a.checked, onChange = _a.onChange;
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { className: "checkbox", type: "checkbox", checked: checked, disabled: disabled, onChange: function () { return onChange === null || onChange === void 0 ? void 0 : onChange(!checked); } }));
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { className: "qb-checkbox", type: "checkbox", checked: checked, disabled: disabled, onChange: function () { return onChange === null || onChange === void 0 ? void 0 : onChange(!checked); } }));
 }
 
 
@@ -36027,7 +36029,7 @@ __webpack_require__.r(__webpack_exports__);
 
 function Loader(_a) {
     var className = _a.className, _b = _a.size, size = _b === void 0 ? 'md' : _b;
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_2__.LoaderSvg, { className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('loader', size && "loader--".concat(size), className) }));
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_2__.LoaderSvg, { className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('qb-loader', size && "qb-loader--".concat(size), className) }));
 }
 
 
@@ -36879,11 +36881,8 @@ var __assign = (undefined && undefined.__assign) || function () {
 function Message(_a) {
     var userName = _a.userName, _b = _a.avatar, avatar = _b === void 0 ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Avatar_Avatar__WEBPACK_IMPORTED_MODULE_2__["default"], {}) : _b, time = _a.time, type = _a.type, status = _a.status, subtype = _a.subtype, _c = _a.enableSelect, enableSelect = _c === void 0 ? false : _c, _d = _a.isSelect, isSelect = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, onSelect = _a.onSelect, bottomPart = _a.bottomPart, additionalPart = _a.additionalPart, children = _a.children;
     return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "message-item" }, { children: [enableSelect && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_CheckBox_CheckBox__WEBPACK_IMPORTED_MODULE_3__["default"], { disabled: disabled, checked: isSelect, onChange: onSelect })), type === 'outgoing' ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "message-item__right" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "message-item__outgoing" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TimeAndStatus_TimeAndStatus__WEBPACK_IMPORTED_MODULE_5__["default"], { status: status, time: time }), additionalPart, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "message-item__outgoing__chat" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MessageCaption_MessageCaption__WEBPACK_IMPORTED_MODULE_4__["default"], { type: type, subtype: subtype, userName: userName }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: classnames__WEBPACK_IMPORTED_MODULE_1___default()(null, {
-                                        'reply-forward-message': subtype === 'reply' || subtype === 'forward'
-                                    }) }, { children: children }))] }))] })) }))) : ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "message-item__incoming-mes" }, { children: [avatar, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "message-item__incoming" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MessageCaption_MessageCaption__WEBPACK_IMPORTED_MODULE_4__["default"], { type: type, subtype: subtype, userName: userName }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "message-item__incoming__chat" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "message-item__incoming__chat__bubble" }, { children: [(subtype === 'reply' || subtype === 'forward')
-                                                    ?
-                                                        (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: 'reply-forward-message' }, { children: children }))
-                                                    : children, bottomPart] })), additionalPart, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TimeAndStatus_TimeAndStatus__WEBPACK_IMPORTED_MODULE_5__["default"], { time: time })] }))] }))] })) }))] })));
+                                        'reply-forward-message': subtype === 'reply' || subtype === 'forward',
+                                    }) }, { children: children }))] }))] })) }))) : ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "message-item__incoming-mes" }, { children: [avatar, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "message-item__incoming" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MessageCaption_MessageCaption__WEBPACK_IMPORTED_MODULE_4__["default"], { type: type, subtype: subtype, userName: userName }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "message-item__incoming__chat" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "message-item__incoming__chat__bubble" }, { children: [subtype === 'reply' || subtype === 'forward' ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "reply-forward-message" }, { children: children }))) : (children), bottomPart] })), additionalPart, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TimeAndStatus_TimeAndStatus__WEBPACK_IMPORTED_MODULE_5__["default"], { time: time })] }))] }))] })))] })));
 }
 
 
@@ -38154,9 +38153,9 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 var TextField = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (_a, ref) {
     var label = _a.label, icon = _a.icon, _b = _a.loading, loading = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, className = _a.className, id = _a.id, value = _a.value, onChange = _a.onChange, inputProps = __rest(_a, ["label", "icon", "loading", "disabled", "className", "id", "value", "onChange"]);
     var defaultId = (0,react__WEBPACK_IMPORTED_MODULE_1__.useId)();
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: classnames__WEBPACK_IMPORTED_MODULE_2___default()('text-field', {
-            'text-field--disabled': disabled,
-        }, className) }, { children: [label && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("label", __assign({ htmlFor: id || defaultId, className: "text-field__label" }, { children: label }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "text-field__wrapper" }, { children: [icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", __assign({ className: "text-field__icon" }, { children: icon })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", __assign({}, inputProps, { ref: ref, disabled: loading || disabled, className: "text-field__input", id: id || defaultId, value: value, onChange: function (e) { return onChange(e.currentTarget.value); } })), !loading && value && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_3__.RemoveSvg, { className: "text-field__reset", onClick: function () { return onChange(''); } })), loading && !disabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Loader_Loader__WEBPACK_IMPORTED_MODULE_4__["default"], { size: "sm", className: "text-field__loader" }))] }))] })));
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: classnames__WEBPACK_IMPORTED_MODULE_2___default()('qb-text-field', {
+            'qb-text-field--disabled': disabled,
+        }, className) }, { children: [label && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("label", __assign({ htmlFor: id || defaultId, className: "qb-text-field__label" }, { children: label }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "qb-text-field__wrapper" }, { children: [icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", __assign({ className: "qb-text-field__icon" }, { children: icon })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", __assign({}, inputProps, { ref: ref, disabled: loading || disabled, className: "qb-text-field__input", id: id || defaultId, value: value, onChange: function (e) { return onChange(e.currentTarget.value); } })), !loading && value && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_3__.RemoveSvg, { className: "qb-text-field__reset", onClick: function () { return onChange(''); } })), loading && !disabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Loader_Loader__WEBPACK_IMPORTED_MODULE_4__["default"], { size: "sm", className: "qb-text-field__loader" }))] }))] })));
 });
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TextField);
 
@@ -38254,7 +38253,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 var ToastContext = (0,react__WEBPACK_IMPORTED_MODULE_1__.createContext)(undefined);
 function ToastProvider(_a) {
     var children = _a.children;
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(ToastContext.Provider, __assign({ value: undefined }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_toastify__WEBPACK_IMPORTED_MODULE_2__.ToastContainer, { className: "container", position: "top-center", autoClose: 3000, bodyClassName: "toast__body", toastClassName: "toast", pauseOnHover: false, closeButton: false, hideProgressBar: true }), children] })));
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(ToastContext.Provider, __assign({ value: undefined }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_toastify__WEBPACK_IMPORTED_MODULE_2__.ToastContainer, { className: "container", position: "top-center", autoClose: 3000, bodyClassName: "qb-toast__body", toastClassName: "qb-toast", pauseOnHover: false, closeButton: false, hideProgressBar: true }), children] })));
 }