contentoh-components-library 21.0.72 → 21.0.73

package/src/assets/images/modalsSVGs/uploadingImages.svg

@@ -0,0 +1,148 @@
+<svg width="278" height="207" viewBox="0 0 278 207" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M277.77 181.912H-0.000244141V182.051H277.77V181.912Z" fill="#EBEBEB"/>
+<path d="M131.668 157.135H24.3991C22.6492 157.135 21.227 155.713 21.227 153.963V3.17214C21.227 1.42218 22.6492 0 24.3991 0H131.674C133.424 0 134.846 1.42218 134.846 3.17214V153.963C134.841 155.713 133.418 157.135 131.668 157.135ZM24.3991 0.138885C22.7269 0.138885 21.3659 1.49996 21.3659 3.17214V153.963C21.3659 155.635 22.7269 156.996 24.3991 156.996H131.674C133.346 156.996 134.707 155.635 134.707 153.963V3.17214C134.707 1.49996 133.346 0.138885 131.674 0.138885H24.3991Z" fill="#EBEBEB"/>
+<path d="M251.832 157.135H144.557C142.807 157.135 141.385 155.713 141.385 153.963V3.17214C141.385 1.42218 142.807 0 144.557 0H251.832C253.582 0 255.004 1.42218 255.004 3.17214V153.963C255.004 155.713 253.582 157.135 251.832 157.135ZM144.557 0.138885C142.885 0.138885 141.524 1.49996 141.524 3.17214V153.963C141.524 155.635 142.885 156.996 144.557 156.996H251.832C253.504 156.996 254.865 155.635 254.865 153.963V3.17214C254.865 1.49996 253.504 0.138885 251.832 0.138885H144.557Z" fill="#EBEBEB"/>
+<path d="M111.352 187.2H96.908V187.339H111.352V187.2Z" fill="#EBEBEB"/>
+<path d="M59.1976 185.695H29.1428V185.834H59.1976V185.695Z" fill="#EBEBEB"/>
+<path d="M96.3533 192.361H81.7314V192.5H96.3533V192.361Z" fill="#EBEBEB"/>
+<path d="M165.029 191.428H143.457V191.567H165.029V191.428Z" fill="#EBEBEB"/>
+<path d="M175.912 191.428H169.973V191.567H175.912V191.428Z" fill="#EBEBEB"/>
+<path d="M249.943 189.078H219.633V189.217H249.943V189.078Z" fill="#EBEBEB"/>
+<g opacity="0.3">
+<g opacity="0.3">
+<g opacity="0.3">
+<path opacity="0.3" d="M125.164 20.166H42.7325V107.153H125.164V20.166Z" fill="#E6E6E6"/>
+<path opacity="0.3" d="M134.002 17.3496H37.3993C36.9493 17.3496 36.5826 17.7163 36.5826 18.1663C36.5826 18.6162 36.9493 18.9829 37.3993 18.9829H134.002C134.452 18.9829 134.819 18.6162 134.819 18.1663C134.819 17.7163 134.452 17.3496 134.002 17.3496Z" fill="#E6E6E6"/>
+<path opacity="0.3" d="M128.669 20.166H44.3708V107.153H128.669V20.166Z" fill="#F0F0F0"/>
+<path opacity="0.3" d="M125.164 107.153H42.7325V110.403H125.164V107.153Z" fill="#E6E6E6"/>
+<path opacity="0.3" d="M134.491 107.153H50.1933V110.403H134.491V107.153Z" fill="#F0F0F0"/>
+<path opacity="0.3" d="M123.771 102.256L123.771 25.0635L49.2674 25.0635L49.2674 102.256L123.771 102.256Z" fill="#FAFAFA"/>
+<path opacity="0.3" d="M66.1758 102.258L94.9195 25.0605H108.486L79.7477 102.258H66.1758Z" fill="white"/>
+<path opacity="0.3" d="M82.6594 102.258L111.403 25.0605H116.692L87.9481 102.258H82.6594Z" fill="white"/>
+<path opacity="0.3" d="M123.768 102.253L123.768 25.0605H123.146L123.146 102.253H123.768Z" fill="#E6E6E6"/>
+</g>
+<g opacity="0.6">
+<path opacity="0.6" d="M47.2434 94.4585H36.8937L42.4713 15.8828H52.821L47.2434 94.4585Z" fill="#F0F0F0"/>
+<path opacity="0.6" d="M51.2765 94.4585H43.2101L48.7877 15.8828H56.8542L51.2765 94.4585Z" fill="#E6E6E6"/>
+<path opacity="0.6" d="M57.5928 94.4585H47.2431L52.8207 15.8828H63.1705L57.5928 94.4585Z" fill="#F0F0F0"/>
+<path opacity="0.6" d="M61.6259 94.4585H53.5594L59.1426 15.8828H67.2035L61.6259 94.4585Z" fill="#E6E6E6"/>
+<path opacity="0.6" d="M67.9427 94.4585H57.593L63.1706 15.8828H73.5259L67.9427 94.4585Z" fill="#F0F0F0"/>
+</g>
+<g opacity="0.6">
+<path opacity="0.6" d="M126.959 94.4585H132.809L129.659 15.8828H123.809L126.959 94.4585Z" fill="#F0F0F0"/>
+<path opacity="0.6" d="M124.681 94.4585H129.236L126.086 15.8828H121.525L124.681 94.4585Z" fill="#E6E6E6"/>
+<path opacity="0.6" d="M121.108 94.4585H126.958L123.808 15.8828H117.958L121.108 94.4585Z" fill="#F0F0F0"/>
+<path opacity="0.6" d="M118.831 94.4585H123.386L120.236 15.8828H115.675L118.831 94.4585Z" fill="#E6E6E6"/>
+<path opacity="0.6" d="M115.259 94.4585H121.109L117.959 15.8828H112.109L115.259 94.4585Z" fill="#F0F0F0"/>
+</g>
+</g>
+<g opacity="0.3">
+<g opacity="0.3">
+<path opacity="0.3" d="M237.027 15.8828H180.023V91.6697H237.027V15.8828Z" fill="#E6E6E6"/>
+<path opacity="0.3" d="M241.355 15.8828H181.801V91.6697H241.355V15.8828Z" fill="#F5F5F5"/>
+<path opacity="0.3" d="M189.527 18.9972L184.223 84.5894L233.636 88.5852L238.94 22.993L189.527 18.9972Z" fill="white"/>
+<path opacity="0.3" d="M237.722 22.8942L232.418 88.4863L233.636 88.5848L238.94 22.9927L237.722 22.8942Z" fill="#E6E6E6"/>
+</g>
+</g>
+<g opacity="0.3">
+<g opacity="0.3">
+<path opacity="0.3" d="M244.5 119.98H212.662V181.907H244.5V119.98Z" fill="#F5F5F5"/>
+<path opacity="0.3" d="M244.5 119.98H241.873V181.907H244.5V119.98Z" fill="#F0F0F0"/>
+<path opacity="0.3" d="M141.806 147.955H215.115V121.75L141.806 121.75V147.955Z" fill="#E6E6E6"/>
+<path opacity="0.3" d="M145.335 124.629L244.494 124.629V119.985L145.335 119.985V124.629Z" fill="#F0F0F0"/>
+<path opacity="0.3" d="M145.341 119.98H113.503V181.907H145.341V119.98Z" fill="#F5F5F5"/>
+<path opacity="0.3" d="M122.459 181.912H106.992V147.38C106.992 143.146 110.42 139.719 114.653 139.719H114.798C119.031 139.719 122.459 143.146 122.459 147.38V181.912Z" fill="#E6E6E6"/>
+<path opacity="0.3" d="M145.341 119.98H142.714V181.907H145.341V119.98Z" fill="#F0F0F0"/>
+</g>
+<g opacity="0.3">
+<path opacity="0.3" d="M181.173 119.98H174.307L175.973 106.614H182.845L181.173 119.98Z" fill="#F0F0F0"/>
+<path opacity="0.3" d="M182.695 119.98H175.823L177.496 106.614H184.362L182.695 119.98Z" fill="#F5F5F5"/>
+<path opacity="0.3" d="M183.529 113.297H176.657L177.496 106.614H184.363L183.529 113.297Z" fill="#F0F0F0"/>
+<path opacity="0.3" d="M158.291 111.697H206.879C207.284 111.697 207.595 111.342 207.545 110.942L203.801 80.9868C203.757 80.6479 203.473 80.3979 203.134 80.3979H154.547C154.141 80.3979 153.83 80.7535 153.88 81.1535L157.624 111.108C157.663 111.447 157.952 111.697 158.291 111.697Z" fill="#F0F0F0"/>
+<path opacity="0.3" d="M159.013 111.697H207.601C208.006 111.697 208.317 111.342 208.267 110.942L204.523 80.9868C204.478 80.6479 204.195 80.3979 203.856 80.3979H155.269C154.863 80.3979 154.552 80.7535 154.602 81.1535L158.346 111.108C158.385 111.447 158.674 111.697 159.013 111.697Z" fill="#F5F5F5"/>
+<path opacity="0.3" d="M206.701 110.042L203.195 82.0036C203.184 81.9091 203.101 81.8369 203.006 81.8369H156.352C156.241 81.8369 156.152 81.9369 156.163 82.048L159.668 110.086C159.68 110.181 159.763 110.253 159.857 110.253H206.512C206.628 110.253 206.712 110.153 206.701 110.042Z" fill="#E6E6E6"/>
+<path opacity="0.3" d="M201.723 110.253L189.39 81.8369H178.573L190.906 110.253H201.723Z" fill="#EBEBEB"/>
+<path opacity="0.3" d="M188.824 110.253L176.491 81.8369H172.596L184.929 110.253H188.824Z" fill="#EBEBEB"/>
+<path opacity="0.3" d="M178.868 118.73H187.829C188.446 118.73 188.946 119.23 188.946 119.847V119.986H177.757V119.847C177.757 119.23 178.257 118.73 178.868 118.73Z" fill="#F5F5F5"/>
+<path opacity="0.3" d="M172.574 118.73H177.935C178.551 118.73 179.051 119.23 179.051 119.847V119.986H171.462V119.847C171.462 119.23 171.962 118.73 172.574 118.73Z" fill="#F0F0F0"/>
+</g>
+<g opacity="0.3">
+<path opacity="0.3" d="M201.306 119.98H166.718L165.784 117.208H196.806L201.306 119.98Z" fill="#F5F5F5"/>
+<path opacity="0.3" d="M170.524 119.98H164.807L164.035 117.208H169.752L170.524 119.98Z" fill="#F0F0F0"/>
+</g>
+<path opacity="0.3" d="M151.991 117.658H157.191C158.474 117.658 159.513 118.697 159.513 119.98H149.669C149.669 118.697 150.707 117.658 151.991 117.658Z" fill="#F0F0F0"/>
+</g>
+<g opacity="0.3">
+<path opacity="0.3" d="M49.5681 181.912H59.2178L59.2178 137.063H49.5681L49.5681 181.912Z" fill="#E0E0E0"/>
+<path opacity="0.3" d="M92.4085 181.912H53.3984L48.5764 128.913H87.5864L92.4085 181.912Z" fill="#E6E6E6"/>
+<path opacity="0.3" d="M94.4307 181.912H55.4207L50.593 128.913H89.6086L94.4307 181.912Z" fill="#F0F0F0"/>
+<path opacity="0.3" d="M60.7544 176.045L56.999 134.78H84.276L88.0315 176.045H60.7544Z" fill="white"/>
+</g>
+</g>
+<path opacity="0.3" d="M138.885 207C198.374 207 246.599 204.184 246.599 200.711C246.599 197.238 198.374 194.422 138.885 194.422C79.3965 194.422 31.1714 197.238 31.1714 200.711C31.1714 204.184 79.3965 207 138.885 207Z" fill="#F5F5F5"/>
+<path d="M55.0485 67.7973L54.4932 67.8154L54.7354 75.2171L55.2906 75.1989L55.0485 67.7973Z" fill="#B6A1CC"/>
+<path d="M54.8389 61.413L54.2836 61.4312L54.3988 64.9515L54.9541 64.9334L54.8389 61.413Z" fill="#B6A1CC"/>
+<path d="M62.3317 114.953H168.362C170.762 114.953 172.657 112.992 172.579 110.592L170.218 38.2379C170.14 35.838 168.112 33.877 165.712 33.877H59.6873C57.2874 33.877 55.393 35.838 55.4708 38.2379L57.8318 110.586C57.904 112.986 59.9317 114.953 62.3317 114.953Z" fill="#D43594"/>
+<path d="M62.6702 114.952H168.701C171.101 114.952 172.995 112.991 172.917 110.591L170.556 38.2433C170.478 35.8434 168.451 33.8823 166.056 33.8823H60.0258C57.6259 33.8823 55.7315 35.8434 55.8093 38.2433L58.1703 110.591C58.2481 112.986 60.2702 114.952 62.6702 114.952Z" fill="#B6A1CC"/>
+<path d="M165.79 36.0601H59.754C59.6318 36.0601 59.5151 36.0656 59.3984 36.0767C56.6818 36.2989 57.0707 40.4211 59.804 40.4211H166.018C168.751 40.4211 168.873 36.2989 166.14 36.0767C166.029 36.0656 165.907 36.0601 165.79 36.0601Z" fill="#D43594"/>
+<path d="M62.4312 38.2378C62.4479 38.7878 62.0145 39.2377 61.4646 39.2377C60.9146 39.2377 60.4479 38.7878 60.4313 38.2378C60.4146 37.6878 60.8479 37.2378 61.3979 37.2378C61.9534 37.2378 62.4145 37.6878 62.4312 38.2378Z" fill="#FAFAFA"/>
+<path d="M65.832 38.2378C65.8487 38.7878 65.4154 39.2377 64.8654 39.2377C64.3154 39.2377 63.8487 38.7878 63.8321 38.2378C63.8154 37.6878 64.2487 37.2378 64.7987 37.2378C65.3542 37.2378 65.8153 37.6878 65.832 38.2378Z" fill="#FAFAFA"/>
+<path d="M68.9572 38.9486C69.3379 38.5613 69.3219 37.9283 68.9214 37.5347C68.521 37.1411 67.8877 37.136 67.507 37.5233C67.1264 37.9106 67.1424 38.5437 67.5428 38.9373C67.9433 39.3309 68.5765 39.336 68.9572 38.9486Z" fill="#FAFAFA"/>
+<path d="M64.7266 107.73H166.174C167.046 107.73 167.729 107.025 167.702 106.147L165.763 46.6487C165.735 45.7765 165.002 45.0654 164.13 45.0654H62.6822C61.81 45.0654 61.1267 45.771 61.1545 46.6487L63.0933 106.147C63.1211 107.019 63.8544 107.73 64.7266 107.73Z" fill="white"/>
+<path d="M139.179 100.364H137.324V99.8419H138.635L138.591 98.5308L139.118 98.5142L139.179 100.364Z" fill="#D43594"/>
+<path d="M134.374 100.364H131.424V99.8364H134.374V100.364ZM128.474 100.364H125.524V99.8364H128.474V100.364ZM122.574 100.364H119.625V99.8364H122.574V100.364ZM116.675 100.364H113.725V99.8364H116.675V100.364ZM110.78 100.364H107.83V99.8364H110.78V100.364ZM104.881 100.364H101.931V99.8364H104.881V100.364ZM98.9807 100.364H96.0308V99.8364H98.9807V100.364Z" fill="#D43594"/>
+<path d="M93.0806 100.364H91.2417L91.1862 98.5308L91.7084 98.5142L91.7528 99.8419H93.0806V100.364Z" fill="#D43594"/>
+<path d="M91.086 95.581L90.9916 92.6311L91.5193 92.6144L91.6138 95.5643L91.086 95.581ZM90.8971 89.6811L90.8027 86.7312L91.3305 86.7145L91.4249 89.6645L90.8971 89.6811ZM90.7027 83.7813L90.6083 80.8314L91.136 80.8147L91.2305 83.7646L90.7027 83.7813ZM90.5083 77.8814L90.4138 74.9315L90.9416 74.9149L91.036 77.8648L90.5083 77.8814ZM90.3194 71.9816L90.2249 69.0317L90.7527 69.015L90.8471 71.9649L90.3194 71.9816ZM90.1249 66.0818L90.0305 63.1318L90.5583 63.1152L90.6527 66.0651L90.1249 66.0818ZM89.9305 60.1819L89.8361 57.232L90.3638 57.2153L90.4583 60.1653L89.9305 60.1819Z" fill="#D43594"/>
+<path d="M89.742 54.2821L89.6808 52.4321H91.5308V52.9599H90.2253L90.2642 54.2654L89.742 54.2821Z" fill="#D43594"/>
+<path d="M132.83 52.9599H129.88V52.4321H132.83V52.9599ZM126.93 52.9599H123.98V52.4321H126.93V52.9599ZM121.03 52.9599H118.08V52.4321H121.03V52.9599ZM115.13 52.9599H112.18V52.4321H115.13V52.9599ZM109.23 52.9599H106.28V52.4321H109.23V52.9599ZM103.33 52.9599H100.38V52.4321H103.33V52.9599ZM97.4304 52.9599H94.4805V52.4321H97.4304V52.9599Z" fill="#D43594"/>
+<path d="M137.145 54.2821L137.101 52.9599H135.779V52.4321H137.612L137.673 54.2654L137.145 54.2821Z" fill="#D43594"/>
+<path d="M138.495 95.581L138.401 92.6311L138.929 92.6144L139.023 95.5643L138.495 95.581ZM138.301 89.6811L138.207 86.7312L138.734 86.7145L138.829 89.6645L138.301 89.6811ZM138.112 83.7813L138.018 80.8314L138.545 80.8147L138.64 83.7646L138.112 83.7813ZM137.918 77.8814L137.823 74.9315L138.351 74.9149L138.445 77.8648L137.918 77.8814ZM137.723 71.9816L137.629 69.0317L138.157 69.015L138.251 71.9649L137.723 71.9816ZM137.534 66.0818L137.44 63.1318L137.968 63.1152L138.062 66.0651L137.534 66.0818ZM137.34 60.1819L137.245 57.232L137.773 57.2153L137.868 60.1653L137.34 60.1819Z" fill="#D43594"/>
+<path d="M124.897 83.92H105.503C101.798 83.92 98.6809 80.9034 98.5587 77.1979C98.4476 73.8091 100.881 70.9536 104.175 70.4981C105.02 67.2315 107.997 64.9038 111.436 64.9038C114.219 64.9038 116.769 66.3593 118.225 68.737C118.83 68.5482 119.464 68.4537 120.108 68.4537C123.514 68.4537 126.425 71.1148 126.775 74.4702C128.491 75.2869 129.658 77.0257 129.719 78.9257C129.763 80.259 129.286 81.5089 128.369 82.4533C127.463 83.4033 126.23 83.92 124.897 83.92ZM111.442 66.2038C108.458 66.2038 105.897 68.3148 105.347 71.2203L105.253 71.7147L104.753 71.7481C101.914 71.9314 99.7642 74.3091 99.8587 77.159C99.9587 80.1756 102.492 82.6256 105.509 82.6256H124.902C125.88 82.6256 126.786 82.2478 127.447 81.5589C128.113 80.87 128.463 79.9534 128.43 78.9757C128.38 77.4535 127.38 76.0646 125.936 75.5257L125.536 75.3757L125.519 74.948C125.402 72.087 122.98 69.7592 120.119 69.7592C119.447 69.7592 118.797 69.887 118.186 70.137L117.642 70.3592L117.369 69.837C116.197 67.5926 113.925 66.2038 111.442 66.2038Z" fill="#D43594"/>
+<path d="M119.309 77.6256L113.959 72.4424L108.948 77.6256H111.881L112.059 82.981H116.553L116.375 77.6256H119.309Z" fill="#D43594"/>
+<path d="M203.857 56.582C204.368 57.3153 204.779 57.9431 205.207 58.632C205.629 59.3042 206.029 59.9875 206.418 60.6819C207.196 62.0597 207.918 63.4707 208.585 64.9263C209.246 66.3818 209.868 67.8651 210.385 69.415C210.923 70.9483 211.362 72.5594 211.69 74.2205L211.907 75.4871L211.934 75.6426L211.962 75.8426C211.985 76.0371 212.007 76.2037 212.018 76.4204C212.023 76.6315 212.035 76.8315 212.018 77.0759L211.99 77.4259L211.929 77.8148C211.89 78.0592 211.801 78.3592 211.718 78.6259C211.607 78.9148 211.496 79.1925 211.329 79.4703C211.018 80.0259 210.562 80.5203 210.101 80.8703C209.151 81.598 208.29 81.8036 207.596 81.9369C206.89 82.0536 206.318 82.0536 205.785 82.0258C205.251 81.998 204.768 81.9369 204.307 81.8536C203.396 81.6814 202.563 81.4536 201.768 81.2036C200.179 80.6814 198.718 80.0647 197.302 79.3703C195.879 78.6759 194.535 77.9426 193.185 77.0704L194.785 73.526C197.59 74.2149 200.496 74.9704 203.163 75.3371C203.824 75.4315 204.468 75.4926 205.046 75.4982C205.601 75.5093 206.151 75.4482 206.24 75.3649C206.274 75.3371 206.151 75.2982 205.779 75.5426C205.612 75.6593 205.412 75.8704 205.274 76.0926C205.207 76.2148 205.151 76.3093 205.112 76.4259C205.068 76.5093 205.051 76.6315 205.029 76.687L204.996 76.8648C204.996 76.9259 204.985 76.9315 204.985 76.9593C204.985 76.987 204.974 76.9704 204.974 76.9815C204.979 76.9982 204.962 76.9426 204.951 76.9093L204.918 76.7926L204.668 75.8593C203.924 73.3538 202.829 70.8039 201.546 68.3095C200.918 67.054 200.229 65.8207 199.529 64.5874C199.179 63.9707 198.813 63.3652 198.457 62.7596C198.102 62.1708 197.707 61.5263 197.385 61.0152L203.857 56.582Z" fill="#FFB573"/>
+<path d="M195.435 73.8091L193.029 71.4092L190.629 76.7479C190.629 76.7479 192.896 78.0034 194.918 77.0868L195.435 73.8091Z" fill="#FFB573"/>
+<path d="M189.462 69.4927L187.685 74.0037L190.629 76.748L193.023 71.4037L189.462 69.4927Z" fill="#FFB573"/>
+<path d="M197.591 58.3677L151.339 50.2192L143.191 96.4708L189.442 104.619L197.591 58.3677Z" fill="#B6A1CC"/>
+<path opacity="0.6" d="M197.591 58.3677L151.339 50.2192L143.191 96.4708L189.442 104.619L197.591 58.3677Z" fill="white"/>
+<path d="M194.94 60.2244L153.191 52.8691L145.836 94.6181L187.585 101.973L194.94 60.2244Z" fill="white"/>
+<path d="M172.849 74.1967C176.39 71.7166 177.25 66.8355 174.769 63.2945C172.289 59.7535 167.408 58.8935 163.867 61.3736C160.326 63.8537 159.466 68.7348 161.946 72.2758C164.426 75.8168 169.308 76.6768 172.849 74.1967Z" fill="#FFD1FF"/>
+<path d="M178.142 79.1812L164.147 88.9753L157.714 79.7867L147.153 87.1865L145.842 94.6196L187.591 101.975L188.902 94.5418L178.142 79.1812Z" fill="#FFD1FF"/>
+<path d="M180.435 39.7544C180.44 40.1266 180.252 40.4266 180.013 40.4322C179.774 40.4377 179.568 40.1433 179.563 39.7711C179.557 39.3989 179.746 39.0989 179.985 39.0933C180.229 39.0878 180.429 39.3878 180.435 39.7544Z" fill="#263238"/>
+<path d="M180.291 40.4268C180.291 40.4268 179.497 42.5767 178.591 43.6267C179.258 44.2211 180.363 43.9211 180.363 43.9211L180.291 40.4268Z" fill="#FF5652"/>
+<path d="M181.741 37.677C181.685 37.6881 181.63 37.677 181.58 37.6437C180.791 37.0992 180.063 37.3826 180.03 37.3937C179.919 37.4381 179.791 37.3826 179.746 37.2715C179.702 37.1603 179.752 37.0326 179.863 36.9881C179.902 36.9715 180.835 36.5992 181.824 37.2826C181.924 37.3492 181.946 37.4881 181.88 37.5826C181.846 37.6381 181.791 37.6659 181.741 37.677Z" fill="#263238"/>
+<path d="M191.146 41.1655C190.912 44.5765 191.179 51.4597 193.784 53.3874C193.784 53.3874 193.146 56.1651 186.962 56.9429C180.163 57.7984 183.29 53.9763 183.29 53.9763C186.89 52.6263 186.446 49.882 185.474 47.382L191.146 41.1655Z" fill="#FFB573"/>
+<path d="M207.99 188.673C207.973 188.667 207.962 188.662 207.945 188.656C207.834 188.606 207.707 188.478 207.712 188.195C207.718 188.045 207.779 187.917 207.901 187.812C208.423 187.367 209.945 187.562 210.012 187.573C210.057 187.578 210.09 187.606 210.101 187.651C210.112 187.689 210.101 187.734 210.068 187.762C209.718 188.067 208.54 188.862 207.99 188.673ZM209.729 187.762C209.212 187.723 208.362 187.717 208.051 187.978C207.979 188.039 207.94 188.112 207.94 188.201C207.934 188.406 208.018 188.445 208.045 188.456C208.334 188.601 209.168 188.178 209.729 187.762Z" fill="#D43594"/>
+<path d="M209.234 187.623C208.701 187.439 208.135 187.123 208.04 186.801C208.012 186.712 208.001 186.534 208.218 186.39C208.357 186.295 208.518 186.267 208.696 186.301C209.368 186.44 210.068 187.573 210.096 187.623C210.118 187.656 210.118 187.701 210.096 187.734C210.073 187.767 210.04 187.789 210.001 187.789C209.807 187.784 209.523 187.723 209.234 187.623ZM208.723 186.534C208.696 186.523 208.673 186.517 208.651 186.512C208.535 186.484 208.435 186.506 208.346 186.567C208.229 186.645 208.246 186.712 208.257 186.74C208.346 187.034 209.207 187.445 209.79 187.545C209.573 187.245 209.134 186.678 208.723 186.534Z" fill="#D43594"/>
+<path d="M174.258 196.267C173.669 196.267 173.102 196.184 172.914 195.922C172.847 195.828 172.797 195.672 172.925 195.45C172.997 195.322 173.114 195.239 173.269 195.195C174.03 194.989 175.636 195.9 175.702 195.939C175.741 195.961 175.764 196.006 175.758 196.05C175.752 196.095 175.719 196.128 175.675 196.139C175.369 196.195 174.802 196.267 174.258 196.267ZM173.53 195.372C173.452 195.372 173.386 195.378 173.319 195.395C173.219 195.422 173.147 195.472 173.108 195.545C173.03 195.678 173.058 195.745 173.086 195.784C173.297 196.078 174.458 196.084 175.308 195.967C174.886 195.756 174.064 195.372 173.53 195.372Z" fill="#D43594"/>
+<path d="M175.641 196.139C175.624 196.139 175.613 196.134 175.596 196.128C175.041 195.878 173.946 194.889 174.03 194.372C174.052 194.25 174.135 194.1 174.435 194.067C174.658 194.045 174.858 194.106 175.035 194.256C175.619 194.734 175.741 195.967 175.746 196.022C175.752 196.061 175.735 196.1 175.702 196.122C175.685 196.128 175.663 196.139 175.641 196.139ZM174.524 194.278C174.502 194.278 174.48 194.278 174.458 194.284C174.263 194.306 174.252 194.378 174.246 194.406C174.196 194.717 174.941 195.495 175.508 195.834C175.446 195.472 175.285 194.734 174.902 194.422C174.785 194.328 174.658 194.278 174.524 194.278Z" fill="#D43594"/>
+<path d="M180.679 196.028H176.096L175.641 185.417H180.224L180.679 196.028Z" fill="#FFB573"/>
+<path d="M214.951 186.351L210.701 187.517L205.262 177.568L209.512 176.401L214.951 186.351Z" fill="#FFB573"/>
+<path d="M210.062 187.051L214.645 184.706C214.812 184.623 215.017 184.662 215.134 184.806L217.795 188.023C218.073 188.356 217.956 188.862 217.567 189.056C215.951 189.845 215.128 190.151 213.112 191.184C211.873 191.817 208.184 194.562 206.323 195.045C204.501 195.517 203.74 193.751 204.456 193.389C207.679 191.751 208.984 189.067 209.523 187.645C209.629 187.384 209.817 187.179 210.062 187.051Z" fill="#263238"/>
+<path d="M176.13 195.5H181.136C181.324 195.5 181.486 195.628 181.524 195.812L182.43 199.884C182.524 200.306 182.202 200.706 181.769 200.7C179.963 200.667 177.352 200.561 175.086 200.561C172.43 200.561 170.141 200.706 167.03 200.706C165.147 200.706 164.625 198.806 165.414 198.634C168.997 197.85 171.925 197.767 175.025 195.856C175.358 195.65 175.73 195.5 176.13 195.5Z" fill="#263238"/>
+<path d="M195.818 61.8706C196.296 63.1039 196.824 64.3039 197.352 65.4261C198.263 67.376 199.174 69.076 199.835 70.2482C200.424 71.3037 200.813 71.9315 200.813 71.9315L210.824 66.965C210.824 66.965 206.79 55.3708 202.579 54.0764C198.268 52.7764 193.657 56.343 195.818 61.8706Z" fill="#263238"/>
+<path opacity="0.2" d="M200.256 63.0205C199.384 63.6594 198.762 65.3871 198.318 67.4148C198.89 68.5315 199.412 69.4981 199.84 70.2536C200.429 71.3147 200.812 71.9425 200.812 71.9425L201.962 71.3703C201.884 68.687 201.456 65.6704 200.256 63.0205Z" fill="black"/>
+<path d="M174.652 69.2648C174.652 70.8259 174.691 72.5425 174.774 74.4313C174.996 79.5701 175.563 85.981 176.635 93.9419H201.146C201.312 90.1809 198.951 71.8203 202.579 54.0874C202.579 54.0874 198.373 53.243 194.368 53.0541C191.235 52.9041 186.702 52.8041 183.952 53.0541C180.318 53.393 176.902 54.3263 176.902 54.3263C176.902 54.3263 174.646 56.8762 174.652 69.2648Z" fill="#263238"/>
+<path d="M180.957 61.993C180.524 62.9041 180.152 63.5486 179.741 64.2208C179.335 64.8763 178.93 65.5041 178.502 66.1152C177.658 67.3429 176.774 68.5151 175.847 69.6651C173.991 71.9539 171.985 74.1372 169.663 76.1538C168.508 77.1649 167.247 78.1204 165.83 78.9926L165.286 79.3092L165.141 79.3926L164.941 79.4926L164.536 79.687C163.991 79.9203 163.441 80.1037 162.902 80.2148C161.819 80.437 160.802 80.4537 159.864 80.3703C157.991 80.1703 156.419 79.5981 154.986 78.9093C154.275 78.5537 153.592 78.1759 152.942 77.7426C152.28 77.3149 151.703 76.876 151.047 76.326L153.014 72.9705C155.414 73.5983 158.13 74.1649 159.997 73.8983C160.452 73.8427 160.836 73.7316 161.097 73.5927C161.23 73.5205 161.33 73.4538 161.414 73.3872C161.43 73.365 161.452 73.3483 161.469 73.3316L161.497 73.3094L161.575 73.2539L161.914 73.015C162.819 72.3483 163.725 71.5372 164.613 70.6595C166.386 68.8984 168.074 66.8818 169.663 64.8041C170.458 63.7597 171.23 62.693 171.963 61.6264C172.324 61.0875 172.685 60.5542 173.019 60.032C173.341 59.5153 173.685 58.9653 173.858 58.6265L180.957 61.993Z" fill="#FFB573"/>
+<path d="M154.008 73.4591L149.781 71.4536L149.397 77.1257C149.397 77.1257 152.68 77.6923 154.425 76.409L154.008 73.4591Z" fill="#FFB573"/>
+<path d="M144.453 72.4147L146.081 76.7368L149.397 77.1201L149.781 71.4536L144.453 72.4147Z" fill="#FFB573"/>
+<path d="M183.985 58.9873C183.841 63.365 174.819 73.4591 174.819 73.4591L165.286 67.2315C165.286 67.2315 168.308 61.5761 172.23 57.4874C178.157 51.3153 184.157 53.7319 183.985 58.9873Z" fill="#263238"/>
+<path opacity="0.2" d="M175.641 185.417L175.874 190.89H180.463L180.23 185.417H175.641Z" fill="black"/>
+<path opacity="0.2" d="M209.512 176.401L205.262 177.568L208.068 182.701L212.318 181.529L209.512 176.401Z" fill="black"/>
+<path d="M192.746 38.7158C192.563 43.2601 192.685 45.9322 190.44 48.3099C187.063 51.8876 181.419 49.9266 180.241 45.4156C179.18 41.3601 179.657 34.6048 184.063 32.7048C188.407 30.8326 192.935 34.1714 192.746 38.7158Z" fill="#FFB573"/>
+<path d="M183.702 40.8823C182.069 39.7156 180.463 37.3101 180.585 35.5213C179.074 35.4602 178.052 32.9603 178.885 31.1381C179.408 32.3103 181.213 31.4492 181.919 30.5214C181.541 29.627 181.602 28.1437 184.196 27.0938C183.98 27.8493 184.091 29.1215 186.696 28.2048C189.857 27.0938 195.418 27.8326 193.79 31.5992C196.018 31.9992 198.907 36.5935 196.452 39.0157C193.996 41.4378 193.49 45.3321 191.391 45.7377C189.285 46.1377 183.824 46.271 183.702 40.8823Z" fill="#263238"/>
+<path d="M192.307 31.4493C193.768 30.7827 196.118 31.066 197.384 32.8771C195.657 32.1715 194.673 31.7104 192.307 31.4493Z" fill="#263238"/>
+<path d="M184.896 40.688C184.863 41.7546 184.396 42.7657 183.818 43.4379C182.951 44.449 182.001 43.8601 181.813 42.6657C181.64 41.588 181.885 39.7713 182.963 39.1936C184.024 38.6325 184.935 39.4713 184.896 40.688Z" fill="#FFB573"/>
+<path d="M185.329 93.9419C185.329 93.9419 183.168 128.624 187.268 141.413C193.763 161.668 205.334 182.362 205.334 182.362L213.612 179.873C213.612 179.873 204.507 158.029 201.512 140.968C198.823 125.641 201.146 106.464 201.146 93.9474C195.435 93.9419 185.329 93.9419 185.329 93.9419Z" fill="#D43594"/>
+<path opacity="0.2" d="M184.979 101.669C187.291 100.992 189.096 101.247 189.563 103.308C190.785 108.68 187.118 122.852 185.291 129.335C184.552 120.047 184.724 108.936 184.979 101.669Z" fill="black"/>
+<path d="M202.996 179.984C202.963 179.995 205.157 182.545 205.157 182.545L214.201 179.823L213.051 176.762L202.996 179.984Z" fill="#263238"/>
+<path d="M176.636 93.9419C176.636 93.9419 169.73 123.202 169.247 137.18C168.702 152.857 174.174 189.828 174.174 189.828H181.941C181.941 189.828 182.896 152.568 183.241 138.291C183.619 122.724 192.752 93.9419 192.752 93.9419H176.636Z" fill="#D43594"/>
+<path d="M172.675 186.739C172.641 186.739 173.113 189.961 173.113 189.961H182.558L182.813 187.084L172.675 186.739Z" fill="#263238"/>
+<path d="M180.063 51.9763C181.113 51.6096 189.124 50.593 194.935 50.9041C198.251 51.0818 200.123 51.4429 201.479 52.0985C202.835 52.754 200.407 56.0595 199.285 56.4595C199.74 57.7261 197.212 59.3427 195.768 60.1094C195.19 61.2982 189.513 62.3982 186.174 59.8427C183.618 57.8817 177.069 53.0151 180.063 51.9763Z" fill="#D43594"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="277.77" height="207" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/atoms/AsignationOption/index.js

@@ -9,13 +9,15 @@ import availableIcon from "../../../assets/images/asignationOptions/availableIco
 export const AsignationOption = ({
   profileImage,
   asignationType = "available",
+  imageType = "profile-image",
   name,
   team,
   onClick,
+  btnOnClick,
 }) => {
   const iconsAsignation = {
     assigned: (
-      <button onClick={onClick}>
+      <button onClick={btnOnClick}>
         <img src={removeAsigned} alt="remove asigned" />
       </button>
     ),
@@ -25,17 +27,17 @@ export const AsignationOption = ({
   };
 
   return (
-    <Container>
+    <Container onClick={onClick}>
       <Avatar
-        imageType={"profile-image"}
-        image={profileImage?.image}
+        imageType={imageType}
+        image={profileImage}
         altText={"profile image"}
       />
       <div className="labels-container">
         <p className="name-label">{name}</p>
         <p className="team-label">{team}</p>
       </div>
-      {iconsAsignation[asignationType]}
+      {asignationType && iconsAsignation[asignationType]}
     </Container>
   );
 };

package/src/components/atoms/AsignationOption/styles.js

@@ -5,8 +5,12 @@ export const Container = styled.div`
   display: flex;
   width: fit-content;
   align-items: center;
+  cursor: pointer;
+  border-radius: 3px;
+  padding: 5px;
 
-  .profile-image {
+  .profile-image,
+  .medium-image {
     & + * {
       margin-left: 15px;
     }
@@ -43,6 +47,10 @@ export const Container = styled.div`
     border: none;
   }
 
+  &:hover {
+    background-color: ${GlobalColors.s3};
+  }
+
   & + * {
     margin-top: 10px;
   }

package/src/components/atoms/CharCounter/CharCounter.stories.js

@@ -0,0 +1,11 @@
+import { CharCounter } from "./index";
+
+export default {
+  title: "Components/atoms/CharCounter",
+  component: CharCounter,
+};
+
+const Template = (args) => <CharCounter {...args} />;
+
+export const CharCounterDefault = Template.bind({});
+CharCounterDefault.args = { counter: 0, limit: 0 };

package/src/components/atoms/CharCounter/index.js

@@ -0,0 +1,13 @@
+import { Container } from "./styles";
+
+export const CharCounter = ({ counter, limit }) => {
+  return (
+    <Container>
+      {limit && (
+        <p>
+          {counter}/{limit}
+        </p>
+      )}
+    </Container>
+  );
+};

package/src/components/atoms/CharCounter/styles.js

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  font-family: ${FontFamily.AvenirNext};
+  color: ${GlobalColors.s4};
+  font-size: 13px;
+  text-align: right;
+  padding-right: 10px;
+`;

package/src/components/atoms/CheckBox/index.js

@@ -1,9 +1,15 @@
 import { Container } from "./styles";
 
-export const CheckBox = ({ id, label, onChange, isFilter }) => {
+export const CheckBox = ({ id, label, onChange, isFilter, defaultChecked }) => {
   return (
     <Container key={`check-${id}`}>
-      <input type="checkbox" name={id} id={id} onChange={onChange} />
+      <input
+        type="checkbox"
+        name={id}
+        id={id}
+        onChange={onChange}
+        defaultChecked={defaultChecked}
+      />
       <label htmlFor={id}>
         {label && <p className={isFilter && "filter-text"}>{label}</p>}
       </label>

package/src/components/atoms/Commentary/index.js

@@ -0,0 +1,9 @@
+import { Container } from "./styles";
+
+export const Commentary = ({ comment, reviewed }) => {
+  return (
+    <Container reviewed={reviewed}>
+      <p>{comment}</p>
+    </Container>
+  );
+};

package/src/components/atoms/Commentary/styles.js

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 500px;
+  height: 80px;
+  border: 1px solid ${GlobalColors.s2};
+  padding: 10px;
+  p {
+    font-family: ${FontFamily.AvenirNext};
+    font-size: 12px;
+    line-height: 15px;
+    color: ${GlobalColors.s4};
+    text-decoration: ${({ reviewed }) => (reviewed ? "line-through" : "none")};
+  }
+`;

package/src/components/atoms/GeneralButton/index.js

@@ -1,4 +1,5 @@
 import { Container } from "./styles";
+import React from "react";
 
 export const Button = ({
   buttonType,
@@ -9,9 +10,15 @@ export const Button = ({
   onClick,
 }) => {
   return (
-    <Container className={buttonType} buttonFont={buttonFont} onClick={onClick} key={`button-${buttonType}`}>
+    <Container
+      className={buttonType}
+      buttonFont={buttonFont}
+      onClick={onClick}
+      key={`button-${buttonType}`}
+      disabled={buttonType === "general-button-disabled"}
+    >
       {buttonType.includes("general") && label}
-      {image && <img src={image} alt={altText}/>}
+      {image && <img src={image} alt={altText} />}
     </Container>
   );
 };

package/src/components/atoms/GeneralButton/styles.js

@@ -12,6 +12,7 @@ import saveIcon from "../../../assets/images/generalButton/saveIcon.svg";
 import saveIconHover from "../../../assets/images/generalButton/saveIconHover.svg";
 import deleteIcon from "../../../assets/images/generalButton/deleteIcon.svg";
 import deleteIconHover from "../../../assets/images/generalButton/deleteIconHover.svg";
+import downloadIcon from "../../../assets/images/generalButton/downloadIcon.svg";
 import { GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.button`
@@ -92,6 +93,19 @@ export const Container = styled.button`
         border: 1px solid ${GlobalColors.magenta_s2};
       }
     }
+
+    &.download-button {
+      background-image: url(${downloadIcon});
+      border: 1px solid ${GlobalColors.s3};
+      border-radius: 15px;
+      background-size: 15px;
+
+      &:hover {
+        color: white;
+        background-color: ${GlobalColors.magenta_s2};
+        border: 1px solid ${GlobalColors.magenta_s2};
+      }
+    }
   }
 
   &.general-arrow-button {
@@ -145,4 +159,13 @@ export const Container = styled.button`
   &.row-layout {
     background-image: url(${gridLayout});
   }
+
+  &.general-button-disabled {
+    background-color: grey;
+    color: ${GlobalColors.white};
+
+    &:hover {
+      opacity: 1;
+    }
+  }
 `;

package/src/components/atoms/GeneralInput/index.js

@@ -1,39 +1,84 @@
 import { useEffect, useState } from "react";
 import { Container } from "./styles";
+import { InputFormatter } from "../InputFormatter";
+import { CheckBox } from "../CheckBox";
 
 export const GeneralInput = ({
   inputType,
   inputId,
-  inputCols,
-  inputRows,
   inputName,
   inputValue,
   inputPlaceholder,
   validateInput,
   position,
   inputsArray,
-  maxLength,
   inputSize,
-  required,
+  articleId,
+  updatedDatasheets,
+  setUpdatedDatasheets,
+  updatedDescriptions,
+  setUpdatedDescriptions,
+  maxChar,
+  isRequired,
+  version,
 }) => {
-  const [textValue, setTextValue] = useState({ value: inputValue ?? "" });
+  const [textValue, setTextValue] = useState({
+    value: inputValue,
+  });
+  const [requiredEmpty, setRequiredEmpty] = useState(false);
 
-  const onHandleChange = (e) => {
-    validateInput
-      ? setTextValue({ value: validateInput(e, position, inputsArray) })
-      : setTextValue(({ value }) => (value = e.target.value));
+  const onHandleChange = (evt) => {
+    if (validateInput) {
+      setTextValue({ value: validateInput(evt, position, inputsArray) });
+    } else {
+      setTextValue({
+        value: inputType === "checkbox" ? evt.target.checked : evt.target.value,
+      });
+      let dataSave = updatedDatasheets.slice();
+      if (dataSave.length === 0)
+        dataSave.push({
+          articleId: articleId,
+          versionId: version,
+          attributeId: inputId,
+          value:
+            inputType === "checkbox" ? evt.target.checked : evt.target.value,
+        });
+      else if (dataSave.some((e) => e.attributeId === inputId)) {
+        dataSave.forEach((e) => {
+          if (e.attributeId === inputId) {
+            e.value =
+              inputType === "checkbox" ? evt.target.checked : evt.target.value;
+          }
+        });
+      } else {
+        dataSave.push({
+          articleId: articleId,
+          versionId: version,
+          attributeId: inputId,
+          value:
+            inputType === "checkbox" ? evt.target.checked : evt.target.value,
+        });
+      }
+      setUpdatedDatasheets(dataSave);
+    }
   };
 
   useEffect(() => {
-    const input = document.querySelector(`textarea#${inputId}`);
-    if (input) {
-      input.style.cssText = "height:" + input.scrollHeight + "px";
-    }
+    setRequiredEmpty(
+      isRequired &&
+        (textValue.value?.length === 0 || textValue.value === undefined)
+    );
   }, [textValue]);
 
   return (
-    <Container>
-      {inputType !== "textarea" ? (
+    <Container isRequired={requiredEmpty}>
+      {inputType === "checkbox" ? (
+        <CheckBox
+          id={inputId}
+          onChange={(e) => onHandleChange(e)}
+          defaultChecked={textValue.value === "true" ? true : false}
+        />
+      ) : inputType !== "textarea" ? (
         <input
           type={inputType}
           id={inputId}
@@ -42,19 +87,22 @@ export const GeneralInput = ({
           placeholder={inputPlaceholder}
           value={textValue.value}
           onInput={(e) => onHandleChange(e)}
-          maxLength={maxLength && maxLength}
-          required={required}
+          required={isRequired}
+          maxLength={maxChar}
         />
       ) : (
-        <textarea
+        <InputFormatter
           name={inputName}
-          id={inputId}
-          cols={inputCols}
-          rows={inputRows}
+          inputId={inputId}
           placeholder={inputPlaceholder}
-          value={textValue.value}
+          mainValue={textValue.value}
           onChange={onHandleChange}
-        ></textarea>
+          articleId={articleId}
+          updatedDescriptions={updatedDescriptions}
+          setUpdatedDescriptions={setUpdatedDescriptions}
+          maxChar={maxChar}
+          isRequired={isRequired}
+        />
       )}
     </Container>
   );

package/src/components/atoms/GeneralInput/styles.js

@@ -4,10 +4,20 @@ import { FontFamily, GlobalColors } from "../../../global-files/variables";
 export const Container = styled.div`
   width: 100%;
 
+  > div {
+    label {
+      &:before {
+        outline: 1px solid ${({ isRequired }) => (isRequired ? "red" : "none")};
+      }
+    }
+  }
+
   input,
   textarea {
     width: 100%;
-    border: 1px solid ${GlobalColors.s2};
+    border: 1px solid
+      ${({ isRequired }) => (isRequired ? "red" : `${GlobalColors.s2}`)};
+
     font-family: ${FontFamily.AvenirNext};
     color: ${GlobalColors.s4};
     font-weight: normal;

package/src/components/atoms/GenericModal/index.js

@@ -1,10 +1,10 @@
 import { Container } from "./styles";
 
-export const GenericModal = ({ componentsArray = [], buttonType }) => {
+export const GenericModal = ({ componentsArray = [], buttonType, onClick }) => {
   return (
     <Container>
       <div className={"global-styles " + buttonType}>
-        <button className="close-button" />
+        <button className="close-button" onClick={onClick} />
         {componentsArray?.map((component) => component)}
       </div>
     </Container>

package/src/components/atoms/GenericModal/styles.js

@@ -12,6 +12,13 @@ export const Container = styled.div`
   position: fixed;
   background-color: rgba(59, 59, 59, 0.53);
   backdrop-filter: blur(4px);
+  top: 0;
+  left: 0;
+  z-index: 100;
+
+  h2 {
+    overflow: initial;
+  }
 
   .global-styles {
     background-color: ${GlobalColors.deep_gray};
@@ -68,9 +75,10 @@ export const Container = styled.div`
           margin-top: 30px;
         }
       }
-      .product-name-header {
+      .product-name-header,
+      .retailer-name-header {
         & + * {
-          margin-bottom: 30px;
+          margin-top: 30px;
         }
       }
     }

package/src/components/atoms/GradientPanel/styles.js

@@ -37,7 +37,6 @@ export const Container = styled.div`
   }
 
   &.home-login {
-    width: 100%;
     .credenciales {
       & + * {
         margin-top: 30px;

package/src/components/atoms/Input/index.js

@@ -0,0 +1,15 @@
+import { MainContainer, InputCustom } from "./style";
+
+export default function Input(props) {
+  return (
+    <MainContainer error={props.error}>
+      <InputCustom
+        autoFocus
+        onChange={(event) =>
+          props.onChange && props.onChange(event.target.value)
+        }
+        {...props}
+      />
+    </MainContainer>
+  );
+}

package/src/components/atoms/Input/style.js

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const MainContainer = styled.div`
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  height: 20px;
+  padding: 0 5px;
+  box-sizing: border-box;
+  background: #fafafa;
+  border-radius: 2px;
+  border: ${(props) => props.error && "1px solid red"};
+`;
+
+export const InputCustom = styled.input`
+  border-width: 0;
+  width: 100%;
+  font-family: ${FontFamily.AvenirNext};
+  font-weight: 400;
+  font-size: 11px;
+  line-height: 19px;
+  border-width: 0;
+  color: ${GlobalColors.s5};
+  background-color: ${GlobalColors.s2};
+  outline: none;
+  &::placeholder {
+    font-size: 12px;
+    color: #d4d1d7;
+  }
+`;