@egov3/system-design 1.2.62 → 1.2.64

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/components/Typography/index.d.ts

@@ -1,5 +1,5 @@
 import React, { FC, JSX } from "react";
-type TFontClass = "heading1" | "heading3" | "subtitles3" | "body1Medium" | "body1Regular" | "body2Medium" | "body2Regular" | "body3Regular" | "caption1Medium" | "caption1Regular" | "caption1Semibold" | "caption2Medium" | "caption2Regular";
+type TFontClass = "heading1" | "heading3" | "subtitles3" | "body1Medium" | "body1Regular" | "body2Medium" | "body2Regular" | "body3Regular" | "caption1Medium" | "caption1Regular" | "caption1Semibold" | "caption2Medium" | "caption2Regular" | "caption2Semibold";
 export interface ITypographyProps extends React.HTMLAttributes<HTMLElement> {
     tag: keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>;
     fontClass: TFontClass;

package/dist/esm/index.d.ts

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import React__default, { JSX, Dispatch, SetStateAction, HTMLInputTypeAttribute } from 'react';
 
-type TFontClass = "heading1" | "heading3" | "subtitles3" | "body1Medium" | "body1Regular" | "body2Medium" | "body2Regular" | "body3Regular" | "caption1Medium" | "caption1Regular" | "caption1Semibold" | "caption2Medium" | "caption2Regular";
+type TFontClass = "heading1" | "heading3" | "subtitles3" | "body1Medium" | "body1Regular" | "body2Medium" | "body2Regular" | "body3Regular" | "caption1Medium" | "caption1Regular" | "caption1Semibold" | "caption2Medium" | "caption2Regular" | "caption2Semibold";
 interface ITypographyProps extends React__default.HTMLAttributes<HTMLElement> {
     tag: keyof JSX.IntrinsicElements | React__default.JSXElementConstructor<any>;
     fontClass: TFontClass;
@@ -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

@@ -2836,8 +2836,8 @@ var css_248z$7 = ".button-module_button__JyfZW {\n  border: none;\n  transition:
 var styles$5 = {"button":"button-module_button__JyfZW","btn-default":"button-module_btn-default__EDl7t","btn-default--disabled":"button-module_btn-default--disabled__H36E7","btn-tinted":"button-module_btn-tinted__Do6iX","btn-tinted--disabled":"button-module_btn-tinted--disabled__XRuq-","btn-secondary":"button-module_btn-secondary__LtTTr","btn-secondary--disabled":"button-module_btn-secondary--disabled__5YS63","btn--mini":"button-module_btn--mini__a9EJm","btn--small":"button-module_btn--small__xfhlR","btn--medium":"button-module_btn--medium__pFJSr","btn--large":"button-module_btn--large__GvwY2","btn-square--mini":"button-module_btn-square--mini__RWpOc","btn-square--small":"button-module_btn-square--small__M-WgA","btn-square--medium":"button-module_btn-square--medium__aDBfE","btn-square--large":"button-module_btn-square--large__dwebF","btn-rounded--mini":"button-module_btn-rounded--mini__bX5xJ","btn-rounded--small":"button-module_btn-rounded--small__LI-QV","btn-rounded--medium":"button-module_btn-rounded--medium__TKy02","btn-rounded--large":"button-module_btn-rounded--large__joy-r"};
 styleInject(css_248z$7);
 
-var css_248z$6 = "/* Headings/Heading 1 */\n.typography-module_heading1__ub7Od {\n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 36px; /* 112.5% */\n  letter-spacing: -0.32px;\n}\n\n/* Headings/Heading 3 */\n.typography-module_heading3__QLNPD {\n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 28px; /* 116.667% */\n  letter-spacing: -0.24px;\n}\n\n/* Subtitles/Subtitle 3 */\n.typography-module_subtitles3__QZScB {\n  font-family: Inter;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 24px; /* 150% */\n}\n\n/* Body/Body 1, Medium */\n.typography-module_body1Medium__INZB0 {\n  font-family: Inter;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px; /* 150% */\n}\n\n/* Body/Body 1, Regular */\n.typography-module_body1Regular__H3iQB {\n  font-family: Inter;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px; /* 150% */\n}\n\n/* Body/Body 2, Medium */\n.typography-module_body2Medium__Caa0m {\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 20px; /* 142.857% */\n}\n\n/* Body/Body 2, Regular */\n.typography-module_body2Regular__MEtzs {\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px; /* 142.857% */\n}\n\n/* Body/Body 3, Regular */\n.typography-module_body3Regular__rp6ng {\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; /* 114.286% */\n}\n\n/* Caption/Caption 1, Medium */\n.typography-module_caption1Medium__xXMm- {\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; /* 133.333% */\n}\n\n/* Caption/Caption 1, Regular */\n.typography-module_caption1Regular__QVGyq {\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; /* 133.333% */\n}\n\n/* Caption/Caption 1, Semibold */\n.typography-module_caption1Semibold__Il1Aq {\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 16px; /* 133.333% */\n}\n\n/* Caption/Caption 2, Medium */\n.typography-module_caption2Medium__0Vvmy {\n  font-family: Inter;\n  font-size: 10px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 12px; /* 120% */\n}\n\n/* Caption/Caption 2, Regular */\n.typography-module_caption2Regular__GxtiS {\n  font-family: Inter;\n  font-size: 10px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 12px; /* 120% */\n}\n";
-var typography = {"heading1":"typography-module_heading1__ub7Od","heading3":"typography-module_heading3__QLNPD","subtitles3":"typography-module_subtitles3__QZScB","body1Medium":"typography-module_body1Medium__INZB0","body1Regular":"typography-module_body1Regular__H3iQB","body2Medium":"typography-module_body2Medium__Caa0m","body2Regular":"typography-module_body2Regular__MEtzs","body3Regular":"typography-module_body3Regular__rp6ng","caption1Medium":"typography-module_caption1Medium__xXMm-","caption1Regular":"typography-module_caption1Regular__QVGyq","caption1Semibold":"typography-module_caption1Semibold__Il1Aq","caption2Medium":"typography-module_caption2Medium__0Vvmy","caption2Regular":"typography-module_caption2Regular__GxtiS"};
+var css_248z$6 = "/* Headings/Heading 1 */\n.typography-module_heading1__ub7Od {\n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 36px; /* 112.5% */\n  letter-spacing: -0.32px;\n}\n\n/* Headings/Heading 3 */\n.typography-module_heading3__QLNPD {\n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 28px; /* 116.667% */\n  letter-spacing: -0.24px;\n}\n\n/* Subtitles/Subtitle 3 */\n.typography-module_subtitles3__QZScB {\n  font-family: Inter;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 24px; /* 150% */\n}\n\n/* Body/Body 1, Medium */\n.typography-module_body1Medium__INZB0 {\n  font-family: Inter;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px; /* 150% */\n}\n\n/* Body/Body 1, Regular */\n.typography-module_body1Regular__H3iQB {\n  font-family: Inter;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px; /* 150% */\n}\n\n/* Body/Body 2, Medium */\n.typography-module_body2Medium__Caa0m {\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 20px; /* 142.857% */\n}\n\n/* Body/Body 2, Regular */\n.typography-module_body2Regular__MEtzs {\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px; /* 142.857% */\n}\n\n/* Body/Body 3, Regular */\n.typography-module_body3Regular__rp6ng {\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; /* 114.286% */\n}\n\n/* Caption/Caption 1, Medium */\n.typography-module_caption1Medium__xXMm- {\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; /* 133.333% */\n}\n\n/* Caption/Caption 1, Regular */\n.typography-module_caption1Regular__QVGyq {\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; /* 133.333% */\n}\n\n/* Caption/Caption 1, Semibold */\n.typography-module_caption1Semibold__Il1Aq {\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 16px; /* 133.333% */\n}\n\n/* Caption/Caption 2, Medium */\n.typography-module_caption2Medium__0Vvmy {\n  font-family: Inter;\n  font-size: 10px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 12px; /* 120% */\n}\n\n/* Caption/Caption 2, Regular */\n.typography-module_caption2Regular__GxtiS {\n  font-family: Inter;\n  font-size: 10px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 12px; /* 120% */\n}\n\n.typography-module_caption2Semibold__4ysJe {\n  font-family: Inter;\n  font-size: 10px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 12px; /* 120% */\n}\n";
+var typography = {"heading1":"typography-module_heading1__ub7Od","heading3":"typography-module_heading3__QLNPD","subtitles3":"typography-module_subtitles3__QZScB","body1Medium":"typography-module_body1Medium__INZB0","body1Regular":"typography-module_body1Regular__H3iQB","body2Medium":"typography-module_body2Medium__Caa0m","body2Regular":"typography-module_body2Regular__MEtzs","body3Regular":"typography-module_body3Regular__rp6ng","caption1Medium":"typography-module_caption1Medium__xXMm-","caption1Regular":"typography-module_caption1Regular__QVGyq","caption1Semibold":"typography-module_caption1Semibold__Il1Aq","caption2Medium":"typography-module_caption2Medium__0Vvmy","caption2Regular":"typography-module_caption2Regular__GxtiS","caption2Semibold":"typography-module_caption2Semibold__4ysJe"};
 styleInject(css_248z$6);
 
 var btnTypography = {
@@ -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 }))));
 });