@egov3/system-design 1.0.5 → 1.0.7

package/public/img/car.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M23 17V11.9468C23.0002 11.6124 22.912 11.2839 22.7445 10.9946C22.577 10.7053 22.336 10.4653 22.0459 10.299C20.6667 9.47156 19.0932 9.02338 17.4849 8.99995L14.9387 6.25065C14.5642 5.84635 14.1102 5.52378 13.6052 5.30319C13.1002 5.0826 12.5551 4.96874 12.004 4.96875H9.83C9.124 4.96867 8.42599 5.11811 7.7819 5.40722C7.13781 5.69634 6.56225 6.11858 6.0931 6.64615L4 8.99995H2.8758C2.37831 8.99995 1.90119 9.19758 1.54941 9.54936C1.19763 9.90114 1 10.3783 1 10.8758V16.2L3.9254 16.9389C4.11443 17.464 4.45936 17.9187 4.91399 18.2423C5.36862 18.5659 5.91126 18.7428 6.46923 18.7494C7.02721 18.7561 7.5739 18.5921 8.0361 18.2794C8.49829 17.9667 8.85394 17.5203 9.0554 17H14.6412C14.8411 17.5153 15.1921 17.9582 15.6482 18.2705C16.1043 18.5828 16.6441 18.7499 17.1969 18.7499C17.7497 18.7499 18.2895 18.5828 18.7456 18.2705C19.2017 17.9582 19.5527 17.5153 19.7526 17H23ZM7.5127 7.90915C7.80363 7.58225 8.16042 7.32058 8.55964 7.14134C8.95886 6.9621 9.39149 6.86934 9.8291 6.86915H12.0039C12.2931 6.86945 12.579 6.92935 12.844 7.04513C13.109 7.16091 13.3472 7.33007 13.5439 7.54205L14.8947 8.99995H6.5426L7.5127 7.90915ZM2.9 10.876L4 10.8999H4.8525H17.4C18.7048 10.9111 19.9826 11.2724 21.1 11.9462V15.1H19.7839C19.5995 14.5604 19.251 14.092 18.7872 13.7604C18.3233 13.4287 17.7674 13.2504 17.1972 13.2504C16.627 13.2504 16.0711 13.4287 15.6072 13.7604C15.1434 14.092 14.7949 14.5604 14.6105 15.1H9.0867C8.90491 14.5701 8.56497 14.1087 8.11276 13.7781C7.66054 13.4475 7.1178 13.2635 6.55776 13.2511C5.99772 13.2386 5.44732 13.3981 4.98081 13.7083C4.51431 14.0184 4.15414 14.4641 3.9489 14.9854L2.9 14.7207V10.876ZM6.5 17C6.30222 17 6.10888 16.9413 5.94443 16.8314C5.77998 16.7215 5.65181 16.5654 5.57612 16.3826C5.50043 16.1999 5.48063 15.9988 5.51921 15.8049C5.5578 15.6109 5.65304 15.4327 5.79289 15.2928C5.93275 15.153 6.11093 15.0578 6.30491 15.0192C6.49889 14.9806 6.69996 15.0004 6.88268 15.0761C7.06541 15.1518 7.22159 15.2799 7.33147 15.4444C7.44135 15.6088 7.5 15.8022 7.5 16C7.49971 16.2651 7.39426 16.5193 7.20679 16.7067C7.01931 16.8942 6.76513 16.9997 6.5 17ZM17.1972 17C16.9994 17 16.8061 16.9413 16.6416 16.8314C16.4772 16.7215 16.349 16.5654 16.2733 16.3826C16.1976 16.1999 16.1778 15.9988 16.2164 15.8049C16.255 15.6109 16.3502 15.4327 16.4901 15.2928C16.6299 15.153 16.8081 15.0578 17.0021 15.0192C17.1961 14.9806 17.3972 15.0004 17.5799 15.0761C17.7626 15.1518 17.9188 15.2799 18.0287 15.4444C18.1386 15.6088 18.1972 15.8022 18.1972 16C18.1969 16.2651 18.0915 16.5193 17.904 16.7067C17.7165 16.8942 17.4623 16.9997 17.1972 17Z" fill="var(--default-black-color, #000)"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23 17V11.9468C23.0002 11.6124 22.912 11.2839 22.7445 10.9946C22.577 10.7053 22.336 10.4653 22.0459 10.299C20.6667 9.47156 19.0932 9.02338 17.4849 8.99995L14.9387 6.25065C14.5642 5.84635 14.1102 5.52378 13.6052 5.30319C13.1002 5.0826 12.5551 4.96874 12.004 4.96875H9.83C9.124 4.96867 8.42599 5.11811 7.7819 5.40722C7.13781 5.69634 6.56225 6.11858 6.0931 6.64615L4 8.99995H2.8758C2.37831 8.99995 1.90119 9.19758 1.54941 9.54936C1.19763 9.90114 1 10.3783 1 10.8758V16.2L3.9254 16.9389C4.11443 17.464 4.45936 17.9187 4.91399 18.2423C5.36862 18.5659 5.91126 18.7428 6.46923 18.7494C7.02721 18.7561 7.5739 18.5921 8.0361 18.2794C8.49829 17.9667 8.85394 17.5203 9.0554 17H14.6412C14.8411 17.5153 15.1921 17.9582 15.6482 18.2705C16.1043 18.5828 16.6441 18.7499 17.1969 18.7499C17.7497 18.7499 18.2895 18.5828 18.7456 18.2705C19.2017 17.9582 19.5527 17.5153 19.7526 17H23ZM7.5127 7.90915C7.80363 7.58225 8.16042 7.32058 8.55964 7.14134C8.95886 6.9621 9.39149 6.86934 9.8291 6.86915H12.0039C12.2931 6.86945 12.579 6.92935 12.844 7.04513C13.109 7.16091 13.3472 7.33007 13.5439 7.54205L14.8947 8.99995H6.5426L7.5127 7.90915ZM2.9 10.876L4 10.8999H4.8525H17.4C18.7048 10.9111 19.9826 11.2724 21.1 11.9462V15.1H19.7839C19.5995 14.5604 19.251 14.092 18.7872 13.7604C18.3233 13.4287 17.7674 13.2504 17.1972 13.2504C16.627 13.2504 16.0711 13.4287 15.6072 13.7604C15.1434 14.092 14.7949 14.5604 14.6105 15.1H9.0867C8.90491 14.5701 8.56497 14.1087 8.11276 13.7781C7.66054 13.4475 7.1178 13.2635 6.55776 13.2511C5.99772 13.2386 5.44732 13.3981 4.98081 13.7083C4.51431 14.0184 4.15414 14.4641 3.9489 14.9854L2.9 14.7207V10.876ZM6.5 17C6.30222 17 6.10888 16.9413 5.94443 16.8314C5.77998 16.7215 5.65181 16.5654 5.57612 16.3826C5.50043 16.1999 5.48063 15.9988 5.51921 15.8049C5.5578 15.6109 5.65304 15.4327 5.79289 15.2928C5.93275 15.153 6.11093 15.0578 6.30491 15.0192C6.49889 14.9806 6.69996 15.0004 6.88268 15.0761C7.06541 15.1518 7.22159 15.2799 7.33147 15.4444C7.44135 15.6088 7.5 15.8022 7.5 16C7.49971 16.2651 7.39426 16.5193 7.20679 16.7067C7.01931 16.8942 6.76513 16.9997 6.5 17ZM17.1972 17C16.9994 17 16.8061 16.9413 16.6416 16.8314C16.4772 16.7215 16.349 16.5654 16.2733 16.3826C16.1976 16.1999 16.1778 15.9988 16.2164 15.8049C16.255 15.6109 16.3502 15.4327 16.4901 15.2928C16.6299 15.153 16.8081 15.0578 17.0021 15.0192C17.1961 14.9806 17.3972 15.0004 17.5799 15.0761C17.7626 15.1518 17.9188 15.2799 18.0287 15.4444C18.1386 15.6088 18.1972 15.8022 18.1972 16C18.1969 16.2651 18.0915 16.5193 17.904 16.7067C17.7165 16.8942 17.4623 16.9997 17.1972 17Z" fill="var(--default-black-color, #000)"/>
+</svg>

package/public/img/language-1.svg

@@ -1,5 +1,5 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.72616 12.4244H1.6665L4.80482 3.3335H7.28174L10.4156 12.4244H8.35596L7.6829 10.3514H4.40054L3.72616 12.4244ZM6.07879 5.41091L7.19576 8.85107H4.88863L6.00777 5.41091H6.07879Z" fill="var(--default-black-color, #000)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3867 9.16683C14.3455 9.16683 15.1608 9.34883 15.8326 9.71282C16.5043 10.0768 17.0148 10.5814 17.364 11.2265C17.7162 11.8716 17.8922 12.6203 17.8922 13.4726V14.4314C17.8922 15.2245 17.7221 15.9273 17.3818 16.5399C17.0444 17.1524 16.5739 17.6333 15.9702 17.9825C15.3695 18.3317 14.6785 18.5063 13.8972 18.5063C13.0864 18.5063 12.3895 18.3391 11.8065 18.0047C11.2265 17.6674 10.7811 17.1865 10.4704 16.5621C10.1596 15.9377 10.0028 15.189 9.99984 14.316V13.2861H15.9482C15.9341 12.982 15.8853 12.6994 15.8015 12.4383C15.7009 12.1217 15.5426 11.8465 15.3265 11.6127C15.1105 11.3789 14.8323 11.1984 14.492 11.0711C14.1517 10.9409 13.7418 10.8758 13.2624 10.8758C13.0168 10.8758 12.7579 10.8921 12.4856 10.9246C12.2163 10.9572 11.9515 11.0016 11.6911 11.0578C11.4306 11.1111 11.1954 11.1688 10.9853 11.2309L10.6701 9.63736C10.8181 9.56929 11.0341 9.49975 11.3182 9.42873C11.6023 9.3577 11.9248 9.29704 12.2859 9.24673C12.6469 9.19346 13.0139 9.16683 13.3867 9.16683ZM11.9308 14.8531H15.9286C15.8941 15.1474 15.8221 15.4182 15.7127 15.6654C15.5559 16.0235 15.3206 16.3046 15.0069 16.5088C14.6933 16.713 14.3026 16.8151 13.8351 16.8151C13.4178 16.8151 13.0686 16.7411 12.7875 16.5931C12.5063 16.4422 12.2933 16.2336 12.1483 15.9673C12.0062 15.698 11.9337 15.3872 11.9308 15.0351V14.8531Z" fill="var(--default-black-color, #000)"/>
-<path d="M8.33317 14.1668H1.6665V15.8335H8.33317V14.1668Z" fill="var(--default-black-color, #000)"/>
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.72616 12.4244H1.6665L4.80482 3.3335H7.28174L10.4156 12.4244H8.35596L7.6829 10.3514H4.40054L3.72616 12.4244ZM6.07879 5.41091L7.19576 8.85107H4.88863L6.00777 5.41091H6.07879Z" fill="var(--default-black-color, #000)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3867 9.16683C14.3455 9.16683 15.1608 9.34883 15.8326 9.71282C16.5043 10.0768 17.0148 10.5814 17.364 11.2265C17.7162 11.8716 17.8922 12.6203 17.8922 13.4726V14.4314C17.8922 15.2245 17.7221 15.9273 17.3818 16.5399C17.0444 17.1524 16.5739 17.6333 15.9702 17.9825C15.3695 18.3317 14.6785 18.5063 13.8972 18.5063C13.0864 18.5063 12.3895 18.3391 11.8065 18.0047C11.2265 17.6674 10.7811 17.1865 10.4704 16.5621C10.1596 15.9377 10.0028 15.189 9.99984 14.316V13.2861H15.9482C15.9341 12.982 15.8853 12.6994 15.8015 12.4383C15.7009 12.1217 15.5426 11.8465 15.3265 11.6127C15.1105 11.3789 14.8323 11.1984 14.492 11.0711C14.1517 10.9409 13.7418 10.8758 13.2624 10.8758C13.0168 10.8758 12.7579 10.8921 12.4856 10.9246C12.2163 10.9572 11.9515 11.0016 11.6911 11.0578C11.4306 11.1111 11.1954 11.1688 10.9853 11.2309L10.6701 9.63736C10.8181 9.56929 11.0341 9.49975 11.3182 9.42873C11.6023 9.3577 11.9248 9.29704 12.2859 9.24673C12.6469 9.19346 13.0139 9.16683 13.3867 9.16683ZM11.9308 14.8531H15.9286C15.8941 15.1474 15.8221 15.4182 15.7127 15.6654C15.5559 16.0235 15.3206 16.3046 15.0069 16.5088C14.6933 16.713 14.3026 16.8151 13.8351 16.8151C13.4178 16.8151 13.0686 16.7411 12.7875 16.5931C12.5063 16.4422 12.2933 16.2336 12.1483 15.9673C12.0062 15.698 11.9337 15.3872 11.9308 15.0351V14.8531Z" fill="var(--default-black-color, #000)"/>
+<path d="M8.33317 14.1668H1.6665V15.8335H8.33317V14.1668Z" fill="var(--default-black-color, #000)"/>
+</svg>

package/public/img/logo.svg

@@ -1,7 +1,7 @@
-<svg width="61" height="24" viewBox="0 0 61 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M39.463 15.9813C43.7932 15.9813 47.3036 12.4038 47.3036 7.99065C47.3036 3.57754 43.7932 0 39.463 0C35.1327 0 31.6223 3.57754 31.6223 7.99065C31.6223 12.4038 35.1327 15.9813 39.463 15.9813ZM39.4909 12.4486C41.8916 12.4486 43.8377 10.4653 43.8377 8.01869C43.8377 5.57212 41.8916 3.58878 39.4909 3.58878C37.0903 3.58878 35.1442 5.57212 35.1442 8.01869C35.1442 10.4653 37.0903 12.4486 39.4909 12.4486Z" fill="var(--default-black-color, #000)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M31.244 1.86245e-06H23.433L23.4351 0.00626131C23.3312 0.00210278 23.2268 4.0315e-06 23.122 4.0315e-06C18.7917 4.0315e-06 15.2813 3.57754 15.2813 7.99066C15.2813 12.4038 18.7917 15.9813 23.122 15.9813C27.4522 15.9813 30.9626 12.4038 30.9626 7.99066C30.9626 6.11754 30.3302 4.39495 29.2711 3.03255H31.244V1.86245e-06ZM23.1487 12.4486C25.5493 12.4486 27.4954 10.4653 27.4954 8.0187C27.4954 5.57213 25.5493 3.58879 23.1487 3.58879C20.748 3.58879 18.8019 5.57213 18.8019 8.0187C18.8019 10.4653 20.748 12.4486 23.1487 12.4486Z" fill="var(--default-black-color, #000)"/>
-<path d="M23.1222 24C27.4524 24 30.9628 20.4225 30.9628 16.0093L27.4956 16.0093L27.4956 16.0374C27.4956 18.484 25.5495 20.4673 23.1489 20.4673C20.7483 20.4673 18.8022 18.484 18.8022 16.0374L18.8022 16.0093L15.2815 16.0093C15.2815 20.4225 18.7919 24 23.1222 24Z" fill="var(--default-black-color, #000)"/>
-<path d="M57.0732 0H61L55.4209 15.9813H51.3411L45.762 0H49.699L53.2994 11.8715H53.4626L57.0732 0Z" fill="var(--default-black-color, #000)"/>
-<path d="M10.5485 6.25419C10.36 5.21663 10.0206 4.42885 9.5304 3.89086C9.05907 3.35286 8.33321 3.08386 7.35283 3.08386C6.71182 3.08386 6.17449 3.19915 5.74086 3.42972C5.32609 3.64107 4.98673 3.91007 4.72278 4.23671C4.47769 4.56335 4.29858 4.9092 4.18546 5.27427C4.09119 5.63934 4.03463 5.96598 4.01578 6.25419H10.5485ZM4.01578 8.84809C4.07234 10.1739 4.40227 11.1346 5.00558 11.7302C5.60889 12.3258 6.47615 12.6237 7.60735 12.6237C8.41805 12.6237 9.11563 12.4219 9.70008 12.0184C10.2845 11.5957 10.6428 11.1538 10.7747 10.6926H14.3097C13.7441 12.4796 12.8769 13.7573 11.708 14.5259C10.5391 15.2944 9.12505 15.6787 7.46595 15.6787C6.31589 15.6787 5.27896 15.4962 4.35514 15.1311C3.43132 14.7468 2.6489 14.2088 2.00789 13.5171C1.36687 12.8254 0.867257 11.9992 0.509042 11.0385C0.169681 10.0778 0 9.02102 0 7.86818C0 6.75376 0.179107 5.7162 0.537322 4.75549C0.895537 3.79479 1.40458 2.96858 2.06445 2.27687C2.72432 1.56595 3.50673 1.00874 4.4117 0.605243C5.33552 0.201748 6.3536 0 7.46595 0C8.71028 0 9.79435 0.249784 10.7182 0.749351C11.642 1.2297 12.3961 1.88298 12.9806 2.70919C13.5839 3.5354 14.0175 4.47689 14.2815 5.53366C14.5454 6.59044 14.6397 7.69525 14.5643 8.84809H4.01578Z" fill="var(--default-black-color, #000)"/>
-</svg>
+<svg width="61" height="24" viewBox="0 0 61 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.463 15.9813C43.7932 15.9813 47.3036 12.4038 47.3036 7.99065C47.3036 3.57754 43.7932 0 39.463 0C35.1327 0 31.6223 3.57754 31.6223 7.99065C31.6223 12.4038 35.1327 15.9813 39.463 15.9813ZM39.4909 12.4486C41.8916 12.4486 43.8377 10.4653 43.8377 8.01869C43.8377 5.57212 41.8916 3.58878 39.4909 3.58878C37.0903 3.58878 35.1442 5.57212 35.1442 8.01869C35.1442 10.4653 37.0903 12.4486 39.4909 12.4486Z" fill="var(--default-black-color, #000)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.244 1.86245e-06H23.433L23.4351 0.00626131C23.3312 0.00210278 23.2268 4.0315e-06 23.122 4.0315e-06C18.7917 4.0315e-06 15.2813 3.57754 15.2813 7.99066C15.2813 12.4038 18.7917 15.9813 23.122 15.9813C27.4522 15.9813 30.9626 12.4038 30.9626 7.99066C30.9626 6.11754 30.3302 4.39495 29.2711 3.03255H31.244V1.86245e-06ZM23.1487 12.4486C25.5493 12.4486 27.4954 10.4653 27.4954 8.0187C27.4954 5.57213 25.5493 3.58879 23.1487 3.58879C20.748 3.58879 18.8019 5.57213 18.8019 8.0187C18.8019 10.4653 20.748 12.4486 23.1487 12.4486Z" fill="var(--default-black-color, #000)"/>
+<path d="M23.1222 24C27.4524 24 30.9628 20.4225 30.9628 16.0093L27.4956 16.0093L27.4956 16.0374C27.4956 18.484 25.5495 20.4673 23.1489 20.4673C20.7483 20.4673 18.8022 18.484 18.8022 16.0374L18.8022 16.0093L15.2815 16.0093C15.2815 20.4225 18.7919 24 23.1222 24Z" fill="var(--default-black-color, #000)"/>
+<path d="M57.0732 0H61L55.4209 15.9813H51.3411L45.762 0H49.699L53.2994 11.8715H53.4626L57.0732 0Z" fill="var(--default-black-color, #000)"/>
+<path d="M10.5485 6.25419C10.36 5.21663 10.0206 4.42885 9.5304 3.89086C9.05907 3.35286 8.33321 3.08386 7.35283 3.08386C6.71182 3.08386 6.17449 3.19915 5.74086 3.42972C5.32609 3.64107 4.98673 3.91007 4.72278 4.23671C4.47769 4.56335 4.29858 4.9092 4.18546 5.27427C4.09119 5.63934 4.03463 5.96598 4.01578 6.25419H10.5485ZM4.01578 8.84809C4.07234 10.1739 4.40227 11.1346 5.00558 11.7302C5.60889 12.3258 6.47615 12.6237 7.60735 12.6237C8.41805 12.6237 9.11563 12.4219 9.70008 12.0184C10.2845 11.5957 10.6428 11.1538 10.7747 10.6926H14.3097C13.7441 12.4796 12.8769 13.7573 11.708 14.5259C10.5391 15.2944 9.12505 15.6787 7.46595 15.6787C6.31589 15.6787 5.27896 15.4962 4.35514 15.1311C3.43132 14.7468 2.6489 14.2088 2.00789 13.5171C1.36687 12.8254 0.867257 11.9992 0.509042 11.0385C0.169681 10.0778 0 9.02102 0 7.86818C0 6.75376 0.179107 5.7162 0.537322 4.75549C0.895537 3.79479 1.40458 2.96858 2.06445 2.27687C2.72432 1.56595 3.50673 1.00874 4.4117 0.605243C5.33552 0.201748 6.3536 0 7.46595 0C8.71028 0 9.79435 0.249784 10.7182 0.749351C11.642 1.2297 12.3961 1.88298 12.9806 2.70919C13.5839 3.5354 14.0175 4.47689 14.2815 5.53366C14.5454 6.59044 14.6397 7.69525 14.5643 8.84809H4.01578Z" fill="var(--default-black-color, #000)"/>
+</svg>

package/src/baseComponents/InputField/InputField.module.scss

@@ -1,57 +1,57 @@
-@import '/src/styles/colors.module';
-@import '/src/styles/typography.module';
-
-.inputContainer {
-  display: flex;
-  align-items: center;
-  background-color: $Surface-Surface-1;
-  border-radius: 8px;
-  padding: 12px 16px;
-}
-
-.inputContainerLabeled {
-  display: block;
-  background-color: $Surface-Surface-1;
-  border-radius: 8px;
-  padding: 12px 16px;
-
-  label {
-    color: $Text-Secondary;
-  }
-}
-
-.input {
-  width: 100%;
-  border: none;
-  background-color: $Surface-Surface-1;
-
-  &:active,
-  &:focus {
-    outline: none;
-  }
-
-  &::placeholder {
-    color: $Text-Disabled-color;
-  }
-
-  &::-webkit-inner-spin-button,
-  &::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-}
-
-.clearIcon {
-  cursor: pointer;
-}
-
-.input--onfocus {
-  background-color: $Surface-Surface-3-color;
-  .input {
-    background-color: $Surface-Surface-3-color;
-  }
-}
-
-.input-text {
-  @include Body1Regular;
-}
+@import '/src/styles/colors.module';
+@import '/src/styles/typography.module';
+
+.inputContainer {
+  display: flex;
+  align-items: center;
+  background-color: $Surface-Surface-1;
+  border-radius: 8px;
+  padding: 12px 16px;
+}
+
+.inputContainerLabeled {
+  display: block;
+  background-color: $Surface-Surface-1;
+  border-radius: 8px;
+  padding: 12px 16px;
+
+  label {
+    color: $Text-Secondary;
+  }
+}
+
+.input {
+  width: 100%;
+  border: none;
+  background-color: $Surface-Surface-1;
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    color: $Text-Disabled-color;
+  }
+
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}
+
+.clearIcon {
+  cursor: pointer;
+}
+
+.input--onfocus {
+  background-color: $Surface-Surface-3-color;
+  .input {
+    background-color: $Surface-Surface-3-color;
+  }
+}
+
+.input-text {
+  @include Body1Regular;
+}

package/src/baseComponents/InputField/index.tsx

@@ -1,108 +1,108 @@
-"use client";
-
-import React, { HTMLInputTypeAttribute, useState } from "react";
-
-import { ClassNamesFn } from "~utils/ClassNamesFn";
-
-import styles from "./InputField.module.scss";
-import { ClearIcon } from "~svg";
-
-export type TOtpType = "OTP" | "TEXT";
-
-interface IInputFieldProps {
-  onFocus?: () => void;
-  onBlur?: () => void;
-  onEnterPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  value?: string;
-  placeholder?: string;
-  className?: string;
-  style?: React.CSSProperties;
-  isClearable?: boolean;
-  inputLeftIcon?: JSX.Element;
-  type?: HTMLInputTypeAttribute;
-  id: string;
-  labelText?: string;
-  ariaLabel: string;
-}
-
-export const InputField = ({
-  onFocus,
-  onBlur,
-  onChange,
-  onEnterPress,
-  value = "",
-  inputLeftIcon,
-  placeholder = "",
-  className = "",
-  style,
-  isClearable = false,
-  type = "text",
-  id,
-  labelText = "",
-  ariaLabel = "",
-}: IInputFieldProps): React.ReactNode => {
-  const [focused, setFocused] = useState<boolean>(false);
-  return (
-    <div
-      data-testid="InputField_MAIN"
-      className={ClassNamesFn(
-        styles[labelText.length ? "inputContainerLabeled" : "inputContainer"],
-        className,
-        focused ? styles[`input--onfocus`] : undefined,
-        styles[`input-${type?.toLocaleLowerCase()}`]
-      )}
-      style={style}
-    >
-      {labelText.length > 0 && (
-        <label htmlFor={id} data-testid="InputField_LABEL">
-          {labelText}
-        </label>
-      )}
-      {inputLeftIcon}
-      <input
-        data-testid="InputField_INPUT"
-        aria-label={ariaLabel}
-        id={id}
-        type={type}
-        className={styles.input}
-        placeholder={placeholder}
-        aria-placeholder={placeholder}
-        onFocus={() => {
-          setFocused(true);
-          if (onFocus) {
-            onFocus();
-          }
-        }}
-        onBlur={() => {
-          setFocused(false);
-          if (onBlur) {
-            onBlur();
-          }
-        }}
-        onChange={onChange}
-        onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
-          if (onEnterPress && event.key === "Enter") {
-            onEnterPress(event);
-          }
-        }}
-        value={value}
-        readOnly={!onChange}
-      />
-      {isClearable && value && (
-        <ClearIcon
-          fill="red"
-          pathFill="#758393"
-          className={styles.clearIcon}
-          onClick={() => {
-            if (onChange) {
-              onChange({
-                target: { value: "" },
-              } as React.ChangeEvent<HTMLInputElement>);
-            }
-          }}
-        />
-      )}
-    </div>
-  );
-};
+"use client";
+
+import React, { HTMLInputTypeAttribute, useState } from "react";
+
+import { ClassNamesFn } from "~utils/ClassNamesFn";
+
+import styles from "./InputField.module.scss";
+import { ClearIcon } from "~svg";
+
+export type TOtpType = "OTP" | "TEXT";
+
+interface IInputFieldProps {
+  onFocus?: () => void;
+  onBlur?: () => void;
+  onEnterPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  value?: string;
+  placeholder?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  isClearable?: boolean;
+  inputLeftIcon?: JSX.Element;
+  type?: HTMLInputTypeAttribute;
+  id: string;
+  labelText?: string;
+  ariaLabel: string;
+}
+
+export const InputField = ({
+  onFocus,
+  onBlur,
+  onChange,
+  onEnterPress,
+  value = "",
+  inputLeftIcon,
+  placeholder = "",
+  className = "",
+  style,
+  isClearable = false,
+  type = "text",
+  id,
+  labelText = "",
+  ariaLabel = "",
+}: IInputFieldProps): React.ReactNode => {
+  const [focused, setFocused] = useState<boolean>(false);
+  return (
+    <div
+      data-testid="InputField_MAIN"
+      className={ClassNamesFn(
+        styles[labelText.length ? "inputContainerLabeled" : "inputContainer"],
+        className,
+        focused ? styles[`input--onfocus`] : undefined,
+        styles[`input-${type?.toLocaleLowerCase()}`]
+      )}
+      style={style}
+    >
+      {labelText.length > 0 && (
+        <label htmlFor={id} data-testid="InputField_LABEL">
+          {labelText}
+        </label>
+      )}
+      {inputLeftIcon}
+      <input
+        data-testid="InputField_INPUT"
+        aria-label={ariaLabel}
+        id={id}
+        type={type}
+        className={styles.input}
+        placeholder={placeholder}
+        aria-placeholder={placeholder}
+        onFocus={() => {
+          setFocused(true);
+          if (onFocus) {
+            onFocus();
+          }
+        }}
+        onBlur={() => {
+          setFocused(false);
+          if (onBlur) {
+            onBlur();
+          }
+        }}
+        onChange={onChange}
+        onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
+          if (onEnterPress && event.key === "Enter") {
+            onEnterPress(event);
+          }
+        }}
+        value={value}
+        readOnly={!onChange}
+      />
+      {isClearable && value && (
+        <ClearIcon
+          fill="red"
+          pathFill="#758393"
+          className={styles.clearIcon}
+          onClick={() => {
+            if (onChange) {
+              onChange({
+                target: { value: "" },
+              } as React.ChangeEvent<HTMLInputElement>);
+            }
+          }}
+        />
+      )}
+    </div>
+  );
+};

package/src/stories/CardWrapperItem.tsx

@@ -1,29 +1,29 @@
-import React from 'react';
-
-export const CardWrapperItem = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => (
-  <div
-    style={{
-      display: 'flex',
-      justifyContent: 'center',
-      minHeight: '100px',
-    }}
-  >
-    <div
-      style={{
-        backgroundColor: 'bisque',
-        padding: '9px',
-        display: 'flex',
-        width: '80%',
-        flexDirection: 'column',
-        borderRadius: '20px',
-        justifyContent: 'center',
-      }}
-    >
-      {children}
-    </div>
-  </div>
-);
+import React from 'react';
+
+export const CardWrapperItem = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => (
+  <div
+    style={{
+      display: 'flex',
+      justifyContent: 'center',
+      minHeight: '100px',
+    }}
+  >
+    <div
+      style={{
+        backgroundColor: 'bisque',
+        padding: '9px',
+        display: 'flex',
+        width: '80%',
+        flexDirection: 'column',
+        borderRadius: '20px',
+        justifyContent: 'center',
+      }}
+    >
+      {children}
+    </div>
+  </div>
+);