@egov3/system-design 1.2.62 → 1.2.63

package/dist/esm/components/InputField/index.d.ts

@@ -18,5 +18,6 @@ export interface IInputFieldProps extends React.DetailedHTMLProps<React.InputHTM
     setFocused?: (val: boolean) => void;
     readOnly?: boolean;
     dataTestid?: string;
+    variant?: "default" | "code";
 }
 export declare const InputField: React.ForwardRefExoticComponent<Omit<IInputFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/esm/index.d.ts

@@ -48,6 +48,7 @@ interface IInputFieldProps extends React__default.DetailedHTMLProps<React__defau
     setFocused?: (val: boolean) => void;
     readOnly?: boolean;
     dataTestid?: string;
+    variant?: "default" | "code";
 }
 
 interface RadioGroupItem {

package/dist/esm/index.js

@@ -2853,8 +2853,8 @@ var Button = function (_a) {
             : styles$5["btn-square--".concat(size)], disabled ? styles$5["btn-".concat(variant, "--disabled")] : styles$5["btn-".concat(variant)], styles$5.button, className), style: style }, children));
 };
 
-var css_248z$5 = ".InputField-module_inputContainer__f-bIm {\n  display: flex;\n  align-items: center;\n  background-color: var(--surface-surface-1);\n  border-radius: 8px;\n  padding: 12px 16px;\n}\n\n.InputField-module_inputContainerLabeled__zrQbJ {\n  display: block;\n  background-color: var(--surface-surface-1);\n  border-radius: 8px;\n  padding: 12px 16px;\n}\n\n.InputField-module_inputContainerLabeled__zrQbJ label {\n  color: var(--text-secondary);\n}\n\n.InputField-module_input__Lgxvm {\n  width: 100%;\n  border: none;\n  background-color: var(--surface-surface-1);\n}\n\n.InputField-module_input__Lgxvm:active,\n.InputField-module_input__Lgxvm:focus {\n  outline: none;\n}\n\n.InputField-module_input__Lgxvm::placeholder {\n  color: var(--text-disabled-color);\n}\n\n.InputField-module_input__Lgxvm::-webkit-inner-spin-button,\n.InputField-module_input__Lgxvm::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.InputField-module_clearIcon__1KYtM {\n  cursor: pointer;\n}\n\n.InputField-module_input--onfocus__cJyDp {\n  background-color: var(--surface-surface-3-color);\n}\n\n.InputField-module_input--onfocus__cJyDp .InputField-module_input__Lgxvm {\n  background-color: var(--surface-surface-3-color);\n}\n";
-var styles$4 = {"inputContainer":"InputField-module_inputContainer__f-bIm","inputContainerLabeled":"InputField-module_inputContainerLabeled__zrQbJ","input":"InputField-module_input__Lgxvm","clearIcon":"InputField-module_clearIcon__1KYtM","input--onfocus":"InputField-module_input--onfocus__cJyDp"};
+var css_248z$5 = ".InputField-module_inputContainer__f-bIm {\n  display: flex;\n  align-items: center;\n  background-color: var(--surface-surface-1);\n  border-radius: 8px;\n  padding: 12px 16px;\n}\n\n.InputField-module_inputContainerLabeled__zrQbJ {\n  display: block;\n  background-color: var(--surface-surface-1);\n  border-radius: 8px;\n  padding: 12px 16px;\n}\n\n.InputField-module_inputContainerLabeled__zrQbJ label {\n  color: var(--text-secondary);\n}\n\n.InputField-module_input__Lgxvm {\n  width: 100%;\n  border: none;\n  background-color: var(--surface-surface-1);\n}\n\n.InputField-module_input__Lgxvm:active,\n.InputField-module_input__Lgxvm:focus {\n  outline: none;\n}\n\n.InputField-module_input__Lgxvm::placeholder {\n  color: var(--text-disabled-color);\n}\n\n.InputField-module_input__Lgxvm::-webkit-inner-spin-button,\n.InputField-module_input__Lgxvm::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.InputField-module_clearIcon__1KYtM {\n  cursor: pointer;\n}\n\n.InputField-module_input--onfocus__cJyDp {\n  background-color: var(--surface-surface-3-color);\n}\n\n.InputField-module_input--onfocus__cJyDp .InputField-module_input__Lgxvm {\n  background-color: var(--surface-surface-3-color);\n}\n\n.InputField-module_code__ktf8F { \n  text-align: center;\n}";
+var styles$4 = {"inputContainer":"InputField-module_inputContainer__f-bIm","inputContainerLabeled":"InputField-module_inputContainerLabeled__zrQbJ","input":"InputField-module_input__Lgxvm","clearIcon":"InputField-module_clearIcon__1KYtM","input--onfocus":"InputField-module_input--onfocus__cJyDp","code":"InputField-module_code__ktf8F"};
 styleInject(css_248z$5);
 
 /******************************************************************************
@@ -2908,7 +2908,7 @@ var ClearIcon = function (_a) {
 
 // InputField.tsx
 var InputField = react.exports.forwardRef(function (_a, ref) {
-    var onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, onEnterPress = _a.onEnterPress, _b = _a.value, value = _b === void 0 ? "" : _b, inputLeftIcon = _a.inputLeftIcon, _c = _a.placeholder, placeholder = _c === void 0 ? "" : _c, _d = _a.className, className = _d === void 0 ? "" : _d, style = _a.style, _e = _a.isClearable, isClearable = _e === void 0 ? false : _e, _f = _a.type, type = _f === void 0 ? "text" : _f, id = _a.id, _g = _a.labelText, labelText = _g === void 0 ? "" : _g, _h = _a.ariaLabel, ariaLabel = _h === void 0 ? "" : _h, _j = _a.focused, focused = _j === void 0 ? false : _j, _k = _a.setFocused, setFocused = _k === void 0 ? function () { } : _k, _l = _a.readOnly, readOnly = _l === void 0 ? false : _l, _m = _a.dataTestid, dataTestid = _m === void 0 ? "InputField_MAIN" : _m;
+    var onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, onEnterPress = _a.onEnterPress, _b = _a.value, value = _b === void 0 ? "" : _b, inputLeftIcon = _a.inputLeftIcon, _c = _a.placeholder, placeholder = _c === void 0 ? "" : _c, _d = _a.className, className = _d === void 0 ? "" : _d, style = _a.style, _e = _a.isClearable, isClearable = _e === void 0 ? false : _e, _f = _a.type, type = _f === void 0 ? "text" : _f, id = _a.id, _g = _a.labelText, labelText = _g === void 0 ? "" : _g, _h = _a.ariaLabel, ariaLabel = _h === void 0 ? "" : _h, _j = _a.focused, focused = _j === void 0 ? false : _j, _k = _a.setFocused, setFocused = _k === void 0 ? function () { } : _k, _l = _a.readOnly, readOnly = _l === void 0 ? false : _l, _m = _a.dataTestid, dataTestid = _m === void 0 ? "InputField_MAIN" : _m, _o = _a.variant, variant = _o === void 0 ? "default" : _o;
     var handleClear = function () {
         if (onChange) {
             onChange({
@@ -2934,7 +2934,7 @@ var InputField = react.exports.forwardRef(function (_a, ref) {
     return (React.createElement("div", { "data-testid": dataTestid, className: joinClasses(styles$4[labelText.length ? "inputContainerLabeled" : "inputContainer"], focused ? styles$4["input--onfocus"] : undefined, type === "text" ? typography.body1Regular : undefined, styles$4["input-".concat(type === null || type === void 0 ? void 0 : type.toLocaleLowerCase())], className), style: style },
         labelText.length > 0 && (React.createElement("label", { htmlFor: id, "data-testid": "InputField_LABEL" }, labelText)),
         inputLeftIcon,
-        React.createElement("input", { ref: ref, "data-testid": "InputField_INPUT", "aria-label": ariaLabel, id: id, type: type, className: styles$4.input, placeholder: placeholder, "aria-placeholder": placeholder, onFocus: handleFocus, onBlur: handleBlur, onChange: onChange, onKeyDown: handleKeyDown, value: value, readOnly: readOnly }),
+        React.createElement("input", { ref: ref, "data-testid": "InputField_INPUT", "aria-label": ariaLabel, id: id, type: type, className: joinClasses(styles$4.input, variant === "code" ? styles$4.code : undefined), placeholder: placeholder, "aria-placeholder": placeholder, onFocus: handleFocus, onBlur: handleBlur, onChange: onChange, onKeyDown: handleKeyDown, value: value, readOnly: readOnly }),
         isClearable && value && (React.createElement(ClearIcon, { fill: "red", pathFill: "#758393", className: styles$4.clearIcon, onClick: handleClear }))));
 });