@egov3/system-design 1.3.94 → 1.3.95

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

@@ -0,0 +1,22 @@
+'use strict';
+
+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"};
+function styleInject(css, options) {
+    if (typeof document === 'undefined') return;
+    const head = document.head || document.getElementsByTagName('head')[0];
+    const style = document.createElement('style');
+    style.type = 'text/css';
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+    head.appendChild(style);
+  }
+  styleInject(css_248z);
+
+exports.default = styles;
+//# sourceMappingURL=SearchBar.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,48 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var graphics = require('@egov3/graphics');
+var React = require('react');
+var index = require('../../constants/i18n/index.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 [value, setValue] = React.useState(defaultValue);
+    const inputRef = React.useRef(null);
+    const handleKeyDown = React.useCallback((event) => {
+        if (disabled || loading)
+            return;
+        if (event.key === "Enter") {
+            event.preventDefault();
+            if (handleOnEnter && value.trim()) {
+                handleOnEnter(value.trim());
+            }
+        }
+    }, [disabled, loading, handleOnEnter, value]);
+    const handleClear = React.useCallback(() => {
+        if (disabled || loading)
+            return;
+        setValue("");
+        if (handleOnEnter) {
+            handleOnEnter("");
+        }
+        inputRef.current?.focus();
+    }, [disabled, loading, handleOnEnter]);
+    const handleInputClick = React.useCallback((event) => {
+        if (variant === "modal") {
+            event.stopPropagation();
+            if (handleModalOpen && !disabled) {
+                handleModalOpen();
+            }
+        }
+    }, [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" }) }))] }) }));
+};
+
+exports.SearchBar = SearchBar;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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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"}

package/dist/cjs/baseComponents/index.js

@@ -1,41 +1,43 @@
 'use strict';
 
 require('../styles/colors.css.js');
-var index$f = require('./Accordion/index.js');
-var index$e = require('./Button/index.js');
-var index$d = require('./InputField/index.js');
-var index$c = require('./InputFieldGroup/index.js');
-var index$b = require('./Label/index.js');
-var index$a = require('./Loader/index.js');
-var index$9 = require('./Modal/index.js');
-var index = require('./Overlay/index.js');
+var index$g = require('./Accordion/index.js');
+var index$f = require('./Button/index.js');
+var index$e = require('./InputField/index.js');
+var index$d = require('./InputFieldGroup/index.js');
+var index$c = require('./Label/index.js');
+var index$b = require('./Loader/index.js');
+var index$a = require('./Modal/index.js');
+var index$9 = require('./Overlay/index.js');
 var index$8 = require('./RadioGroup/index.js');
 var index$7 = require('./RadioToggle/index.js');
-var index$6 = require('./SelectBoxButton/index.js');
-var index$1 = require('./StatusText/index.js');
-var index$2 = require('./TabButtons/index.js');
-var index$4 = require('./TextareaField/index.js');
-var index$3 = require('./TextPair/index.js');
-var index$5 = require('./Typography/index.js');
+var index$6 = require('./SearchBar/index.js');
+var index$5 = require('./SelectBoxButton/index.js');
+var index$4 = require('./StatusText/index.js');
+var index$3 = require('./TabButtons/index.js');
+var index$2 = require('./TextareaField/index.js');
+var index$1 = require('./TextPair/index.js');
+var index = require('./Typography/index.js');
 
 const BaseComponents = {
-    Accordion: index$f.Accordion,
-    Button: index$e.Button,
+    Accordion: index$g.Accordion,
+    Button: index$f.Button,
     CustomRadioButton: index$8.CustomRadioButton,
-    InputField: index$d.InputField,
-    InputFieldGroup: index$c.InputFieldGroup,
-    Label: index$b.Label,
-    Loader: index$a.Loader,
-    Modal: index$9.Modal,
+    InputField: index$e.InputField,
+    InputFieldGroup: index$d.InputFieldGroup,
+    Label: index$c.Label,
+    Loader: index$b.Loader,
+    Modal: index$a.Modal,
+    Overlay: index$9.Overlay,
     RadioGroup: index$8.RadioGroup,
     RadioToggle: index$7.RadioToggle,
-    SelectBoxButton: index$6.SelectBoxButton,
-    Typography: index$5.Typography,
-    TextareaField: index$4.TextareaField,
-    TextPair: index$3.TextPair,
-    TabButtons: index$2.TabButtons,
-    StatusText: index$1.StatusText,
-    Overlay: index.Overlay,
+    SearchBar: index$6.SearchBar,
+    SelectBoxButton: index$5.SelectBoxButton,
+    StatusText: index$4.StatusText,
+    TabButtons: index$3.TabButtons,
+    TextareaField: index$2.TextareaField,
+    TextPair: index$1.TextPair,
+    Typography: index.Typography,
 };
 
 exports.BaseComponents = BaseComponents;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/baseComponents/index.ts"],"sourcesContent":[null],"names":["Accordion","Button","CustomRadioButton","InputField","InputFieldGroup","Label","Loader","Modal","RadioGroup","RadioToggle","SelectBoxButton","Typography","TextareaField","TextPair","TabButtons","StatusText","Overlay"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,cAAc,GAAG;eAC5BA,iBAAS;YACTC,cAAM;uBACNC,yBAAiB;gBACjBC,kBAAU;qBACVC,uBAAe;WACfC,aAAK;YACLC,cAAM;WACNC,aAAK;gBACLC,kBAAU;iBACVC,mBAAW;qBACXC,uBAAe;gBACfC,kBAAU;mBACVC,qBAAa;cACbC,gBAAQ;gBACRC,kBAAU;gBACVC,kBAAU;aACVC,aAAO;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/baseComponents/index.ts"],"sourcesContent":[null],"names":["Accordion","Button","CustomRadioButton","InputField","InputFieldGroup","Label","Loader","Modal","Overlay","RadioGroup","RadioToggle","SearchBar","SelectBoxButton","StatusText","TabButtons","TextareaField","TextPair","Typography"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,cAAc,GAAG;eAC5BA,iBAAS;YACTC,cAAM;uBACNC,yBAAiB;gBACjBC,kBAAU;qBACVC,uBAAe;WACfC,aAAK;YACLC,cAAM;WACNC,aAAK;aACLC,eAAO;gBACPC,kBAAU;iBACVC,mBAAW;eACXC,iBAAS;qBACTC,uBAAe;gBACfC,kBAAU;gBACVC,kBAAU;mBACVC,qBAAa;cACbC,gBAAQ;gBACRC,gBAAU;;;;;"}

package/dist/cjs/components/Messages/MsgSearch/MsgSearch.module.css.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var css_248z = ".MsgSearch-module_searchLayout__8bgGo {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n\n.MsgSearch-module_searchIcon__26ltB > :first-child {\n  fill: var(--icon-secondary-color);\n}\n\n.MsgSearch-module_clearIcon__q50OF > :first-child {\n  fill: var(--icon-secondary-color);\n}\n\n.MsgSearch-module_inputContainer__zvHqG {\n  display: flex;\n  padding: 6px 12px;\n  align-items: center;\n  gap: 8px;\n  flex: 1 0 0;\n  border-radius: 8px;\n  background: var(--surface-surface-white-nonconvert);\n}\n\n.MsgSearch-module_input__rzjTP::placeholder {\n  color: var(--text-disabled-color);\n}\n\n.MsgSearch-module_input__rzjTP {\n  height: 20px;\n  outline: none;\n  border: none;\n  width: 100%;\n}\n";
-var styles = {"searchLayout":"MsgSearch-module_searchLayout__8bgGo","searchIcon":"MsgSearch-module_searchIcon__26ltB","clearIcon":"MsgSearch-module_clearIcon__q50OF","inputContainer":"MsgSearch-module_inputContainer__zvHqG","input":"MsgSearch-module_input__rzjTP"};
+var css_248z = ".MsgSearch-module_searchLayout__8bgGo {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n";
+var styles = {"searchLayout":"MsgSearch-module_searchLayout__8bgGo"};
 function styleInject(css, options) {
     if (typeof document === 'undefined') return;
     const head = document.head || document.getElementsByTagName('head')[0];

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

@@ -1,22 +1,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var graphics = require('@egov3/graphics');
-var React = require('react');
-var index$1 = require('../../../baseComponents/index.js');
-var index = require('../../../constants/i18n/index.js');
+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.i18n.MsgSearch;
-const MsgSearch = ({ lang, handleClose, handleInputChange, }) => {
-    const [value, setValue] = React.useState("");
-    return (jsxRuntime.jsxs("div", { "data-testid": "MsgSearch_WRAPPER", className: MsgSearch_module.default.searchLayout, children: [jsxRuntime.jsxs("div", { "data-testid": "InputContainer_WRAPPER", className: MsgSearch_module.default.inputContainer, children: [jsxRuntime.jsx(graphics.Icons.General.Search, { width: 16, height: 16, className: MsgSearch_module.default.searchIcon }), jsxRuntime.jsx("input", { "data-testid": "MsgSearch_INPUT", value: value, "aria-label": langDic.MsgSearchInputPlaceHolder[lang], placeholder: langDic.MsgSearchInputPlaceHolder[lang], onChange: (e) => {
-                            setValue(e.target.value);
-                            handleInputChange(e.target.value);
-                        }, className: MsgSearch_module.default.input }), value && (jsxRuntime.jsx(graphics.Icons.General.Clear, { width: 16, height: 16, className: MsgSearch_module.default.clearIcon, onClick: () => {
-                            setValue("");
-                            handleInputChange("");
-                        } }))] }), jsxRuntime.jsx(index$1.BaseComponents.Button, { "data-testid": "MsgSearch_CLOSE", "aria-label": langDic.MsgSearchButton[lang], size: "small", variant: "tinted", onClick: handleClose, children: langDic.MsgSearchButton[lang] })] }));
+const langDic = index$1.i18n.MsgSearch;
+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] })] }));
 };
 
 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","useState","_jsxs","styles","_jsx","Icons","BaseComponents"],"mappings":";;;;;;;;;AAYA,MAAM,OAAO,GAAGA,UAAI,CAAC,SAAS;AAEvB,MAAM,SAAS,GAAG,CAAC,EACxB,IAAI,EACJ,WAAW,EACX,iBAAiB,GACD,KAAI;IACpB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGC,cAAQ,CAAC,EAAE,CAAC;AACtC,IAAA,QACEC,eAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,mBAAmB,EAAC,SAAS,EAAEC,wBAAM,CAAC,YAAY,EAAA,QAAA,EAAA,CACjED,eAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,wBAAwB,EACpC,SAAS,EAAEC,wBAAM,CAAC,cAAc,EAAA,QAAA,EAAA,CAEhCC,cAAA,CAACC,cAAK,CAAC,OAAO,CAAC,MAAM,EAAA,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,SAAS,EAAEF,wBAAM,CAAC,UAAU,EAAA,CAC5B,EACFC,cAAA,CAAA,OAAA,EAAA,EAAA,aAAA,EACc,iBAAiB,EAC7B,KAAK,EAAE,KAAK,EAAA,YAAA,EACA,OAAO,CAAC,yBAAyB,CAAC,IAAI,CAAC,EACnD,WAAW,EAAE,OAAO,CAAC,yBAAyB,CAAC,IAAI,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC,KAAI;AACd,4BAAA,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;AACxB,4BAAA,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;AACnC,wBAAA,CAAC,EACD,SAAS,EAAED,wBAAM,CAAC,KAAK,EAAA,CACvB,EACD,KAAK,KACJC,cAAA,CAACC,cAAK,CAAC,OAAO,CAAC,KAAK,EAAA,EAClB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,SAAS,EAAEF,wBAAM,CAAC,SAAS,EAC3B,OAAO,EAAE,MAAK;4BACZ,QAAQ,CAAC,EAAE,CAAC;4BACZ,iBAAiB,CAAC,EAAE,CAAC;AACvB,wBAAA,CAAC,GACD,CACH,CAAA,EAAA,CACG,EACNC,cAAA,CAACE,sBAAc,CAAC,MAAM,EAAA,EAAA,aAAA,EACR,iBAAiB,gBACjB,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,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;;;;"}

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

@@ -0,0 +1,18 @@
+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"};
+function styleInject(css, options) {
+    if (typeof document === 'undefined') return;
+    const head = document.head || document.getElementsByTagName('head')[0];
+    const style = document.createElement('style');
+    style.type = 'text/css';
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+    head.appendChild(style);
+  }
+  styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=SearchBar.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Icons } from '@egov3/graphics';
+import { useState, useRef, useCallback } from 'react';
+import { i18n } from '../../constants/i18n/index.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 [value, setValue] = useState(defaultValue);
+    const inputRef = useRef(null);
+    const handleKeyDown = useCallback((event) => {
+        if (disabled || loading)
+            return;
+        if (event.key === "Enter") {
+            event.preventDefault();
+            if (handleOnEnter && value.trim()) {
+                handleOnEnter(value.trim());
+            }
+        }
+    }, [disabled, loading, handleOnEnter, value]);
+    const handleClear = useCallback(() => {
+        if (disabled || loading)
+            return;
+        setValue("");
+        if (handleOnEnter) {
+            handleOnEnter("");
+        }
+        inputRef.current?.focus();
+    }, [disabled, loading, handleOnEnter]);
+    const handleInputClick = useCallback((event) => {
+        if (variant === "modal") {
+            event.stopPropagation();
+            if (handleModalOpen && !disabled) {
+                handleModalOpen();
+            }
+        }
+    }, [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" }) }))] }) }));
+};
+
+export { SearchBar };
+//# sourceMappingURL=index.js.map

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

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

package/dist/esm/baseComponents/index.js

@@ -9,6 +9,7 @@ import { Modal } from './Modal/index.js';
 import { Overlay } from './Overlay/index.js';
 import { RadioGroup, CustomRadioButton } from './RadioGroup/index.js';
 import { RadioToggle } from './RadioToggle/index.js';
+import { SearchBar } from './SearchBar/index.js';
 import { SelectBoxButton } from './SelectBoxButton/index.js';
 import { StatusText } from './StatusText/index.js';
 import { TabButtons } from './TabButtons/index.js';
@@ -25,15 +26,16 @@ const BaseComponents = {
     Label,
     Loader,
     Modal,
+    Overlay,
     RadioGroup,
     RadioToggle,
+    SearchBar,
     SelectBoxButton,
-    Typography,
+    StatusText,
+    TabButtons,
     TextareaField,
     TextPair,
-    TabButtons,
-    StatusText,
-    Overlay,
+    Typography,
 };
 
 export { BaseComponents };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/baseComponents/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAmBO,MAAM,cAAc,GAAG;IAC5B,SAAS;IACT,MAAM;IACN,iBAAiB;IACjB,UAAU;IACV,eAAe;IACf,KAAK;IACL,MAAM;IACN,KAAK;IACL,UAAU;IACV,WAAW;IACX,eAAe;IACf,UAAU;IACV,aAAa;IACb,QAAQ;IACR,UAAU;IACV,UAAU;IACV,OAAO;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/baseComponents/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAoBO,MAAM,cAAc,GAAG;IAC5B,SAAS;IACT,MAAM;IACN,iBAAiB;IACjB,UAAU;IACV,eAAe;IACf,KAAK;IACL,MAAM;IACN,KAAK;IACL,OAAO;IACP,UAAU;IACV,WAAW;IACX,SAAS;IACT,eAAe;IACf,UAAU;IACV,UAAU;IACV,aAAa;IACb,QAAQ;IACR,UAAU;;;;;"}

package/dist/esm/components/Messages/MsgSearch/MsgSearch.module.css.js

@@ -1,5 +1,5 @@
-var css_248z = ".MsgSearch-module_searchLayout__8bgGo {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n\n.MsgSearch-module_searchIcon__26ltB > :first-child {\n  fill: var(--icon-secondary-color);\n}\n\n.MsgSearch-module_clearIcon__q50OF > :first-child {\n  fill: var(--icon-secondary-color);\n}\n\n.MsgSearch-module_inputContainer__zvHqG {\n  display: flex;\n  padding: 6px 12px;\n  align-items: center;\n  gap: 8px;\n  flex: 1 0 0;\n  border-radius: 8px;\n  background: var(--surface-surface-white-nonconvert);\n}\n\n.MsgSearch-module_input__rzjTP::placeholder {\n  color: var(--text-disabled-color);\n}\n\n.MsgSearch-module_input__rzjTP {\n  height: 20px;\n  outline: none;\n  border: none;\n  width: 100%;\n}\n";
-var styles = {"searchLayout":"MsgSearch-module_searchLayout__8bgGo","searchIcon":"MsgSearch-module_searchIcon__26ltB","clearIcon":"MsgSearch-module_clearIcon__q50OF","inputContainer":"MsgSearch-module_inputContainer__zvHqG","input":"MsgSearch-module_input__rzjTP"};
+var css_248z = ".MsgSearch-module_searchLayout__8bgGo {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n";
+var styles = {"searchLayout":"MsgSearch-module_searchLayout__8bgGo"};
 function styleInject(css, options) {
     if (typeof document === 'undefined') return;
     const head = document.head || document.getElementsByTagName('head')[0];

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

@@ -1,20 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Icons } from '@egov3/graphics';
-import { useState } from 'react';
 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 MsgSearch = ({ lang, handleClose, handleInputChange, }) => {
-    const [value, setValue] = useState("");
-    return (jsxs("div", { "data-testid": "MsgSearch_WRAPPER", className: styles.searchLayout, children: [jsxs("div", { "data-testid": "InputContainer_WRAPPER", className: styles.inputContainer, children: [jsx(Icons.General.Search, { width: 16, height: 16, className: styles.searchIcon }), jsx("input", { "data-testid": "MsgSearch_INPUT", value: value, "aria-label": langDic.MsgSearchInputPlaceHolder[lang], placeholder: langDic.MsgSearchInputPlaceHolder[lang], onChange: (e) => {
-                            setValue(e.target.value);
-                            handleInputChange(e.target.value);
-                        }, className: styles.input }), value && (jsx(Icons.General.Clear, { width: 16, height: 16, className: styles.clearIcon, onClick: () => {
-                            setValue("");
-                            handleInputChange("");
-                        } }))] }), jsx(BaseComponents.Button, { "data-testid": "MsgSearch_CLOSE", "aria-label": langDic.MsgSearchButton[lang], size: "small", variant: "tinted", onClick: handleClose, children: langDic.MsgSearchButton[lang] })] }));
+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] })] }));
 };
 
 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":";;;;;;;AAYA,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS;AAEvB,MAAM,SAAS,GAAG,CAAC,EACxB,IAAI,EACJ,WAAW,EACX,iBAAiB,GACD,KAAI;IACpB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;AACtC,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,mBAAmB,EAAC,SAAS,EAAE,MAAM,CAAC,YAAY,EAAA,QAAA,EAAA,CACjEA,IAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,wBAAwB,EACpC,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA,QAAA,EAAA,CAEhCC,GAAA,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,EAAA,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,SAAS,EAAE,MAAM,CAAC,UAAU,EAAA,CAC5B,EACFA,GAAA,CAAA,OAAA,EAAA,EAAA,aAAA,EACc,iBAAiB,EAC7B,KAAK,EAAE,KAAK,EAAA,YAAA,EACA,OAAO,CAAC,yBAAyB,CAAC,IAAI,CAAC,EACnD,WAAW,EAAE,OAAO,CAAC,yBAAyB,CAAC,IAAI,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC,KAAI;AACd,4BAAA,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;AACxB,4BAAA,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;AACnC,wBAAA,CAAC,EACD,SAAS,EAAE,MAAM,CAAC,KAAK,EAAA,CACvB,EACD,KAAK,KACJA,GAAA,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAA,EAClB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,OAAO,EAAE,MAAK;4BACZ,QAAQ,CAAC,EAAE,CAAC;4BACZ,iBAAiB,CAAC,EAAE,CAAC;AACvB,wBAAA,CAAC,GACD,CACH,CAAA,EAAA,CACG,EACNA,GAAA,CAAC,cAAc,CAAC,MAAM,EAAA,EAAA,aAAA,EACR,iBAAiB,gBACjB,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,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;;;;"}

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

@@ -0,0 +1,13 @@
+import { ILangProps } from '../../interfaces/common/index.js';
+
+interface ISearchBarProps extends ILangProps {
+    handleModalOpen?: () => void;
+    handleOnEnter?: (value: string) => void;
+    variant?: "modal" | "chat" | "default";
+    loading?: boolean;
+    disabled?: boolean;
+    defaultValue?: string;
+    showClearButton?: boolean;
+}
+
+export type { ISearchBarProps };

package/dist/types/components/Messages/MsgSearch/index.d.ts

@@ -2,7 +2,7 @@ import { ILangProps } from '../../../interfaces/common/index.js';
 
 interface IMsgSearchProps extends ILangProps {
     handleClose: () => void;
-    handleInputChange: (value: string) => void;
+    handleOnEnter: (value: string) => void;
 }
 
 export type { IMsgSearchProps };

package/dist/types/index.d.ts

@@ -19,14 +19,15 @@ import { IEdsSuccessProps } from './components/Identity/EdsSuccess/index.js';
 import { IDocCardProps } from './components/Profile/DocCard/index.js';
 import { IAuthStepProps } from './components/Identity/Auth/index.js';
 import { IAgreementStepProps } from './components/Identity/Agreement/index.js';
-import { IOverlayProps } from './baseComponents/Overlay/index.js';
-import { IStatusTextProps } from './baseComponents/StatusText/index.js';
-import { ITabButtonsProps } from './baseComponents/TabButtons/index.js';
+import { ITypographyProps } from './baseComponents/Typography/index.js';
 import { ITextPairProps } from './baseComponents/TextPair/index.js';
 import { ITextareaFieldProps } from './baseComponents/TextareaField/index.js';
-import { ITypographyProps } from './baseComponents/Typography/index.js';
+import { ITabButtonsProps } from './baseComponents/TabButtons/index.js';
+import { IStatusTextProps } from './baseComponents/StatusText/index.js';
 import { ISelectBoxProps } from './baseComponents/SelectBoxButton/index.js';
+import { ISearchBarProps } from './baseComponents/SearchBar/index.js';
 import { IRadioToggleProps } from './baseComponents/RadioToggle/index.js';
+import { IOverlayProps } from './baseComponents/Overlay/index.js';
 import { IModalProps } from './baseComponents/Modal/index.js';
 import { ILabelProps } from './baseComponents/Label/index.js';
 import { IInputFieldGroupProps } from './baseComponents/InputFieldGroup/index.js';
@@ -47,15 +48,16 @@ declare const SystemDesign: {
         Label: ({ variant, text, isSpaced, Icon, onAction, }: ILabelProps) => react_jsx_runtime.JSX.Element;
         Loader: () => react_jsx_runtime.JSX.Element;
         Modal: ({ children, header, lang, open, setOpen, variant, withOverlay, }: IModalProps) => react_jsx_runtime.JSX.Element;
+        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;
         SelectBoxButton: ({ handleClick, labelText, disabled, error, modalValue, lang, }: ISelectBoxProps) => react_jsx_runtime.JSX.Element;
-        Typography: React.FC<ITypographyProps>;
+        StatusText: ({ text, isAlignedCenter, isNeedIcon, variant, }: IStatusTextProps) => react_jsx_runtime.JSX.Element;
+        TabButtons: ({ tabDocLabels, activeTab, handleClick, }: ITabButtonsProps) => react_jsx_runtime.JSX.Element;
         TextareaField: React.ForwardRefExoticComponent<ITextareaFieldProps & React.RefAttributes<HTMLTextAreaElement>>;
         TextPair: ({ mainText, secondaryText, variant, }: ITextPairProps) => react_jsx_runtime.JSX.Element;
-        TabButtons: ({ tabDocLabels, activeTab, handleClick, }: ITabButtonsProps) => react_jsx_runtime.JSX.Element;
-        StatusText: ({ text, isAlignedCenter, isNeedIcon, variant, }: IStatusTextProps) => react_jsx_runtime.JSX.Element;
-        Overlay: ({ children, className }: IOverlayProps) => react_jsx_runtime.JSX.Element;
+        Typography: React.FC<ITypographyProps>;
     };
     Components: {
         Agreement: ({ lang, agreementText, submitAgreementAndSign, }: IAgreementStepProps) => react_jsx_runtime.JSX.Element;
@@ -73,7 +75,7 @@ declare const SystemDesign: {
         IdentityModal: ({ children, goBackService, handleLangChange, isMain, lang, navigator, }: IIdentityModalProps) => react_jsx_runtime.JSX.Element;
         MsgBody: ({ msgItem, lang, handleDetailsClick, }: IMsgBodyProps) => react_jsx_runtime.JSX.Element;
         MsgComponentHeader: ({ lang, headerText, headerAriaLabel, handleOpenSearch, handleReadAll, }: MsgComponentHeaderProps) => react_jsx_runtime.JSX.Element;
-        MsgSearch: ({ lang, handleClose, handleInputChange, }: IMsgSearchProps) => react_jsx_runtime.JSX.Element;
+        MsgSearch: ({ lang, handleClose, handleOnEnter, }: IMsgSearchProps) => react_jsx_runtime.JSX.Element;
         NextStepComponent: ({ disabled, handleNextStepClick, lang, }: INextStepComponentProps) => react_jsx_runtime.JSX.Element;
         ProfileHealthGeneral: ({ lang, attachedClinic, compulsoryHealthInsurance, }: IProfileHealthGeneral) => react_jsx_runtime.JSX.Element;
         RightMenuSectionItem: ({ title, btnText, btnOnClick, ariaLabel, btnVariant, }: IRightMenuSectionItemProps) => react_jsx_runtime.JSX.Element;

package/package.json

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