@egov3/system-design 1.3.98 → 1.3.99

package/dist/cjs/baseComponents/SearchBar/SearchBar.module.css.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var css_248z = ".SearchBar-module_searchLayout__VCBFD {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n\n.SearchBar-module_searchIcon__w5c7b > :first-child {\n  fill: var(--icon-secondary-color);\n}\n\n.SearchBar-module_clearIcon__tlykn > :first-child {\n  fill: var(--icon-secondary-color);\n}\n\n.SearchBar-module_clearIcon__tlykn svg {\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n}\n\n.SearchBar-module_loadingIcon__v-WG9 {\n  animation: SearchBar-module_loading__qptyx 1s linear infinite;\n}\n\n.SearchBar-module_loadingIcon__v-WG9 > :first-child {\n  fill: var(--icon-accent-color);\n}\n\n@keyframes SearchBar-module_loading__qptyx {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.SearchBar-module_inputContainer__jvbxZ {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1 0 0;\n  border-radius: 8px;\n}\n\n.SearchBar-module_inputContainer--modal__5Ayyp {\n  padding: 12px 16px;\n  background: var(--surface-surface-white-nonconvert);\n  box-shadow: 0 12px 32px 0 rgba(128, 130, 136, 0.5);\n}\n\n.SearchBar-module_inputContainer--default__82CUU {\n  padding: 12px 16px;\n  background: var(--surface-surface-1);\n}\n\n.SearchBar-module_inputContainer--chat__fXYm9 {\n  padding: 6px 12px;\n  background: var(--surface-surface-white-nonconvert);\n}\n\n.SearchBar-module_input__eZosz::placeholder {\n  color: var(--text-disabled-color);\n}\n\n.SearchBar-module_iconWrapper__VHJrg {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.SearchBar-module_inputContainer--modal__5Ayyp .SearchBar-module_iconWrapper__VHJrg,\n.SearchBar-module_inputContainer--default__82CUU .SearchBar-module_iconWrapper__VHJrg,\n.SearchBar-module_inputContainer--modal__5Ayyp .SearchBar-module_clearIcon__tlykn,\n.SearchBar-module_inputContainer--default__82CUU .SearchBar-module_clearIcon__tlykn {\n  height: 20px;\n  width: 20px;\n}\n\n.SearchBar-module_inputContainer--chat__fXYm9 .SearchBar-module_iconWrapper__VHJrg,\n.SearchBar-module_inputContainer--chat__fXYm9 .SearchBar-module_clearIcon__tlykn {\n  height: 16px;\n  width: 16px;\n}\n\n.SearchBar-module_inputContainer--modal__5Ayyp input,\n.SearchBar-module_inputContainer--default__82CUU input {\n  height: 24px;\n}\n\n.SearchBar-module_inputContainer--chat__fXYm9 input {\n  height: 20px;\n}\n\n.SearchBar-module_input__eZosz {\n  outline: none;\n  border: none;\n  width: 100%;\n  background: transparent;\n}\n\n.SearchBar-module_input__eZosz:focus {\n  caret-color: var(--default-primary-accent);\n}\n\nbutton {\n  background: transparent;\n  margin: 0;\n  padding: 0;\n  border: none;\n  cursor: pointer;\n  line-height: 0;\n}\n";
-var styles = {"searchLayout":"SearchBar-module_searchLayout__VCBFD","searchIcon":"SearchBar-module_searchIcon__w5c7b","clearIcon":"SearchBar-module_clearIcon__tlykn","loadingIcon":"SearchBar-module_loadingIcon__v-WG9","loading":"SearchBar-module_loading__qptyx","inputContainer":"SearchBar-module_inputContainer__jvbxZ","inputContainer--modal":"SearchBar-module_inputContainer--modal__5Ayyp","inputContainer--default":"SearchBar-module_inputContainer--default__82CUU","inputContainer--chat":"SearchBar-module_inputContainer--chat__fXYm9","input":"SearchBar-module_input__eZosz","iconWrapper":"SearchBar-module_iconWrapper__VHJrg"};
+var css_248z = ".SearchBar-module_searchLayout__VCBFD {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n\n.SearchBar-module_searchIcon__w5c7b > :first-child {\n  fill: var(--icon-secondary-color);\n}\n\n.SearchBar-module_clearIcon__tlykn > :first-child {\n  fill: var(--icon-secondary-color);\n}\n\n.SearchBar-module_clearIcon__tlykn svg {\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n}\n\n.SearchBar-module_loadingIcon__v-WG9 {\n  animation: SearchBar-module_loading__qptyx 1s linear infinite;\n}\n\n.SearchBar-module_loadingIcon__v-WG9 > :first-child {\n  fill: var(--icon-accent-color);\n}\n\n@keyframes SearchBar-module_loading__qptyx {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.SearchBar-module_inputContainer__jvbxZ {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1 0 0;\n  border-radius: 8px;\n}\n\n.SearchBar-module_inputContainer--shadow__YJ6eS {\n  padding: 12px 16px;\n  background: var(--surface-surface-white-nonconvert);\n  box-shadow: 0 12px 32px 0 rgba(128, 130, 136, 0.5);\n  cursor: pointer;\n}\n\n.SearchBar-module_inputContainer--default__82CUU {\n  padding: 12px 16px;\n  background: var(--surface-surface-1);\n}\n\n.SearchBar-module_inputContainer--slim__B6Of8 {\n  padding: 6px 12px;\n  background: var(--surface-surface-white-nonconvert);\n}\n\n.SearchBar-module_input__eZosz::placeholder {\n  color: var(--text-disabled-color);\n}\n\n.SearchBar-module_iconWrapper__VHJrg {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.SearchBar-module_inputContainer--shadow__YJ6eS .SearchBar-module_iconWrapper__VHJrg,\n.SearchBar-module_inputContainer--default__82CUU .SearchBar-module_iconWrapper__VHJrg,\n.SearchBar-module_inputContainer--shadow__YJ6eS .SearchBar-module_clearIcon__tlykn,\n.SearchBar-module_inputContainer--default__82CUU .SearchBar-module_clearIcon__tlykn {\n  height: 20px;\n  width: 20px;\n}\n\n.SearchBar-module_inputContainer--slim__B6Of8 .SearchBar-module_iconWrapper__VHJrg,\n.SearchBar-module_inputContainer--slim__B6Of8 .SearchBar-module_clearIcon__tlykn {\n  height: 16px;\n  width: 16px;\n}\n\n.SearchBar-module_inputContainer--shadow__YJ6eS input,\n.SearchBar-module_inputContainer--default__82CUU input {\n  height: 24px;\n}\n\n.SearchBar-module_inputContainer--slim__B6Of8 input {\n  height: 20px;\n}\n\n.SearchBar-module_input__eZosz {\n  outline: none;\n  border: none;\n  width: 100%;\n  background: transparent;\n}\n\n.SearchBar-module_input__eZosz:focus {\n  caret-color: var(--default-primary-accent);\n}\n\nbutton {\n  background: transparent;\n  margin: 0;\n  padding: 0;\n  border: none;\n  cursor: pointer;\n  line-height: 0;\n}\n";
+var styles = {"searchLayout":"SearchBar-module_searchLayout__VCBFD","searchIcon":"SearchBar-module_searchIcon__w5c7b","clearIcon":"SearchBar-module_clearIcon__tlykn","loadingIcon":"SearchBar-module_loadingIcon__v-WG9","loading":"SearchBar-module_loading__qptyx","inputContainer":"SearchBar-module_inputContainer__jvbxZ","inputContainer--shadow":"SearchBar-module_inputContainer--shadow__YJ6eS","inputContainer--default":"SearchBar-module_inputContainer--default__82CUU","inputContainer--slim":"SearchBar-module_inputContainer--slim__B6Of8","input":"SearchBar-module_input__eZosz","iconWrapper":"SearchBar-module_iconWrapper__VHJrg"};
 function styleInject(css, options) {
     if (typeof document === 'undefined') return;
     const head = document.head || document.getElementsByTagName('head')[0];

package/dist/cjs/baseComponents/SearchBar/index.js

@@ -4,16 +4,30 @@ var jsxRuntime = require('react/jsx-runtime');
 var graphics = require('@egov3/graphics');
 var React = require('react');
 var index = require('../../constants/i18n/index.js');
+var debounce = require('../../utils/debounce.js');
 var joinClasses = require('../../utils/joinClasses.js');
 var typography_module = require('../../styles/typography.module.css.js');
 var SearchBar_module = require('./SearchBar.module.css.js');
 
-const langDic = index.i18n.MsgSearch;
-const SearchBar = ({ lang, handleModalOpen, handleOnEnter, variant = "default", loading = false, disabled = false, defaultValue = "", showClearButton = true, }) => {
+const langDic = index.i18n.SearchBar;
+const SearchBar = ({ lang, handleModalOpen, handleOnEnter, handleOnClear, handleOnChange, variant = "default", loading = false, disabled = false, defaultValue = "", showClearButton = true, placeholder = "", "aria-label": ariaLabel = "", debounceDelay = 300, }) => {
     const [value, setValue] = React.useState(defaultValue);
     const inputRef = React.useRef(null);
+    const debouncedOnChangeRef = React.useRef(null);
+    React.useEffect(() => {
+        debouncedOnChangeRef.current = debounce.debounce((value) => {
+            if (handleOnChange) {
+                handleOnChange(value);
+            }
+        }, debounceDelay);
+        return () => {
+            if (debouncedOnChangeRef.current) {
+                debouncedOnChangeRef.current.cancel();
+            }
+        };
+    }, [handleOnChange, debounceDelay]);
     const handleKeyDown = React.useCallback((event) => {
-        if (disabled || loading)
+        if (disabled || loading || !!handleModalOpen)
             return;
         if (event.key === "Enter") {
             event.preventDefault();
@@ -21,27 +35,37 @@ const SearchBar = ({ lang, handleModalOpen, handleOnEnter, variant = "default",
                 handleOnEnter(value.trim());
             }
         }
-    }, [disabled, loading, handleOnEnter, value]);
+    }, [disabled, loading, handleModalOpen, handleOnEnter, value]);
     const handleClear = React.useCallback(() => {
         if (disabled || loading)
             return;
         setValue("");
-        if (handleOnEnter) {
-            handleOnEnter("");
+        if (debouncedOnChangeRef.current) {
+            debouncedOnChangeRef.current.cancel();
         }
+        handleOnEnter?.("");
+        handleOnChange?.("");
+        handleOnClear?.();
         inputRef.current?.focus();
-    }, [disabled, loading, handleOnEnter]);
+    }, [disabled, loading, handleOnEnter, handleOnClear, handleOnChange]);
     const handleInputClick = React.useCallback((event) => {
-        if (variant === "modal") {
-            event.stopPropagation();
-            if (handleModalOpen && !disabled) {
-                handleModalOpen();
-            }
+        event.stopPropagation();
+        if (handleModalOpen && !disabled) {
+            handleModalOpen();
+        }
+    }, [handleModalOpen, disabled]);
+    const handleChange = React.useCallback((e) => {
+        const newValue = e.target.value;
+        setValue(newValue);
+        if (debouncedOnChangeRef.current) {
+            debouncedOnChangeRef.current(newValue);
         }
-    }, [variant, handleModalOpen, disabled]);
+    }, []);
     const inputContainerClasses = joinClasses.joinClasses(SearchBar_module.default.inputContainer, SearchBar_module.default[`inputContainer--${variant}`]);
-    const inputClasses = joinClasses.joinClasses(SearchBar_module.default.input, variant === "chat" ? typography_module.default.body2Regular : typography_module.default.body1Regular);
-    return (jsxRuntime.jsx("div", { "data-testid": "SearchBar_WRAPPER", className: SearchBar_module.default.searchLayout, "data-variant": variant, "data-loading": loading, "data-disabled": disabled, children: jsxRuntime.jsxs("div", { "data-testid": "SearchBar_INPUT_CONTAINER_WRAPPER", className: inputContainerClasses, children: [jsxRuntime.jsx("div", { className: SearchBar_module.default.iconWrapper, children: loading ? (jsxRuntime.jsx(graphics.Icons.General.Loader, { className: SearchBar_module.default.loadingIcon, "data-testid": "SearchBar_LOADING_ICON" })) : (jsxRuntime.jsx(graphics.Icons.General.Search, { className: SearchBar_module.default.searchIcon, "data-testid": "SearchBar_SEARCH_ICON" })) }), jsxRuntime.jsx("input", { ref: inputRef, "data-testid": "SearchBar_INPUT", value: value, onChange: (e) => setValue(e.target.value), disabled: disabled, readOnly: variant === "modal", "aria-label": langDic.MsgSearchInputPlaceHolder[lang], placeholder: langDic.MsgSearchInputPlaceHolder[lang], onClick: handleInputClick, onKeyDown: variant === "modal" ? undefined : handleKeyDown, className: inputClasses }), showClearButton && value.length > 0 && variant !== "modal" && (jsxRuntime.jsx("button", { "data-testid": "SearchBar_CLEAR_BUTTON", type: "button", onClick: handleClear, className: SearchBar_module.default.clearButton, "aria-label": "Clear search", disabled: disabled, children: jsxRuntime.jsx(graphics.Icons.General.Clear, { className: SearchBar_module.default.clearIcon, "data-testid": "SearchBar_CLEAR_ICON" }) }))] }) }));
+    const inputClasses = joinClasses.joinClasses(SearchBar_module.default.input, variant === "slim" ? typography_module.default.body2Regular : typography_module.default.body1Regular);
+    const placeholderText = placeholder || langDic.SearchInputPlaceHolder[lang];
+    const ariaLabelText = ariaLabel || langDic.SearchInputAriaLabel[lang];
+    return (jsxRuntime.jsx("div", { "data-testid": "SearchBar_WRAPPER", className: SearchBar_module.default.searchLayout, "data-variant": variant, "data-loading": loading, "data-disabled": disabled, children: jsxRuntime.jsxs("div", { "data-testid": "SearchBar_INPUT_CONTAINER_WRAPPER", className: inputContainerClasses, children: [jsxRuntime.jsx("div", { className: SearchBar_module.default.iconWrapper, "data-testid": "SearchBar_ICON_WRAP", children: loading ? (jsxRuntime.jsx(graphics.Icons.General.Loader, { className: SearchBar_module.default.loadingIcon, "data-testid": "SearchBar_LOADING_ICON" })) : (jsxRuntime.jsx(graphics.Icons.General.Search, { className: SearchBar_module.default.searchIcon, "data-testid": "SearchBar_SEARCH_ICON" })) }), jsxRuntime.jsx("input", { ref: inputRef, "data-testid": "SearchBar_INPUT", value: value, onChange: handleChange, disabled: disabled, readOnly: !!handleModalOpen, "aria-label": ariaLabelText, placeholder: placeholderText, onClick: handleInputClick, onKeyDown: handleKeyDown, className: inputClasses }), showClearButton && value.length > 0 && !handleModalOpen && (jsxRuntime.jsx("button", { "data-testid": "SearchBar_CLEAR_BUTTON", type: "button", onClick: handleClear, className: SearchBar_module.default.clearButton, "aria-label": langDic.ClearSearch[lang], disabled: disabled, children: jsxRuntime.jsx(graphics.Icons.General.Clear, { className: SearchBar_module.default.clearIcon, "data-testid": "SearchBar_CLEAR_ICON" }) }))] }) }));
 };
 
 exports.SearchBar = SearchBar;

package/dist/cjs/baseComponents/SearchBar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/baseComponents/SearchBar/index.tsx"],"sourcesContent":[null],"names":["i18n","useState","useRef","useCallback","joinClasses","styles","typography","_jsx","_jsxs","Icons"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/baseComponents/SearchBar/index.tsx"],"sourcesContent":[null],"names":["i18n","useState","useRef","useEffect","debounce","useCallback","joinClasses","styles","typography","_jsx","_jsxs","Icons"],"mappings":";;;;;;;;;;;AAwBA,MAAM,OAAO,GAAGA,UAAI,CAAC,SAAS;MAEjB,SAAS,GAAG,CAAC,EACxB,IAAI,EACJ,eAAe,EACf,aAAa,EACb,aAAa,EACb,cAAc,EACd,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,EAAE,EACjB,eAAe,GAAG,IAAI,EACtB,WAAW,GAAG,EAAE,EAChB,YAAY,EAAE,SAAS,GAAG,EAAE,EAC5B,aAAa,GAAG,GAAG,GACH,KAAI;IACpB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGC,cAAQ,CAAC,YAAY,CAAC;AAChD,IAAA,MAAM,QAAQ,GAAGC,YAAM,CAAmB,IAAI,CAAC;AAE/C,IAAA,MAAM,oBAAoB,GAAGA,YAAM,CAAqC,IAAI,CAAC;IAE7EC,eAAS,CAAC,MAAK;QACb,oBAAoB,CAAC,OAAO,GAAGC,iBAAQ,CAAC,CAAC,KAAa,KAAI;AACxD,YAAA,IAAI,cAAc,EAAE;gBAClB,cAAc,CAAC,KAAK,CAAC;AACtB,YAAA;QACH,CAAC,EAAE,aAAa,CAAC;AAEjB,QAAA,OAAO,MAAK;YACV,IAAI,oBAAoB,CAAC,OAAO,EAAE;AAChC,gBAAA,oBAAoB,CAAC,OAAO,CAAC,MAAM,EAAE;AACtC,YAAA;AACH,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;AAEnC,IAAA,MAAM,aAAa,GAAGC,iBAAW,CAC/B,CAAC,KAA4C,KAAI;AAC/C,QAAA,IAAI,QAAQ,IAAI,OAAO,IAAI,CAAC,CAAC,eAAe;YAAE;AAE9C,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,IAAI,aAAa,IAAI,KAAK,CAAC,IAAI,EAAE,EAAE;AACjC,gBAAA,aAAa,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;AAC5B,YAAA;AACF,QAAA;AACH,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,KAAK,CAAC,CAC3D;AAED,IAAA,MAAM,WAAW,GAAGA,iBAAW,CAAC,MAAK;QACnC,IAAI,QAAQ,IAAI,OAAO;YAAE;QAEzB,QAAQ,CAAC,EAAE,CAAC;QAEZ,IAAI,oBAAoB,CAAC,OAAO,EAAE;AAChC,YAAA,oBAAoB,CAAC,OAAO,CAAC,MAAM,EAAE;AACtC,QAAA;AAED,QAAA,aAAa,GAAG,EAAE,CAAC;AACnB,QAAA,cAAc,GAAG,EAAE,CAAC;QACpB,aAAa,IAAI;AAEjB,QAAA,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE;AAC3B,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,cAAc,CAAC,CAAC;AAErE,IAAA,MAAM,gBAAgB,GAAGA,iBAAW,CAClC,CAAC,KAAyC,KAAI;QAC5C,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,eAAe,IAAI,CAAC,QAAQ,EAAE;AAChC,YAAA,eAAe,EAAE;AAClB,QAAA;AACH,IAAA,CAAC,EACD,CAAC,eAAe,EAAE,QAAQ,CAAC,CAC5B;AAED,IAAA,MAAM,YAAY,GAAGA,iBAAW,CAAC,CAAC,CAAsC,KAAI;AAC1E,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;QAC/B,QAAQ,CAAC,QAAQ,CAAC;QAElB,IAAI,oBAAoB,CAAC,OAAO,EAAE;AAChC,YAAA,oBAAoB,CAAC,OAAO,CAAC,QAAQ,CAAC;AACvC,QAAA;IACH,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,qBAAqB,GAAGC,uBAAW,CACvCC,wBAAM,CAAC,cAAc,EACrBA,wBAAM,CAAC,CAAA,gBAAA,EAAmB,OAAO,CAAA,CAAE,CAAC,CACrC;IAED,MAAM,YAAY,GAAGD,uBAAW,CAC9BC,wBAAM,CAAC,KAAK,EACZ,OAAO,KAAK,MAAM,GAAGC,yBAAU,CAAC,YAAY,GAAGA,yBAAU,CAAC,YAAY,CACvE;IAED,MAAM,eAAe,GAAG,WAAW,IAAI,OAAO,CAAC,sBAAsB,CAAC,IAAI,CAAC;IAE3E,MAAM,aAAa,GAAG,SAAS,IAAI,OAAO,CAAC,oBAAoB,CAAC,IAAI,CAAC;AAErE,IAAA,QACEC,cAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,mBAAmB,EAC/B,SAAS,EAAEF,wBAAM,CAAC,YAAY,EAAA,cAAA,EAChB,OAAO,kBACP,OAAO,EAAA,eAAA,EACN,QAAQ,EAAA,QAAA,EAEvBG,eAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,mCAAmC,EAC/C,SAAS,EAAE,qBAAqB,aAEhCD,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEF,wBAAM,CAAC,WAAW,EAAA,aAAA,EAAc,qBAAqB,YAClE,OAAO,IACNE,eAACE,cAAK,CAAC,OAAO,CAAC,MAAM,EAAA,EACnB,SAAS,EAAEJ,wBAAM,CAAC,WAAW,EAAA,aAAA,EACjB,wBAAwB,GACpC,KAEFE,eAACE,cAAK,CAAC,OAAO,CAAC,MAAM,IACnB,SAAS,EAAEJ,wBAAM,CAAC,UAAU,EAAA,aAAA,EAChB,uBAAuB,GACnC,CACH,EAAA,CACG,EACNE,cAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EAAA,aAAA,EACD,iBAAiB,EAC7B,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAAA,YAAA,EACf,aAAa,EACzB,WAAW,EAAE,eAAe,EAC5B,OAAO,EAAE,gBAAgB,EACzB,SAAS,EAAE,aAAa,EACxB,SAAS,EAAE,YAAY,GACvB,EACD,eAAe,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,eAAe,KACtDA,cAAA,CAAA,QAAA,EAAA,EAAA,aAAA,EACc,wBAAwB,EACpC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,WAAW,EACpB,SAAS,EAAEF,wBAAM,CAAC,WAAW,EAAA,YAAA,EACjB,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,EACrC,QAAQ,EAAE,QAAQ,EAAA,QAAA,EAElBE,cAAA,CAACE,cAAK,CAAC,OAAO,CAAC,KAAK,EAAA,EAClB,SAAS,EAAEJ,wBAAM,CAAC,SAAS,EAAA,aAAA,EACf,sBAAsB,EAAA,CAClC,EAAA,CACK,CACV,CAAA,EAAA,CACG,EAAA,CACF;AAEV;;;;"}

package/dist/cjs/components/Messages/MsgSearch/index.js

@@ -5,9 +5,9 @@ var index = require('../../../baseComponents/index.js');
 var index$1 = require('../../../constants/i18n/index.js');
 var MsgSearch_module = require('./MsgSearch.module.css.js');
 
-const langDic = index$1.i18n.MsgSearch;
+const langDic = index$1.i18n.Common;
 const MsgSearch = ({ lang, handleClose, handleOnEnter, }) => {
-    return (jsxRuntime.jsxs("div", { "data-testid": "MsgSearch_WRAPPER", className: MsgSearch_module.default.searchLayout, children: [jsxRuntime.jsx(index.BaseComponents.SearchBar, { variant: "chat", lang: lang, handleOnEnter: handleOnEnter }), jsxRuntime.jsx(index.BaseComponents.Button, { "data-testid": "MsgSearch_CLOSE", "aria-label": langDic.MsgSearchButton[lang], size: "small", variant: "tinted", onClick: handleClose, children: langDic.MsgSearchButton[lang] })] }));
+    return (jsxRuntime.jsxs("div", { "data-testid": "MsgSearch_WRAPPER", className: MsgSearch_module.default.searchLayout, children: [jsxRuntime.jsx(index.BaseComponents.SearchBar, { variant: "slim", lang: lang, handleOnEnter: handleOnEnter }), jsxRuntime.jsx(index.BaseComponents.Button, { "data-testid": "MsgSearch_CLOSE", "aria-label": langDic.CloseBtn[lang], size: "small", variant: "tinted", onClick: handleClose, children: langDic.CloseBtn[lang] })] }));
 };
 
 exports.MsgSearch = MsgSearch;

package/dist/cjs/components/Messages/MsgSearch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Messages/MsgSearch/index.tsx"],"sourcesContent":[null],"names":["i18n","_jsxs","styles","_jsx","BaseComponents"],"mappings":";;;;;;;AAUA,MAAM,OAAO,GAAGA,YAAI,CAAC,SAAS;AAEvB,MAAM,SAAS,GAAG,CAAC,EACxB,IAAI,EACJ,WAAW,EACX,aAAa,GACG,KAAI;AACpB,IAAA,QACEC,eAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,mBAAmB,EAAC,SAAS,EAAEC,wBAAM,CAAC,YAAY,EAAA,QAAA,EAAA,CACjEC,cAAA,CAACC,oBAAc,CAAC,SAAS,EAAA,EACvB,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,aAAa,EAAA,CAC5B,EACFD,eAACC,oBAAc,CAAC,MAAM,EAAA,EAAA,aAAA,EACR,iBAAiB,EAAA,YAAA,EACjB,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,EACzC,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,WAAW,EAAA,QAAA,EAEnB,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,EAAA,CACR,CAAA,EAAA,CACpB;AAEV;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Messages/MsgSearch/index.tsx"],"sourcesContent":[null],"names":["i18n","_jsxs","styles","_jsx","BaseComponents"],"mappings":";;;;;;;AAUA,MAAM,OAAO,GAAGA,YAAI,CAAC,MAAM;AAEpB,MAAM,SAAS,GAAG,CAAC,EACxB,IAAI,EACJ,WAAW,EACX,aAAa,GACG,KAAI;AACpB,IAAA,QACEC,eAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,mBAAmB,EAAC,SAAS,EAAEC,wBAAM,CAAC,YAAY,EAAA,QAAA,EAAA,CACjEC,cAAA,CAACC,oBAAc,CAAC,SAAS,EAAA,EACvB,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,aAAa,EAAA,CAC5B,EACFD,eAACC,oBAAc,CAAC,MAAM,EAAA,EAAA,aAAA,EACR,iBAAiB,EAAA,YAAA,EACjB,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,EAClC,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,WAAW,EAAA,QAAA,EAEnB,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAA,CACD,CAAA,EAAA,CACpB;AAEV;;;;"}

package/dist/cjs/constants/i18n/Common.js

@@ -21,6 +21,11 @@ const Common = {
         kk: "Келесі",
         en: "Next",
     },
+    CloseBtn: {
+        ru: "Закрыть",
+        kk: "kkЗакрыть",
+        en: "enЗакрыть",
+    },
 };
 
 exports.Common = Common;

package/dist/cjs/constants/i18n/Common.js.map

@@ -1 +1 @@
-{"version":3,"file":"Common.js","sources":["../../../../src/constants/i18n/Common.tsx"],"sourcesContent":[null],"names":[],"mappings":";;AAAO,MAAM,MAAM,GAAG;AACpB,IAAA,WAAW,EAAE;AACX,QAAA,EAAE,EAAE,wBAAwB;AAC5B,QAAA,EAAE,EAAE,uBAAuB;AAC3B,QAAA,EAAE,EAAE,2BAA2B;AAChC,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,EAAE,SAAS;AACb,QAAA,EAAE,EAAE,SAAS;AACb,QAAA,EAAE,EAAE,SAAS;AACd,KAAA;AACD,IAAA,2BAA2B,EAAE;AAC3B,QAAA,EAAE,EAAE,uDAAuD;AAC3D,QAAA,EAAE,EAAE,yDAAyD;AAC7D,QAAA,EAAE,EAAE,yDAAyD;AAC9D,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,EAAE,EAAE,OAAO;AACX,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,MAAM;AACX,KAAA;;;;;"}
+{"version":3,"file":"Common.js","sources":["../../../../src/constants/i18n/Common.tsx"],"sourcesContent":[null],"names":[],"mappings":";;AAAO,MAAM,MAAM,GAAG;AACpB,IAAA,WAAW,EAAE;AACX,QAAA,EAAE,EAAE,wBAAwB;AAC5B,QAAA,EAAE,EAAE,uBAAuB;AAC3B,QAAA,EAAE,EAAE,2BAA2B;AAChC,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,EAAE,SAAS;AACb,QAAA,EAAE,EAAE,SAAS;AACb,QAAA,EAAE,EAAE,SAAS;AACd,KAAA;AACD,IAAA,2BAA2B,EAAE;AAC3B,QAAA,EAAE,EAAE,uDAAuD;AAC3D,QAAA,EAAE,EAAE,yDAAyD;AAC7D,QAAA,EAAE,EAAE,yDAAyD;AAC9D,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,EAAE,EAAE,OAAO;AACX,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,MAAM;AACX,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,EAAE,EAAE,SAAS;AACb,QAAA,EAAE,EAAE,WAAW;AACf,QAAA,EAAE,EAAE,WAAW;AAChB,KAAA;;;;;"}

package/dist/cjs/constants/i18n/SearchBar.js

@@ -0,0 +1,22 @@
+'use strict';
+
+const SearchBar = {
+    SearchInputPlaceHolder: {
+        ru: "Поиск",
+        kk: "kkПоиск",
+        en: "enПоиск",
+    },
+    SearchInputAriaLabel: {
+        ru: "Поле для ввода поиска",
+        kk: "kkПоле для ввода поиска",
+        en: "enПоле для ввода поиска",
+    },
+    ClearSearch: {
+        ru: "Очистить поиск",
+        kk: "kkОчистить поиск",
+        en: "enОчистить поиск",
+    },
+};
+
+exports.SearchBar = SearchBar;
+//# sourceMappingURL=SearchBar.js.map

package/dist/cjs/constants/i18n/SearchBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.js","sources":["../../../../src/constants/i18n/SearchBar.tsx"],"sourcesContent":[null],"names":[],"mappings":";;AAAO,MAAM,SAAS,GAAG;AACvB,IAAA,sBAAsB,EAAE;AACtB,QAAA,EAAE,EAAE,OAAO;AACX,QAAA,EAAE,EAAE,SAAS;AACb,QAAA,EAAE,EAAE,SAAS;AACd,KAAA;AACD,IAAA,oBAAoB,EAAE;AACpB,QAAA,EAAE,EAAE,uBAAuB;AAC3B,QAAA,EAAE,EAAE,yBAAyB;AAC7B,QAAA,EAAE,EAAE,yBAAyB;AAC9B,KAAA;AACD,IAAA,WAAW,EAAE;AACX,QAAA,EAAE,EAAE,gBAAgB;AACpB,QAAA,EAAE,EAAE,kBAAkB;AACtB,QAAA,EAAE,EAAE,kBAAkB;AACvB,KAAA;;;;;"}

package/dist/cjs/constants/i18n/index.js

@@ -10,11 +10,11 @@ var EmptyMessages = require('./Messages/EmptyMessages.js');
 var HelpNotificationItem = require('./Messages/HelpNotificationItem.js');
 var MsgBody = require('./Messages/MsgBody.js');
 var MsgComponentHeader = require('./Messages/MsgComponentHeader.js');
-var MsgSearch = require('./Messages/MsgSearch.js');
 var Modal = require('./Modal.js');
 var DocCard = require('./Profile/DocCard.js');
 var ProfileHealthGeneral = require('./Profile/ProfileHealthGeneral.js');
 var SetUpAccess = require('./Profile/SetUpAccess.js');
+var SearchBar = require('./SearchBar.js');
 var SelectBoxButton = require('./SelectBoxButton.js');
 var Feedback = require('./Services/Feedback.js');
 var FileUpload = require('./Services/FileUpload.js');
@@ -33,11 +33,11 @@ const i18n = {
     Auth: Auth.Auth,
     Agreement: Agreement.Agreement,
     HelpNotificationItem: HelpNotificationItem.HelpNotificationItem,
-    MsgSearch: MsgSearch.MsgSearch,
     MsgBody: MsgBody.MsgBody,
     EmptyMessages: EmptyMessages.EmptyMessages,
     MsgComponentHeader: MsgComponentHeader.MsgComponentHeader,
     FileUpload: FileUpload.FileUpload,
+    SearchBar: SearchBar.SearchBar,
 };
 
 exports.i18n = i18n;

package/dist/cjs/constants/i18n/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/constants/i18n/index.tsx"],"sourcesContent":[null],"names":["Common","DocCard","Feedback","Modal","IdentityHeader","SelectBoxButton","ErrorModal","SetUpAccess","ProfileHealthGeneral","EdsSuccess","Auth","Agreement","HelpNotificationItem","MsgSearch","MsgBody","EmptyMessages","MsgComponentHeader","FileUpload"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,IAAI,GAAG;YAClBA,aAAM;aACNC,eAAO;cACPC,iBAAQ;WACRC,WAAK;oBACLC,6BAAc;qBACdC,+BAAe;gBACfC,qBAAU;iBACVC,uBAAW;0BACXC,yCAAoB;gBACpBC,qBAAU;UACVC,SAAI;eACJC,mBAAS;0BACTC,yCAAoB;eACpBC,mBAAS;aACTC,eAAO;mBACPC,2BAAa;wBACbC,qCAAkB;gBAClBC,qBAAU;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/constants/i18n/index.tsx"],"sourcesContent":[null],"names":["Common","DocCard","Feedback","Modal","IdentityHeader","SelectBoxButton","ErrorModal","SetUpAccess","ProfileHealthGeneral","EdsSuccess","Auth","Agreement","HelpNotificationItem","MsgBody","EmptyMessages","MsgComponentHeader","FileUpload","SearchBar"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,IAAI,GAAG;YAClBA,aAAM;aACNC,eAAO;cACPC,iBAAQ;WACRC,WAAK;oBACLC,6BAAc;qBACdC,+BAAe;gBACfC,qBAAU;iBACVC,uBAAW;0BACXC,yCAAoB;gBACpBC,qBAAU;UACVC,SAAI;eACJC,mBAAS;0BACTC,yCAAoB;aACpBC,eAAO;mBACPC,2BAAa;wBACbC,qCAAkB;gBAClBC,qBAAU;eACVC,mBAAS;;;;;"}

package/dist/cjs/utils/debounce.js

@@ -0,0 +1,23 @@
+'use strict';
+
+function debounce(func, wait) {
+    let timeout = null;
+    const debouncedFunction = (...args) => {
+        if (timeout) {
+            clearTimeout(timeout);
+        }
+        timeout = setTimeout(() => {
+            func(...args);
+        }, wait);
+    };
+    debouncedFunction.cancel = () => {
+        if (timeout) {
+            clearTimeout(timeout);
+            timeout = null;
+        }
+    };
+    return debouncedFunction;
+}
+
+exports.debounce = debounce;
+//# sourceMappingURL=debounce.js.map

package/dist/cjs/utils/debounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"debounce.js","sources":["../../../src/utils/debounce.tsx"],"sourcesContent":[null],"names":[],"mappings":";;AAAA,SAAS,QAAQ,CACf,IAAO,EACP,IAAY,EAAA;IAEZ,IAAI,OAAO,GAA0B,IAAI;AAEzC,IAAA,MAAM,iBAAiB,GAAG,CAAC,GAAG,IAAmB,KAAI;AACnD,QAAA,IAAI,OAAO,EAAE;YACX,YAAY,CAAC,OAAO,CAAC;AACtB,QAAA;AAED,QAAA,OAAO,GAAG,UAAU,CAAC,MAAK;AACxB,YAAA,IAAI,CAAC,GAAG,IAAI,CAAC;QACf,CAAC,EAAE,IAAI,CAAC;AACV,IAAA,CAAC;AAED,IAAA,iBAAiB,CAAC,MAAM,GAAG,MAAK;AAC9B,QAAA,IAAI,OAAO,EAAE;YACX,YAAY,CAAC,OAAO,CAAC;YACrB,OAAO,GAAG,IAAI;AACf,QAAA;AACH,IAAA,CAAC;AAED,IAAA,OAAO,iBAAiB;AAC1B;;;;"}

package/dist/esm/baseComponents/SearchBar/SearchBar.module.css.js

@@ -1,5 +1,5 @@
-var css_248z = ".SearchBar-module_searchLayout__VCBFD {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n\n.SearchBar-module_searchIcon__w5c7b > :first-child {\n  fill: var(--icon-secondary-color);\n}\n\n.SearchBar-module_clearIcon__tlykn > :first-child {\n  fill: var(--icon-secondary-color);\n}\n\n.SearchBar-module_clearIcon__tlykn svg {\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n}\n\n.SearchBar-module_loadingIcon__v-WG9 {\n  animation: SearchBar-module_loading__qptyx 1s linear infinite;\n}\n\n.SearchBar-module_loadingIcon__v-WG9 > :first-child {\n  fill: var(--icon-accent-color);\n}\n\n@keyframes SearchBar-module_loading__qptyx {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.SearchBar-module_inputContainer__jvbxZ {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1 0 0;\n  border-radius: 8px;\n}\n\n.SearchBar-module_inputContainer--modal__5Ayyp {\n  padding: 12px 16px;\n  background: var(--surface-surface-white-nonconvert);\n  box-shadow: 0 12px 32px 0 rgba(128, 130, 136, 0.5);\n}\n\n.SearchBar-module_inputContainer--default__82CUU {\n  padding: 12px 16px;\n  background: var(--surface-surface-1);\n}\n\n.SearchBar-module_inputContainer--chat__fXYm9 {\n  padding: 6px 12px;\n  background: var(--surface-surface-white-nonconvert);\n}\n\n.SearchBar-module_input__eZosz::placeholder {\n  color: var(--text-disabled-color);\n}\n\n.SearchBar-module_iconWrapper__VHJrg {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.SearchBar-module_inputContainer--modal__5Ayyp .SearchBar-module_iconWrapper__VHJrg,\n.SearchBar-module_inputContainer--default__82CUU .SearchBar-module_iconWrapper__VHJrg,\n.SearchBar-module_inputContainer--modal__5Ayyp .SearchBar-module_clearIcon__tlykn,\n.SearchBar-module_inputContainer--default__82CUU .SearchBar-module_clearIcon__tlykn {\n  height: 20px;\n  width: 20px;\n}\n\n.SearchBar-module_inputContainer--chat__fXYm9 .SearchBar-module_iconWrapper__VHJrg,\n.SearchBar-module_inputContainer--chat__fXYm9 .SearchBar-module_clearIcon__tlykn {\n  height: 16px;\n  width: 16px;\n}\n\n.SearchBar-module_inputContainer--modal__5Ayyp input,\n.SearchBar-module_inputContainer--default__82CUU input {\n  height: 24px;\n}\n\n.SearchBar-module_inputContainer--chat__fXYm9 input {\n  height: 20px;\n}\n\n.SearchBar-module_input__eZosz {\n  outline: none;\n  border: none;\n  width: 100%;\n  background: transparent;\n}\n\n.SearchBar-module_input__eZosz:focus {\n  caret-color: var(--default-primary-accent);\n}\n\nbutton {\n  background: transparent;\n  margin: 0;\n  padding: 0;\n  border: none;\n  cursor: pointer;\n  line-height: 0;\n}\n";
-var styles = {"searchLayout":"SearchBar-module_searchLayout__VCBFD","searchIcon":"SearchBar-module_searchIcon__w5c7b","clearIcon":"SearchBar-module_clearIcon__tlykn","loadingIcon":"SearchBar-module_loadingIcon__v-WG9","loading":"SearchBar-module_loading__qptyx","inputContainer":"SearchBar-module_inputContainer__jvbxZ","inputContainer--modal":"SearchBar-module_inputContainer--modal__5Ayyp","inputContainer--default":"SearchBar-module_inputContainer--default__82CUU","inputContainer--chat":"SearchBar-module_inputContainer--chat__fXYm9","input":"SearchBar-module_input__eZosz","iconWrapper":"SearchBar-module_iconWrapper__VHJrg"};
+var css_248z = ".SearchBar-module_searchLayout__VCBFD {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n\n.SearchBar-module_searchIcon__w5c7b > :first-child {\n  fill: var(--icon-secondary-color);\n}\n\n.SearchBar-module_clearIcon__tlykn > :first-child {\n  fill: var(--icon-secondary-color);\n}\n\n.SearchBar-module_clearIcon__tlykn svg {\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n}\n\n.SearchBar-module_loadingIcon__v-WG9 {\n  animation: SearchBar-module_loading__qptyx 1s linear infinite;\n}\n\n.SearchBar-module_loadingIcon__v-WG9 > :first-child {\n  fill: var(--icon-accent-color);\n}\n\n@keyframes SearchBar-module_loading__qptyx {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.SearchBar-module_inputContainer__jvbxZ {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1 0 0;\n  border-radius: 8px;\n}\n\n.SearchBar-module_inputContainer--shadow__YJ6eS {\n  padding: 12px 16px;\n  background: var(--surface-surface-white-nonconvert);\n  box-shadow: 0 12px 32px 0 rgba(128, 130, 136, 0.5);\n  cursor: pointer;\n}\n\n.SearchBar-module_inputContainer--default__82CUU {\n  padding: 12px 16px;\n  background: var(--surface-surface-1);\n}\n\n.SearchBar-module_inputContainer--slim__B6Of8 {\n  padding: 6px 12px;\n  background: var(--surface-surface-white-nonconvert);\n}\n\n.SearchBar-module_input__eZosz::placeholder {\n  color: var(--text-disabled-color);\n}\n\n.SearchBar-module_iconWrapper__VHJrg {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.SearchBar-module_inputContainer--shadow__YJ6eS .SearchBar-module_iconWrapper__VHJrg,\n.SearchBar-module_inputContainer--default__82CUU .SearchBar-module_iconWrapper__VHJrg,\n.SearchBar-module_inputContainer--shadow__YJ6eS .SearchBar-module_clearIcon__tlykn,\n.SearchBar-module_inputContainer--default__82CUU .SearchBar-module_clearIcon__tlykn {\n  height: 20px;\n  width: 20px;\n}\n\n.SearchBar-module_inputContainer--slim__B6Of8 .SearchBar-module_iconWrapper__VHJrg,\n.SearchBar-module_inputContainer--slim__B6Of8 .SearchBar-module_clearIcon__tlykn {\n  height: 16px;\n  width: 16px;\n}\n\n.SearchBar-module_inputContainer--shadow__YJ6eS input,\n.SearchBar-module_inputContainer--default__82CUU input {\n  height: 24px;\n}\n\n.SearchBar-module_inputContainer--slim__B6Of8 input {\n  height: 20px;\n}\n\n.SearchBar-module_input__eZosz {\n  outline: none;\n  border: none;\n  width: 100%;\n  background: transparent;\n}\n\n.SearchBar-module_input__eZosz:focus {\n  caret-color: var(--default-primary-accent);\n}\n\nbutton {\n  background: transparent;\n  margin: 0;\n  padding: 0;\n  border: none;\n  cursor: pointer;\n  line-height: 0;\n}\n";
+var styles = {"searchLayout":"SearchBar-module_searchLayout__VCBFD","searchIcon":"SearchBar-module_searchIcon__w5c7b","clearIcon":"SearchBar-module_clearIcon__tlykn","loadingIcon":"SearchBar-module_loadingIcon__v-WG9","loading":"SearchBar-module_loading__qptyx","inputContainer":"SearchBar-module_inputContainer__jvbxZ","inputContainer--shadow":"SearchBar-module_inputContainer--shadow__YJ6eS","inputContainer--default":"SearchBar-module_inputContainer--default__82CUU","inputContainer--slim":"SearchBar-module_inputContainer--slim__B6Of8","input":"SearchBar-module_input__eZosz","iconWrapper":"SearchBar-module_iconWrapper__VHJrg"};
 function styleInject(css, options) {
     if (typeof document === 'undefined') return;
     const head = document.head || document.getElementsByTagName('head')[0];

package/dist/esm/baseComponents/SearchBar/index.js

@@ -1,17 +1,31 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Icons } from '@egov3/graphics';
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import { i18n } from '../../constants/i18n/index.js';
+import { debounce } from '../../utils/debounce.js';
 import { joinClasses } from '../../utils/joinClasses.js';
 import typography from '../../styles/typography.module.css.js';
 import styles from './SearchBar.module.css.js';
 
-const langDic = i18n.MsgSearch;
-const SearchBar = ({ lang, handleModalOpen, handleOnEnter, variant = "default", loading = false, disabled = false, defaultValue = "", showClearButton = true, }) => {
+const langDic = i18n.SearchBar;
+const SearchBar = ({ lang, handleModalOpen, handleOnEnter, handleOnClear, handleOnChange, variant = "default", loading = false, disabled = false, defaultValue = "", showClearButton = true, placeholder = "", "aria-label": ariaLabel = "", debounceDelay = 300, }) => {
     const [value, setValue] = useState(defaultValue);
     const inputRef = useRef(null);
+    const debouncedOnChangeRef = useRef(null);
+    useEffect(() => {
+        debouncedOnChangeRef.current = debounce((value) => {
+            if (handleOnChange) {
+                handleOnChange(value);
+            }
+        }, debounceDelay);
+        return () => {
+            if (debouncedOnChangeRef.current) {
+                debouncedOnChangeRef.current.cancel();
+            }
+        };
+    }, [handleOnChange, debounceDelay]);
     const handleKeyDown = useCallback((event) => {
-        if (disabled || loading)
+        if (disabled || loading || !!handleModalOpen)
             return;
         if (event.key === "Enter") {
             event.preventDefault();
@@ -19,27 +33,37 @@ const SearchBar = ({ lang, handleModalOpen, handleOnEnter, variant = "default",
                 handleOnEnter(value.trim());
             }
         }
-    }, [disabled, loading, handleOnEnter, value]);
+    }, [disabled, loading, handleModalOpen, handleOnEnter, value]);
     const handleClear = useCallback(() => {
         if (disabled || loading)
             return;
         setValue("");
-        if (handleOnEnter) {
-            handleOnEnter("");
+        if (debouncedOnChangeRef.current) {
+            debouncedOnChangeRef.current.cancel();
         }
+        handleOnEnter?.("");
+        handleOnChange?.("");
+        handleOnClear?.();
         inputRef.current?.focus();
-    }, [disabled, loading, handleOnEnter]);
+    }, [disabled, loading, handleOnEnter, handleOnClear, handleOnChange]);
     const handleInputClick = useCallback((event) => {
-        if (variant === "modal") {
-            event.stopPropagation();
-            if (handleModalOpen && !disabled) {
-                handleModalOpen();
-            }
+        event.stopPropagation();
+        if (handleModalOpen && !disabled) {
+            handleModalOpen();
+        }
+    }, [handleModalOpen, disabled]);
+    const handleChange = useCallback((e) => {
+        const newValue = e.target.value;
+        setValue(newValue);
+        if (debouncedOnChangeRef.current) {
+            debouncedOnChangeRef.current(newValue);
         }
-    }, [variant, handleModalOpen, disabled]);
+    }, []);
     const inputContainerClasses = joinClasses(styles.inputContainer, styles[`inputContainer--${variant}`]);
-    const inputClasses = joinClasses(styles.input, variant === "chat" ? typography.body2Regular : typography.body1Regular);
-    return (jsx("div", { "data-testid": "SearchBar_WRAPPER", className: styles.searchLayout, "data-variant": variant, "data-loading": loading, "data-disabled": disabled, children: jsxs("div", { "data-testid": "SearchBar_INPUT_CONTAINER_WRAPPER", className: inputContainerClasses, children: [jsx("div", { className: styles.iconWrapper, children: loading ? (jsx(Icons.General.Loader, { className: styles.loadingIcon, "data-testid": "SearchBar_LOADING_ICON" })) : (jsx(Icons.General.Search, { className: styles.searchIcon, "data-testid": "SearchBar_SEARCH_ICON" })) }), jsx("input", { ref: inputRef, "data-testid": "SearchBar_INPUT", value: value, onChange: (e) => setValue(e.target.value), disabled: disabled, readOnly: variant === "modal", "aria-label": langDic.MsgSearchInputPlaceHolder[lang], placeholder: langDic.MsgSearchInputPlaceHolder[lang], onClick: handleInputClick, onKeyDown: variant === "modal" ? undefined : handleKeyDown, className: inputClasses }), showClearButton && value.length > 0 && variant !== "modal" && (jsx("button", { "data-testid": "SearchBar_CLEAR_BUTTON", type: "button", onClick: handleClear, className: styles.clearButton, "aria-label": "Clear search", disabled: disabled, children: jsx(Icons.General.Clear, { className: styles.clearIcon, "data-testid": "SearchBar_CLEAR_ICON" }) }))] }) }));
+    const inputClasses = joinClasses(styles.input, variant === "slim" ? typography.body2Regular : typography.body1Regular);
+    const placeholderText = placeholder || langDic.SearchInputPlaceHolder[lang];
+    const ariaLabelText = ariaLabel || langDic.SearchInputAriaLabel[lang];
+    return (jsx("div", { "data-testid": "SearchBar_WRAPPER", className: styles.searchLayout, "data-variant": variant, "data-loading": loading, "data-disabled": disabled, children: jsxs("div", { "data-testid": "SearchBar_INPUT_CONTAINER_WRAPPER", className: inputContainerClasses, children: [jsx("div", { className: styles.iconWrapper, "data-testid": "SearchBar_ICON_WRAP", children: loading ? (jsx(Icons.General.Loader, { className: styles.loadingIcon, "data-testid": "SearchBar_LOADING_ICON" })) : (jsx(Icons.General.Search, { className: styles.searchIcon, "data-testid": "SearchBar_SEARCH_ICON" })) }), jsx("input", { ref: inputRef, "data-testid": "SearchBar_INPUT", value: value, onChange: handleChange, disabled: disabled, readOnly: !!handleModalOpen, "aria-label": ariaLabelText, placeholder: placeholderText, onClick: handleInputClick, onKeyDown: handleKeyDown, className: inputClasses }), showClearButton && value.length > 0 && !handleModalOpen && (jsx("button", { "data-testid": "SearchBar_CLEAR_BUTTON", type: "button", onClick: handleClear, className: styles.clearButton, "aria-label": langDic.ClearSearch[lang], disabled: disabled, children: jsx(Icons.General.Clear, { className: styles.clearIcon, "data-testid": "SearchBar_CLEAR_ICON" }) }))] }) }));
 };
 
 export { SearchBar };

package/dist/esm/baseComponents/SearchBar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/baseComponents/SearchBar/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/baseComponents/SearchBar/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/Messages/MsgSearch/index.js

@@ -3,9 +3,9 @@ import { BaseComponents } from '../../../baseComponents/index.js';
 import { i18n } from '../../../constants/i18n/index.js';
 import styles from './MsgSearch.module.css.js';
 
-const langDic = i18n.MsgSearch;
+const langDic = i18n.Common;
 const MsgSearch = ({ lang, handleClose, handleOnEnter, }) => {
-    return (jsxs("div", { "data-testid": "MsgSearch_WRAPPER", className: styles.searchLayout, children: [jsx(BaseComponents.SearchBar, { variant: "chat", lang: lang, handleOnEnter: handleOnEnter }), jsx(BaseComponents.Button, { "data-testid": "MsgSearch_CLOSE", "aria-label": langDic.MsgSearchButton[lang], size: "small", variant: "tinted", onClick: handleClose, children: langDic.MsgSearchButton[lang] })] }));
+    return (jsxs("div", { "data-testid": "MsgSearch_WRAPPER", className: styles.searchLayout, children: [jsx(BaseComponents.SearchBar, { variant: "slim", lang: lang, handleOnEnter: handleOnEnter }), jsx(BaseComponents.Button, { "data-testid": "MsgSearch_CLOSE", "aria-label": langDic.CloseBtn[lang], size: "small", variant: "tinted", onClick: handleClose, children: langDic.CloseBtn[lang] })] }));
 };
 
 export { MsgSearch };

package/dist/esm/components/Messages/MsgSearch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Messages/MsgSearch/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AAUA,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS;AAEvB,MAAM,SAAS,GAAG,CAAC,EACxB,IAAI,EACJ,WAAW,EACX,aAAa,GACG,KAAI;AACpB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,mBAAmB,EAAC,SAAS,EAAE,MAAM,CAAC,YAAY,EAAA,QAAA,EAAA,CACjEC,GAAA,CAAC,cAAc,CAAC,SAAS,EAAA,EACvB,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,aAAa,EAAA,CAC5B,EACFA,IAAC,cAAc,CAAC,MAAM,EAAA,EAAA,aAAA,EACR,iBAAiB,EAAA,YAAA,EACjB,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,EACzC,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,WAAW,EAAA,QAAA,EAEnB,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,EAAA,CACR,CAAA,EAAA,CACpB;AAEV;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Messages/MsgSearch/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AAUA,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM;AAEpB,MAAM,SAAS,GAAG,CAAC,EACxB,IAAI,EACJ,WAAW,EACX,aAAa,GACG,KAAI;AACpB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,mBAAmB,EAAC,SAAS,EAAE,MAAM,CAAC,YAAY,EAAA,QAAA,EAAA,CACjEC,GAAA,CAAC,cAAc,CAAC,SAAS,EAAA,EACvB,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,aAAa,EAAA,CAC5B,EACFA,IAAC,cAAc,CAAC,MAAM,EAAA,EAAA,aAAA,EACR,iBAAiB,EAAA,YAAA,EACjB,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,EAClC,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,WAAW,EAAA,QAAA,EAEnB,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAA,CACD,CAAA,EAAA,CACpB;AAEV;;;;"}

package/dist/esm/constants/i18n/Common.js

@@ -19,6 +19,11 @@ const Common = {
         kk: "Келесі",
         en: "Next",
     },
+    CloseBtn: {
+        ru: "Закрыть",
+        kk: "kkЗакрыть",
+        en: "enЗакрыть",
+    },
 };
 
 export { Common };

package/dist/esm/constants/i18n/Common.js.map

@@ -1 +1 @@
-{"version":3,"file":"Common.js","sources":["../../../../src/constants/i18n/Common.tsx"],"sourcesContent":[null],"names":[],"mappings":"AAAO,MAAM,MAAM,GAAG;AACpB,IAAA,WAAW,EAAE;AACX,QAAA,EAAE,EAAE,wBAAwB;AAC5B,QAAA,EAAE,EAAE,uBAAuB;AAC3B,QAAA,EAAE,EAAE,2BAA2B;AAChC,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,EAAE,SAAS;AACb,QAAA,EAAE,EAAE,SAAS;AACb,QAAA,EAAE,EAAE,SAAS;AACd,KAAA;AACD,IAAA,2BAA2B,EAAE;AAC3B,QAAA,EAAE,EAAE,uDAAuD;AAC3D,QAAA,EAAE,EAAE,yDAAyD;AAC7D,QAAA,EAAE,EAAE,yDAAyD;AAC9D,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,EAAE,EAAE,OAAO;AACX,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,MAAM;AACX,KAAA;;;;;"}
+{"version":3,"file":"Common.js","sources":["../../../../src/constants/i18n/Common.tsx"],"sourcesContent":[null],"names":[],"mappings":"AAAO,MAAM,MAAM,GAAG;AACpB,IAAA,WAAW,EAAE;AACX,QAAA,EAAE,EAAE,wBAAwB;AAC5B,QAAA,EAAE,EAAE,uBAAuB;AAC3B,QAAA,EAAE,EAAE,2BAA2B;AAChC,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,EAAE,SAAS;AACb,QAAA,EAAE,EAAE,SAAS;AACb,QAAA,EAAE,EAAE,SAAS;AACd,KAAA;AACD,IAAA,2BAA2B,EAAE;AAC3B,QAAA,EAAE,EAAE,uDAAuD;AAC3D,QAAA,EAAE,EAAE,yDAAyD;AAC7D,QAAA,EAAE,EAAE,yDAAyD;AAC9D,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,EAAE,EAAE,OAAO;AACX,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,MAAM;AACX,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,EAAE,EAAE,SAAS;AACb,QAAA,EAAE,EAAE,WAAW;AACf,QAAA,EAAE,EAAE,WAAW;AAChB,KAAA;;;;;"}

package/dist/esm/constants/i18n/SearchBar.js

@@ -0,0 +1,20 @@
+const SearchBar = {
+    SearchInputPlaceHolder: {
+        ru: "Поиск",
+        kk: "kkПоиск",
+        en: "enПоиск",
+    },
+    SearchInputAriaLabel: {
+        ru: "Поле для ввода поиска",
+        kk: "kkПоле для ввода поиска",
+        en: "enПоле для ввода поиска",
+    },
+    ClearSearch: {
+        ru: "Очистить поиск",
+        kk: "kkОчистить поиск",
+        en: "enОчистить поиск",
+    },
+};
+
+export { SearchBar };
+//# sourceMappingURL=SearchBar.js.map

package/dist/esm/constants/i18n/SearchBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.js","sources":["../../../../src/constants/i18n/SearchBar.tsx"],"sourcesContent":[null],"names":[],"mappings":"AAAO,MAAM,SAAS,GAAG;AACvB,IAAA,sBAAsB,EAAE;AACtB,QAAA,EAAE,EAAE,OAAO;AACX,QAAA,EAAE,EAAE,SAAS;AACb,QAAA,EAAE,EAAE,SAAS;AACd,KAAA;AACD,IAAA,oBAAoB,EAAE;AACpB,QAAA,EAAE,EAAE,uBAAuB;AAC3B,QAAA,EAAE,EAAE,yBAAyB;AAC7B,QAAA,EAAE,EAAE,yBAAyB;AAC9B,KAAA;AACD,IAAA,WAAW,EAAE;AACX,QAAA,EAAE,EAAE,gBAAgB;AACpB,QAAA,EAAE,EAAE,kBAAkB;AACtB,QAAA,EAAE,EAAE,kBAAkB;AACvB,KAAA;;;;;"}

package/dist/esm/constants/i18n/index.js

@@ -8,11 +8,11 @@ import { EmptyMessages } from './Messages/EmptyMessages.js';
 import { HelpNotificationItem } from './Messages/HelpNotificationItem.js';
 import { MsgBody } from './Messages/MsgBody.js';
 import { MsgComponentHeader } from './Messages/MsgComponentHeader.js';
-import { MsgSearch } from './Messages/MsgSearch.js';
 import { Modal } from './Modal.js';
 import { DocCard } from './Profile/DocCard.js';
 import { ProfileHealthGeneral } from './Profile/ProfileHealthGeneral.js';
 import { SetUpAccess } from './Profile/SetUpAccess.js';
+import { SearchBar } from './SearchBar.js';
 import { SelectBoxButton } from './SelectBoxButton.js';
 import { Feedback } from './Services/Feedback.js';
 import { FileUpload } from './Services/FileUpload.js';
@@ -31,11 +31,11 @@ const i18n = {
     Auth,
     Agreement,
     HelpNotificationItem,
-    MsgSearch,
     MsgBody,
     EmptyMessages,
     MsgComponentHeader,
     FileUpload,
+    SearchBar,
 };
 
 export { i18n };

package/dist/esm/constants/i18n/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/constants/i18n/index.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAmBO,MAAM,IAAI,GAAG;IAClB,MAAM;IACN,OAAO;IACP,QAAQ;IACR,KAAK;IACL,cAAc;IACd,eAAe;IACf,UAAU;IACV,WAAW;IACX,oBAAoB;IACpB,UAAU;IACV,IAAI;IACJ,SAAS;IACT,oBAAoB;IACpB,SAAS;IACT,OAAO;IACP,aAAa;IACb,kBAAkB;IAClB,UAAU;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/constants/i18n/index.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAmBO,MAAM,IAAI,GAAG;IAClB,MAAM;IACN,OAAO;IACP,QAAQ;IACR,KAAK;IACL,cAAc;IACd,eAAe;IACf,UAAU;IACV,WAAW;IACX,oBAAoB;IACpB,UAAU;IACV,IAAI;IACJ,SAAS;IACT,oBAAoB;IACpB,OAAO;IACP,aAAa;IACb,kBAAkB;IAClB,UAAU;IACV,SAAS;;;;;"}

package/dist/esm/utils/debounce.js

@@ -0,0 +1,21 @@
+function debounce(func, wait) {
+    let timeout = null;
+    const debouncedFunction = (...args) => {
+        if (timeout) {
+            clearTimeout(timeout);
+        }
+        timeout = setTimeout(() => {
+            func(...args);
+        }, wait);
+    };
+    debouncedFunction.cancel = () => {
+        if (timeout) {
+            clearTimeout(timeout);
+            timeout = null;
+        }
+    };
+    return debouncedFunction;
+}
+
+export { debounce };
+//# sourceMappingURL=debounce.js.map

package/dist/esm/utils/debounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"debounce.js","sources":["../../../src/utils/debounce.tsx"],"sourcesContent":[null],"names":[],"mappings":"AAAA,SAAS,QAAQ,CACf,IAAO,EACP,IAAY,EAAA;IAEZ,IAAI,OAAO,GAA0B,IAAI;AAEzC,IAAA,MAAM,iBAAiB,GAAG,CAAC,GAAG,IAAmB,KAAI;AACnD,QAAA,IAAI,OAAO,EAAE;YACX,YAAY,CAAC,OAAO,CAAC;AACtB,QAAA;AAED,QAAA,OAAO,GAAG,UAAU,CAAC,MAAK;AACxB,YAAA,IAAI,CAAC,GAAG,IAAI,CAAC;QACf,CAAC,EAAE,IAAI,CAAC;AACV,IAAA,CAAC;AAED,IAAA,iBAAiB,CAAC,MAAM,GAAG,MAAK;AAC9B,QAAA,IAAI,OAAO,EAAE;YACX,YAAY,CAAC,OAAO,CAAC;YACrB,OAAO,GAAG,IAAI;AACf,QAAA;AACH,IAAA,CAAC;AAED,IAAA,OAAO,iBAAiB;AAC1B;;;;"}

package/dist/types/baseComponents/SearchBar/index.d.ts

@@ -3,11 +3,16 @@ import { ILangProps } from '../../interfaces/common/index.js';
 interface ISearchBarProps extends ILangProps {
     handleModalOpen?: () => void;
     handleOnEnter?: (value: string) => void;
-    variant?: "modal" | "chat" | "default";
+    handleOnClear?: () => void;
+    handleOnChange?: (value: string) => void;
+    variant?: "shadow" | "slim" | "default";
     loading?: boolean;
     disabled?: boolean;
     defaultValue?: string;
     showClearButton?: boolean;
+    placeholder?: string;
+    "aria-label"?: string;
+    debounceDelay?: number;
 }
 
 export type { ISearchBarProps };

package/dist/types/index.d.ts

@@ -51,7 +51,7 @@ declare const SystemDesign: {
         Overlay: ({ children, className }: IOverlayProps) => react_jsx_runtime.JSX.Element;
         RadioGroup: ({ radioGroupItems, setSelectedOption, selectedOption, }: IRadioGroupProps) => react_jsx_runtime.JSX.Element;
         RadioToggle: ({ lock, setLock }: IRadioToggleProps) => react_jsx_runtime.JSX.Element;
-        SearchBar: ({ lang, handleModalOpen, handleOnEnter, variant, loading, disabled, defaultValue, showClearButton, }: ISearchBarProps) => react_jsx_runtime.JSX.Element;
+        SearchBar: ({ lang, handleModalOpen, handleOnEnter, handleOnClear, handleOnChange, variant, loading, disabled, defaultValue, showClearButton, placeholder, "aria-label": ariaLabel, debounceDelay, }: ISearchBarProps) => react_jsx_runtime.JSX.Element;
         SelectBoxButton: ({ handleClick, labelText, disabled, error, modalValue, lang, }: ISelectBoxProps) => react_jsx_runtime.JSX.Element;
         StatusText: ({ text, isAlignedCenter, isNeedIcon, variant, }: IStatusTextProps) => react_jsx_runtime.JSX.Element;
         TabButtons: ({ tabDocLabels, activeTab, handleClick, }: ITabButtonsProps) => react_jsx_runtime.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egov3/system-design",
-  "version": "1.3.98",
+  "version": "1.3.99",
   "main": "dist/cjs/index.js",
   "types": "dist/types/index.d.ts",
   "module": "dist/esm/index.js",

package/dist/cjs/constants/i18n/Messages/MsgSearch.js

@@ -1,17 +0,0 @@
-'use strict';
-
-const MsgSearch = {
-    MsgSearchButton: {
-        ru: "Закрыть",
-        kk: "kkЗакрыть",
-        en: "enЗакрыть",
-    },
-    MsgSearchInputPlaceHolder: {
-        ru: "Поиск",
-        kk: "kkПоиск",
-        en: "enПоиск",
-    },
-};
-
-exports.MsgSearch = MsgSearch;
-//# sourceMappingURL=MsgSearch.js.map

package/dist/cjs/constants/i18n/Messages/MsgSearch.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MsgSearch.js","sources":["../../../../../src/constants/i18n/Messages/MsgSearch.tsx"],"sourcesContent":[null],"names":[],"mappings":";;AAAO,MAAM,SAAS,GAAG;AACvB,IAAA,eAAe,EAAE;AACf,QAAA,EAAE,EAAE,SAAS;AACb,QAAA,EAAE,EAAE,WAAW;AACf,QAAA,EAAE,EAAE,WAAW;AAChB,KAAA;AACD,IAAA,yBAAyB,EAAE;AACzB,QAAA,EAAE,EAAE,OAAO;AACX,QAAA,EAAE,EAAE,SAAS;AACb,QAAA,EAAE,EAAE,SAAS;AACd,KAAA;;;;;"}

package/dist/esm/constants/i18n/Messages/MsgSearch.js

@@ -1,15 +0,0 @@
-const MsgSearch = {
-    MsgSearchButton: {
-        ru: "Закрыть",
-        kk: "kkЗакрыть",
-        en: "enЗакрыть",
-    },
-    MsgSearchInputPlaceHolder: {
-        ru: "Поиск",
-        kk: "kkПоиск",
-        en: "enПоиск",
-    },
-};
-
-export { MsgSearch };
-//# sourceMappingURL=MsgSearch.js.map

package/dist/esm/constants/i18n/Messages/MsgSearch.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MsgSearch.js","sources":["../../../../../src/constants/i18n/Messages/MsgSearch.tsx"],"sourcesContent":[null],"names":[],"mappings":"AAAO,MAAM,SAAS,GAAG;AACvB,IAAA,eAAe,EAAE;AACf,QAAA,EAAE,EAAE,SAAS;AACb,QAAA,EAAE,EAAE,WAAW;AACf,QAAA,EAAE,EAAE,WAAW;AAChB,KAAA;AACD,IAAA,yBAAyB,EAAE;AACzB,QAAA,EAAE,EAAE,OAAO;AACX,QAAA,EAAE,EAAE,SAAS;AACb,QAAA,EAAE,EAAE,SAAS;AACd,KAAA;;;;;"}