quickblox-react-ui-kit 0.4.5 → 0.4.6-beta.2

package/storybook-static/Presentation-ui-components-UserListItem-UserListItem-stories.8ddeec07.iframe.bundle.js

@@ -0,0 +1,2 @@
+/*! For license information please see Presentation-ui-components-UserListItem-UserListItem-stories.8ddeec07.iframe.bundle.js.LICENSE.txt */
+(self.webpackChunkquickblox_react_ui_kit=self.webpackChunkquickblox_react_ui_kit||[]).push([[585],{"./node_modules/classnames/index.js":(module,exports)=>{var __WEBPACK_AMD_DEFINE_RESULT__;!function(){"use strict";var hasOwn={}.hasOwnProperty;function classNames(){for(var classes="",i=0;i<arguments.length;i++){var arg=arguments[i];arg&&(classes=appendClass(classes,parseValue(arg)))}return classes}function parseValue(arg){if("string"==typeof arg||"number"==typeof arg)return arg;if("object"!=typeof arg)return"";if(Array.isArray(arg))return classNames.apply(null,arg);if(arg.toString!==Object.prototype.toString&&!arg.toString.toString().includes("[native code]"))return arg.toString();var classes="";for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&(classes=appendClass(classes,key));return classes}function appendClass(value,newClass){return newClass?value?value+" "+newClass:value+newClass:value}module.exports?(classNames.default=classNames,module.exports=classNames):void 0===(__WEBPACK_AMD_DEFINE_RESULT__=function(){return classNames}.apply(exports,[]))||(module.exports=__WEBPACK_AMD_DEFINE_RESULT__)}()},"./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Presentation/components/UI/Placeholders/LoaderComponent/LoaderComponent.scss":(module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/sourceMaps.js"),_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,".loader{animation:spin 2s linear infinite;min-width:44;min-height:44}.loader svg path{fill:var(--main-elements)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}","",{version:3,sources:["webpack://./src/Presentation/components/UI/Placeholders/LoaderComponent/LoaderComponent.scss"],names:[],mappings:"AAIA,QACE,iCAAA,CAEA,YANmB,CAOnB,aANoB,CAIpB,iBAAA,yBANyB,CAW3B,gBACE,GACE,sBAAA,CAEF,KACE,wBAAA,CAAA",sourcesContent:["$default-background-color: var(--main-elements);\r\n$default-width-icon: 44;\r\n$default-height-icon: 44;\r\n\r\n.loader {\r\n  animation: spin 2s linear infinite;\r\n  svg path {fill: $default-background-color};\r\n  min-width: $default-width-icon;\r\n  min-height: $default-height-icon;\r\n}\r\n\r\n@keyframes spin {\r\n  0% {\r\n    transform: rotate(0deg);\r\n  }\r\n  100% {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n"],sourceRoot:""}]);const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Presentation/components/containers/ScrollableContainer/ScrollableContainer.scss":(module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/sourceMaps.js"),_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,".list{display:flex;flex-direction:column;overflow:hidden;position:relative;width:100%}.list .spinner{display:block;height:16px;left:0;position:absolute;right:0;top:-16px;transition:all .2s ease}.list .spinner.active{top:8px}.list .list-content{flex:1;overflow-x:hidden;overflow-y:auto;width:100%}.list ::-webkit-scrollbar{display:none;width:0px !important;background:rgba(0,0,0,0)}.list ::-webkit-scrollbar-thumb{background:rgba(0,0,0,0)}","",{version:3,sources:["webpack://./src/Presentation/components/containers/ScrollableContainer/ScrollableContainer.scss"],names:[],mappings:"AAAA,MACE,YAAA,CACA,qBAAA,CACA,eAAA,CACA,iBAAA,CACA,UAAA,CAIF,eACE,aAAA,CACA,WAAA,CACA,MAAA,CACA,iBAAA,CACA,OAAA,CACA,SAAA,CACA,uBAAA,CAGF,sBACE,OAAA,CAGF,oBACE,MAAA,CACA,iBAAA,CAEA,eAAA,CACA,UAAA,CAIA,0BACE,YAAA,CACA,oBAAA,CACA,wBAAA,CAEF,gCACE,wBAAA",sourcesContent:[".list {\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow: hidden;\r\n  position: relative;\r\n  width: 100%;\r\n\r\n}\r\n\r\n.list .spinner {\r\n  display: block;\r\n  height: 16px;\r\n  left: 0;\r\n  position: absolute;\r\n  right: 0;\r\n  top: -16px;\r\n  transition: all 0.2s ease;\r\n}\r\n\r\n.list .spinner.active {\r\n  top: 8px;\r\n}\r\n\r\n.list .list-content {\r\n  flex: 1;\r\n  overflow-x: hidden;\r\n  //overflow-y: hidden;\r\n  overflow-y: auto;\r\n  width: 100%;\r\n}\r\n\r\n.list {\r\n  ::-webkit-scrollbar{\r\n    display: none;\r\n    width: 0px !important;\r\n    background: transparent;\r\n  }\r\n  ::-webkit-scrollbar-thumb {\r\n    background: transparent;\r\n  }\r\n  //:hover{\r\n  //  overflow-y: scroll;\r\n  //}\r\n}\r\n\r\n"],sourceRoot:""}]);const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Presentation/ui-components/Avatar/Avatar.scss":(module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/sourceMaps.js"),_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,".avatar{display:flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;background-color:var(--disabled-elements);color:var(--secondary-text)}.avatar,.avatar *{box-sizing:border-box}.avatar svg{height:26px;width:26px;fill:var(--tertiary-elements)}.avatar__image{object-fit:cover;width:100%;height:100%}.avatar--xs{width:32px;height:32px}.avatar--sm{width:36px;height:36px}.avatar--md{width:40px;height:40px}.avatar--lg{width:56px;height:56px}.avatar--lg svg{height:33px;width:33px}.avatar--xl{width:64px;height:64px}.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,QACE,YAAA,CACA,aAAA,CACA,kBAAA,CACA,sBAAA,CAEA,eAAA,CACA,iBAAA,CACA,yCAAA,CACA,2BAAA,CCVA,kBAEE,qBAAA,CDYF,YACE,WAAA,CACA,UAAA,CACA,6BAAA,CAGF,eACE,gBAAA,CACA,UAAA,CACA,WAAA,CAGF,YACE,UAAA,CACA,WAAA,CAGF,YACE,UAAA,CACA,WAAA,CAGF,YACE,UAAA,CACA,WAAA,CAGF,YACE,UAAA,CACA,WAAA,CAEA,gBACE,WAAA,CACA,UAAA,CAIJ,YACE,UAAA,CACA,WAAA,CAGF,aACE,UAAA,CACA,WAAA",sourcesContent:["@use '../../themes/styles/mixins' as *;\r\n\r\n.avatar {\r\n  display: flex;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  overflow: hidden;\r\n  border-radius: 50%;\r\n  background-color: var(--disabled-elements);\r\n  color: var(--secondary-text);\r\n\r\n  @include applyBorderBox;\r\n\r\n  svg {\r\n    height: 26px;\r\n    width: 26px;\r\n    fill: var(--tertiary-elements);\r\n  }\r\n\r\n  &__image {\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n  }\r\n\r\n  &--xs {\r\n    width: 32px;\r\n    height: 32px;\r\n  }\r\n\r\n  &--sm {\r\n    width: 36px;\r\n    height: 36px;\r\n  }\r\n\r\n  &--md {\r\n    width: 40px;\r\n    height: 40px;\r\n  }\r\n\r\n  &--lg {\r\n    width: 56px;\r\n    height: 56px;\r\n\r\n    svg {\r\n      height: 33px;\r\n      width: 33px;\r\n    }\r\n  }\r\n\r\n  &--xl {\r\n    width: 64px;\r\n    height: 64px;\r\n  }\r\n\r\n  &--xxl {\r\n    width: 80px;\r\n    height: 80px;\r\n  }\r\n}\r\n","@mixin applyBorderBox {\r\n  &,\r\n  * {\r\n    box-sizing: border-box;\r\n  }\r\n}\r\n"],sourceRoot:""}]);const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Presentation/ui-components/CheckBox/CheckBox.scss":(module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/sourceMaps.js"),_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,".checkbox,.checkbox-field{display:flex;align-items:center;flex-shrink:0;border-radius:4px;padding:4px;justify-content:center}.checkbox-field>input{z-index:-1;opacity:0}.checkbox-field .icon-checkmark{width:18px;height:18px;fill:var(--main-elements)}.checkbox-field .icon-check{width:18px;height:18px;fill:var(--secondary-elements)}.checkbox-field.disabled .icon-check{fill:var(--disabled-elements);cursor:not-allowed}","",{version:3,sources:["webpack://./src/Presentation/ui-components/CheckBox/CheckBox.scss"],names:[],mappings:"AAAA,0BACE,YAAA,CACA,kBAAA,CACA,aAAA,CACA,iBAAA,CACA,WAAA,CACA,sBAAA,CAKF,sBAEE,UAAA,CACA,SAAA,CAGF,gCAEE,UAAA,CACA,WAAA,CACA,yBAAA,CAIF,4BAEE,UAAA,CACA,WAAA,CACA,8BAAA,CAGF,qCACE,6BAAA,CACA,kBAAA",sourcesContent:[".checkbox, .checkbox-field {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-shrink: 0;\r\n  border-radius: 4px;\r\n  padding: 4px;\r\n  justify-content: center;\r\n  //width: 18px;\r\n  //height: 18px;\r\n}\r\n\r\n.checkbox-field > input {\r\n  //position: fixed;\r\n  z-index: -1;\r\n  opacity: 0;\r\n}\r\n\r\n.checkbox-field .icon-checkmark {\r\n  //position: fixed;\r\n  width: 18px;\r\n  height: 18px;\r\n  fill: var(--main-elements);\r\n\r\n}\r\n\r\n.checkbox-field .icon-check {\r\n  //position: fixed;\r\n  width: 18px;\r\n  height: 18px;\r\n  fill: var(--secondary-elements);\r\n}\r\n\r\n.checkbox-field.disabled .icon-check{\r\n  fill: var(--disabled-elements);\r\n  cursor: not-allowed;\r\n}\r\n\r\n\r\n"],sourceRoot:""}]);const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Presentation/ui-components/UserListItem/UserListItem.scss":(module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/sourceMaps.js"),_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,".user-list-item{display:flex;align-items:center;justify-content:space-between;height:56px;padding:8px 19px 8px 16px;gap:16px;border-bottom:1px solid var(--divider)}.user-list-item--disabled{cursor:not-allowed;color:var(--disabled-elements);fill:var(--disabled-elements)}.user-list-item__avatar{display:flex;align-items:center;justify-content:space-between}.user-list-item__name{margin-left:16px;font-weight:400;font-size:16px;line-height:24px;letter-spacing:.15px;color:var(--main-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:180px}","",{version:3,sources:["webpack://./src/Presentation/ui-components/UserListItem/UserListItem.scss"],names:[],mappings:"AAAA,gBACE,YAAA,CACA,kBAAA,CACA,6BAAA,CAEA,WAAA,CACA,yBAAA,CACA,QAAA,CACA,sCAAA,CAGA,0BACE,kBAAA,CACA,8BAAA,CACA,6BAAA,CAGF,wBACE,YAAA,CACA,kBAAA,CACA,6BAAA,CAGF,sBACE,gBAAA,CACA,eAAA,CACA,cAAA,CACA,gBAAA,CACA,oBAAA,CACA,sBAAA,CACA,kBAAA,CACA,eAAA,CACA,sBAAA,CACA,WAAA",sourcesContent:[".user-list-item {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n\r\n  height: 56px;\r\n  padding: 8px 19px 8px 16px;\r\n  gap: 16px;\r\n  border-bottom: 1px solid var(--divider);\r\n\r\n\r\n  &--disabled {\r\n    cursor: not-allowed;\r\n    color: var(--disabled-elements);\r\n    fill: var(--disabled-elements);\r\n  }\r\n\r\n  &__avatar {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n  }\r\n\r\n  &__name {\r\n    margin-left: 16px;\r\n    font-weight: 400;\r\n    font-size: 16px;\r\n    line-height: 24px;\r\n    letter-spacing: 0.15px;\r\n    color: var(--main-text);\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    width: 180px;\r\n  }\r\n}\r\n"],sourceRoot:""}]);const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./src/Presentation/ui-components/Avatar/Avatar.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>Avatar_Avatar_Avatar});var react=__webpack_require__("./node_modules/react/index.js"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),icons=__webpack_require__("./src/Presentation/icons/index.ts"),injectStylesIntoStyleTag=__webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),styleDomAPI=__webpack_require__("./node_modules/style-loader/dist/runtime/styleDomAPI.js"),styleDomAPI_default=__webpack_require__.n(styleDomAPI),insertBySelector=__webpack_require__("./node_modules/style-loader/dist/runtime/insertBySelector.js"),insertBySelector_default=__webpack_require__.n(insertBySelector),setAttributesWithoutAttributes=__webpack_require__("./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),setAttributesWithoutAttributes_default=__webpack_require__.n(setAttributesWithoutAttributes),insertStyleElement=__webpack_require__("./node_modules/style-loader/dist/runtime/insertStyleElement.js"),insertStyleElement_default=__webpack_require__.n(insertStyleElement),styleTagTransform=__webpack_require__("./node_modules/style-loader/dist/runtime/styleTagTransform.js"),styleTagTransform_default=__webpack_require__.n(styleTagTransform),Avatar=__webpack_require__("./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Presentation/ui-components/Avatar/Avatar.scss"),options={};options.styleTagTransform=styleTagTransform_default(),options.setAttributes=setAttributesWithoutAttributes_default(),options.insert=insertBySelector_default().bind(null,"head"),options.domAPI=styleDomAPI_default(),options.insertStyleElement=insertStyleElement_default();injectStylesIntoStyleTag_default()(Avatar.A,options);Avatar.A&&Avatar.A.locals&&Avatar.A.locals;function Avatar_Avatar_Avatar(_ref){let{icon=react.createElement(icons.Uh,null),size="md",className,src}=_ref;return src?react.createElement("div",{className:classnames_default()("avatar",`avatar--${size}`,className)},react.createElement("img",{src,className:"avatar__image",alt:"Avatar"})):react.createElement("div",{className:classnames_default()("avatar",`avatar--${size}`,className)},icon)}Avatar_Avatar_Avatar.__docgenInfo={description:"",methods:[],displayName:"Avatar",props:{size:{required:!1,tsType:{name:"union",raw:"'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'",elements:[{name:"literal",value:"'xs'"},{name:"literal",value:"'sm'"},{name:"literal",value:"'md'"},{name:"literal",value:"'lg'"},{name:"literal",value:"'xl'"},{name:"literal",value:"'xxl'"}]},description:"",defaultValue:{value:"'md'",computed:!1}},icon:{required:!1,tsType:{name:"ReactElement"},description:"",defaultValue:{value:"<UserSvg />",computed:!1}},className:{required:!1,tsType:{name:"string"},description:""},src:{required:!1,tsType:{name:"string"},description:""}}}},"./src/Presentation/ui-components/CheckBox/CheckBox.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>CheckBox_CheckBox_CheckBox});var react=__webpack_require__("./node_modules/react/index.js"),injectStylesIntoStyleTag=__webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),styleDomAPI=__webpack_require__("./node_modules/style-loader/dist/runtime/styleDomAPI.js"),styleDomAPI_default=__webpack_require__.n(styleDomAPI),insertBySelector=__webpack_require__("./node_modules/style-loader/dist/runtime/insertBySelector.js"),insertBySelector_default=__webpack_require__.n(insertBySelector),setAttributesWithoutAttributes=__webpack_require__("./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),setAttributesWithoutAttributes_default=__webpack_require__.n(setAttributesWithoutAttributes),insertStyleElement=__webpack_require__("./node_modules/style-loader/dist/runtime/insertStyleElement.js"),insertStyleElement_default=__webpack_require__.n(insertStyleElement),styleTagTransform=__webpack_require__("./node_modules/style-loader/dist/runtime/styleTagTransform.js"),styleTagTransform_default=__webpack_require__.n(styleTagTransform),CheckBox=__webpack_require__("./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Presentation/ui-components/CheckBox/CheckBox.scss"),options={};options.styleTagTransform=styleTagTransform_default(),options.setAttributes=setAttributesWithoutAttributes_default(),options.insert=insertBySelector_default().bind(null,"head"),options.domAPI=styleDomAPI_default(),options.insertStyleElement=insertStyleElement_default();injectStylesIntoStyleTag_default()(CheckBox.A,options);CheckBox.A&&CheckBox.A.locals&&CheckBox.A.locals;var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),icons=__webpack_require__("./src/Presentation/icons/index.ts");function CheckBox_CheckBox_CheckBox(_ref){let{disabled,checked,onChange}=_ref;return react.createElement("label",{className:classnames_default()("checkbox-field",{disabled})},checked?react.createElement(icons.uM,{className:"icon-checkmark"}):react.createElement(icons.av,{className:"icon-check"}),react.createElement("input",{type:"checkbox",onChange:()=>onChange?.(!checked),disabled}))}CheckBox_CheckBox_CheckBox.__docgenInfo={description:"",methods:[],displayName:"CheckBox",props:{disabled:{required:!0,tsType:{name:"boolean"},description:""},checked:{required:!0,tsType:{name:"boolean"},description:""},onChange:{required:!1,tsType:{name:"signature",type:"function",raw:"(isSelected: boolean) => void",signature:{arguments:[{type:{name:"boolean"},name:"isSelected"}],return:{name:"void"}}},description:""}}}},"./src/Presentation/ui-components/UserListItem/UserListItem.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{UserList:()=>UserList,UserListItemDefault:()=>UserListItemDefault,__namedExportsOrder:()=>__namedExportsOrder,default:()=>UserListItem_stories});var react=__webpack_require__("./node_modules/react/index.js"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),Avatar=__webpack_require__("./src/Presentation/ui-components/Avatar/Avatar.tsx"),CheckBox=__webpack_require__("./src/Presentation/ui-components/CheckBox/CheckBox.tsx"),injectStylesIntoStyleTag=__webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),styleDomAPI=__webpack_require__("./node_modules/style-loader/dist/runtime/styleDomAPI.js"),styleDomAPI_default=__webpack_require__.n(styleDomAPI),insertBySelector=__webpack_require__("./node_modules/style-loader/dist/runtime/insertBySelector.js"),insertBySelector_default=__webpack_require__.n(insertBySelector),setAttributesWithoutAttributes=__webpack_require__("./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),setAttributesWithoutAttributes_default=__webpack_require__.n(setAttributesWithoutAttributes),insertStyleElement=__webpack_require__("./node_modules/style-loader/dist/runtime/insertStyleElement.js"),insertStyleElement_default=__webpack_require__.n(insertStyleElement),styleTagTransform=__webpack_require__("./node_modules/style-loader/dist/runtime/styleTagTransform.js"),styleTagTransform_default=__webpack_require__.n(styleTagTransform),UserListItem=__webpack_require__("./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Presentation/ui-components/UserListItem/UserListItem.scss"),options={};options.styleTagTransform=styleTagTransform_default(),options.setAttributes=setAttributesWithoutAttributes_default(),options.insert=insertBySelector_default().bind(null,"head"),options.domAPI=styleDomAPI_default(),options.insertStyleElement=insertStyleElement_default();injectStylesIntoStyleTag_default()(UserListItem.A,options);UserListItem.A&&UserListItem.A.locals&&UserListItem.A.locals;function UserListItem_UserListItem_UserListItem(_ref){let{avatarUrl,userName,checked=!1,disabled=!1,onChange,className}=_ref;return react.createElement("div",{className:classnames_default()("user-list-item",{"user-list-item--disabled":disabled},className)},react.createElement("div",{className:"user-list-item__avatar"},react.createElement(Avatar.A,{src:avatarUrl}),react.createElement("span",{className:"user-list-item__name"},userName)),onChange&&react.createElement(CheckBox.A,{onChange,disabled,checked}))}UserListItem_UserListItem_UserListItem.__docgenInfo={description:"",methods:[],displayName:"UserListItem",props:{userName:{required:!0,tsType:{name:"string"},description:""},avatarUrl:{required:!1,tsType:{name:"string"},description:""},checked:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},disabled:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},onChange:{required:!1,tsType:{name:"signature",type:"function",raw:"(checked: boolean) => void",signature:{arguments:[{type:{name:"boolean"},name:"checked"}],return:{name:"void"}}},description:""},className:{required:!1,tsType:{name:"string"},description:""}}};var ScrollableContainer=__webpack_require__("./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Presentation/components/containers/ScrollableContainer/ScrollableContainer.scss"),ScrollableContainer_options={};ScrollableContainer_options.styleTagTransform=styleTagTransform_default(),ScrollableContainer_options.setAttributes=setAttributesWithoutAttributes_default(),ScrollableContainer_options.insert=insertBySelector_default().bind(null,"head"),ScrollableContainer_options.domAPI=styleDomAPI_default(),ScrollableContainer_options.insertStyleElement=insertStyleElement_default();injectStylesIntoStyleTag_default()(ScrollableContainer.A,ScrollableContainer_options);ScrollableContainer.A&&ScrollableContainer.A.locals&&ScrollableContainer.A.locals;var LoaderComponent=__webpack_require__("./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Presentation/components/UI/Placeholders/LoaderComponent/LoaderComponent.scss"),LoaderComponent_options={};LoaderComponent_options.styleTagTransform=styleTagTransform_default(),LoaderComponent_options.setAttributes=setAttributesWithoutAttributes_default(),LoaderComponent_options.insert=insertBySelector_default().bind(null,"head"),LoaderComponent_options.domAPI=styleDomAPI_default(),LoaderComponent_options.insertStyleElement=insertStyleElement_default();injectStylesIntoStyleTag_default()(LoaderComponent.A,LoaderComponent_options);LoaderComponent.A&&LoaderComponent.A.locals&&LoaderComponent.A.locals;var icons=__webpack_require__("./src/Presentation/icons/index.ts");function LoaderComponent_LoaderComponent_LoaderComponent(){let theme=arguments.length>0&&void 0!==arguments[0]?arguments[0]:void 0;const loaderStyles=theme?{animation:"spin 1s linear infinite",svg:{path:{fill:theme?.color?theme?.color:""}},minWidth:theme?.width,minHeight:theme?.height,Loader:{fill:theme?.color?theme?.color:""},fill:theme?.color?theme?.color:""}:{},loaderClasses=[theme&&Object.keys(theme).length>0?"":"loader"].join(" ");return React.createElement("div",{style:loaderStyles,className:loaderClasses},React.createElement(icons.iO,{className:"loader"}))}function ScrollableContainer_ScrollableContainer_ScrollableContainer(props){const{className,rootStyles,mainContainerStyles,data,ListEmptyComponent,onEndReached,onEndReachedThreshold,refreshing,autoScrollToBottom,renderItem}=props,container=(0,react.useRef)(null),messageEndRef=(0,react.useRef)(null),scrollToBottom=()=>{console.log("call scrollToBottom start"),autoScrollToBottom&&messageEndRef.current?.scrollIntoView({behavior:"smooth"})};return(0,react.useEffect)((()=>{console.log("useEffect []"),autoScrollToBottom&&scrollToBottom()}),[]),(0,react.useEffect)((()=>{console.log("useEffect messages"),autoScrollToBottom&&scrollToBottom()}),[data.length]),console.log("çount items to scroll:",data.length),console.log("data to scrolling: ",JSON.stringify(data)),react.createElement("div",{style:rootStyles,className:classnames_default()("list",className)},refreshing&&react.createElement("div",null,react.createElement(LoaderComponent_LoaderComponent_LoaderComponent,{width:"44",height:"44",color:"var(--color-background-info)"})),data&&data.length?react.createElement("div",{style:mainContainerStyles,className:"list-content",onScroll:()=>{if(console.log("call scrollHandler"),container.current){const{scrollHeight,clientHeight,scrollTop}=container.current,scrollOffset=(scrollTop+clientHeight)/scrollHeight;let endReached=!1;"number"==typeof onEndReachedThreshold?scrollOffset>=onEndReachedThreshold&&(endReached=!0):scrollOffset>=.99&&(endReached=!0),endReached&&onEndReached&&onEndReached()}},ref:container},data.map(((it,index)=>renderItem(it,index))),react.createElement("div",{style:{float:"left",clear:"both"},ref:messageEndRef})):!refreshing&&ListEmptyComponent&&react.createElement(ListEmptyComponent,null))}LoaderComponent_LoaderComponent_LoaderComponent.__docgenInfo={description:"",methods:[],displayName:"LoaderComponent"},ScrollableContainer_ScrollableContainer_ScrollableContainer.__docgenInfo={description:"",methods:[],displayName:"ScrollableContainer",props:{className:{required:!1,tsType:{name:"string"},description:""},rootStyles:{required:!1,tsType:{name:"ReactCSSProperties",raw:"React.CSSProperties"},description:""},mainContainerStyles:{required:!1,tsType:{name:"ReactCSSProperties",raw:"React.CSSProperties"},description:""},data:{required:!0,tsType:{name:"Array",elements:[{name:"T"}],raw:"Array<T>"},description:""},ListEmptyComponent:{required:!1,tsType:{name:"union",raw:"React.ComponentClass | React.FunctionComponent",elements:[{name:"ReactComponentClass",raw:"React.ComponentClass"},{name:"ReactFunctionComponent",raw:"React.FunctionComponent"}]},description:""},onEndReached:{required:!1,tsType:{name:"VoidFunction"},description:""},onEndReachedThreshold:{required:!1,tsType:{name:"number"},description:""},refreshing:{required:!1,tsType:{name:"boolean"},description:""},autoScrollToBottom:{required:!1,tsType:{name:"boolean"},description:""},renderItem:{required:!0,tsType:{name:"signature",type:"function",raw:"(item: T, index: number) => React.ReactElement | null",signature:{arguments:[{type:{name:"T"},name:"item"},{type:{name:"number"},name:"index"}],return:{name:"union",raw:"React.ReactElement | null",elements:[{name:"ReactReactElement",raw:"React.ReactElement"},{name:"null"}]}}},description:""}}};const UserListItem_stories={title:"@quickblox-react-ui-kit/Presentation/ui-components/UserListItem",component:UserListItem_UserListItem_UserListItem,tags:["autodocs"],parameters:{layout:"centered"},args:{className:"",disabled:!1,checked:!1,userName:"",avatarUrl:""},argTypes:{avatarUrl:{table:{type:{summary:"url"}},description:"Avatar image source"},userName:{table:{type:{summary:"string"},defaultValue:{summary:""}},description:"User name"},disabled:{table:{type:{summary:"boolean"},defaultValue:{summary:"false"}},description:"Active"},checked:{table:{type:{summary:"boolean"},defaultValue:{summary:"true"}},description:"Checkbox"},onChange:{table:{defaultValue:{summary:"(checked: boolean) => void"},type:{summary:"function"}},description:"Checkbox control"},className:{table:{defaultValue:{summary:"string"},type:{summary:"string"}},description:"Additional classes"}}};function UserListExample(){const[users,setUser]=(0,react.useState)([{name:"User 1",id:0,checked:!0},{name:"User 2",id:1,checked:!1},{name:"User 3",id:2,checked:!1},{name:"User 4",id:3,checked:!0},{name:"User 5",id:4,checked:!0}]);return react.createElement(ScrollableContainer_ScrollableContainer_ScrollableContainer,{data:users,renderItem:user=>react.createElement(UserListItem_UserListItem_UserListItem,{userName:user.name,checked:user.checked,onChange:value=>{setUser((prevUsers=>prevUsers.map((prevUser=>prevUser.id===user.id?{...prevUser,checked:value}:prevUser))))}}),onEndReachedThreshold:.8,refreshing:!1})}function UserListItemExample(){const[checked,setChecked]=(0,react.useState)(!1);return react.createElement(UserListItem_UserListItem_UserListItem,{userName:"User name",checked,onChange:value=>{setChecked(value)}})}const UserListItemDefault={name:"UserListItem Default",render:()=>react.createElement(UserListItemExample,null)},UserList={name:"UserListItem Multiple",render:()=>react.createElement(UserListExample,null)},__namedExportsOrder=["UserListItemDefault","UserList"];UserListItemDefault.parameters={...UserListItemDefault.parameters,docs:{...UserListItemDefault.parameters?.docs,source:{originalSource:"{\n  name: 'UserListItem Default',\n  render: () => <UserListItemExample />\n}",...UserListItemDefault.parameters?.docs?.source}}},UserList.parameters={...UserList.parameters,docs:{...UserList.parameters?.docs,source:{originalSource:"{\n  name: 'UserListItem Multiple',\n  render: () => <UserListExample />\n}",...UserList.parameters?.docs?.source}}}}}]);

package/storybook-static/Presentation-ui-components-UserListItem-UserListItem-stories.8ddeec07.iframe.bundle.js.LICENSE.txt

@@ -0,0 +1,5 @@
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/

package/storybook-static/docs-Introduction-mdx.024f959d.iframe.bundle.js

@@ -0,0 +1 @@
+(self.webpackChunkquickblox_react_ui_kit=self.webpackChunkquickblox_react_ui_kit||[]).push([[485],{"./node_modules/@mdx-js/react/lib/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{R:()=>useMDXComponents,x:()=>MDXProvider});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");const emptyComponents={},MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext(emptyComponents);function useMDXComponents(components){const contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo((function(){return"function"==typeof components?components(contextComponents):{...contextComponents,...components}}),[contextComponents,components])}function MDXProvider(properties){let allComponents;return allComponents=properties.disableParentContext?"function"==typeof properties.components?properties.components(emptyComponents):properties.components||emptyComponents:useMDXComponents(properties.components),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},properties.children)}},"./node_modules/@storybook/blocks/dist sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/blocks/dist sync recursive",module.exports=webpackEmptyContext},"./node_modules/@storybook/core/dist/components sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/core/dist/components sync recursive",module.exports=webpackEmptyContext},"./node_modules/@storybook/core/dist/theming sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/core/dist/theming sync recursive",module.exports=webpackEmptyContext},"./src/docs/Introduction.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>MDXContent});__webpack_require__("./node_modules/react/index.js");var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/react/jsx-runtime.js"),D_Work_QuickBlox_react_ui_kit_private_node_modules_storybook_addon_docs_dist_shims_mdx_react_shim_mjs__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),_storybook_blocks__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs");function _createMdxContent(props){const _components={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,D_Work_QuickBlox_react_ui_kit_private_node_modules_storybook_addon_docs_dist_shims_mdx_react_shim_mjs__WEBPACK_IMPORTED_MODULE_2__.R)(),...props.components};return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_storybook_blocks__WEBPACK_IMPORTED_MODULE_3__.W8,{title:"📕 Documentation/Introduction"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h1,{id:"introduction",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"https://docs.quickblox.com/docs/react-uikit-send-your-first-message#importing-dependencies-in-the-project",rel:"nofollow",children:"Introduction"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"The QuickBlox UIKit for React comprises a collection of pre-assembled UI components that enable effortless creation of an in-app chat equipped with all the necessary messaging functionalities. Our development kit encompasses light and dark themes, colors, and various other features. These components can be personalized to fashion an engaging messaging interface that reflects your brand's distinct identity."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"The QuickBlox UIKit fully supports both private and group dialogs. To initiate the process of sending a message from the ground up using Java or Kotlin, please refer to the instructions provided in the guide below."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h3,{id:"installation",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"https://docs.quickblox.com/docs/react-uikit-send-your-first-message#step2-adding-dependencies-to-a-react-project",rel:"nofollow",children:"Installation"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"To successfully integrate QuickBlox functionality into your React project, you need to add two main dependencies: quickblox and quickblox-react-ui-kit. By following the documentation, you can easily add these packages to your project."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-bash",children:"npm install quickblox --save\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-bash",children:"npm install quickblox-react-ui-kit --save\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h4,{id:"importing-dependencies-in-the-project",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"https://docs.quickblox.com/docs/react-uikit-send-your-first-message#importing-dependencies-in-the-project",rel:"nofollow",children:"Importing Dependencies in the Project"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"Open the file where you want to use QuickBlox functionality, such as App.tsx\r\nAdd the following lines at the beginning of the file to import the dependencies:"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.blockquote,{children:["\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.strong,{children:"Note: We are using // @ts-ignor in TypeScript because QuickBlox SDK doesn't share types."})}),"\n"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-ts",children:"// @ts-ignore\r\nimport * as QB from 'quickblox/quickblox';\r\nimport 'quickblox-react-ui-kit';\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h3,{id:"adding-qbconfigts-file-to-your-react-application",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"https://docs.quickblox.com/docs/react-uikit-send-your-first-message#step-3-adding-qbconfigts-file-to-your-react-application",rel:"nofollow",children:"Adding QBconfig.ts File to Your React Application"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"To ensure proper configuration and functionality of the QuickBlox UIKit in your React application, it is essential to add a QBconfig.ts file to the src folder. This file allows you to define the necessary parameters for the QuickBlox UIKit.\r\nThe QBconfig.ts file contains various configuration settings that determine how the QuickBlox UIKit interacts with the QuickBlox JavaScript SDK and the backend services. These settings include:"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"appId: This parameter represents the unique identifier assigned to your QuickBlox application. It helps establish a connection between the frontend and backend components.\r\nauthKey and authSecret: These parameters are used for authentication purposes. They ensure secure communication between your application and the QuickBlox backend.\r\naccountKey: This parameter identifies your QuickBlox account and provides access to the associated services.\r\napiEndpoint and chatEndpoint: These parameters define the API and chat endpoints provided by QuickBlox. They specify the URLs to which the QuickBlox UIKit will send requests for various functionalities."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-ts",children:"export const QBConfig = {\r\n  credentials: {\r\n    appId: YOUR_APP_ID_FROM_ADMIN_PANEL,\r\n    accountKey: 'YOUR_ACCOUNT_KEY_FROM_ADMIN_PANEL',\r\n    authKey: 'YOUR_AUTH_KEY_FROM_ADMIN_PANEL',\r\n    authSecret: 'YOUR_AUTH_SECRET_FROM_ADMIN_PANEL',\r\n    sessionToken: '',\r\n  },\r\n  appConfig: {\r\n    chatProtocol: {\r\n      Active: 2,\r\n    },\r\n    debug: false,\r\n    endpoints: {\r\n      apiEndpoint: 'https://api.quickblox.com',\r\n      chatEndpoint: 'chat.quickblox.com',\r\n    },\r\n    on: {\r\n      async sessionExpired(handleResponse: any, retry: any) {\r\n        console.log(`Test sessionExpired… ${handleResponse} ${retry}`);\r\n      },\r\n    },\r\n    streamManagement: {\r\n      Enable: true,\r\n    },\r\n  },\r\n};\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"In this example, make sure to replace the placeholder values (YOUR_APP_ID_FROM_ADMIN_PANEL, YOUR_ACCOUNT_KEY_FROM_ADMIN_PANEL, YOUR_AUTH_KEY_FROM_ADMIN_PANEL, YOUR_AUTH_SECRET_FROM_ADMIN_PANEL) with the actual values obtained from your QuickBlox application.\r\nBy adding the QBconfig.ts file to your React application, you ensure that the QuickBlox UIKit is properly configured and can interact seamlessly with the QuickBlox backend services."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.blockquote,{children:["\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.strong,{children:"Note: If you initialize your SDK using a session token, you need to not only fill the sessionToken field in QBConfig but also fill other properties in the same way as when using the initWithAppId method. See the link initialize QuickBlox SDK without Authorization Key and Secret."})}),"\n"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"Now we can add dependecies in our code. (Open your App.tsx and add that lines.)"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-ts",children:"import * as QB from 'quickblox/quickblox';\r\nimport 'quickblox-react-ui-kit';\r\nimport { QBConfig } from './QBconfig'; // this line is new\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h3,{id:"updating-the-project-structure-according-to-your-needs",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"https://docs.quickblox.com/docs/react-uikit-send-your-first-message#step-4-updating-the-project-structure-according-to-your-needs",rel:"nofollow",children:"Updating the project structure according to your needs"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:'In order to enhance the organization and maintainability of your project, it is recommended to make changes to the structure of the App.tsx in the src folder.\r\nYou need to add a constant called "currentUser" inside the App() function in the App.tsx file, which describes your user registered in the admin panel, and configure the QuickBloxUIKitProvider. Additionally, import the necessary entities from quickblox-react-ui-kit.\r\nAs a result, you should have the code like code below:'}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-ts",children:"import React from 'react';\r\nimport type { QBSession, QBUser } from 'quickblox/quickblox';\r\nimport {\r\n  QuickBloxUIKitProvider,\r\n  QuickBloxUIKitDesktopLayout,\r\n} from 'quickblox-react-ui-kit';\r\nimport { QBConfig } from '../../configs/QBconfig';\r\nimport Header from '../../components/Header';\r\nimport SettingModal from '../../components/modals/SettingModal';\r\nimport LogoutModal from '../../components/modals/LogoutModal';\r\n\r\ninterface AppProps {\r\n  session: QBSession;\r\n  logout: VoidFunction;\r\n}\r\n\r\nconst App = (props: AppProps) => {\r\n  const { session, logout } = props;\r\n  const [user, setUser] = useState<QBUser | null>(null);\r\n\r\n  return (\r\n    <QuickBloxUIKitProvider\r\n      maxFileSize={100 * 1000000}\r\n      accountData={{ ...QBConfig.credentials, sessionToken: session.token }}\r\n      qbConfig={{ ...QBConfig }}\r\n    >\r\n      <Header\r\n        avatarUrl={avatarUrl}\r\n        options={options}\r\n        handleChange={handleChange}\r\n        user={user}\r\n        regex={regex}\r\n      />\r\n      <QuickBloxUIKitDesktopLayout uikitHeightOffset={'40px'} />\r\n      <SettingModal\r\n        user={user}\r\n        avatarUrl={avatarUrl}\r\n        selectedValue={selectedValue}\r\n        setSelectedValue={setSelectedValue}\r\n        regex={regex}\r\n        setUser={setUser}\r\n      />\r\n      <LogoutModal\r\n        selectedValue={selectedValue}\r\n        setSelectedValue={setSelectedValue}\r\n        handleLogout={logout}\r\n      />\r\n    </QuickBloxUIKitProvider>\r\n  );\r\n};\r\n\r\nexport default App;\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"QuickBloxUIKitProvider can accept up to three parameters:"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.ul,{children:["\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.li,{children:"maxFileSize - controls the maximum size of uploaded files."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.li,{children:"accountData - information about the application's account data."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.li,{children:"loginData - information about the logged-in user."}),"\n"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"Let's add the QuickBlox UIKit chat layer - QuickBloxUIKitDesktopLayout - to the markup of the main component of the application."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"If we do not specify a sessionToken in accountData, it means that the login and session start process occurs within our application. In this case, it is necessary to perform the following fifth step in our instruction.\r\nHowever, if the session start and application login process is already performed in another application, such as on a server, and we already have a ready sessionToken, then we can skip the next step."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h3,{id:"configure-quickbloxuikitprovider",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"https://docs.quickblox.com/docs/react-uikit-send-your-first-message#step-5-configure-quickbloxuikitprovider",rel:"nofollow",children:"Configure QuickBloxUIKitProvider"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"To configure QuickBloxUIKitProvider and use QuickBloxUIKit in your application, follow these steps:\r\nInitialize DataContext:"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.ol,{children:["\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.li,{children:"To work with QuickBlox, it is necessary to initialize the UI Kit react DataContext. It contains important data and settings for using QuickBloxSDK. The DataContext connects various components of the application and provides them access to shared data."}),"\n"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-ts",children:"const qbUIKitContext: QBDataContextType = React.useContext(qbDataContext);\r\n\r\nconst [isUserAuthorized, setUserAuthorized] = React.useState(false);\r\nconst [isSDKInitialized, setSDKInitialized] = React.useState(false);\r\n\r\nconst prepareSDK = async (): Promise<void> => {\r\n  // check if we have installed SDK\r\n  if ((window as any).QB === undefined) {\r\n    if (QB !== undefined) {\r\n      (window as any).QB = QB;\r\n    } else {\r\n      let QBLib = require('quickblox/quickblox.min');\r\n      (window as any).QB = QBLib;\r\n    }\r\n  }\r\n\r\n  const APPLICATION_ID = QBConfig.credentials.appId;\r\n  const AUTH_KEY = QBConfig.credentials.authKey;\r\n  const AUTH_SECRET = QBConfig.credentials.authSecret;\r\n  const ACCOUNT_KEY = QBConfig.credentials.accountKey;\r\n  const CONFIG = QBConfig.appConfig;\r\n\r\n  QB.init(APPLICATION_ID, AUTH_KEY, AUTH_SECRET, ACCOUNT_KEY, CONFIG);\r\n};\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.ol,{start:"2",children:["\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.li,{children:"We need to add user authentication, so to do this, we will introduce two states and use the useEffect hook:"}),"\n"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-ts",children:"const [authorized, setAuthorized] = React.useState(false);\r\nconst [initedSDK, setInitedSDK] = React.useState(false);\r\n\r\n......\r\n\r\n useEffect(() => {\r\n    if (!isSDKInitialized) {\r\n      prepareSDK().then(result => {\r\n\r\n        QB.createSession(currentUser, async function (errorCreateSession: any, session: any) {\r\n          if (errorCreateSession) {\r\n            console.log('Create User Session has error:', JSON.stringify(errorCreateSession));\r\n          } else {\r\n            const userId: number = session.user_id;\r\n            const password: string = session.token;\r\n            const paramsConnect = { userId, password };\r\n\r\n            QB.chat.connect(paramsConnect, async function (errorConnect: any, resultConnect: any) {\r\n              if (errorConnect) {\r\n                console.log('Can not connect to chat server: ', errorConnect);\r\n              } else {\r\n                const authData: AuthorizationData = {\r\n                  userId: userId,\r\n                  password: password,\r\n                  userName: currentUser.login,\r\n                  sessionToken: session.token\r\n                };\r\n                await qbUIKitContext.authorize(authData);\r\n                setSDKInitialized(true);\r\n                setUserAuthorized(true);\r\n              }\r\n            });\r\n          }\r\n        });\r\n      }).catch(\r\n          e => {\r\n            console.log('init SDK has error: ', e)\r\n          });\r\n    }\r\n  }, []);\r\n\r\n  ......\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"After implementing all the steps, your App.tsx file should look like this. You can compare it this your code or copy it instead of."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-ts",children:"import React, { useEffect } from 'react';\r\n\r\n// @ts-ignore\r\nimport * as QB from 'quickblox/quickblox';\r\nimport {\r\n  QuickBloxUIKitProvider,\r\n  qbDataContext,\r\n  QuickBloxUIKitDesktopLayout,\r\n  LoginData,\r\n  AuthorizationData,\r\n  QBDataContextType,\r\n} from 'quickblox-react-ui-kit';\r\nimport { QBConfig } from './QBconfig';\r\nimport './App.css';\r\n\r\nfunction App() {\r\n  const currentUser: LoginData = {\r\n    login: '',\r\n    password: '',\r\n  };\r\n\r\n  const qbUIKitContext: QBDataContextType = React.useContext(qbDataContext);\r\n\r\n  const [isUserAuthorized, setUserAuthorized] = React.useState(false);\r\n  const [isSDKInitialized, setSDKInitialized] = React.useState(false);\r\n\r\n  const prepareSDK = async (): Promise<void> => {\r\n    // check if we have installed SDK\r\n    if ((window as any).QB === undefined) {\r\n      if (QB !== undefined) {\r\n        (window as any).QB = QB;\r\n      } else {\r\n        let QBLib = require('quickblox/quickblox.min');\r\n        (window as any).QB = QBLib;\r\n      }\r\n    }\r\n\r\n    const APPLICATION_ID = QBConfig.credentials.appId;\r\n    const AUTH_KEY = QBConfig.credentials.authKey;\r\n    const AUTH_SECRET = QBConfig.credentials.authSecret;\r\n    const ACCOUNT_KEY = QBConfig.credentials.accountKey;\r\n    const CONFIG = QBConfig.appConfig;\r\n\r\n    QB.init(APPLICATION_ID, AUTH_KEY, AUTH_SECRET, ACCOUNT_KEY, CONFIG);\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (!isSDKInitialized) {\r\n      prepareSDK()\r\n        .then((result) => {\r\n          QB.createSession(\r\n            currentUser,\r\n            async function (errorCreateSession: any, session: any) {\r\n              if (errorCreateSession) {\r\n                console.log(\r\n                  'Create User Session has error:',\r\n                  JSON.stringify(errorCreateSession),\r\n                );\r\n              } else {\r\n                const userId: number = session.user_id;\r\n                const password: string = session.token;\r\n                const paramsConnect = { userId, password };\r\n\r\n                QB.chat.connect(\r\n                  paramsConnect,\r\n                  async function (errorConnect: any, resultConnect: any) {\r\n                    if (errorConnect) {\r\n                      console.log(\r\n                        'Can not connect to chat server: ',\r\n                        errorConnect,\r\n                      );\r\n                    } else {\r\n                      const authData: AuthorizationData = {\r\n                        userId: userId,\r\n                        password: password,\r\n                        userName: currentUser.login,\r\n                        sessionToken: session.token,\r\n                      };\r\n                      await qbUIKitContext.authorize(authData);\r\n                      setSDKInitialized(true);\r\n                      setUserAuthorized(true);\r\n                    }\r\n                  },\r\n                );\r\n              }\r\n            },\r\n          );\r\n        })\r\n        .catch((e) => {\r\n          console.log('init SDK has error: ', e);\r\n        });\r\n    }\r\n  }, []);\r\n\r\n  return (\r\n    <div>\r\n      <QuickBloxUIKitProvider\r\n        maxFileSize={100 * 1000000}\r\n        accountData={{ ...QBConfig.credentials }}\r\n        loginData={{\r\n          login: currentUser.login,\r\n          password: currentUser.password,\r\n        }}\r\n      >\r\n        <div className=\"App\">\r\n          {\r\n            // React states indicating the ability to render UI\r\n            isSDKInitialized && isUserAuthorized ? (\r\n              <QuickBloxUIKitDesktopLayout />\r\n            ) : (\r\n              <div>wait while SDK is initializing...</div>\r\n            )\r\n          }\r\n        </div>\r\n      </QuickBloxUIKitProvider>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default App;\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"You should run the application using the command:"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-bash",children:"npm start\n"})})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={...(0,D_Work_QuickBlox_react_ui_kit_private_node_modules_storybook_addon_docs_dist_shims_mdx_react_shim_mjs__WEBPACK_IMPORTED_MODULE_2__.R)(),...props.components};return MDXLayout?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(MDXLayout,{...props,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_createMdxContent,{...props})}):_createMdxContent(props)}}}]);

package/storybook-static/docs-Styling-mdx.abbdb393.iframe.bundle.js

@@ -0,0 +1 @@
+(self.webpackChunkquickblox_react_ui_kit=self.webpackChunkquickblox_react_ui_kit||[]).push([[234],{"./node_modules/@mdx-js/react/lib/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{R:()=>useMDXComponents,x:()=>MDXProvider});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");const emptyComponents={},MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext(emptyComponents);function useMDXComponents(components){const contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo((function(){return"function"==typeof components?components(contextComponents):{...contextComponents,...components}}),[contextComponents,components])}function MDXProvider(properties){let allComponents;return allComponents=properties.disableParentContext?"function"==typeof properties.components?properties.components(emptyComponents):properties.components||emptyComponents:useMDXComponents(properties.components),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},properties.children)}},"./node_modules/@storybook/blocks/dist sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/blocks/dist sync recursive",module.exports=webpackEmptyContext},"./node_modules/@storybook/core/dist/components sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/core/dist/components sync recursive",module.exports=webpackEmptyContext},"./node_modules/@storybook/core/dist/theming sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/core/dist/theming sync recursive",module.exports=webpackEmptyContext},"./src/docs/Styling.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>MDXContent});__webpack_require__("./node_modules/react/index.js");var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/react/jsx-runtime.js"),D_Work_QuickBlox_react_ui_kit_private_node_modules_storybook_addon_docs_dist_shims_mdx_react_shim_mjs__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),_storybook_blocks__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs");function _createMdxContent(props){const _components={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,D_Work_QuickBlox_react_ui_kit_private_node_modules_storybook_addon_docs_dist_shims_mdx_react_shim_mjs__WEBPACK_IMPORTED_MODULE_2__.R)(),...props.components};return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_storybook_blocks__WEBPACK_IMPORTED_MODULE_3__.W8,{title:"📕 Documentation/Styling"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h1,{id:"customization",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"https://docs.quickblox.com/docs/react-uikit-customization",rel:"nofollow",children:"Customization"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"The QuickBlox UIKit for React allows you to create your own unique view of the UIKit."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h2,{id:"default-themes",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"https://docs.quickblox.com/docs/react-uikit-customization#default-themes",rel:"nofollow",children:"Default themes"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"The QuickBlox UIKit for React has 2 built in themes: Dark and Light."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h2,{id:"color-theme",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"",children:"Color Theme"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.img,{src:"https://files.readme.io/393b8d6-ColorTheme.png",alt:"Image"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"Default theme for UIKit is Light.\r\nTo set theme you need to set value 'dark' to key data-theme in global styles (html[data-theme=\"dark”]).\r\nFor example, you can use pure JavaScript:"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-js",children:"document.documentElement.setAttribute('data-theme', 'dark');\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h2,{id:"use-your-own-theme",children:"Use your own theme"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"There are two options how you can create your own theme:"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.ul,{children:["\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.li,{children:"Customize current theme using css"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.li,{children:"Create your own theme to customize selected components"}),"\n"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"To customize the current theme you just need to set the new colors in css variables."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"Or you can create your own theme. To do this you need to create a new class that implements the UiKitTheme interface."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"To use your own theme using css you need to create _theme_colors_scheme.scss and set colors"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-scss",children:"$background-overlay-light: rgba(19, 29, 40, 0.8);\r\n$background-overlay-dark: rgba(144, 151, 159, 0.8);\r\n$primary-50: #e7efff;\r\n$primary-100: #c4d7fe;\r\n$primary-200: #9cbcfe;\r\n$primary-300: #74a1fd;\r\n$primary-400: #578cfc;\r\n$primary-500: #3978fc;\r\n$primary-600: #3370fc;\r\n$primary-700: #2c65fb;\r\n$primary-800: #245bfb;\r\n$primary-900: #1748fa;\r\n$primary-a-100: #ffffff;\r\n$primary-a-200: #f7f9ff;\r\n$primary-a-400: #c4cfff;\r\n$primary-a-700: #abbaff;\r\n$secondary-50: #e4e6e8;\r\n$secondary-100: #bcc1c5;\r\n$secondary-200: #90979f;\r\n$secondary-300: #636d78;\r\n$secondary-400: #414e5b;\r\n$secondary-500: #202f3e;\r\n$secondary-600: #1c2a38;\r\n$secondary-700: #182330;\r\n$secondary-800: #131d28;\r\n$secondary-900: #0b121b;\r\n$secondary-a-100: #74a1fd;\r\n$secondary-a-200: #3978fc;\r\n$secondary-a-400: #245bfb;\r\n$secondary-a-700: #0050dc;\r\n$system-green-100: #c8f1d6;\r\n$system-green-200: #a4e7bb;\r\n$system-green-300: #80dda0;\r\n$system-green-400: #64d68b;\r\n$system-green-500: #49cf77;\r\n$error-100: #ffc4c1;\r\n$error-200: #ff9d98;\r\n$error-300: #ff766e;\r\n$error-400: #ff584f;\r\n$error-500: #ff3b30;\r\n$information: #fdb0ff;\r\n$highlight: #fffdc1;\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"To use your own new theme colors create _theme_dark.scss and _theme_light.scss files and set color variable."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-scss",children:"// _theme_dark.scss:\r\n\r\nhtml[data-theme='dark'] {\r\n  --color-background-info: #{$primary-500};\r\n  --tertiary-elements: #{$background-overlay-dark};\r\n  --main-elements: #{$primary-300};\r\n  --secondary-elements: #{$primary-a-100};\r\n  --input-elements: #{$secondary-200};\r\n  --disabled-elements: #{$secondary-300};\r\n  --field-border: #{$secondary-200};\r\n  --main-text: #{$primary-a-100};\r\n  --secondary-text: #{$secondary-200};\r\n  --caption: #{$secondary-100};\r\n  --main-background: #{$secondary-500};\r\n  --secondary-background: #{$secondary-800};\r\n  --incoming-background: #{$secondary-400};\r\n  --outgoing-background: #{$primary-500};\r\n  --dropdown-background: #{$secondary-400};\r\n  --chat-input: #{$secondary-800};\r\n  --divider: #{$secondary-400};\r\n  --error: #{$error-300};\r\n  --hightlight: #{$highlight};\r\n}\r\n\r\n// _theme_light.scss:\r\n:root {\r\n  --color-background-info: #{$primary-100};\r\n  --tertiary-elements: #{$secondary-300};\r\n  --main-elements: #{$primary-500};\r\n  --secondary-elements: #{$secondary-500};\r\n  --input-elements: #{$secondary-500};\r\n  --disabled-elements: #{$secondary-100};\r\n  --field-border: #{$secondary-200};\r\n  --main-text: #{$secondary-900};\r\n  --secondary-text: #{$secondary-300};\r\n  --caption: #{$secondary-200};\r\n  --main-background: #{$primary-a-100};\r\n  --secondary-background: #{$primary-a-100};\r\n  --secondary-background-modal: #{$background-overlay-light};\r\n  --incoming-background: #{$secondary-50};\r\n  --outgoing-background: #{$primary-50};\r\n  --dropdown-background: #{$primary-a-100};\r\n  --chat-input: #{$primary-a-200};\r\n  --divider: #{$primary-50};\r\n  --error: #{$error-500};\r\n  --hightlight: #{$highlight};\r\n}\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"To create your own theme to customize selected components you need to create a new class that implements the UiKitTheme interface."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-ts",children:"//DefaultTheme implements UiKitTheme\r\nexport default class CustomTheme extends DefaultTheme {\r\n  divider = (): string => 'var(--divider)';\r\n  mainText = (): string => '#FFFFFF';\r\n  fontFamily = (): string => 'Roboto';\r\n  /*\r\n  The DefaultTheme contains other theme methods :\r\n  caption = (): string => 'var(--caption)';\r\n  chatInput = (): string => 'var(--chat-input)';\r\n  disabledElements = (): string => 'var(--disabled-elements)';\r\n  dropdownBackground = (): string => 'var(--dropdown-background)';\r\n  error = (): string => 'var(--error)';\r\n  fieldBorder = (): string => 'var(--field-border)';\r\n  hightlight = (): string => 'var(--hightlight)';\r\n  incomingBackground = (): string => 'var(--incoming-background)';\r\n  inputElements = (): string => 'var(--input-elements)';\r\n  mainBackground = (): string => 'var(--main-background)';\r\n  mainElements = (): string => 'var(--main-elements)';\r\n  outgoingBackground = (): string => 'var(--outgoing-background)';\r\n  secondaryBackground = (): string => 'var(--secondary-background)';\r\n  secondaryElements = (): string => 'var(--secondary-elements)';\r\n  secondaryText = (): string => 'var(--secondary-text)';\r\n  */\r\n}\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"and specify selected components:"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.ul,{children:["\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.li,{children:"desktop layout container"}),"\n"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-ts",children:"<QuickBloxUIKitDesktopLayout theme={new CustomTheme()}>\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h1,{id:"custom-styling",children:"Custom styling"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"We have developed our components with the ability to be customized to individual needs, so each component accepts a prop called className, allowing the user to apply their own styles to the component."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-ts",children:"import { Button } from '../../ui-components';\r\nimport './style.scss';\r\n\r\n<Button className=\"button\">Button</Button>;\n"})})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={...(0,D_Work_QuickBlox_react_ui_kit_private_node_modules_storybook_addon_docs_dist_shims_mdx_react_shim_mjs__WEBPACK_IMPORTED_MODULE_2__.R)(),...props.components};return MDXLayout?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(MDXLayout,{...props,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_createMdxContent,{...props})}):_createMdxContent(props)}}}]);

package/storybook-static/favicon.svg

@@ -1,7 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="164" height="164">
-  <svg width="164" height="164" viewBox="0 0 164 164" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M22.467 147.762 17.5 15.402a8.062 8.062 0 0 1 7.553-8.35L137.637.016a8.061 8.061 0 0 1 8.565 8.047v144.23a8.063 8.063 0 0 1-8.424 8.054l-107.615-4.833a8.062 8.062 0 0 1-7.695-7.752Z" fill="#FF4785"></path>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="m128.785.57-15.495.968-.755 18.172a1.203 1.203 0 0 0 1.928 1.008l7.06-5.354 5.962 4.697a1.202 1.202 0 0 0 1.946-.987L128.785.569Zm-12.059 60.856c-2.836 2.203-23.965 3.707-23.965.57.447-11.969-4.912-12.494-7.889-12.494-2.828 0-7.59.855-7.59 7.267 0 6.534 6.96 10.223 15.13 14.553 11.607 6.15 25.654 13.594 25.654 32.326 0 17.953-14.588 27.871-33.194 27.871-19.201 0-35.981-7.769-34.086-34.702.744-3.163 25.156-2.411 25.156 0-.298 11.114 2.232 14.383 8.633 14.383 4.912 0 7.144-2.708 7.144-7.267 0-6.9-7.252-10.973-15.595-15.657C64.827 81.933 51.53 74.468 51.53 57.34c0-17.098 11.76-28.497 32.747-28.497 20.988 0 32.449 11.224 32.449 32.584Z" fill="#fff"></path>
-  </svg>
-  <style>@media (prefers-color-scheme: light) { :root { filter: none; } }</style>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:svgjs="http://svgjs.com/svgjs" xmlns:xlink="http://www.w3.org/1999/xlink" width="164" height="164" version="1.1"><svg xmlns="http://www.w3.org/2000/svg" width="164" height="164" fill="none" viewBox="0 0 164 164"><path fill="#FF4785" d="M22.467 147.762 17.5 15.402a8.062 8.062 0 0 1 7.553-8.35L137.637.016a8.061 8.061 0 0 1 8.565 8.047v144.23a8.063 8.063 0 0 1-8.424 8.054l-107.615-4.833a8.062 8.062 0 0 1-7.695-7.752Z"/><path fill="#fff" fill-rule="evenodd" d="m128.785.57-15.495.968-.755 18.172a1.203 1.203 0 0 0 1.928 1.008l7.06-5.354 5.962 4.697a1.202 1.202 0 0 0 1.946-.987L128.785.569Zm-12.059 60.856c-2.836 2.203-23.965 3.707-23.965.57.447-11.969-4.912-12.494-7.889-12.494-2.828 0-7.59.855-7.59 7.267 0 6.534 6.96 10.223 15.13 14.553 11.607 6.15 25.654 13.594 25.654 32.326 0 17.953-14.588 27.871-33.194 27.871-19.201 0-35.981-7.769-34.086-34.702.744-3.163 25.156-2.411 25.156 0-.298 11.114 2.232 14.383 8.633 14.383 4.912 0 7.144-2.708 7.144-7.267 0-6.9-7.252-10.973-15.595-15.657C64.827 81.933 51.53 74.468 51.53 57.34c0-17.098 11.76-28.497 32.747-28.497 20.988 0 32.449 11.224 32.449 32.584Z" clip-rule="evenodd"/></svg><style>@media (prefers-color-scheme:light){:root{filter:none}}</style></svg>

package/storybook-static/iframe.html

@@ -1,4 +1,34 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="prefetch" href="./sb-common-assets/nunito-sans-regular.woff2" as="font" type="font/woff2" crossorigin><link rel="prefetch" href="./sb-common-assets/nunito-sans-italic.woff2" as="font" type="font/woff2" crossorigin><link rel="prefetch" href="./sb-common-assets/nunito-sans-bold.woff2" as="font" type="font/woff2" crossorigin><link rel="prefetch" href="./sb-common-assets/nunito-sans-bold-italic.woff2" as="font" type="font/woff2" crossorigin><link rel="stylesheet" href="./sb-common-assets/fonts.css"><base target="_parent"><style>/* While we aren't showing the main block yet, but still preparing, we want everything the user
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><style>@font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
+      }</style><base target="_parent"><style>/* While we aren't showing the main block yet, but still preparing, we want everything the user
      has rendered, which may or may not be in #storybook-root, to be display none */
   .sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
     display: none;
@@ -27,7 +57,8 @@
     box-sizing: border-box;
     margin: auto;
     padding: 1rem;
-    max-height: 100%; /* Hack for centering correctly in IE11 */
+    max-height: 100%;
+    /* Hack for centering correctly in IE11 */
   }
 
   /* Vertical centering fix for IE11 */
@@ -58,13 +89,36 @@
     bottom: 0;
     left: 0;
     right: 0;
-    padding: 20px;
-    font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
-      BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    box-sizing: border-box;
+
+    padding: 40px;
+    font-family:
+      'Nunito Sans',
+      -apple-system,
+      '.SFNSText-Regular',
+      'San Francisco',
+      BlinkMacSystemFont,
+      'Segoe UI',
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     -webkit-font-smoothing: antialiased;
     overflow: auto;
   }
 
+  @media (max-width: 700px) {
+    .sb-wrapper {
+      padding: 20px;
+    }
+  }
+
+  @media (max-width: 500px) {
+    .sb-wrapper {
+      padding: 10px;
+    }
+  }
+
   .sb-heading {
     font-size: 14px;
     font-weight: 600;
@@ -77,6 +131,7 @@
     display: flex;
     align-content: center;
     justify-content: center;
+    box-sizing: border-box;
   }
 
   .sb-nopreview_main {
@@ -91,54 +146,133 @@
   }
 
   .sb-errordisplay {
-    border: 20px solid rgb(187, 49, 49);
-    background: #222;
-    color: #fff;
+    background: #f6f9fc;
+    color: black;
     z-index: 999999;
+    width: 100vw;
+    min-height: 100vh;
+    box-sizing: border-box;
+
+    & ol {
+      padding-left: 18px;
+      margin: 0;
+    }
+
+    & h1 {
+      font-family: Nunito Sans;
+      font-size: 22px;
+      font-weight: 400;
+      line-height: 30px;
+      font-weight: normal;
+      margin: 0;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        background: #ff4400;
+        border-radius: 50%;
+        margin-right: 8px;
+      }
+    }
+
+    & p,
+    & ol {
+      font-family: Nunito Sans;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 19px;
+      margin: 0;
+    }
+
+    & li + li {
+      margin: 0;
+      padding: 0;
+      padding-top: 12px;
+    }
+
+    & a {
+      color: currentColor;
+    }
+  }
+
+  .sb-errordisplay_main {
+    margin: auto;
+    padding: 24px;
+    display: flex;
+    box-sizing: border-box;
+
+    flex-direction: column;
+    min-height: 100%;
+    width: 100%;
+    border-radius: 6px;
+    background: white;
+    border: 1px solid #ff0000;
+    box-shadow: 0 0 64px rgba(0, 0, 0, 0.1);
+    gap: 24px;
   }
 
   .sb-errordisplay_code {
     padding: 10px;
-    background: #000;
-    color: #eee;
+    flex: 1;
+    background: #242424;
+    color: #c6c6c6;
+    box-sizing: border-box;
+
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 19px;
+    border-radius: 4px;
+
     font-family: 'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
       'Lucida Console', Consolas, Monaco, monospace;
+    margin: 0;
+    overflow: auto;
   }
 
   .sb-errordisplay pre {
     white-space: pre-wrap;
+    white-space: revert;
   }
 
   @-webkit-keyframes sb-rotate360 {
     from {
       transform: rotate(0deg);
     }
+
     to {
       transform: rotate(360deg);
     }
   }
+
   @keyframes sb-rotate360 {
     from {
       transform: rotate(0deg);
     }
+
     to {
       transform: rotate(360deg);
     }
   }
+
   @-webkit-keyframes sb-glow {
     0%,
     100% {
       opacity: 1;
     }
+
     50% {
       opacity: 0.4;
     }
   }
+
   @keyframes sb-glow {
     0%,
     100% {
       opacity: 1;
     }
+
     50% {
       opacity: 0.4;
     }
@@ -201,6 +335,7 @@
     height: 14px;
     width: 14px;
   }
+
   .sb-previewBlock_icon:last-child {
     margin-left: auto;
   }
@@ -222,23 +357,28 @@
     text-align: left;
     width: 100%;
   }
+
   .sb-argstableBlock th:first-of-type,
   .sb-argstableBlock td:first-of-type {
     padding-left: 20px;
   }
+
   .sb-argstableBlock th:nth-of-type(2),
   .sb-argstableBlock td:nth-of-type(2) {
     width: 35%;
   }
+
   .sb-argstableBlock th:nth-of-type(3),
   .sb-argstableBlock td:nth-of-type(3) {
     width: 15%;
   }
+
   .sb-argstableBlock th:last-of-type,
   .sb-argstableBlock td:last-of-type {
     width: 25%;
     padding-right: 20px;
   }
+
   .sb-argstableBlock th span,
   .sb-argstableBlock td span {
     -webkit-animation: sb-glow 1.5s ease-in-out infinite;
@@ -248,43 +388,55 @@
     box-shadow: none;
     color: transparent;
   }
+
   .sb-argstableBlock th {
     padding: 10px 15px;
   }
 
   .sb-argstableBlock-body {
     border-radius: 4px;
-    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px, rgba(0, 0, 0, 0.065) 0 0 0 1px;
+    box-shadow:
+      rgba(0, 0, 0, 0.1) 0 1px 3px 1px,
+      rgba(0, 0, 0, 0.065) 0 0 0 1px;
   }
+
   .sb-argstableBlock-body tr {
     background: transparent;
     overflow: hidden;
   }
+
   .sb-argstableBlock-body tr:not(:first-child) {
     border-top: 1px solid #e6e6e6;
   }
+
   .sb-argstableBlock-body tr:first-child td:first-child {
     border-top-left-radius: 4px;
   }
+
   .sb-argstableBlock-body tr:first-child td:last-child {
     border-top-right-radius: 4px;
   }
+
   .sb-argstableBlock-body tr:last-child td:first-child {
     border-bottom-left-radius: 4px;
   }
+
   .sb-argstableBlock-body tr:last-child td:last-child {
     border-bottom-right-radius: 4px;
   }
+
   .sb-argstableBlock-body td {
     background: #fff;
     padding-bottom: 10px;
     padding-top: 10px;
     vertical-align: top;
   }
+
   .sb-argstableBlock-body td:not(:first-of-type) {
     padding-left: 15px;
     padding-right: 15px;
   }
+
   .sb-argstableBlock-body button {
     -webkit-animation: sb-glow 1.5s ease-in-out infinite;
     animation: sb-glow 1.5s ease-in-out infinite;
@@ -318,10 +470,10 @@
   } catch (e) {
     // eslint-disable-next-line no-console
     console.warn('unable to connect to top frame for connecting dev tools');
-  }</script><link href="static/css/main.a921485c.css" rel="stylesheet"><style>#storybook-root[hidden],
+  }</script><style>#storybook-root[hidden],
       #storybook-docs[hidden] {
         display: none !important;
-      }</style></head><body><div class="sb-preparing-story sb-wrapper"><div class="sb-loader"></div></div><div class="sb-preparing-docs sb-wrapper"><div class="sb-previewBlock"><div class="sb-previewBlock_header"><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div></div><div class="sb-previewBlock_body"><div class="sb-loader"></div></div></div><table aria-hidden="true" class="sb-argstableBlock"><thead class="sb-argstableBlock-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th><th><span>Control</span></th></tr></thead><tbody class="sb-argstableBlock-body"><tr><td><span>propertyName</span><span title="Required">*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr></tbody></table></div><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="storybook-root"></div><div id="storybook-docs"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
+      }</style></head><body><div class="sb-preparing-story sb-wrapper"><div class="sb-loader"></div></div><div class="sb-preparing-docs sb-wrapper"><div class="sb-previewBlock"><div class="sb-previewBlock_header"><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div></div><div class="sb-previewBlock_body"><div class="sb-loader"></div></div></div><table aria-hidden="true" class="sb-argstableBlock"><thead class="sb-argstableBlock-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th><th><span>Control</span></th></tr></thead><tbody class="sb-argstableBlock-body"><tr><td><span>propertyName</span><span title="Required">*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr></tbody></table></div><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><div class="sb-errordisplay_main"><h1 id="error-message"></h1><p>The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:</p><ol><li><strong>Missing Context/Providers</strong>: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the <a href="https://storybook.js.org/docs/writing-stories/decorators">Decorators documentation</a>.</li><li><strong>Misconfigured Webpack or Vite</strong>: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring <a href="https://storybook.js.org/docs/builders/webpack">Webpack</a> or <a href="https://storybook.js.org/docs/builders/vite">Vite</a> with Storybook.</li><li><strong>Missing Environment Variables</strong>: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the <a href="https://storybook.js.org/docs/configure/environment-variables">Environment Variables documentation</a>.</li></ol><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div></div><div id="storybook-root"></div><div id="storybook-docs"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
           
       
           
@@ -329,27 +481,31 @@
           
       
           
-            window['FRAMEWORK_OPTIONS'] = {"builder":{"useSWC":true}};
+            window['FRAMEWORK_OPTIONS'] = {};
           
       
           
       
           
-            window['FEATURES'] = {"warnOnLegacyHierarchySeparator":true,"buildStoriesJson":false,"storyStoreV7":true,"argTypeTargetsV7":true,"legacyDecoratorFileOrder":false,"disallowImplicitActionsInRenderV8":false};
+            window['FEATURES'] = {"argTypeTargetsV7":true,"legacyDecoratorFileOrder":false,"disallowImplicitActionsInRenderV8":true};
+          
+      
           
       
           
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|mjs|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|mjs|ts|tsx))$"}];
+          
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|mjs|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|mjs|ts|tsx))$"}];
+            window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":"tag"};
           
       
           
-            window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":"tag"};</script><script type="module">import './sb-preview/runtime.js';
+            window['TAGS_OPTIONS'] = {"dev-only":{"excludeFromDocsStories":true},"docs-only":{"excludeFromSidebar":true},"test-only":{"excludeFromSidebar":true,"excludeFromDocsStories":true}};</script><script type="module">import './sb-preview/runtime.js';
 
       
-      import './runtime~main.94227b12.iframe.bundle.js';
+      import './runtime~main.0313ac39.iframe.bundle.js';
       
-      import './208.5b4db3b7.iframe.bundle.js';
+      import './44.2dce2443.iframe.bundle.js';
       
-      import './main.c0c1b229.iframe.bundle.js';</script></body></html>
+      import './main.b6cefba5.iframe.bundle.js';</script></body></html>