const label = props.label ?? "Label"; const value = props.value ?? "0"; const onChange = props.onChange ?? (() => {}); const error = props.error ?? ""; const types = [ { name: "Yes/No", icon: ( <svg viewBox="0 0 204 41" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M106 20.5C106 9.17816 115.178 0 126.5 0H183.5C194.822 0 204 9.17816 204 20.5C204 31.8218 194.822 41 183.5 41H126.5C115.178 41 106 31.8218 106 20.5Z" fill="#E9ECEF" /> <path d="M0 20.5C0 9.17816 9.17816 0 20.5 0H77.5C88.8218 0 98 9.17816 98 20.5C98 31.8218 88.8218 41 77.5 41H20.5C9.17816 41 0 31.8218 0 20.5Z" fill="#E9ECEF" /> <path d="M154.031 26H151.727L146.133 16.8828H146.062C146.083 17.1901 146.102 17.5156 146.117 17.8594C146.138 18.2031 146.154 18.5573 146.164 18.9219C146.18 19.2865 146.193 19.6562 146.203 20.0312V26H144.5V14.5781H146.789L152.375 23.6328H152.43C152.419 23.3672 152.406 23.0625 152.391 22.7188C152.375 22.375 152.359 22.0208 152.344 21.6562C152.333 21.2865 152.326 20.9297 152.32 20.5859V14.5781H154.031V26Z" fill="#272727" /> <path d="M164.5 21.6562C164.5 22.375 164.406 23.013 164.219 23.5703C164.031 24.1276 163.758 24.599 163.398 24.9844C163.039 25.3646 162.607 25.6562 162.102 25.8594C161.596 26.0573 161.026 26.1562 160.391 26.1562C159.797 26.1562 159.253 26.0573 158.758 25.8594C158.263 25.6562 157.833 25.3646 157.469 24.9844C157.109 24.599 156.831 24.1276 156.633 23.5703C156.435 23.013 156.336 22.375 156.336 21.6562C156.336 20.7031 156.5 19.8958 156.828 19.2344C157.161 18.5677 157.635 18.0599 158.25 17.7109C158.865 17.362 159.596 17.1875 160.445 17.1875C161.242 17.1875 161.945 17.362 162.555 17.7109C163.164 18.0599 163.641 18.5677 163.984 19.2344C164.328 19.901 164.5 20.7083 164.5 21.6562ZM158.227 21.6562C158.227 22.2865 158.302 22.8255 158.453 23.2734C158.609 23.7214 158.849 24.0651 159.172 24.3047C159.495 24.5391 159.911 24.6562 160.422 24.6562C160.932 24.6562 161.349 24.5391 161.672 24.3047C161.995 24.0651 162.232 23.7214 162.383 23.2734C162.534 22.8255 162.609 22.2865 162.609 21.6562C162.609 21.026 162.534 20.4922 162.383 20.0547C162.232 19.612 161.995 19.276 161.672 19.0469C161.349 18.8125 160.93 18.6953 160.414 18.6953C159.654 18.6953 159.099 18.9505 158.75 19.4609C158.401 19.9714 158.227 20.7031 158.227 21.6562Z" fill="#272727" /> <path d="M39.7344 19.7891L42.4453 14.5781H44.4688L40.6719 21.5625V26H38.8047V21.6328L35 14.5781H37.0391L39.7344 19.7891Z" fill="#272728" /> <path d="M49.2266 17.1875C49.9974 17.1875 50.6589 17.3464 51.2109 17.6641C51.763 17.9818 52.1875 18.4323 52.4844 19.0156C52.7812 19.599 52.9297 20.2969 52.9297 21.1094V22.0938H47.1562C47.1771 22.9323 47.401 23.5781 47.8281 24.0312C48.2604 24.4844 48.8646 24.7109 49.6406 24.7109C50.1927 24.7109 50.6875 24.6589 51.125 24.5547C51.5677 24.4453 52.0234 24.2865 52.4922 24.0781V25.5703C52.0599 25.7734 51.6198 25.9219 51.1719 26.0156C50.724 26.1094 50.1875 26.1562 49.5625 26.1562C48.7135 26.1562 47.9661 25.9922 47.3203 25.6641C46.6797 25.3307 46.1771 24.8359 45.8125 24.1797C45.4531 23.5234 45.2734 22.7083 45.2734 21.7344C45.2734 20.7656 45.4375 19.9427 45.7656 19.2656C46.0938 18.5885 46.5547 18.0729 47.1484 17.7188C47.7422 17.3646 48.4349 17.1875 49.2266 17.1875ZM49.2266 18.5703C48.6484 18.5703 48.1797 18.7578 47.8203 19.1328C47.4661 19.5078 47.2578 20.0573 47.1953 20.7812H51.1328C51.1276 20.349 51.0547 19.9661 50.9141 19.6328C50.7786 19.2995 50.5703 19.0391 50.2891 18.8516C50.013 18.6641 49.6589 18.5703 49.2266 18.5703Z" fill="#272728" /> <path d="M60.8125 23.5312C60.8125 24.099 60.6745 24.5781 60.3984 24.9688C60.1224 25.3594 59.7188 25.6562 59.1875 25.8594C58.6615 26.0573 58.0156 26.1562 57.25 26.1562C56.6458 26.1562 56.125 26.112 55.6875 26.0234C55.2552 25.9401 54.8464 25.8099 54.4609 25.6328V24.0469C54.8724 24.2396 55.3333 24.4062 55.8438 24.5469C56.3594 24.6875 56.8464 24.7578 57.3047 24.7578C57.9089 24.7578 58.3438 24.6641 58.6094 24.4766C58.875 24.2839 59.0078 24.0286 59.0078 23.7109C59.0078 23.5234 58.9531 23.3568 58.8438 23.2109C58.7396 23.0599 58.5417 22.9062 58.25 22.75C57.9635 22.5885 57.5417 22.3958 56.9844 22.1719C56.4375 21.9531 55.9766 21.7344 55.6016 21.5156C55.2266 21.2969 54.9427 21.0339 54.75 20.7266C54.5573 20.4141 54.4609 20.0156 54.4609 19.5312C54.4609 18.7656 54.763 18.1849 55.3672 17.7891C55.9766 17.388 56.7812 17.1875 57.7812 17.1875C58.3125 17.1875 58.8125 17.2422 59.2812 17.3516C59.7552 17.4557 60.2188 17.6094 60.6719 17.8125L60.0938 19.1953C59.7031 19.0234 59.3099 18.8828 58.9141 18.7734C58.5234 18.6589 58.125 18.6016 57.7188 18.6016C57.2448 18.6016 56.8828 18.6745 56.6328 18.8203C56.388 18.9661 56.2656 19.1745 56.2656 19.4453C56.2656 19.6484 56.3255 19.8203 56.4453 19.9609C56.5651 20.1016 56.7708 20.2422 57.0625 20.3828C57.3594 20.5234 57.7708 20.6979 58.2969 20.9062C58.8125 21.1042 59.2578 21.3125 59.6328 21.5312C60.013 21.7448 60.3047 22.0078 60.5078 22.3203C60.7109 22.6328 60.8125 23.0365 60.8125 23.5312Z" fill="#272728" /> </svg> ), }, { name: "Text Choices", icon: ( <svg viewBox="0 0 278 174" xmlns="http://www.w3.org/2000/svg" fill="#D5DADE" > <path d="M59 88.5C59 76.3497 68.8497 66.5 81 66.5H255C267.15 66.5 277 76.3497 277 88.5C277 100.65 267.15 110.5 255 110.5H81C68.8497 110.5 59 100.65 59 88.5Z" /> <path d="M60 151.5C60 139.35 69.8497 129.5 82 129.5H256C268.15 129.5 278 139.35 278 151.5C278 163.65 268.15 173.5 256 173.5H82C69.8497 173.5 60 163.65 60 151.5Z" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M23 70.5H22C12.0589 70.5 4 78.5589 4 88.5C4 98.4411 12.0589 106.5 22 106.5H23C32.9411 106.5 41 98.4411 41 88.5C41 78.5589 32.9411 70.5 23 70.5ZM22 66.5C9.84974 66.5 0 76.3497 0 88.5C0 100.65 9.84974 110.5 22 110.5H23C35.1503 110.5 45 100.65 45 88.5C45 76.3497 35.1503 66.5 23 66.5H22Z" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M24 133.5H23C13.0589 133.5 5 141.559 5 151.5C5 161.441 13.0589 169.5 23 169.5H24C33.9411 169.5 42 161.441 42 151.5C42 141.559 33.9411 133.5 24 133.5ZM23 129.5C10.8497 129.5 1 139.35 1 151.5C1 163.65 10.8497 173.5 23 173.5H24C36.1503 173.5 46 163.65 46 151.5C46 139.35 36.1503 129.5 24 129.5H23Z" /> <path d="M11 151.5C11 144.32 16.8203 138.5 24 138.5C31.1797 138.5 37 144.32 37 151.5C37 158.68 31.1797 164.5 24 164.5C16.8203 164.5 11 158.68 11 151.5Z" /> <path d="M59 22C59 9.84974 68.8497 0 81 0H255C267.15 0 277 9.84974 277 22C277 34.1503 267.15 44 255 44H81C68.8497 44 59 34.1503 59 22Z" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M23 4H22C12.0589 4 4 12.0589 4 22C4 31.9411 12.0589 40 22 40H23C32.9411 40 41 31.9411 41 22C41 12.0589 32.9411 4 23 4ZM22 0C9.84974 0 0 9.84974 0 22C0 34.1503 9.84974 44 22 44H23C35.1503 44 45 34.1503 45 22C45 9.84974 35.1503 0 23 0H22Z" /> </svg> ), }, { name: "Picture Choices", icon: ( <svg viewBox="0 0 179 92" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="82" height="92" rx="14" fill="#E9ECEF" /> <rect x="5" y="5" width="73" height="68" rx="14" fill="#B8BCBF" /> <path d="M41.9702 86H40.4722V80.0269C40.4722 79.828 40.4743 79.6291 40.4785 79.4302C40.4827 79.2313 40.487 79.0366 40.4912 78.8462C40.4997 78.6558 40.5103 78.4738 40.5229 78.3003C40.4341 78.3976 40.3241 78.5034 40.1929 78.6177C40.0659 78.7319 39.9305 78.8504 39.7866 78.9731L38.7202 79.8237L37.9712 78.8779L40.7261 76.7197H41.9702V86Z" fill="#85888A" /> <rect x="97" width="82" height="92" rx="14" fill="#E9ECEF" /> <rect x="102" y="5" width="73" height="68" rx="14" fill="#B8BCBF" /> <path d="M140.868 86H134.584V84.8765L136.99 82.439C137.455 81.965 137.838 81.5566 138.139 81.2139C138.439 80.8669 138.661 80.5389 138.805 80.23C138.953 79.9211 139.027 79.5846 139.027 79.2207C139.027 78.7721 138.898 78.4336 138.64 78.2051C138.382 77.9723 138.041 77.856 137.618 77.856C137.216 77.856 136.844 77.9364 136.501 78.0972C136.162 78.2537 135.811 78.478 135.447 78.77L134.628 77.7861C134.887 77.5661 135.162 77.3651 135.454 77.1831C135.75 77.0011 136.08 76.8573 136.444 76.7515C136.808 76.6414 137.222 76.5864 137.688 76.5864C138.276 76.5864 138.784 76.6922 139.211 76.9038C139.639 77.1112 139.967 77.401 140.195 77.7734C140.428 78.1458 140.544 78.5796 140.544 79.0747C140.544 79.5741 140.445 80.0353 140.246 80.4585C140.047 80.8817 139.764 81.3006 139.396 81.7153C139.027 82.1258 138.589 82.5723 138.082 83.0547L136.476 84.6226V84.6924H140.868V86Z" fill="#85888A" /> </svg> ), }, { name: "Opinion Scale", icon: ( <svg viewBox="0 0 165 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="29" height="30" rx="4" fill="#E9ECEF" /> <path d="M15.9702 19.2803H14.4722V13.3071C14.4722 13.1082 14.4743 12.9093 14.4785 12.7104C14.4827 12.5116 14.487 12.3169 14.4912 12.1265C14.4997 11.936 14.5103 11.7541 14.5229 11.5806C14.4341 11.6779 14.3241 11.7837 14.1929 11.8979C14.0659 12.0122 13.9305 12.1307 13.7866 12.2534L12.7202 13.104L11.9712 12.1582L14.7261 10H15.9702V19.2803Z" fill="#85888A" /> <rect x="34" width="29" height="30" rx="4" fill="#E9ECEF" /> <path d="M51.2842 19.4136H45V18.29L47.4058 15.8525C47.8713 15.3786 48.2542 14.9702 48.5547 14.6274C48.8551 14.2804 49.0773 13.9525 49.2212 13.6436C49.3693 13.3346 49.4434 12.9982 49.4434 12.6343C49.4434 12.1857 49.3143 11.8472 49.0562 11.6187C48.798 11.3859 48.4574 11.2695 48.0342 11.2695C47.6322 11.2695 47.2598 11.3499 46.917 11.5107C46.5785 11.6673 46.2272 11.8916 45.8633 12.1836L45.0444 11.1997C45.3026 10.9797 45.5776 10.7786 45.8696 10.5967C46.1659 10.4147 46.4959 10.2708 46.8599 10.165C47.2238 10.055 47.6385 10 48.104 10C48.6922 10 49.2 10.1058 49.6274 10.3174C50.0549 10.5247 50.3828 10.8146 50.6113 11.187C50.8441 11.5594 50.9604 11.9932 50.9604 12.4883C50.9604 12.9876 50.861 13.4489 50.6621 13.8721C50.4632 14.2952 50.1797 14.7142 49.8115 15.1289C49.4434 15.5394 49.0054 15.9858 48.4976 16.4683L46.8916 18.0361V18.106H51.2842V19.4136Z" fill="#85888A" /> <rect x="68" width="29" height="30" rx="4" fill="#E9ECEF" /> <path d="M84.9731 12.2534C84.9731 12.6724 84.8885 13.0363 84.7192 13.3452C84.55 13.6541 84.3172 13.908 84.021 14.1069C83.729 14.3016 83.3905 14.4412 83.0054 14.5259V14.5703C83.7459 14.6634 84.3045 14.8962 84.6812 15.2686C85.062 15.641 85.2524 16.134 85.2524 16.7476C85.2524 17.285 85.1234 17.7653 84.8652 18.1885C84.6071 18.6074 84.2114 18.9375 83.6782 19.1787C83.145 19.4199 82.4595 19.5405 81.6216 19.5405C81.118 19.5405 80.6504 19.5003 80.2188 19.4199C79.7913 19.3395 79.3851 19.2104 79 19.0327V17.7061C79.3936 17.9007 79.8125 18.0509 80.2568 18.1567C80.7012 18.2625 81.1222 18.3154 81.52 18.3154C82.2944 18.3154 82.8467 18.1715 83.1768 17.8838C83.5068 17.5918 83.6719 17.1898 83.6719 16.6777C83.6719 16.3477 83.5851 16.0768 83.4116 15.8652C83.2424 15.6536 82.9779 15.495 82.6182 15.3892C82.2627 15.2834 81.8035 15.2305 81.2407 15.2305H80.4219V14.0308H81.2471C81.7845 14.0308 82.2161 13.9673 82.542 13.8403C82.8678 13.7091 83.1027 13.5293 83.2466 13.3008C83.3947 13.0723 83.4688 12.8057 83.4688 12.501C83.4688 12.1032 83.3397 11.7943 83.0815 11.5742C82.8234 11.3499 82.4404 11.2378 81.9326 11.2378C81.6195 11.2378 81.3338 11.2738 81.0757 11.3457C80.8218 11.4176 80.5869 11.5086 80.3711 11.6187C80.1553 11.7287 79.95 11.8472 79.7554 11.9741L79.0381 10.9395C79.3893 10.6771 79.8083 10.4549 80.2949 10.2729C80.7816 10.091 81.3486 10 81.9961 10C82.9482 10 83.6825 10.2052 84.1987 10.6157C84.715 11.022 84.9731 11.5679 84.9731 12.2534Z" fill="#85888A" /> <rect x="102" width="29" height="30" rx="4" fill="#E9ECEF" /> <path d="M120.205 17.2681H118.948V19.3057H117.475V17.2681H113.254V16.1382L117.494 10H118.948V16.0303H120.205V17.2681ZM117.475 16.0303V13.7261C117.475 13.5356 117.477 13.3431 117.481 13.1484C117.49 12.9495 117.498 12.7591 117.507 12.5771C117.515 12.3952 117.524 12.228 117.532 12.0757C117.541 11.9191 117.547 11.79 117.551 11.6885H117.5C117.42 11.8577 117.331 12.0312 117.234 12.209C117.137 12.3825 117.033 12.5518 116.923 12.7168L114.638 16.0303H117.475Z" fill="#85888A" /> <rect x="136" width="29" height="30" rx="4" fill="#E9ECEF" /> <path d="M150.002 13.4785C150.599 13.4785 151.124 13.5864 151.577 13.8022C152.034 14.0138 152.389 14.327 152.643 14.7417C152.897 15.1522 153.024 15.6558 153.024 16.2524C153.024 16.9041 152.886 17.467 152.611 17.9409C152.336 18.4106 151.932 18.7725 151.399 19.0264C150.866 19.2803 150.216 19.4072 149.45 19.4072C148.964 19.4072 148.509 19.3649 148.085 19.2803C147.667 19.1956 147.305 19.0687 147 18.8994V17.5537C147.317 17.7314 147.698 17.8774 148.143 17.9917C148.587 18.1017 149.012 18.1567 149.418 18.1567C149.85 18.1567 150.22 18.0933 150.529 17.9663C150.838 17.8394 151.075 17.6447 151.24 17.3823C151.41 17.12 151.494 16.7878 151.494 16.3857C151.494 15.8525 151.323 15.4421 150.98 15.1543C150.641 14.8623 150.11 14.7163 149.387 14.7163C149.133 14.7163 148.862 14.7396 148.574 14.7861C148.291 14.8285 148.054 14.875 147.863 14.9258L147.209 14.5386L147.559 10H152.383V11.314H148.873L148.669 13.6245C148.822 13.5907 149.004 13.5589 149.215 13.5293C149.427 13.4954 149.689 13.4785 150.002 13.4785Z" fill="#85888A" /> <path d="M134.964 41.3735H138.43V46.0327C137.943 46.1935 137.439 46.3184 136.919 46.4072C136.398 46.4961 135.814 46.5405 135.167 46.5405C134.223 46.5405 133.424 46.3543 132.768 45.9819C132.116 45.6053 131.621 45.0615 131.282 44.3506C130.944 43.6354 130.774 42.7743 130.774 41.7671C130.774 40.798 130.963 39.958 131.339 39.2471C131.716 38.5319 132.264 37.9797 132.983 37.5903C133.703 37.1968 134.575 37 135.599 37C136.102 37 136.589 37.0508 137.059 37.1523C137.533 37.2497 137.966 37.3851 138.36 37.5586L137.827 38.8154C137.514 38.6673 137.162 38.5425 136.773 38.4409C136.384 38.3394 135.979 38.2886 135.561 38.2886C134.896 38.2886 134.323 38.4325 133.84 38.7202C133.362 39.008 132.994 39.4142 132.736 39.939C132.478 40.4595 132.349 41.0752 132.349 41.7861C132.349 42.4759 132.452 43.0811 132.66 43.6016C132.867 44.1221 133.191 44.5283 133.631 44.8203C134.075 45.1081 134.649 45.252 135.351 45.252C135.702 45.252 136.001 45.2329 136.246 45.1948C136.492 45.1567 136.718 45.1144 136.925 45.0679V42.6748H134.964V41.3735Z" fill="#85888A" /> <path d="M144.06 39.2534C144.179 39.2534 144.308 39.2598 144.447 39.2725C144.587 39.2852 144.708 39.3021 144.809 39.3232L144.669 40.7197C144.581 40.6943 144.471 40.6753 144.339 40.6626C144.212 40.6499 144.098 40.6436 143.997 40.6436C143.73 40.6436 143.476 40.688 143.235 40.7769C142.994 40.8615 142.78 40.9927 142.594 41.1704C142.408 41.3439 142.262 41.5618 142.156 41.8242C142.05 42.0866 141.997 42.3913 141.997 42.7383V46.4136H140.499V39.3867H141.667L141.87 40.6245H141.94C142.08 40.3748 142.253 40.1463 142.46 39.939C142.668 39.7316 142.905 39.5666 143.171 39.4438C143.442 39.3169 143.738 39.2534 144.06 39.2534Z" fill="#85888A" /> <path d="M148.91 39.2534C149.536 39.2534 150.073 39.3825 150.522 39.6406C150.971 39.8988 151.315 40.2648 151.557 40.7388C151.798 41.2127 151.918 41.7798 151.918 42.4399V43.2397H147.228C147.244 43.9211 147.426 44.4458 147.773 44.814C148.125 45.1821 148.616 45.3662 149.246 45.3662C149.695 45.3662 150.097 45.3239 150.452 45.2393C150.812 45.1504 151.182 45.0213 151.563 44.8521V46.0645C151.212 46.2295 150.854 46.3501 150.49 46.4263C150.126 46.5024 149.69 46.5405 149.183 46.5405C148.493 46.5405 147.886 46.4072 147.361 46.1406C146.84 45.8698 146.432 45.4678 146.136 44.9346C145.844 44.4014 145.698 43.7391 145.698 42.9478C145.698 42.1606 145.831 41.492 146.098 40.9419C146.364 40.3918 146.739 39.9728 147.221 39.6851C147.704 39.3973 148.266 39.2534 148.91 39.2534ZM148.91 40.377C148.44 40.377 148.059 40.5293 147.767 40.834C147.479 41.1387 147.31 41.5851 147.259 42.1733H150.458C150.454 41.8221 150.395 41.5111 150.281 41.2402C150.171 40.9694 150.001 40.7578 149.773 40.6055C149.549 40.4531 149.261 40.377 148.91 40.377Z" fill="#85888A" /> <path d="M156.355 39.2534C157.244 39.2534 157.915 39.4502 158.368 39.8438C158.825 40.2373 159.053 40.8509 159.053 41.6846V46.4136H157.993L157.708 45.417H157.657C157.458 45.6709 157.253 45.8804 157.041 46.0454C156.829 46.2104 156.584 46.3332 156.305 46.4136C156.03 46.4982 155.693 46.5405 155.295 46.5405C154.876 46.5405 154.502 46.4644 154.172 46.312C153.842 46.1554 153.582 45.9185 153.391 45.6011C153.201 45.2837 153.105 44.8817 153.105 44.395C153.105 43.6714 153.374 43.1276 153.912 42.7637C154.453 42.3997 155.27 42.1987 156.362 42.1606L157.581 42.1162V41.748C157.581 41.2614 157.466 40.9144 157.238 40.707C157.014 40.4997 156.696 40.396 156.286 40.396C155.934 40.396 155.594 40.4468 155.264 40.5483C154.934 40.6499 154.612 40.7747 154.299 40.9229L153.816 39.8691C154.159 39.6872 154.549 39.5391 154.984 39.4248C155.424 39.3105 155.882 39.2534 156.355 39.2534ZM157.574 43.0557L156.667 43.0874C155.922 43.1128 155.399 43.2397 155.099 43.4683C154.798 43.6968 154.648 44.0099 154.648 44.4077C154.648 44.7547 154.752 45.0086 154.959 45.1694C155.166 45.326 155.439 45.4043 155.778 45.4043C156.294 45.4043 156.722 45.2583 157.06 44.9663C157.403 44.6701 157.574 44.2363 157.574 43.665V43.0557Z" fill="#85888A" /> <path d="M163.757 45.3345C163.951 45.3345 164.144 45.3175 164.334 45.2837C164.525 45.2456 164.698 45.2012 164.855 45.1504V46.2803C164.69 46.3522 164.476 46.4136 164.214 46.4644C163.951 46.5151 163.679 46.5405 163.395 46.5405C162.997 46.5405 162.64 46.4749 162.322 46.3438C162.005 46.2083 161.753 45.9777 161.567 45.6519C161.381 45.326 161.288 44.8753 161.288 44.2998V40.5229H160.329V39.8564L161.357 39.3296L161.846 37.8252H162.786V39.3867H164.798V40.5229H162.786V44.2808C162.786 44.6362 162.875 44.9007 163.052 45.0742C163.23 45.2477 163.465 45.3345 163.757 45.3345Z" fill="#85888A" /> <path d="M1.21875 37.5967H3.97998C5.17757 37.5967 6.08105 37.7702 6.69043 38.1172C7.2998 38.4642 7.60449 39.063 7.60449 39.9136C7.60449 40.269 7.54102 40.5907 7.41406 40.8784C7.29134 41.1619 7.11149 41.3968 6.87451 41.583C6.63753 41.765 6.34554 41.8877 5.99854 41.9512V42.0146C6.35824 42.0781 6.67773 42.1903 6.95703 42.3511C7.24056 42.5119 7.46273 42.7425 7.62354 43.043C7.78857 43.3434 7.87109 43.7327 7.87109 44.2109C7.87109 44.778 7.73568 45.2604 7.46484 45.6582C7.19824 46.056 6.81527 46.3586 6.31592 46.5659C5.8208 46.7733 5.23258 46.877 4.55127 46.877H1.21875V37.5967ZM2.74219 41.4243H4.20215C4.89193 41.4243 5.37012 41.3122 5.63672 41.0879C5.90332 40.8636 6.03662 40.5356 6.03662 40.104C6.03662 39.6639 5.87793 39.3465 5.56055 39.1519C5.2474 38.9572 4.74805 38.8599 4.0625 38.8599H2.74219V41.4243ZM2.74219 42.6558V45.6011H4.34814C5.05908 45.6011 5.55843 45.4635 5.84619 45.1885C6.13395 44.9134 6.27783 44.541 6.27783 44.0713C6.27783 43.7835 6.21224 43.5339 6.08105 43.3223C5.9541 43.1107 5.74463 42.9478 5.45264 42.8335C5.16064 42.715 4.76709 42.6558 4.27197 42.6558H2.74219Z" fill="#85888A" /> <path d="M12.3906 39.7168C13.2793 39.7168 13.95 39.9136 14.4028 40.3071C14.8599 40.7007 15.0884 41.3143 15.0884 42.1479V46.877H14.0283L13.7427 45.8804H13.6919C13.493 46.1343 13.2878 46.3438 13.0762 46.5088C12.8646 46.6738 12.6191 46.7965 12.3398 46.877C12.0648 46.9616 11.7284 47.0039 11.3306 47.0039C10.9116 47.0039 10.5371 46.9277 10.207 46.7754C9.87695 46.6188 9.6167 46.3818 9.42627 46.0645C9.23584 45.7471 9.14062 45.3451 9.14062 44.8584C9.14062 44.1348 9.40934 43.591 9.94678 43.2271C10.4884 42.8631 11.3052 42.6621 12.397 42.624L13.6157 42.5796V42.2114C13.6157 41.7248 13.5015 41.3778 13.2729 41.1704C13.0487 40.9631 12.7313 40.8594 12.3208 40.8594C11.9696 40.8594 11.6289 40.9102 11.2988 41.0117C10.9688 41.1133 10.6471 41.2381 10.334 41.3862L9.85156 40.3325C10.1943 40.1506 10.5837 40.0024 11.0195 39.8882C11.4596 39.7739 11.9167 39.7168 12.3906 39.7168ZM13.6094 43.519L12.7017 43.5508C11.9569 43.5762 11.4342 43.7031 11.1338 43.9316C10.8333 44.1602 10.6831 44.4733 10.6831 44.8711C10.6831 45.2181 10.7868 45.472 10.9941 45.6328C11.2015 45.7894 11.4744 45.8677 11.813 45.8677C12.3293 45.8677 12.7567 45.7217 13.0952 45.4297C13.438 45.1335 13.6094 44.6997 13.6094 44.1284V43.519Z" fill="#85888A" /> <path d="M19.5381 47.0039C18.7002 47.0039 18.0273 46.6992 17.5195 46.0898C17.016 45.4762 16.7642 44.5728 16.7642 43.3794C16.7642 42.1733 17.0202 41.2614 17.5322 40.6436C18.0485 40.0257 18.7277 39.7168 19.5698 39.7168C19.9253 39.7168 20.2363 39.7655 20.5029 39.8628C20.7695 39.9559 20.998 40.0828 21.1885 40.2437C21.3831 40.4045 21.5482 40.5843 21.6836 40.7832H21.7534C21.7323 40.652 21.7069 40.4637 21.6772 40.2183C21.6519 39.9686 21.6392 39.738 21.6392 39.5264V37H23.1372V46.877H21.9692L21.7026 45.9185H21.6392C21.5122 46.1216 21.3514 46.3057 21.1567 46.4707C20.9663 46.6315 20.7378 46.7606 20.4712 46.8579C20.2088 46.9552 19.8978 47.0039 19.5381 47.0039ZM19.957 45.7915C20.596 45.7915 21.0467 45.6074 21.3091 45.2393C21.5715 44.8711 21.7069 44.3188 21.7153 43.5825V43.3857C21.7153 42.5986 21.5884 41.9956 21.3345 41.5767C21.0806 41.1535 20.6172 40.9419 19.9443 40.9419C19.4069 40.9419 18.9964 41.1598 18.7129 41.5957C18.4336 42.0273 18.2939 42.6304 18.2939 43.4048C18.2939 44.1792 18.4336 44.7716 18.7129 45.1821C18.9964 45.5884 19.4111 45.7915 19.957 45.7915Z" fill="#85888A" /> </svg> ), }, { name: "Text Answer", icon: ( <svg viewBox="0 0 187 127" fill="#E9ECEF" xmlns="http://www.w3.org/2000/svg" > <path d="M0 63.5C0 54.9396 6.93959 48 15.5 48H110.5C119.06 48 126 54.9396 126 63.5C126 72.0604 119.06 79 110.5 79H15.5C6.93959 79 0 72.0604 0 63.5Z"></path> <path d="M0 111.5C0 102.94 6.93959 96 15.5 96H143.5C152.06 96 159 102.94 159 111.5C159 120.06 152.06 127 143.5 127H15.5C6.93959 127 0 120.06 0 111.5Z"></path> <path d="M0 15.5C0 6.93959 6.93959 0 15.5 0H171.5C180.06 0 187 6.93959 187 15.5C187 24.0604 180.06 31 171.5 31H15.5C6.93959 31 0 24.0604 0 15.5Z"></path> </svg> ), }, ]; const Container = styled.div` display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 0px; gap: 0.45em; width: 100%; `; const Label = styled.label` font-style: normal; font-weight: 600; font-size: 0.95em; line-height: 1.25em; color: #344054; `; const Error = styled.span` display: inline-block; font-style: normal; font-weight: 400; font-size: 0.75em; line-height: 1.25em; color: #ff4d4f; height: 0; overflow: hidden; transition: height 0.3s ease-in-out; &.show { height: 1.25em; } `; const Option = styled.div` flex: 1; border-radius: 16px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; background: #fff; padding: 4px; cursor: pointer; border: 2px solid transparent; position: relative; min-width: 170px; width: 170px; max-width: 170px; height: 180px; aspect-ratio: 1; display: flex; flex-direction: column; h5 { font-size: 14px; font-weight: 600; padding: 6px 16px; text-align: center; } svg { width: 80%; margin: auto; flex: 1; } &.active { border-color: #4f46e5; } `; return ( <Container> <Label>{label}</Label> <div className="d-flex flex-wrap gap-3"> {types.map((v, i) => ( <Option className={value == i ? "active" : ""} onClick={() => onChange(i)} > {v.icon} <h5>{v.name}</h5> </Option> ))} </div> <Error className={error ? "show" : ""}>{error}</Error> </Container> );