diff --git a/packages/framework/esm-framework/docs/API.md b/packages/framework/esm-framework/docs/API.md
index 8fff8d461..d01fe5a15 100644
--- a/packages/framework/esm-framework/docs/API.md
+++ b/packages/framework/esm-framework/docs/API.md
@@ -587,7 +587,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:6](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L6)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:7](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L7)
___
@@ -651,7 +651,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:5](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L5)
+[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:7](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L7)
___
@@ -695,7 +695,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:701](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L701)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:744](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L744)
___
@@ -712,7 +712,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:10](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L10)
+[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:102](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L102)
___
@@ -994,9 +994,38 @@ ___
• `Const` **UserHasAccess**: `React.FC`<[`UserHasAccessProps`](interfaces/UserHasAccessProps.md)\>
+A React component that renders its children only if the current user exists and has the privilege(s)
+specified by the `privilege` prop. This can be used not to render certain components when the user
+doesn't have the permission to use this.
+
+Note that for top-level extensions (i.e., the component that's the root of the extension), you don't
+need to use this component. Instead, when registering the extension, declare the required privileges
+as part of the extension registration. This is for use deeper in extensions or other components where
+a separate permission check might be needed.
+
+This can also be used to hide components when the current user is not logged in.
+
+**`example`**
+```ts
+
+````
+
+**`param`** Either a string for a single required privilege or an array of strings for a
+ set of required privileges. Note that sets of required privileges must all be matched.
+
+**`param`** What to render if the user does not have access or if the user is not currently
+ logged in. If not provided, nothing will be rendered
+
+**`param`** The children to be rendered only if the user is logged in and has the required
+ privileges.
+
#### Defined in
-[packages/framework/esm-react-utils/src/UserHasAccess.tsx:12](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-react-utils/src/UserHasAccess.tsx#L12)
+[packages/framework/esm-react-utils/src/UserHasAccess.tsx:40](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-react-utils/src/UserHasAccess.tsx#L40)
___
@@ -1153,7 +1182,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:14](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L14)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:15](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L15)
___
@@ -1163,7 +1192,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:22](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L22)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:23](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L23)
___
@@ -1173,7 +1202,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:675](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L675)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:676](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L676)
___
@@ -1183,7 +1212,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:36](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L36)
+[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:12](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L12)
___
@@ -1193,7 +1222,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:30](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L30)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:31](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L31)
___
@@ -1203,7 +1232,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:38](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L38)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:39](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L39)
___
@@ -1213,7 +1242,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:46](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L46)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:47](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L47)
___
@@ -1223,7 +1252,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:54](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L54)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:55](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L55)
___
@@ -1233,7 +1262,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:680](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L680)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:681](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L681)
___
@@ -1243,7 +1272,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:62](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L62)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:63](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L63)
___
@@ -1253,7 +1282,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:70](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L70)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:71](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L71)
___
@@ -1263,7 +1292,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:78](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L78)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:79](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L79)
___
@@ -1273,7 +1302,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:86](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L86)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:87](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L87)
___
@@ -1283,7 +1312,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:94](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L94)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:95](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L95)
___
@@ -1293,7 +1322,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:102](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L102)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:103](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L103)
___
@@ -1303,7 +1332,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:110](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L110)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:111](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L111)
___
@@ -1313,7 +1342,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:134](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L134)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:135](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L135)
___
@@ -1323,7 +1352,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:118](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L118)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:119](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L119)
___
@@ -1333,7 +1362,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:126](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L126)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:127](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L127)
___
@@ -1343,7 +1372,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:142](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L142)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:143](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L143)
___
@@ -1353,7 +1382,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:150](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L150)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:151](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L151)
___
@@ -1363,7 +1392,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:158](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L158)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:159](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L159)
___
@@ -1373,7 +1402,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:166](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L166)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:167](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L167)
___
@@ -1383,7 +1412,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:174](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L174)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:175](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L175)
___
@@ -1393,7 +1422,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:182](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L182)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:183](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L183)
___
@@ -1403,7 +1432,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:198](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L198)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:199](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L199)
___
@@ -1413,7 +1442,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:190](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L190)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:191](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L191)
___
@@ -1427,7 +1456,7 @@ Note this is an alias for ListCheckedIcon
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:687](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L687)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:688](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L688)
___
@@ -1437,7 +1466,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:206](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L206)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:207](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L207)
___
@@ -1447,7 +1476,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:214](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L214)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:215](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L215)
___
@@ -1457,7 +1486,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:222](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L222)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:223](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L223)
___
@@ -1467,7 +1496,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:230](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L230)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:231](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L231)
___
@@ -1487,7 +1516,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:238](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L238)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:239](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L239)
___
@@ -1497,7 +1526,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:246](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L246)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:247](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L247)
___
@@ -1507,7 +1536,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:254](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L254)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:255](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L255)
___
@@ -1517,7 +1546,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:261](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L261)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:262](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L262)
___
@@ -1527,7 +1556,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:268](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L268)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:269](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L269)
___
@@ -1537,7 +1566,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:275](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L275)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:276](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L276)
___
@@ -1547,7 +1576,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:291](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L291)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:292](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L292)
___
@@ -1557,7 +1586,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:283](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L283)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:284](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L284)
___
@@ -1567,7 +1596,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:42](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L42)
+[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:18](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L18)
___
@@ -1577,7 +1606,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:299](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L299)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:300](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L300)
___
@@ -1589,7 +1618,7 @@ This is a utility type for custom icons that use the svg-sprite-loader to bundle
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:709](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L709)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:752](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L752)
___
@@ -1599,7 +1628,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:307](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L307)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:308](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L308)
___
@@ -1609,7 +1638,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:48](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L48)
+[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:24](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L24)
___
@@ -1619,7 +1648,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:331](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L331)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:332](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L332)
___
@@ -1629,7 +1658,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:323](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L323)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:324](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L324)
___
@@ -1639,7 +1668,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:339](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L339)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:340](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L340)
___
@@ -1649,7 +1678,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:315](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L315)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:316](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L316)
___
@@ -1659,7 +1688,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:54](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L54)
+[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:30](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L30)
___
@@ -1669,7 +1698,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:347](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L347)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:348](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L348)
___
@@ -1679,7 +1708,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:355](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L355)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:356](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L356)
___
@@ -1699,7 +1728,43 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:363](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L363)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:364](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L364)
+
+___
+
+### MaybeIcon
+
+• `Const` **MaybeIcon**: `MemoExoticComponent`<`ForwardRefExoticComponent`<{ `fallback?`: `ReactNode` ; `icon`: `string` } & [`IconProps`](API.md#iconprops) & `RefAttributes`<`SVGSVGElement`\>\>\>
+
+This is a utility component that takes an `icon` and render it if the sprite for the icon
+is available. The goal is to make it easier to conditionally render configuration-specified icons.
+
+**`example`**
+```tsx
+
+```
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/icons/icons.tsx:711](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L711)
+
+___
+
+### MaybePictogram
+
+• `Const` **MaybePictogram**: `MemoExoticComponent`<`ForwardRefExoticComponent`<{ `fallback?`: `ReactNode` ; `pictogram`: `string` } & [`PictogramProps`](API.md#pictogramprops) & `RefAttributes`<`SVGSVGElement`\>\>\>
+
+This is a utility component that takes an `icon` and render it if the sprite for the icon
+is available. The goal is to make it easier to conditionally render configuration-specified icons.
+
+**`example`**
+```tsx
+
+```
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:69](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L69)
___
@@ -1709,7 +1774,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:371](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L371)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:372](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L372)
___
@@ -1719,7 +1784,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:379](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L379)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:380](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L380)
___
@@ -1729,7 +1794,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:387](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L387)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:388](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L388)
___
@@ -1741,7 +1806,7 @@ Billing
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:396](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L396)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:397](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L397)
___
@@ -1751,7 +1816,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:404](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L404)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:405](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L405)
___
@@ -1761,7 +1826,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:412](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L412)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:413](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L413)
___
@@ -1783,7 +1848,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:420](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L420)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:421](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L421)
___
@@ -1793,7 +1858,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:428](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L428)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:429](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L429)
___
@@ -1803,7 +1868,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:632](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L632)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:633](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L633)
___
@@ -1813,7 +1878,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:60](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L60)
+[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:36](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L36)
___
@@ -1823,7 +1888,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:436](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L436)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:437](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L437)
___
@@ -1833,7 +1898,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:444](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L444)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:445](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L445)
___
@@ -1843,7 +1908,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:66](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L66)
+[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:42](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L42)
___
@@ -1855,7 +1920,7 @@ This is a utility type for custom pictograms. Please maintain alphabetical order
#### Defined in
-[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:20](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L20)
+[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:112](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L112)
___
@@ -1865,7 +1930,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:452](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L452)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:453](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L453)
___
@@ -1875,7 +1940,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:460](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L460)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:461](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L461)
___
@@ -1885,7 +1950,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:692](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L692)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:693](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L693)
___
@@ -1895,7 +1960,32 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:72](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L72)
+[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:48](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L48)
+
+___
+
+### RenderIfValueIsTruthy
+
+• `Const` **RenderIfValueIsTruthy**: `React.FC`<`PropsWithChildren`<{ `fallback?`: `React.ReactNode` ; `value`: `unknown` }\>\>
+
+A really simple component that renders its children if the prop named `value` has a truthy value
+
+**`example`**
+```tsx
+
+
+
+````
+
+**`param`** The value to check whether or not its truthy
+
+**`param`** What to render if the value is not truthy. If not specified, nothing will be rendered
+
+**`param`** The components to render if the `value` is truthy
+
+#### Defined in
+
+[packages/framework/esm-react-utils/src/RenderIfValueIsTruthy.tsx:17](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-react-utils/src/RenderIfValueIsTruthy.tsx#L17)
___
@@ -1905,7 +1995,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:468](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L468)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:469](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L469)
___
@@ -1915,7 +2005,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:476](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L476)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:477](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L477)
___
@@ -1925,7 +2015,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:484](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L484)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:485](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L485)
___
@@ -1935,7 +2025,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:500](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L500)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:501](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L501)
___
@@ -1945,7 +2035,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:508](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L508)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:509](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L509)
___
@@ -1955,7 +2045,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:78](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L78)
+[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:54](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L54)
___
@@ -1969,7 +2059,7 @@ Note this is an alias for ShoppingCartArrowDownIcon
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:699](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L699)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:700](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L700)
___
@@ -1981,7 +2071,7 @@ Used as a button to add an item to the Order basket from a search
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:534](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L534)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:535](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L535)
___
@@ -1993,7 +2083,7 @@ Order Basket, the UI to enter Orders for Medications, Referrals, Labs, Procedure
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:525](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L525)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:526](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L526)
___
@@ -2005,7 +2095,7 @@ Used as action button to open ward in-patient note workspace
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:543](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L543)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:544](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L544)
___
@@ -2015,7 +2105,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:516](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L516)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:517](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L517)
___
@@ -2025,7 +2115,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:551](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L551)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:552](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L552)
___
@@ -2035,7 +2125,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:568](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L568)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:569](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L569)
___
@@ -2047,7 +2137,7 @@ Used as a button to add an item to the Order basket from a search
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:560](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L560)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:561](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L561)
___
@@ -2059,7 +2149,7 @@ Lab investigations
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:577](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L577)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:578](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L578)
___
@@ -2069,7 +2159,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:585](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L585)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:586](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L586)
___
@@ -2079,7 +2169,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:492](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L492)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:493](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L493)
___
@@ -2089,7 +2179,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:593](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L593)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:594](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L594)
___
@@ -2099,7 +2189,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:601](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L601)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:602](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L602)
___
@@ -2111,7 +2201,7 @@ User of OpenMRS e.g. My Account
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:610](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L610)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:611](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L611)
___
@@ -2121,7 +2211,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:618](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L618)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:619](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L619)
___
@@ -2131,7 +2221,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:640](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L640)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:641](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L641)
___
@@ -2141,7 +2231,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:626](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L626)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:627](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L627)
___
@@ -2151,7 +2241,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:656](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L656)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:657](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L657)
___
@@ -2161,7 +2251,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:648](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L648)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:649](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L649)
___
@@ -2171,7 +2261,7 @@ ___
#### Defined in
-[packages/framework/esm-styleguide/src/icons/icons.tsx:664](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L664)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:665](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L665)
___
diff --git a/packages/framework/esm-react-utils/src/RenderIfValueIsTruthy.tsx b/packages/framework/esm-react-utils/src/RenderIfValueIsTruthy.tsx
new file mode 100644
index 000000000..26b508d4f
--- /dev/null
+++ b/packages/framework/esm-react-utils/src/RenderIfValueIsTruthy.tsx
@@ -0,0 +1,26 @@
+import React, { type PropsWithChildren } from 'react';
+
+/**
+ * A really simple component that renders its children if the prop named `value` has a truthy value
+ *
+ * @example
+ * ```tsx
+ *
+ *
+ *
+ * ````
+ *
+ * @param props.value The value to check whether or not its truthy
+ * @param props.fallback What to render if the value is not truthy. If not specified, nothing will be rendered
+ * @param props.children The components to render if the `value` is truthy
+ */
+export const RenderIfValueIsTruthy: React.FC> = ({
+ children,
+ value,
+ fallback,
+}) => {
+ if (Boolean(value)) {
+ return <>{children};
+ }
+ return fallback ? <>{fallback} : null;
+};
diff --git a/packages/framework/esm-react-utils/src/UserHasAccess.tsx b/packages/framework/esm-react-utils/src/UserHasAccess.tsx
index f7310d131..1dd9e7fe9 100644
--- a/packages/framework/esm-react-utils/src/UserHasAccess.tsx
+++ b/packages/framework/esm-react-utils/src/UserHasAccess.tsx
@@ -9,6 +9,34 @@ export interface UserHasAccessProps {
children?: React.ReactNode;
}
+/**
+ * A React component that renders its children only if the current user exists and has the privilege(s)
+ * specified by the `privilege` prop. This can be used not to render certain components when the user
+ * doesn't have the permission to use this.
+ *
+ * Note that for top-level extensions (i.e., the component that's the root of the extension), you don't
+ * need to use this component. Instead, when registering the extension, declare the required privileges
+ * as part of the extension registration. This is for use deeper in extensions or other components where
+ * a separate permission check might be needed.
+ *
+ * This can also be used to hide components when the current user is not logged in.
+ *
+ * @example
+ * ```ts
+ *
+ * ````
+ *
+ * @param props.privilege Either a string for a single required privilege or an array of strings for a
+ * set of required privileges. Note that sets of required privileges must all be matched.
+ * @param props.fallback What to render if the user does not have access or if the user is not currently
+ * logged in. If not provided, nothing will be rendered
+ * @param props.children The children to be rendered only if the user is logged in and has the required
+ * privileges.
+ */
export const UserHasAccess: React.FC = ({ privilege, fallback, children }) => {
const [user, setUser] = useState(null);
diff --git a/packages/framework/esm-react-utils/src/index.ts b/packages/framework/esm-react-utils/src/index.ts
index 6d0148090..59d0b7676 100644
--- a/packages/framework/esm-react-utils/src/index.ts
+++ b/packages/framework/esm-react-utils/src/index.ts
@@ -6,6 +6,7 @@ export * from './UserHasAccess';
export * from './getLifecycle';
export * from './openmrsComponentDecorator';
export * from './OpenmrsContext';
+export * from './RenderIfValueIsTruthy';
export * from './useAbortController';
export * from './useAppContext';
export * from './useAssignedExtensions';
diff --git a/packages/framework/esm-react-utils/src/public.ts b/packages/framework/esm-react-utils/src/public.ts
index f5e4b4ca1..8ea21601b 100644
--- a/packages/framework/esm-react-utils/src/public.ts
+++ b/packages/framework/esm-react-utils/src/public.ts
@@ -5,6 +5,7 @@ export * from './ExtensionSlot';
export * from './UserHasAccess';
export * from './getLifecycle';
export * from './OpenmrsContext';
+export * from './RenderIfValueIsTruthy';
export * from './useAbortController';
export * from './useAppContext';
export * from './useAssignedExtensions';
diff --git a/packages/framework/esm-styleguide/src/icons/icons.tsx b/packages/framework/esm-styleguide/src/icons/icons.tsx
index 4506cbf64..9bba91e0d 100644
--- a/packages/framework/esm-styleguide/src/icons/icons.tsx
+++ b/packages/framework/esm-styleguide/src/icons/icons.tsx
@@ -1,6 +1,7 @@
/** @category Icons */
import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';
import classNames, { type Argument } from 'classnames';
+import { RenderIfValueIsTruthy } from '@openmrs/esm-react-utils';
import style from './icons.module.scss';
export type IconProps = {
@@ -698,6 +699,48 @@ export const RadiologyIcon = ImageMedicalIcon;
*/
export const ShoppingCartAddItemIcon = ShoppingCartArrowDownIcon;
+/**
+ * This is a utility component that takes an `icon` and renders it if the sprite for the icon
+ * is available. The goal is to make it easier to conditionally render configuration-specified icons.
+ *
+ * @example
+ * ```tsx
+ *
+ * ```
+ */
+export const MaybeIcon = memo(
+ forwardRef(function MaybeIcon(
+ { icon, fallback, ...iconProps },
+ ref,
+ ) {
+ const iconRef = useRef(document.getElementById(icon));
+
+ useEffect(() => {
+ const container = document.getElementById('omrs-svgs-container');
+ const callback: MutationCallback = (mutationList) => {
+ for (const mutation of mutationList) {
+ if (mutation.type === 'childList') {
+ iconRef.current = document.getElementById(icon);
+ }
+ }
+ };
+
+ const observer = new MutationObserver(callback);
+ if (container) {
+ observer.observe(container, { childList: true });
+ }
+
+ return () => observer.disconnect();
+ }, [icon]);
+
+ return (
+
+
+
+ );
+ }),
+);
+
export type SvgIconProps = {
icon: string;
iconProps: IconProps;
diff --git a/packages/framework/esm-styleguide/src/pictograms/pictograms.module.scss b/packages/framework/esm-styleguide/src/pictograms/pictograms.module.scss
new file mode 100644
index 000000000..310779894
--- /dev/null
+++ b/packages/framework/esm-styleguide/src/pictograms/pictograms.module.scss
@@ -0,0 +1,5 @@
+:global([dir='rtl']) {
+ .pictogram {
+ transform: scaleX(-1);
+ }
+}
diff --git a/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx b/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx
index 24c83bca0..56cd92b42 100644
--- a/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx
+++ b/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx
@@ -1,38 +1,14 @@
/** @category Pictograms */
-import React, { forwardRef, memo } from 'react';
+import React, { forwardRef, memo, useEffect, useRef } from 'react';
import classNames, { type Argument } from 'classnames';
+import { RenderIfValueIsTruthy } from '@openmrs/esm-react-utils';
+import style from './pictograms.module.scss';
export type PictogramProps = {
className?: Argument;
size?: number;
};
-export type SvgPictogramProps = {
- /** the id of the pictogram */
- pictogram: string;
- /** properties when using the pictogram */
- pictogramProps: PictogramProps;
-};
-
-/**
- * This is a utility type for custom pictograms. Please maintain alphabetical order when adding new pictograms for readability.
- */
-export const Pictogram = memo(
- forwardRef(function Pictogram({ pictogram, pictogramProps }, ref) {
- let { className, size } = Object.assign({}, { size: 92 }, pictogramProps);
- if (size <= 26 || size > 144) {
- console.error(`Invalid size '${size}' specified for ${pictogram}. Defaulting to 92.`);
- size = 92;
- }
-
- return (
-
- );
- }),
-);
-
export const AppointmentsPictogram = memo(
forwardRef(function AppointmentsPictogram(props, ref) {
return ;
@@ -80,3 +56,71 @@ export const ServiceQueuesPictogram = memo(
return ;
}),
);
+
+/**
+ * This is a utility component that takes an `pictogram` and render it if the sprite for the pictogram
+ * is available. The goal is to make it easier to conditionally render configuration-specified pictograms.
+ *
+ * @example
+ * ```tsx
+ *
+ * ```
+ */
+export const MaybePictogram = memo(
+ forwardRef(function MaybeIcon(
+ { pictogram, fallback, ...pictogramProps },
+ ref,
+ ) {
+ const iconRef = useRef(document.getElementById(pictogram));
+
+ useEffect(() => {
+ const container = document.getElementById('omrs-svgs-container');
+ const callback: MutationCallback = (mutationList) => {
+ for (const mutation of mutationList) {
+ if (mutation.type === 'childList') {
+ iconRef.current = document.getElementById(pictogram);
+ }
+ }
+ };
+
+ const observer = new MutationObserver(callback);
+ if (container) {
+ observer.observe(container, { childList: true });
+ }
+
+ return () => observer.disconnect();
+ }, [pictogram]);
+
+ return (
+
+
+
+ );
+ }),
+);
+
+export type SvgPictogramProps = {
+ /** the id of the pictogram */
+ pictogram: string;
+ /** properties when using the pictogram */
+ pictogramProps: PictogramProps;
+};
+
+/**
+ * This is a utility type for custom pictograms. Please maintain alphabetical order when adding new pictograms for readability.
+ */
+export const Pictogram = memo(
+ forwardRef(function Pictogram({ pictogram, pictogramProps }, ref) {
+ let { className, size } = Object.assign({}, { size: 92 }, pictogramProps);
+ if (size <= 26 || size > 144) {
+ console.error(`Invalid size '${size}' specified for ${pictogram}. Defaulting to 92.`);
+ size = 92;
+ }
+
+ return (
+
+ );
+ }),
+);