fhir-react 0.2.1 → 0.3.0

package/src/assets/containers/Observation/observation.svg

@@ -0,0 +1,12 @@
+<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="3.5" cy="15.5" r="1.5" fill="#0D6EFD"/>
+<circle cx="14.5" cy="15.5" r="1.5" fill="#0D6EFD"/>
+<path d="M1 14H17" stroke="#0D6EFD" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 14L3 8" stroke="#0D6EFD" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 14L15 12" stroke="#0D6EFD" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="5" y="9" width="12" height="3" rx="1.5" fill="#6EA8FE"/>
+<rect x="4.69788" y="4.2417" width="4.7232" height="4.65095" rx="2" transform="rotate(45 4.69788 4.2417)" fill="#6EA8FE"/>
+<path d="M1.97395 5.97401C2.55973 5.38822 3.50948 5.38822 4.09527 5.97401L7.63138 9.51012C8.21717 10.0959 8.21717 11.0457 7.63138 11.6314C7.04559 12.2172 6.09585 12.2172 5.51006 11.6314L1.97395 8.09533C1.38816 7.50954 1.38816 6.55979 1.97395 5.97401Z" fill="#6EA8FE"/>
+<circle cx="14" cy="4" r="3" stroke="#0D6EFD"/>
+<path d="M14 2.5V4L14.5 4.5" stroke="#6EA8FE" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/containers/Practitioner/practitioner.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.74782 12.3321C3.36587 12.5582 3.11111 12.9647 3.11111 13.4286C3.11111 14.1387 3.70804 14.7143 4.44444 14.7143C5.18084 14.7143 5.77778 14.1387 5.77778 13.4286C5.77778 12.7754 5.27271 12.236 4.61862 12.1537C4.60404 12.1034 4.58884 12.0454 4.57338 11.9803C4.52013 11.7559 4.46933 11.4714 4.43151 11.1791C4.3936 10.8862 4.37009 10.5959 4.36853 10.3589C4.36796 10.2721 4.3704 10.1964 4.37538 10.1329C4.54636 10.0856 4.71782 10.043 4.88889 10.0054C5.08502 9.96233 5.20111 10.1856 5.29516 10.3665C5.30827 10.3917 5.32093 10.416 5.33333 10.4387H7.13951C7.54653 10.4386 7.74773 10.4387 7.95124 10.4387C8.15004 10.4388 8.35138 10.4388 8.74893 10.4387H10.5552C10.6567 10.2529 10.8876 9.95633 11.1111 10.0054C11.3495 10.0578 11.5887 10.1199 11.8262 10.191L11.8247 10.1917C11.8242 10.1907 11.8242 10.1908 11.8248 10.1923C11.8268 10.1983 11.8366 10.2263 11.8463 10.2871C11.8574 10.3563 11.8651 10.4462 11.8682 10.5544C11.8745 10.7706 11.862 11.0333 11.8354 11.298C11.8088 11.5624 11.7694 11.8184 11.7249 12.0205C11.7151 12.0652 11.7053 12.106 11.6956 12.1429H11.1111C10.9428 12.1429 10.7889 12.2346 10.7136 12.3798L10.2692 13.2369C10.2383 13.2964 10.2222 13.3621 10.2222 13.4286V14.2857C10.2222 14.5224 10.4212 14.7143 10.6667 14.7143H11.5556V13.8571H11.1111V13.5298L11.3858 13H12.6142L12.8889 13.5298V13.8571H12.4444V14.7143H13.3333C13.5788 14.7143 13.7778 14.5224 13.7778 14.2857V13.4286C13.7778 13.3621 13.7617 13.2964 13.7308 13.2369L13.2864 12.3798C13.2111 12.2346 13.0572 12.1429 12.8889 12.1429H12.6064C12.6538 11.9146 12.6933 11.6478 12.7201 11.3806C12.7492 11.0917 12.7644 10.7919 12.7568 10.5304L12.7564 10.5186C14.5287 11.2407 16 12.4283 16 13.6728V16H0V13.6728C0 12.3733 1.60441 11.1357 3.48044 10.4256C3.48551 10.692 3.51169 10.9935 3.54942 11.2852C3.59018 11.6001 3.64573 11.9137 3.70693 12.1715C3.72004 12.2268 3.73369 12.2806 3.74782 12.3321ZM4.44444 13.8634C4.68373 13.8634 4.88889 13.6747 4.88889 13.4286C4.88889 13.1825 4.68373 12.9937 4.44444 12.9937C4.20516 12.9937 4 13.1825 4 13.4286C4 13.6747 4.20516 13.8634 4.44444 13.8634Z" fill="#0D6EFD"/>
+<circle cx="8" cy="4.5" r="4" fill="white" stroke="#0D6EFD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.78711 0.580775C6.44054 0.211042 7.19561 0 7.99998 0C10.2885 0 12.178 1.70828 12.4628 3.91922C11.8094 4.28896 11.0543 4.5 10.25 4.5C7.96149 4.5 6.072 2.79172 5.78711 0.580775Z" fill="#0D6EFD"/>
+</svg>

package/src/assets/containers/Procedure/procedure.svg

@@ -0,0 +1,9 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.36365 3.18188H8.27274M11.9091 9.00007H16C16.5523 9.00007 17 8.55235 17 8.00007V4.18188C17 3.6296 16.5523 3.18188 16 3.18188H14.0909" stroke="#ADB5BD" stroke-linecap="round"/>
+<path d="M6.09091 9H2C1.44772 9 1 9.44772 1 10V13.8182C1 14.3705 1.44772 14.8182 2 14.8182H3.90909M12.6364 14.8182H9.72727" stroke="#ADB5BD" stroke-linecap="round"/>
+<path d="M3.18182 5.36364C4.3868 5.36364 5.36364 4.3868 5.36364 3.18182C5.36364 1.97683 4.3868 1 3.18182 1C1.97683 1 1 1.97683 1 3.18182C1 4.3868 1.97683 5.36364 3.18182 5.36364Z" fill="#DEE2E6" stroke="#ADB5BD" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.8182 17.0001C16.0232 17.0001 17 16.0233 17 14.8183C17 13.6133 16.0232 12.6365 14.8182 12.6365C13.6132 12.6365 12.6364 13.6133 12.6364 14.8183C12.6364 16.0233 13.6132 17.0001 14.8182 17.0001Z" fill="#ADB5BD" stroke="#ADB5BD" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="8.27271" y="1.72729" width="5.81818" height="2.90909" rx="1" fill="#DEE2E6" stroke="#ADB5BD"/>
+<rect x="6.09088" y="7.54541" width="5.81818" height="2.90909" rx="1" fill="#DEE2E6" stroke="#ADB5BD"/>
+<rect x="3.90912" y="13.3635" width="5.81818" height="2.90909" rx="1" fill="#DEE2E6" stroke="#ADB5BD"/>
+</svg>

package/src/assets/containers/Questionnaire/questionnaire.svg

@@ -0,0 +1,6 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.26645 2.08688C6.84326 2.08688 7.31085 1.61972 7.31085 1.04344C7.31085 0.467164 6.84326 0 6.26645 0C5.68964 0 5.22205 0.467164 5.22205 1.04344C5.22205 1.61972 5.68964 2.08688 6.26645 2.08688Z" fill="#D63384"/>
+<path d="M7.25159 1H9.05145C9.23611 1 9.41321 1.07329 9.54378 1.20374C9.67436 1.3342 9.74772 1.51113 9.74772 1.69563V2.39125C9.74772 2.57574 9.67436 2.75268 9.54378 2.88314C9.41321 3.01359 9.23611 3.08688 9.05145 3.08688H3.4813C3.29664 3.08688 3.11954 3.01359 2.98897 2.88314C2.85839 2.75268 2.78503 2.57574 2.78503 2.39125V1.69563C2.78503 1.51113 2.85839 1.3342 2.98897 1.20374C3.11954 1.07329 3.29664 1 3.4813 1H5.28116" fill="#D63384"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 2C0.447715 2 0 2.44772 0 3V15C0 15.5523 0.447715 16 1 16H11.5C12.0523 16 12.5 15.5523 12.5 15V3C12.5 2.44772 12.0523 2 11.5 2H1ZM2.08875 5.76074C1.8126 5.76074 1.58875 5.9846 1.58875 6.26074C1.58875 6.53688 1.8126 6.76074 2.08875 6.76074H10.444C10.7201 6.76074 10.944 6.53688 10.944 6.26074C10.944 5.9846 10.7201 5.76074 10.444 5.76074H2.08875ZM1.58875 9.04321C1.58875 8.76707 1.8126 8.54321 2.08875 8.54321H8.67962C8.95576 8.54321 9.17962 8.76707 9.17962 9.04321C9.17962 9.31936 8.95576 9.54321 8.67962 9.54321H2.08875C1.8126 9.54321 1.58875 9.31936 1.58875 9.04321ZM2.08875 11.3257C1.8126 11.3257 1.58875 11.5495 1.58875 11.8257C1.58875 12.1018 1.8126 12.3257 2.08875 12.3257H7.64705C7.9232 12.3257 8.14705 12.1018 8.14705 11.8257C8.14705 11.5495 7.9232 11.3257 7.64705 11.3257H2.08875Z" fill="#D63384"/>
+<path d="M11.4885 11.8264L9.05151 12.522L9.74778 10.0873L13.9129 5.92605C14.1449 5.70158 14.456 5.57725 14.7791 5.57987C15.1021 5.58249 15.4111 5.71185 15.6395 5.94005C15.8679 6.16825 15.9974 6.47701 16 6.79972C16.0026 7.12243 15.8782 7.43324 15.6535 7.66511L11.4885 11.8264Z" fill="#E685B5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/containers/QuestionnaireResponse/questionnaire-response.svg

@@ -0,0 +1,6 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.26645 2.08688C6.84326 2.08688 7.31085 1.61972 7.31085 1.04344C7.31085 0.467164 6.84326 0 6.26645 0C5.68964 0 5.22205 0.467164 5.22205 1.04344C5.22205 1.61972 5.68964 2.08688 6.26645 2.08688Z" fill="#D63384"/>
+<path d="M7.25159 1H9.05145C9.23611 1 9.41321 1.07329 9.54378 1.20374C9.67436 1.3342 9.74772 1.51113 9.74772 1.69563V2.39125C9.74772 2.57574 9.67436 2.75268 9.54378 2.88314C9.41321 3.01359 9.23611 3.08688 9.05145 3.08688H3.4813C3.29664 3.08688 3.11954 3.01359 2.98897 2.88314C2.85839 2.75268 2.78503 2.57574 2.78503 2.39125V1.69563C2.78503 1.51113 2.85839 1.3342 2.98897 1.20374C3.11954 1.07329 3.29664 1 3.4813 1H5.28116" fill="#D63384"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 2C0.447715 2 0 2.44772 0 3V15C0 15.5523 0.447715 16 1 16H11.5C12.0523 16 12.5 15.5523 12.5 15V3C12.5 2.44772 12.0523 2 11.5 2H1ZM2.08875 5.76074C1.8126 5.76074 1.58875 5.9846 1.58875 6.26074C1.58875 6.53688 1.8126 6.76074 2.08875 6.76074H10.444C10.7201 6.76074 10.944 6.53688 10.944 6.26074C10.944 5.9846 10.7201 5.76074 10.444 5.76074H2.08875ZM1.58875 9.04321C1.58875 8.76707 1.8126 8.54321 2.08875 8.54321H8.67962C8.95576 8.54321 9.17962 8.76707 9.17962 9.04321C9.17962 9.31936 8.95576 9.54321 8.67962 9.54321H2.08875C1.8126 9.54321 1.58875 9.31936 1.58875 9.04321ZM2.08875 11.3257C1.8126 11.3257 1.58875 11.5495 1.58875 11.8257C1.58875 12.1018 1.8126 12.3257 2.08875 12.3257H7.64705C7.9232 12.3257 8.14705 12.1018 8.14705 11.8257C8.14705 11.5495 7.9232 11.3257 7.64705 11.3257H2.08875Z" fill="#D63384"/>
+<path d="M12.39 9.88071H14.2695C15.1037 9.88071 15.688 10.2812 16.0418 10.8306C16.3796 11.3552 16.5 11.9972 16.5 12.5363C16.5 12.5444 16.4998 12.5525 16.4994 12.5605C16.4638 13.2933 16.1991 13.9965 15.7427 14.5715C15.6105 14.7381 15.3873 14.8029 15.1865 14.7329C14.9856 14.6628 14.851 14.4734 14.851 14.2607V13.1829C14.851 13.145 14.8483 13.1212 14.8459 13.1076C14.8269 13.0983 14.7862 13.0823 14.7103 13.0679C14.6098 13.0488 14.4677 13.0363 14.2695 13.0363H12.39V13.3088V13.3093V9.88071ZM12.39 9.88071V9.6077M12.39 9.88071V9.6077M12.39 9.6077C12.3902 9.46577 12.3481 9.32713 12.2693 9.20931L12.2693 9.20931C12.1904 9.09138 12.0783 8.99971 11.9474 8.94566C11.8166 8.89162 11.6727 8.87753 11.534 8.90511C11.3954 8.93265 11.2679 9.00056 11.1676 9.10051C11.1676 9.10055 11.1676 9.10059 11.1675 9.10063C11.1674 9.10074 11.1673 9.10085 11.1672 9.10096L9.31038 10.9513L9.31032 10.9513C9.17584 11.0854 9.09998 11.2675 9.09998 11.4578C9.09998 11.6481 9.17583 11.8303 9.31029 11.9643L12.39 9.6082C12.39 9.60803 12.39 9.60787 12.39 9.6077ZM11.1672 13.8156C11.1672 13.8156 11.1673 13.8157 11.1673 13.8157L9.31032 11.9644L11.1672 13.8156Z" fill="#E685B5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/containers/QustionnaireResponse/questionnaire-response.svg

@@ -0,0 +1,6 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.26645 2.08688C6.84326 2.08688 7.31085 1.61972 7.31085 1.04344C7.31085 0.467164 6.84326 0 6.26645 0C5.68964 0 5.22205 0.467164 5.22205 1.04344C5.22205 1.61972 5.68964 2.08688 6.26645 2.08688Z" fill="#D63384"/>
+<path d="M7.25159 1H9.05145C9.23611 1 9.41321 1.07329 9.54378 1.20374C9.67436 1.3342 9.74772 1.51113 9.74772 1.69563V2.39125C9.74772 2.57574 9.67436 2.75268 9.54378 2.88314C9.41321 3.01359 9.23611 3.08688 9.05145 3.08688H3.4813C3.29664 3.08688 3.11954 3.01359 2.98897 2.88314C2.85839 2.75268 2.78503 2.57574 2.78503 2.39125V1.69563C2.78503 1.51113 2.85839 1.3342 2.98897 1.20374C3.11954 1.07329 3.29664 1 3.4813 1H5.28116" fill="#D63384"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 2C0.447715 2 0 2.44772 0 3V15C0 15.5523 0.447715 16 1 16H11.5C12.0523 16 12.5 15.5523 12.5 15V3C12.5 2.44772 12.0523 2 11.5 2H1ZM2.08875 5.76074C1.8126 5.76074 1.58875 5.9846 1.58875 6.26074C1.58875 6.53688 1.8126 6.76074 2.08875 6.76074H10.444C10.7201 6.76074 10.944 6.53688 10.944 6.26074C10.944 5.9846 10.7201 5.76074 10.444 5.76074H2.08875ZM1.58875 9.04321C1.58875 8.76707 1.8126 8.54321 2.08875 8.54321H8.67962C8.95576 8.54321 9.17962 8.76707 9.17962 9.04321C9.17962 9.31936 8.95576 9.54321 8.67962 9.54321H2.08875C1.8126 9.54321 1.58875 9.31936 1.58875 9.04321ZM2.08875 11.3257C1.8126 11.3257 1.58875 11.5495 1.58875 11.8257C1.58875 12.1018 1.8126 12.3257 2.08875 12.3257H7.64705C7.9232 12.3257 8.14705 12.1018 8.14705 11.8257C8.14705 11.5495 7.9232 11.3257 7.64705 11.3257H2.08875Z" fill="#D63384"/>
+<path d="M12.39 9.88071H14.2695C15.1037 9.88071 15.688 10.2812 16.0418 10.8306C16.3796 11.3552 16.5 11.9972 16.5 12.5363C16.5 12.5444 16.4998 12.5525 16.4994 12.5605C16.4638 13.2933 16.1991 13.9965 15.7427 14.5715C15.6105 14.7381 15.3873 14.8029 15.1865 14.7329C14.9856 14.6628 14.851 14.4734 14.851 14.2607V13.1829C14.851 13.145 14.8483 13.1212 14.8459 13.1076C14.8269 13.0983 14.7862 13.0823 14.7103 13.0679C14.6098 13.0488 14.4677 13.0363 14.2695 13.0363H12.39V13.3088V13.3093V9.88071ZM12.39 9.88071V9.6077M12.39 9.88071V9.6077M12.39 9.6077C12.3902 9.46577 12.3481 9.32713 12.2693 9.20931L12.2693 9.20931C12.1904 9.09138 12.0783 8.99971 11.9474 8.94566C11.8166 8.89162 11.6727 8.87753 11.534 8.90511C11.3954 8.93265 11.2679 9.00056 11.1676 9.10051C11.1676 9.10055 11.1676 9.10059 11.1675 9.10063C11.1674 9.10074 11.1673 9.10085 11.1672 9.10096L9.31038 10.9513L9.31032 10.9513C9.17584 11.0854 9.09998 11.2675 9.09998 11.4578C9.09998 11.6481 9.17583 11.8303 9.31029 11.9643L12.39 9.6082C12.39 9.60803 12.39 9.60787 12.39 9.6077ZM11.1672 13.8156C11.1672 13.8156 11.1673 13.8157 11.1673 13.8157L9.31032 11.9644L11.1672 13.8156Z" fill="#E685B5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/containers/ResearchStudy/research-study.svg

@@ -0,0 +1,9 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.26882 13.9772C6.42361 12.9276 4.19267 11.9028 0.684517 11.7842C0.501956 11.7811 0.327861 11.7031 0.1998 11.5669C0.071738 11.4307 -2.33541e-05 11.2473 9.11954e-09 11.0563V0.727977C-1.49545e-05 0.63128 0.0183849 0.53555 0.0541249 0.446377C0.0898649 0.357205 0.142228 0.276377 0.208157 0.208615C0.274086 0.140853 0.352259 0.087515 0.438109 0.0517168C0.52396 0.0159185 0.615767 -0.0016226 0.708169 0.000117932C4.05637 0.116893 6.23734 1.06034 7.15567 2.0599C7.15331 2.07961 7.1521 2.09966 7.1521 2.12V11.27C7.1521 11.5461 7.37596 11.77 7.6521 11.77C7.92824 11.77 8.1521 11.5461 8.1521 11.27V2.12L8.15191 2.10642C9.11531 1.09442 11.4182 0.127994 14.5933 0.000845738C14.6859 -0.00128708 14.778 0.015964 14.8642 0.0515862C14.9504 0.0872084 15.0289 0.140484 15.0951 0.208285C15.1613 0.276087 15.214 0.357048 15.2499 0.446416C15.2858 0.535784 15.3043 0.631758 15.3042 0.728705V10.177L7.26882 13.9772ZM2.13656 2.19641C1.86238 2.1636 1.61351 2.35927 1.58069 2.63345C1.54788 2.90764 1.74355 3.15651 2.01773 3.18933C3.28652 3.34118 4.53474 3.64479 5.73795 4.09436C5.99662 4.19101 6.28467 4.05967 6.38132 3.80099C6.47797 3.54231 6.34663 3.25426 6.08795 3.15761C4.81055 2.68032 3.48475 2.35777 2.13656 2.19641ZM14.072 5.90913C14.1048 6.18332 13.9091 6.43217 13.6349 6.46497C12.3659 6.61675 11.1174 6.92036 9.91401 7.37C9.65534 7.46665 9.36729 7.3353 9.27064 7.07662C9.17399 6.81795 9.30534 6.5299 9.56401 6.43325C10.8416 5.95588 12.1677 5.63332 13.5161 5.47204C13.7903 5.43925 14.0392 5.63494 14.072 5.90913ZM2.13656 5.47205C1.86238 5.43923 1.61351 5.6349 1.58069 5.90909C1.54788 6.18327 1.74355 6.43215 2.01773 6.46496C3.28652 6.61681 4.53474 6.92042 5.73795 7.36999C5.99662 7.46665 6.28467 7.3353 6.38132 7.07662C6.47797 6.81795 6.34663 6.5299 6.08795 6.43325C4.81055 5.95596 3.48475 5.6334 2.13656 5.47205ZM1.54527 8.81285C1.57798 8.53865 1.82677 8.34288 2.10097 8.37559C3.46137 8.53787 4.79919 8.86313 6.08807 9.34483C6.34674 9.44151 6.47806 9.72957 6.38139 9.98823C6.28471 10.2469 5.99665 10.3782 5.73798 10.2816C4.52344 9.82763 3.26336 9.52134 1.98252 9.36855C1.70833 9.33584 1.51256 9.08705 1.54527 8.81285ZM13.6707 3.1818C13.9449 3.1492 14.1408 2.90047 14.1082 2.62626C14.0756 2.35205 13.8269 2.15619 13.5526 2.1888C12.1916 2.35065 10.8532 2.67594 9.56388 3.1581C9.30523 3.25482 9.17397 3.54291 9.27069 3.80156C9.36741 4.06021 9.6555 4.19147 9.91415 4.09475C11.129 3.64046 12.3895 3.33417 13.6707 3.1818Z" fill="#20C997"/>
+<mask id="path-2-outside-1_488_1545" maskUnits="userSpaceOnUse" x="7.3418" y="7.72144" width="10" height="10" fill="black">
+<rect fill="white" x="7.3418" y="7.72144" width="10" height="10"/>
+<path d="M15.9999 16V15.1994C16.0026 14.6577 15.8055 14.1358 15.4494 13.7426C15.0934 13.3493 14.606 13.115 14.0889 13.0886H12.5216V9.63126C12.5216 9.38996 12.43 9.15854 12.267 8.98792C12.1039 8.81729 11.8827 8.72144 11.6521 8.72144C11.4215 8.72144 11.2003 8.81729 11.0372 8.98792C10.8741 9.15854 10.7825 9.38996 10.7825 9.63126V14.9082L9.72444 13.3513C9.68077 13.2607 9.62029 13.1801 9.54652 13.1142C9.47275 13.0483 9.38718 12.9984 9.29479 12.9675C9.20241 12.9366 9.10506 12.9252 9.00844 12.9341C8.91181 12.943 8.81784 12.9719 8.732 13.0191C8.64617 13.0664 8.5702 13.1311 8.50851 13.2094C8.44683 13.2878 8.40068 13.3781 8.37274 13.4753C8.34481 13.5725 8.33565 13.6746 8.34582 13.7755C8.35598 13.8764 8.38525 13.9742 8.43193 14.0632L9.40583 16"/>
+</mask>
+<path d="M15.9999 16V15.1994C16.0026 14.6577 15.8055 14.1358 15.4494 13.7426C15.0934 13.3493 14.606 13.115 14.0889 13.0886H12.5216V9.63126C12.5216 9.38996 12.43 9.15854 12.267 8.98792C12.1039 8.81729 11.8827 8.72144 11.6521 8.72144C11.4215 8.72144 11.2003 8.81729 11.0372 8.98792C10.8741 9.15854 10.7825 9.38996 10.7825 9.63126V14.9082L9.72444 13.3513C9.68077 13.2607 9.62029 13.1801 9.54652 13.1142C9.47275 13.0483 9.38718 12.9984 9.29479 12.9675C9.20241 12.9366 9.10506 12.9252 9.00844 12.9341C8.91181 12.943 8.81784 12.9719 8.732 13.0191C8.64617 13.0664 8.5702 13.1311 8.50851 13.2094C8.44683 13.2878 8.40068 13.3781 8.37274 13.4753C8.34481 13.5725 8.33565 13.6746 8.34582 13.7755C8.35598 13.8764 8.38525 13.9742 8.43193 14.0632L9.40583 16" fill="#79DFC1"/>
+<path d="M14.9999 16C14.9999 16.5523 15.4476 17 15.9999 17C16.5522 17 16.9999 16.5523 16.9999 16H14.9999ZM15.9999 15.1994L14.9999 15.1943V15.1994H15.9999ZM14.0889 13.0886L14.14 12.0899C14.123 12.089 14.106 12.0886 14.0889 12.0886V13.0886ZM12.5216 13.0886H11.5216C11.5216 13.6409 11.9694 14.0886 12.5216 14.0886V13.0886ZM10.7825 14.9082L9.95545 15.4703C10.2022 15.8334 10.657 15.9931 11.0766 15.864C11.4962 15.7349 11.7825 15.3473 11.7825 14.9082H10.7825ZM9.72444 13.3513L8.82359 13.7855C8.84499 13.8299 8.86965 13.8727 8.89737 13.9134L9.72444 13.3513ZM8.43193 14.0632L9.32534 13.614C9.32275 13.6088 9.32013 13.6037 9.31745 13.5986L8.43193 14.0632ZM8.51242 16.4493C8.76053 16.9427 9.36166 17.1415 9.85507 16.8934C10.3485 16.6453 10.5474 16.0442 10.2992 15.5508L8.51242 16.4493ZM16.9999 16V15.1994H14.9999V16H16.9999ZM16.9999 15.2045C17.0039 14.4188 16.7183 13.6542 16.1908 13.0714L14.7081 14.4137C14.8926 14.6175 15.0014 14.8966 14.9999 15.1943L16.9999 15.2045ZM16.1908 13.0714C15.662 12.4873 14.9286 12.1302 14.14 12.0899L14.0379 14.0873C14.2834 14.0998 14.5249 14.2113 14.7081 14.4137L16.1908 13.0714ZM14.0889 12.0886H12.5216V14.0886H14.0889V12.0886ZM13.5216 13.0886V9.63126H11.5216V13.0886H13.5216ZM13.5216 9.63126C13.5216 9.13898 13.3352 8.65826 12.9899 8.29699L11.544 9.67885C11.5249 9.65882 11.5216 9.64094 11.5216 9.63126H13.5216ZM12.9899 8.29699C12.6431 7.93417 12.1629 7.72144 11.6521 7.72144V9.72144C11.6025 9.72144 11.5646 9.70041 11.544 9.67885L12.9899 8.29699ZM11.6521 7.72144C11.1413 7.72144 10.661 7.93417 10.3143 8.29699L11.7601 9.67885C11.7395 9.70041 11.7017 9.72144 11.6521 9.72144V7.72144ZM10.3143 8.29699C9.969 8.65826 9.78252 9.13898 9.78252 9.63126H11.7825C11.7825 9.64094 11.7793 9.65882 11.7601 9.67885L10.3143 8.29699ZM9.78252 9.63126V14.9082H11.7825V9.63126H9.78252ZM11.6096 14.3461L10.5515 12.7893L8.89737 13.9134L9.95545 15.4703L11.6096 14.3461ZM10.6253 12.9172C10.5256 12.7104 10.3861 12.5233 10.2127 12.3685L8.8803 13.86C8.85447 13.8369 8.83592 13.8111 8.82359 13.7855L10.6253 12.9172ZM10.2127 12.3685C10.0393 12.2135 9.83543 12.094 9.61222 12.0192L8.97737 13.9158C8.93893 13.9029 8.90624 13.8831 8.8803 13.86L10.2127 12.3685ZM9.61222 12.0192C9.38889 11.9445 9.15237 11.9167 8.91709 11.9383L9.09978 13.9299C9.05776 13.9338 9.01593 13.9287 8.97737 13.9158L9.61222 12.0192ZM8.91709 11.9383C8.68185 11.9599 8.45489 12.0301 8.24958 12.1432L9.21442 13.8951C9.18078 13.9136 9.14177 13.9261 9.09978 13.9299L8.91709 11.9383ZM8.24958 12.1432C8.0444 12.2562 7.86592 12.4091 7.72289 12.5907L9.29414 13.8281C9.27448 13.8531 9.24794 13.8766 9.21442 13.8951L8.24958 12.1432ZM7.72289 12.5907C7.57993 12.7723 7.47483 12.9793 7.41165 13.1991L9.33383 13.7516C9.32652 13.777 9.31373 13.8032 9.29414 13.8281L7.72289 12.5907ZM7.41165 13.1991C7.34849 13.4189 7.32799 13.6487 7.35085 13.8757L9.34079 13.6753C9.34332 13.7005 9.34113 13.7262 9.33383 13.7516L7.41165 13.1991ZM7.35085 13.8757C7.3737 14.1027 7.43967 14.3243 7.5464 14.5278L9.31745 13.5986C9.33083 13.6241 9.33825 13.6502 9.34079 13.6753L7.35085 13.8757ZM7.53852 14.5124L8.51242 16.4493L10.2992 15.5508L9.32534 13.614L7.53852 14.5124Z" fill="white" mask="url(#path-2-outside-1_488_1545)"/>
+</svg>

package/src/assets/containers/ResourceCategory/resource-placeholder.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.9726 5.24759C15.9726 5.09345 15.9419 5.09345 15.8803 5.09345H9.23274C9.17119 5.09345 9.14041 5.06262 9.14041 5.00096V0.592486C9.14041 0.530829 9.10964 0.5 9.04809 0.5H6.95533C6.89378 0.5 6.863 0.530829 6.863 0.592486V11.8141C6.863 11.8757 6.89378 11.9066 6.95533 11.9066H9.04809C9.10964 11.9066 9.14041 11.8757 9.14041 11.8141V7.46724C9.14041 7.40559 9.17119 7.37476 9.23274 7.37476H13.6029C13.6645 7.37476 13.6952 7.40559 13.6952 7.46724V9.56358C13.6952 9.62524 13.6645 9.65607 13.6029 9.65607H11.5102C11.4486 9.65607 11.4178 9.6869 11.4178 9.74855V14.1262C11.4178 14.1879 11.387 14.2187 11.3255 14.2187H4.67792C4.61637 14.2187 4.5856 14.1879 4.5856 14.1262V5.18593C4.5856 5.12428 4.55482 5.09345 4.49327 5.09345L0 5.06262V7.34393H2.18508C2.24663 7.34393 2.27741 7.37476 2.27741 7.43642V16.4075C2.27741 16.4692 2.30819 16.5 2.36974 16.5H13.6029C13.6645 16.5 13.6952 16.4692 13.6952 16.4075V16.4383V12.0607C13.6952 11.9682 13.726 11.9374 13.7876 11.9374H15.8495C15.8495 11.9374 15.9111 11.9374 15.9726 11.8757C16.0342 11.8449 15.9726 5.24759 15.9726 5.24759Z" fill="#3D8BFD"/>
+</svg>

package/src/components/containers/Accordion/Accordion.js

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { Chevron } from '../../ui';
+
+const CHEVRON_DOWN_COLOR = '#6f83a9';
+const CHEVRON_UP_COLOR = '#2a6fd7';
+
+const Accordion = props => {
+  const { headerContent, bodyContent } = props;
+  const [rotate, setRotate] = useState(false);
+  const handleAccordionClick = () => setRotate(!rotate);
+
+  const isAccordionOpenable = () => {
+    let childrenCondition = false;
+    let tableDataCondition = false;
+    if (bodyContent.props.children)
+      childrenCondition = bodyContent.props.children.length > 0;
+    if (bodyContent.props.tableData)
+      tableDataCondition =
+        bodyContent.props.tableData.filter(x => 'data' in x && x.data).length >
+        0;
+
+    return childrenCondition || tableDataCondition;
+  };
+
+  const getChevron = () =>
+    isAccordionOpenable() && (
+      <div
+        className={`fhir-ui__${
+          props.resourceName
+        }-Header__chevron chevron position-absolute ${
+          rotate ? ' header-rotate' : ''
+        }`}
+        style={{ top: '24px', right: '24px' }}
+      >
+        <Chevron strokeColor={rotate ? CHEVRON_UP_COLOR : CHEVRON_DOWN_COLOR} />
+      </div>
+    );
+
+  return (
+    <div className="fhir-container__Accordion accordion">
+      <div className="fhir-container__Accordion__body accordion-body">
+        <div className="fhir-container__Accordion__body-data accordion-item border-1 shadow-sm">
+          <div
+            className="fhir-container__Accordion__header accordion-header"
+            id="flush-headingOne"
+          >
+            <button
+              className={`fhir-container__Accordion__header-button w-100 p-0 border-0 rounded-1 collapsed text-dark bg-white shadow-none point ${
+                isAccordionOpenable() ? '' : 'pe-none'
+              }`}
+              type="button"
+              data-bs-target="#collapseTarget"
+              data-bs-toggle={isAccordionOpenable() ? 'collapse' : null}
+              aria-controls="collapseTarget"
+              aria-expanded="false"
+              onClick={handleAccordionClick}
+            >
+              <div className="fhir-container__Accordion__header-text d-flex w-100 justify-content-start position-relative">
+                {React.cloneElement(headerContent, {
+                  isAccordionOpenable: isAccordionOpenable(),
+                })}
+                {getChevron()}
+              </div>
+            </button>
+          </div>
+          <div
+            className="fhir-container__Accordion__data accordion-collapse collapse"
+            id="collapseTarget"
+          >
+            <div className="fhir-container__Accordion__data-text accordion-body ps-4 pt-3 pe-4 border-top">
+              {bodyContent}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Accordion;

package/src/components/containers/Accordion/Accordion.stories.js

@@ -0,0 +1,76 @@
+import { BadgeSecondary, Body, MissingValue, Title, Value } from '../../ui';
+
+import Accordion from './Accordion';
+import Annotation from '../../datatypes/Annotation';
+import Date from '../../datatypes/Date';
+import Procedure from '../../resources/Procedure/Procedure';
+import React from 'react';
+import Reference from '../../datatypes/Reference';
+import _get from 'lodash/get';
+import example1 from '../../../fixtures/dstu2/resources/procedure/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import { object } from '@storybook/addon-knobs';
+import stu3Example1 from '../../../fixtures/stu3/resources/procedure/example1.json';
+
+export default {
+  title: 'Accordion',
+};
+
+export const DefaultVisualization = () => {
+  const fhirResource = object('Resource', stu3Example1);
+  const title =
+    _get(fhirResource, 'code.coding[0].display') ||
+    _get(fhirResource, 'code.text');
+  const performedDateTime = _get(fhirResource, 'performedDateTime');
+  const performer = _get(fhirResource, 'performer', []);
+  const locationReference = _get(fhirResource, 'location[0]');
+  const reasonCode = _get(fhirResource, 'reasonCode', []);
+  const note = _get(fhirResource, 'note', []);
+
+  return (
+    <Accordion
+      headerContent={
+        <div className="">
+          <Title>{title}</Title>
+          <div className="pb-3" />
+          <BadgeSecondary data-testid="performedDateTime">
+            <Date fhirData={performedDateTime} />
+          </BadgeSecondary>
+        </div>
+      }
+      bodyContent={
+        <Body>
+          <Value label="Performed by">
+            {performer.map((item, i) => (
+              <div key={`item-${i}`}>
+                {_get(item, 'actor.display', <MissingValue />)}
+              </div>
+            ))}
+          </Value>
+          <Value label="Location" data-testid="location">
+            <Reference fhirData={locationReference} />
+          </Value>
+          <Value label="Reason" data-testid="hasReasonCode">
+            <Annotation fhirData={reasonCode} />
+          </Value>
+          <Value label="Notes" data-testid="hasNote">
+            <Annotation fhirData={note} />
+          </Value>
+        </Body>
+      }
+    />
+  );
+};
+
+export const ProcedureVisualization = () => {
+  const fhirResource = object('Resource', example1);
+
+  return (
+    <Accordion
+      headerContent={<div className=""></div>}
+      bodyContent={
+        <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />
+      }
+    />
+  );
+};

package/src/components/containers/Accordion/index.js

@@ -0,0 +1,3 @@
+import Accordion from './Accordion';
+
+export default Accordion;

package/src/components/containers/ResourceContainer/ResourceContainer.css

@@ -1,5 +1,4 @@
 .fhir-container__ResourceContainer__card {
-  background-color: #f8f9fa;
   border: 0;
   position: relative;
   display: flex;

package/src/components/containers/ResourceContainer/ResourceContainer.js

@@ -23,7 +23,7 @@ class ResourceContainer extends React.Component {
               className="fhir-container__ResourceContainer__json-button"
               onClick={() => this.setState({ jsonOpen: !this.state.jsonOpen })}
             >
-              JSON
+              RAW
             </button>
           </div>
           {this.props.children}

package/src/components/datatypes/AccountBalance/AccountBalance.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Value } from '../../ui';
+import { parseValueIntoMonetaryValueOfGivenCurrency } from '../../../utils';
+
+const AccountBalance = props => {
+  const { totalBenefit, totalCost } = props;
+
+  return (
+    <div className="fhir-datatype__AccountBalance container-fluid p-0 m-0 ">
+      <Value label="Total cost" data-testid="totalCost" secondary>
+        {parseValueIntoMonetaryValueOfGivenCurrency(
+          totalCost.value,
+          totalCost.code,
+        )}
+      </Value>
+      <Value label="Coverd by benefit" data-testid="totalBenefit" secondary>
+        {parseValueIntoMonetaryValueOfGivenCurrency(
+          totalBenefit.value * -1,
+          totalBenefit.code,
+        )}
+      </Value>
+      <div className="border-top my-1 row border-secondary" />
+      <Value label="Patient Owed" secondary>
+        {parseValueIntoMonetaryValueOfGivenCurrency(
+          totalCost.value - totalBenefit.value,
+          totalBenefit.code,
+        )}
+      </Value>
+    </div>
+  );
+};
+
+export default AccountBalance;

package/src/components/datatypes/AccountBalance/index.js

@@ -0,0 +1,3 @@
+import MoneyCalculator from './MoneyCalculator';
+
+export default MoneyCalculator;

package/src/components/datatypes/Annotation/Annotation.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 const Annotation = props => {
   const { fhirData } = props;

package/src/components/datatypes/Coding/Coding.js

@@ -15,7 +15,7 @@ const Coding = props => {
       <span className="fhir-datatype__Coding__title">{display}</span>&nbsp;
       {hasAdditionalInfo && (
         <span className="fhir-datatype__Coding__code" title={system}>
-          ({code})
+          ({code || '?'})
         </span>
       )}
     </div>

package/src/components/datatypes/Date/Date.js

@@ -1,12 +1,22 @@
 import React from 'react';
+import { formatDate } from '../../../utils/formatDate';
 
-const Date = props => {
-  const { fhirData } = props;
+const Date = ({ fhirData, isBlack, testId, className = '' }) => {
   if (!fhirData) {
     return null;
   }
-  const dateValue = String(fhirData).slice(0, 10);
-  return <span className="fhir-datatype__Date">{dateValue}</span>;
+  const locale = 'en-US';
+  const dateValue = formatDate(String(fhirData).slice(0, 10), locale);
+  return (
+    <span
+      data-testid={testId || 'providedDate'}
+      className={`${[className, 'fhir-datatype__Date', 'font-source'].join(
+        ' ',
+      )}${isBlack ? '' : ' text-secondary'}`}
+    >
+      {dateValue}
+    </span>
+  );
 };
 
 export default Date;

package/src/components/datatypes/DatePeriod/DatePeriod.js

@@ -0,0 +1,38 @@
+import Date from '../Date';
+import React from 'react';
+
+const DatePeriod = props => {
+  const {
+    periodBeginLabel,
+    periodBeginDate,
+    periodBeginTestId,
+    periodEndLabel,
+    periodEndDate,
+    periodEndTestId,
+  } = props;
+
+  const SingleDateSpan = props => (
+    <span className="fhir-datetype__DatePeriod__begin-date text-black-50 me-2 font-source fw-normal lh-lg">
+      {props.label}
+    </span>
+  );
+
+  return (
+    <div className="d-flex flex-column flex-sm-row align-items-start align-items-sm-start">
+      {periodBeginDate && (
+        <div className="d-flex flex-wrap">
+          <SingleDateSpan label={periodBeginLabel} />
+          <Date testId={periodBeginTestId} isBlack fhirData={periodBeginDate} />
+        </div>
+      )}
+      {periodEndDate && (
+        <div className="ms-sm-4 d-flex flex-wrap">
+          <SingleDateSpan label={periodEndLabel} />
+          <Date testId={periodEndTestId} isBlack fhirData={periodEndDate} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DatePeriod;

package/src/components/datatypes/DatePeriod/index.js

@@ -0,0 +1,3 @@
+import DatePeriod from './DatePeriod';
+
+export default DatePeriod;

package/src/components/datatypes/HeaderIcon/HeaderIcon.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { isUrl } from '../../../utils/isUrl';
+
+const HeaderIcon = ({ headerIcon }) => {
+  const PlaceholderImage = () => {
+    return <div className="header-icon__placeholder rounded-1" />;
+  };
+
+  const Image = () => {
+    if (
+      React.isValidElement(headerIcon) &&
+      typeof headerIcon.type === 'string'
+    ) {
+      return headerIcon;
+    }
+    if (isUrl(headerIcon)) {
+      return (
+        <img
+          className="header-icon__image"
+          src={headerIcon}
+          alt="header icon"
+        />
+      );
+    }
+    return <PlaceholderImage />;
+  };
+
+  return <Image />;
+};
+
+export default HeaderIcon;

package/src/components/datatypes/HeaderIcon/index.js

@@ -0,0 +1,3 @@
+import HeaderIcon from './HeaderIcon';
+
+export default HeaderIcon;

package/src/components/datatypes/HumanName/HumanName.js

@@ -1,11 +1,9 @@
 import React from 'react';
-import _get from 'lodash/get';
 import _flatten from 'lodash/flatten';
-
-import './HumanName.css';
+import _get from 'lodash/get';
 
 function HumanName(props) {
-  const { fhirData, primary } = props;
+  const { fhirData, isTitle } = props;
   const givenName = _get(fhirData, 'given', []).join(', ');
   const familyName = _flatten(Array(_get(fhirData, 'family', ''))).join(', ');
   const suffix = _get(fhirData, 'suffix', []).join(' ');
@@ -15,24 +13,11 @@ function HumanName(props) {
     ? textName
     : `${givenName} ${familyName} ${suffix}`.trim();
 
-  const headerElement = primary ? (
-    <span className="fhir-datatype__HumanName__Header--primary">{header}</span>
-  ) : (
-    <span className="fhir-datatype__HumanName__Header--default">{header}</span>
-  );
-  const rootClassName = primary
-    ? ''
-    : 'fhir-datatype__HumanName__not-primary-block';
-
   return (
-    <div className={`fhir-datatype__HumanName ${rootClassName}`}>
-      {headerElement}
-      {use && (
-        <small className="fhir-datatype__HumanName__use-block">
-          {` (${use})`}
-        </small>
-      )}
-    </div>
+    <>
+      {header}
+      {!isTitle && use && <span>{` (${use})`}</span>}
+    </>
   );
 }
 

package/src/components/datatypes/Reference/Reference.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import _get from 'lodash/get';
-import './Reference.css';
 
 const Reference = props => {
   const { fhirData } = props;
@@ -8,13 +7,11 @@ const Reference = props => {
   const reference = _get(fhirData, 'reference', '');
   return (
     <div
-      className="fhir-datatype__Reference"
+      className="fhir-datatype__Reference d-inline-block"
       data-testid={props['data-testid']}
     >
-      {display && (
-        <span className="fhir-datatype__Reference__title">{display}</span>
-      )}
-      <span className="fhir-datatype__Reference__details">{reference}</span>
+      {display && <span className="mr-2 pe-1">{display}</span>}
+      <span>{reference}</span>
     </div>
   );
 };

package/src/components/resources/AdverseEvent/AdverseEvent.test.js

@@ -16,7 +16,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('title').textContent).toContain('Patient');
 
-    expect(getByTestId('date').textContent).toEqual('2017-01-29');
+    expect(getByTestId('date').textContent).toEqual('1/29/2017');
 
     expect(getByTestId('type').textContent).toContain('304386008');
 
@@ -36,7 +36,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('title').textContent).toContain('Patient');
 
-    expect(getByTestId('date').textContent).toEqual('2017-01-29');
+    expect(getByTestId('date').textContent).toEqual('1/29/2017');
 
     expect(getByTestId('hasSeriousness').textContent).toContain('Non-serious');
 

package/src/components/resources/AllergyIntolerance/AllergyIntolerance.test.js

@@ -22,7 +22,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('status').textContent).toContain('unconfirmed');
 
-    expect(getByTestId('recordedDate').textContent).toContain('2010-03-01');
+    expect(getByTestId('recordedDate').textContent).toContain('3/1/2010');
 
     expect(getByTestId('substance').textContent).toContain('PENICILLIN');
 
@@ -46,7 +46,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('status').textContent).toContain('confirmed');
 
-    expect(getByTestId('recordedDate').textContent).toContain('2014-10-09');
+    expect(getByTestId('recordedDate').textContent).toContain('10/9/2014');
 
     expect(getByTestId('substance').textContent).toContain(
       'allergenic extract',
@@ -78,7 +78,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('status').textContent).toContain('Confirmed');
 
-    expect(getByTestId('recordedDate').textContent).toContain('2014-10-09');
+    expect(getByTestId('recordedDate').textContent).toContain('10/9/2014');
 
     expect(getByTestId('substance').textContent).toContain(
       'allergenic extract',
@@ -114,7 +114,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('status').textContent).toContain('Confirmed');
 
-    expect(getByTestId('recordedDate').textContent).toContain('2015-08-06');
+    expect(getByTestId('recordedDate').textContent).toContain('8/6/2015');
 
     expect(getByTestId('patient').textContent).toEqual('Patient/mom');