@civicactions/cmsds-open-data-components 2.2.0 → 2.3.0-alpha.1

package/dist/main.js

@@ -167,6 +167,7 @@ var $f57121650539d8c5$export$2e2bcd8739ae039 = $f57121650539d8c5$var$NavBar;
 
 
 
+
 const $c96c4b9ef7203c1f$var$APIPage = ({ hideAuth: hideAuth , additionalParams: additionalParams , rootUrl: rootUrl  })=>{
     const hasACA = additionalParams && additionalParams.ACA ? true : false;
     let params = {
@@ -347,10 +348,10 @@ const $dc6d3aaf3e07417b$var$DatasetSearchListItem = ({ item: item , updateFacets
             truncatedDescription,
             /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
                 children: keyword && /*#__PURE__*/ (0, $hgUW1$jsx)("ul", {
-                    className: "ds-u-padding--0 ds-u-display--flex ds-u-flex-wrap--wrap",
+                    className: "ds-u-padding--0 ds-u-display--flex ds-u-flex-direction--row ds-u-flex-wrap--wrap",
                     children: keyword.map((k)=>/*#__PURE__*/ (0, $hgUW1$jsx)("li", {
                             children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Badge), {
-                                className: "ds-u-radius ds-u-fill--primary-alt-lightest ds-u-color--base ds-u-margin-right--1 ds-u-margin-bottom--2",
+                                className: "ds-u-radius ds-u-fill--info-lightest ds-u-color--base ds-u-margin-right--1 ds-u-margin-bottom--2",
                                 variation: "info",
                                 children: k
                             })
@@ -408,7 +409,7 @@ const $19c005961efdef1a$var$DatasetSearchFacets = ({ title: title , facets: face
                             }, f.name);
                         })
                     }) : /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
-                        className: "ds-h5",
+                        className: "ds-text-heading--md",
                         children: "No matching facets found."
                     })
                 })
@@ -1405,7 +1406,7 @@ const $2ed0091f7e32d1e6$var$DataTablePageResults = ({ totalRows: totalRows , lim
     });
 };
 $2ed0091f7e32d1e6$var$DataTablePageResults.defaultProps = {
-    className: "data-table-results"
+    className: "data-table-results ds-u-margin-bottom--2"
 };
 $2ed0091f7e32d1e6$var$DataTablePageResults.propTypes = {
     className: (0, $hgUW1$proptypes).string,
@@ -1440,12 +1441,11 @@ const $1e012d1e3b534af0$var$DataTableDensity = ({ setTablePadding: setTablePaddi
                     value: "ds-u-padding-y--2"
                 }
             ],
-            size: "small",
             label: "Display density:",
             labelClassName: "ds-u-margin-top--0",
             name: "datatable_display_density",
             onChange: (e)=>setTablePadding(e.target.value),
-            defaultValue: "ds-u-padding-y--1"
+            defaultValue: tablePadding
         })
     });
 };
@@ -1472,23 +1472,25 @@ var $e71aee394fdad8bd$export$2e2bcd8739ae039 = $e71aee394fdad8bd$var$ManageColum
 
 
 
-const $4def8e29c2039eb8$var$DataTableRowChanger = ({ setLimit: setLimit , rowOptions: rowOptions , limit: limit  })=>{
+const $7848c69a021266f7$var$DataTableRowChanger = (props)=>{
+    const { limit: limit , rowOptions: rowOptions , setLimit: setLimit  } = props;
+    const rowOptionsFormatted = rowOptions.map((row)=>({
+            label: row.toString(),
+            value: row.toString()
+        }));
     return /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+        className: "ds-u-display--flex",
         children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Dropdown), {
-            options: rowOptions.map((row)=>({
-                    label: row,
-                    value: row
-                })),
-            size: "small",
+            options: rowOptionsFormatted,
             label: "Rows per page:",
             labelClassName: "ds-u-margin-top--0",
             name: "datatable_rows_per_page",
             onChange: (e)=>setLimit(e.target.value),
-            defaultValue: limit
+            defaultValue: limit.toString()
         })
     });
 };
-$4def8e29c2039eb8$var$DataTableRowChanger.defaultProps = {
+$7848c69a021266f7$var$DataTableRowChanger.defaultProps = {
     rowOptions: [
         10,
         25,
@@ -1496,11 +1498,12 @@ $4def8e29c2039eb8$var$DataTableRowChanger.defaultProps = {
         100
     ]
 };
-$4def8e29c2039eb8$var$DataTableRowChanger.propTypes = {
+$7848c69a021266f7$var$DataTableRowChanger.propTypes = {
     rowOptions: (0, $hgUW1$proptypes).arrayOf((0, $hgUW1$proptypes).number),
-    setLimit: (0, $hgUW1$proptypes).func.isRequired
+    setLimit: (0, $hgUW1$proptypes).func.isRequired,
+    limit: (0, $hgUW1$proptypes).number
 };
-var $4def8e29c2039eb8$export$2e2bcd8739ae039 = $4def8e29c2039eb8$var$DataTableRowChanger;
+var $7848c69a021266f7$export$2e2bcd8739ae039 = $7848c69a021266f7$var$DataTableRowChanger;
 
 
 
@@ -1591,6 +1594,7 @@ const $ec9e1550b0b034d0$var$SettingsIcon = ()=>/*#__PURE__*/ (0, $hgUW1$jsxs)("s
 var $ec9e1550b0b034d0$export$2e2bcd8739ae039 = $ec9e1550b0b034d0$var$SettingsIcon;
 
 
+
 const $af099c546cb226c7$var$ResourceHeader = ({ setTablePadding: setTablePadding , id: id , distribution: distribution , includeFiltered: includeFiltered , includeDensity: includeDensity , includeDownload: includeDownload , resource: resource , tablePadding: tablePadding , downloadUrl: downloadUrl  })=>{
     const md = (0, $hgUW1$useMediaQuery)({
         minWidth: 0,
@@ -1660,7 +1664,7 @@ const $af099c546cb226c7$var$ResourceHeader = ({ setTablePadding: setTablePadding
                                             onOpen: ()=>{
                                                 navigator.clipboard.writeText(window.location.href);
                                             },
-                                            className: "ds-c-button ds-c-button--small ds-u-text-align--left ds-u-margin-right--1",
+                                            className: "ds-c-button ds-c-button--small ds-u-text-align--left ds-u-margin-right--1 display-settings-font",
                                             placement: "bottom",
                                             dialog: true,
                                             ariaLabel: "Copy link to filtered data",
@@ -1676,14 +1680,14 @@ const $af099c546cb226c7$var$ResourceHeader = ({ setTablePadding: setTablePadding
                                     ]
                                 }),
                                 /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Tooltip), {
-                                    className: "ds-c-button ds-c-button--small ds-u-text-align--left",
+                                    className: "ds-c-button ds-c-button--small ds-u-text-align--left display-settings-font",
                                     placement: "bottom",
                                     dialog: true,
                                     ariaLabel: "Display settings",
                                     title: /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
                                         className: "dc-c-display-settings",
                                         children: [
-                                            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $4def8e29c2039eb8$export$2e2bcd8739ae039), {
+                                            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $7848c69a021266f7$export$2e2bcd8739ae039), {
                                                 limit: limit,
                                                 setLimit: setLimit,
                                                 setOffset: setOffset
@@ -1723,12 +1727,12 @@ const $17193a17e26a72da$var$DatasetTags = ({ keywords: keywords  })=>{
         className: "dc-c-dataset-tags ds-u-margin-bottom--3 ds-u-padding--2 ds-u-border ds-u-border--1",
         children: [
             /*#__PURE__*/ (0, $hgUW1$jsx)("h2", {
-                className: "ds-u-color--primary ds-u-font-size--h3 ds-u-margin-top--0 ds-u-margin-bottom--2",
+                className: "ds-u-color--primary ds-u-font-size--xl ds-u-margin-top--0 ds-u-margin-bottom--2",
                 children: "Tags"
             }),
             keywords && keywords.map((k)=>/*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Link), {
                     to: `/datasets?keyword[]=${k.data}`,
-                    className: "dc-c-dataset-tags--tag ds-u-color--base ds-u-font-size--small ds-u-text-decoration--none ds-u-margin-right--1 ds-u-margin-bottom--1 ds-u-padding-x--2 ds-u-padding-y--1 ds-u-radius",
+                    className: "dc-c-dataset-tags--tag ds-u-color--base ds-u-font-size--sm ds-u-text-decoration--none ds-u-margin-right--1 ds-u-margin-bottom--1 ds-u-padding-x--2 ds-u-padding-y--1 ds-u-radius",
                     children: k.data
                 }, k.identifier))
         ]
@@ -1770,7 +1774,7 @@ const $f341c2fd9bc53390$var$DatasetDownloads = ({ dataDictionaryURL: dataDiction
         className: "ds-u-margin-bottom--3 ds-u-padding--2 ds-u-border ds-u-border--1 dc-c-dataset-downloads",
         children: [
             /*#__PURE__*/ (0, $hgUW1$jsx)("h2", {
-                className: "ds-u-color--primary ds-u-font-size--h3 ds-u-margin-top--0 ds-u-margin-bottom--2 ds-u-padding-bottom--2 ds-u-border ds-u-border-bottom--1",
+                className: "ds-u-color--primary ds-u-font-size--xl ds-u-margin-top--0 ds-u-margin-bottom--2 ds-u-padding-bottom--2 ds-u-border ds-u-border-bottom--1",
                 children: "Downloads"
             }),
             (distributions.length || dataDictionaryURL && dataDictionaryType) && /*#__PURE__*/ (0, $hgUW1$jsxs)("ul", {
@@ -1824,6 +1828,7 @@ const $5644ebd2c3dbfd7b$var$DatasetAdditionalInformation = ({ datasetInfo: datas
         className: "dc-c-additional-info-table ds-u-margin-bottom--6",
         children: [
             /*#__PURE__*/ (0, $hgUW1$jsx)("h2", {
+                className: "ds-text-heading--2xl ds-u-margin-y--3",
                 children: "Additional Information"
             }),
             /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Table), {
@@ -1897,6 +1902,7 @@ const $68eacd619bee0da7$var$ResourceInformation = ({ resource: resource  })=>{
         className: "dc-c-resource-info-table",
         children: [
             /*#__PURE__*/ (0, $hgUW1$jsx)("h2", {
+                className: "ds-text-heading--2xl ds-u-margin-y--3",
                 children: "About this Resource"
             }),
             /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Table), {
@@ -2116,7 +2122,7 @@ const $766b8e351dd607f5$var$DatasetBody = ({ rootUrl: rootUrl , id: id , dataset
                             className: "ds-l-row",
                             children: [
                                 /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
-                                    className: "ds-l-col--6",
+                                    className: "ds-l-col--6 ds-u-margin-bottom--2",
                                     children: dataset.theme ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Badge), {
                                         variation: "info",
                                         children: dataset.theme[0].data
@@ -2142,7 +2148,7 @@ const $766b8e351dd607f5$var$DatasetBody = ({ rootUrl: rootUrl , id: id , dataset
                         resource.columns && Object.keys(resource.schema).length ? /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Fragment), {
                             children: [
                                 /*#__PURE__*/ (0, $hgUW1$jsx)("h2", {
-                                    className: "dc-resource-header",
+                                    className: "dc-resource-header ds-text-heading--2xl ds-u-margin-y--3",
                                     children: "Resource Preview"
                                 }),
                                 resource.columns ? /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
@@ -2192,6 +2198,7 @@ const $766b8e351dd607f5$var$DatasetBody = ({ rootUrl: rootUrl , id: id , dataset
                             ref: apiDocs,
                             children: [
                                 /*#__PURE__*/ (0, $hgUW1$jsx)("h2", {
+                                    className: "ds-text-heading--2xl ds-u-margin-y--2",
                                     children: "Try the API"
                                 }),
                                 /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$swaggeruireact), {
@@ -2218,7 +2225,7 @@ const $766b8e351dd607f5$var$DatasetBody = ({ rootUrl: rootUrl , id: id , dataset
                             className: "dc-c-dataset-tags ds-u-margin-bottom--3 ds-u-padding--2 ds-u-border ds-u-border--1",
                             children: [
                                 /*#__PURE__*/ (0, $hgUW1$jsx)("h2", {
-                                    className: "ds-u-color--primary ds-u-font-size--h3 ds-u-margin-top--0 ds-u-margin-bottom--2 ds-u-padding-bottom--2",
+                                    className: "ds-u-color--primary ds-u-font-size--xl ds-u-margin-top--0 ds-u-margin-bottom--2 ds-u-padding-bottom--2",
                                     children: "API"
                                 }),
                                 /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Button), {
@@ -2591,19 +2598,12 @@ const $e5bfafc6d4e6f207$var$SearchModal = ({ searchFunc: searchFunc , appNodeId:
                     children: "Search"
                 })
             }),
-            modalSearch && /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Dialog), {
+            modalSearch && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Dialog), {
                 className: "dc-c-search-dialog",
                 onExit: ()=>setModalSearch(false),
-                getApplicationNode: ()=>document.getElementById(appNodeId),
-                closeButtonText: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Fragment), {
-                    children: "Close"
-                }),
                 heading: `${headingText}`,
-                children: [
-                    searchModalText && /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
-                        children: searchModalText
-                    }),
-                    /*#__PURE__*/ (0, $hgUW1$jsxs)("form", {
+                actions: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Fragment), {
+                    children: /*#__PURE__*/ (0, $hgUW1$jsxs)("form", {
                         className: "ds-u-display--flex ds-u-align-items--stretch ds-u-flex-wrap--nowrap",
                         onSubmit: (e)=>{
                             searchForDataset(e);
@@ -2633,7 +2633,7 @@ const $e5bfafc6d4e6f207$var$SearchModal = ({ searchFunc: searchFunc , appNodeId:
                             })
                         ]
                     })
-                ]
+                })
             })
         ]
     });
@@ -2690,7 +2690,7 @@ const $2db98b8f69058a30$var$DesktopHeader = ({ siteName: siteName , headerClasse
                             links: links.topnav,
                             menuName: "CMS Main Header",
                             menuId: "cmsheader",
-                            menuClasses: "ds-u-display--flex dc-c-header--links ds-u-font-size--small"
+                            menuClasses: "ds-u-display--flex ds-u-flex-direction--row dc-c-header--links ds-u-font-size--sm"
                         })
                     })
                 ]
@@ -2705,7 +2705,7 @@ const $2db98b8f69058a30$var$DesktopHeader = ({ siteName: siteName , headerClasse
                             /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
                                 className: "ds-u-margin-right--5 ds-u-padding-y--3 dc-c-site-title",
                                 children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$NavLink), {
-                                    className: "ds-c-link--inverse ds-h1",
+                                    className: "ds-c-link--inverse ds-text-heading--3xl",
                                     to: "/",
                                     children: /*#__PURE__*/ (0, $hgUW1$jsx)("span", {
                                         className: "",
@@ -2718,7 +2718,7 @@ const $2db98b8f69058a30$var$DesktopHeader = ({ siteName: siteName , headerClasse
                                 wrapLabel: true,
                                 menuName: "CMS Site Main Nav",
                                 menuId: "site",
-                                menuClasses: "ds-u-display--flex dc-c-header--links ds-u-align-items--center",
+                                menuClasses: "ds-u-display--flex ds-u-flex-direction--row dc-c-header--links ds-u-align-items--center",
                                 linkClasses: linkClasses
                             }),
                             /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
@@ -2851,7 +2851,7 @@ const $caaccb8ea608e518$var$MobileHeader = ({ siteName: siteName , links: links
                             links: links.topnav,
                             menuName: "CMS Main Header",
                             menuId: "cmsheader",
-                            menuClasses: "ds-u-display--flex dc-c-header--links ds-u-font-size--small"
+                            menuClasses: "ds-u-display--flex ds-u-flex-direction--row dc-c-header--links ds-u-font-size--sm ds-u-margin-bottom--2"
                         })
                     })
                 ]
@@ -2874,10 +2874,11 @@ const $caaccb8ea608e518$var$MobileHeader = ({ siteName: siteName , links: links
                     }),
                     /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
                         className: "ds-u-padding-y--3 dc-c-site-title",
-                        children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Link), {
+                        children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$NavLink), {
+                            className: "ds-c-link--inverse ds-text-heading--3xl",
                             to: "/",
                             children: /*#__PURE__*/ (0, $hgUW1$jsx)("span", {
-                                className: "ds-h1",
+                                className: "",
                                 children: siteName
                             })
                         })
@@ -2929,7 +2930,7 @@ const $caaccb8ea608e518$var$MobileHeader = ({ siteName: siteName , links: links
                         menuName: "Main Nav",
                         menuId: "site",
                         menuClasses: "dc-c-header--links dc-c-header--mobile-links",
-                        linkClasses: "ds-u-margin-left--1 ds-u-padding-bottom--2 ds-h5"
+                        linkClasses: "ds-u-margin-left--1 ds-u-padding-bottom--2 ds-text-heading--md"
                     }),
                     mobile && /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
                         className: "cms-mobile-header--container",
@@ -2940,7 +2941,7 @@ const $caaccb8ea608e518$var$MobileHeader = ({ siteName: siteName , links: links
                                 menuName: "CMS Main Header",
                                 menuId: "cms-mobile-header",
                                 linkClasses: "ds-u-margin-left--1 ds-u-margin-bottom--2",
-                                menuClasses: "dc-c-header--links ds-u-font-size--small"
+                                menuClasses: "dc-c-header--links ds-u-font-size--sm ds-u-margin-bottom--2"
                             })
                         ]
                     })
@@ -3036,10 +3037,11 @@ const $a6df0aa147323304$var$Footer = ({ links: links , showEmail: showEmail , em
                                 className: "ds-l-md-col--8",
                                 children: [
                                     /*#__PURE__*/ (0, $hgUW1$jsx)("h2", {
-                                        className: "ds-h4",
+                                        className: "ds-text-heading--lg",
                                         children: emailTitle
                                     }),
                                     /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
+                                        className: "ds-u-padding-bottom--2",
                                         children: emailBody
                                     })
                                 ]
@@ -3065,9 +3067,10 @@ const $a6df0aa147323304$var$Footer = ({ links: links , showEmail: showEmail , em
                         className: "ds-l-row ds-u-margin--0",
                         children: [
                             /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
-                                className: `dc-c-footer__resources ds-l-md-col--7 ds-l-sm-col--12 ds-u-padding-top--7 ds-u-padding-bottom--4 ${md ? "ds-u-padding-x--0" : ""} ${sm ? "ds-u-padding-x--4" : ""}`,
+                                className: `dc-c-footer__resources ds-l-md-col--7 ds-l-sm-col--12 ds-u-padding-top--7 ds-u-padding-bottom--4
+                ${xs ? "ds-u-padding-x--0" : ""}`,
                                 children: /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
-                                    className: "ds-l-lg-col--9 ds-l-md-col--11 ds-u-padding-x--0",
+                                    className: "ds-l-lg-col--9 ds-l-md-col--11",
                                     children: /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
                                         className: `ds-u-display--flex ${xs ? "ds-u-flex-direction--column" : "ds-u-flex-direction--row"}`,
                                         children: [
@@ -3075,11 +3078,11 @@ const $a6df0aa147323304$var$Footer = ({ links: links , showEmail: showEmail , em
                                                 className: "ds-u-margin-right--6 ds-u-margin-bottom--2",
                                                 children: [
                                                     /*#__PURE__*/ (0, $hgUW1$jsx)("h2", {
-                                                        className: "ds-h6 dc-footer--heading ds-u-margin-bottom--2",
+                                                        className: "ds-text-heading--sm dc-footer--heading ds-u-margin-bottom--2",
                                                         children: "Open data tools"
                                                     }),
                                                     /*#__PURE__*/ (0, $hgUW1$jsx)("ul", {
-                                                        className: "ds-u-font-size--small ds-u-margin-bottom--3",
+                                                        className: "ds-u-font-size--sm ds-u-margin-bottom--3",
                                                         children: footerOpenDataToolLinks.map((link)=>/*#__PURE__*/ (0, $hgUW1$jsx)("li", {
                                                                 className: "ds-u-margin-bottom--1",
                                                                 children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $cf8eeac354b9dd32$export$2e2bcd8739ae039), {
@@ -3093,11 +3096,11 @@ const $a6df0aa147323304$var$Footer = ({ links: links , showEmail: showEmail , em
                                             /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
                                                 children: [
                                                     /*#__PURE__*/ (0, $hgUW1$jsx)("h2", {
-                                                        className: "ds-h6 dc-footer--heading ds-u-margin-bottom--2",
+                                                        className: "ds-text-heading--sm dc-footer--heading ds-u-margin-bottom--2",
                                                         children: "Additional resources"
                                                     }),
                                                     /*#__PURE__*/ (0, $hgUW1$jsx)("ul", {
-                                                        className: "ds-u-font-size--small",
+                                                        className: "ds-u-font-size--sm",
                                                         children: footerAdditionalResourcesLinks.filter((link)=>{
                                                             const noOnClick = Object.keys(link).findIndex((l)=>l === "onClick");
                                                             if (noOnClick === -1 || link.onClick && link.dataTag) return link;
@@ -3129,7 +3132,7 @@ const $a6df0aa147323304$var$Footer = ({ links: links , showEmail: showEmail , em
                             /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
                                 className: `dc-c-footer__cms-information ds-l-md-col--5 ds-l-sm-col--12 ${md ? "ds-u-padding-left--7" : ""} ${sm ? " ds-u-padding-left--4" : ""} ds-u-padding-y--7`,
                                 children: /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
-                                    className: "ds-u-font-size--small",
+                                    className: "ds-u-font-size--sm",
                                     children: [
                                         /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
                                             children: [
@@ -3170,7 +3173,7 @@ const $a6df0aa147323304$var$Footer = ({ links: links , showEmail: showEmail , em
                                         }),
                                         trademarkContent,
                                         socialMediaLinks && /*#__PURE__*/ (0, $hgUW1$jsxs)("ul", {
-                                            className: "ds-u-display--flex",
+                                            className: "ds-u-display--flex ds-u-flex-direction--row",
                                             children: [
                                                 socialMediaLinks.facebook && socialMediaLinks.facebook.url && /*#__PURE__*/ (0, $hgUW1$jsx)("li", {
                                                     className: "ds-u-margin-right--1",
@@ -3387,7 +3390,7 @@ const $a6df0aa147323304$var$Footer = ({ links: links , showEmail: showEmail , em
                 })
             }),
             /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
-                className: "dc-c-footer__utility ds-l-container ds-u-padding-y--2 ds-u-font-size--small",
+                className: "dc-c-footer__utility ds-l-container ds-u-padding-y--2 ds-u-font-size--sm",
                 children: /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
                     className: "ds-l-row ",
                     children: /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
@@ -3421,6 +3424,7 @@ $a6df0aa147323304$var$Footer.defaultProps = {
                 children: "A federal government website managed and paid for by the U.S. Centers for Medicare & Medicaid Services."
             }),
             /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
+                className: "ds-u-padding-bottom--2",
                 children: "7500 Security Boulevard, Baltimore, MD 21244"
             })
         ]
@@ -3669,6 +3673,7 @@ var $59a079354baa335c$export$2e2bcd8739ae039 = $59a079354baa335c$var$Hero;
 
 
 
+
 const $789279954d8eff7f$var$ApiDocumentation = ({ endpoint: endpoint  })=>{
     return /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
         children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$swaggeruireact), {
@@ -4126,7 +4131,6 @@ var $ec3e23baa005dc03$export$2e2bcd8739ae039 = $ec3e23baa005dc03$var$Breadcrumb;
 
 
 
-
 
 
 function $374c4669b044ddf8$var$getStartDate(condition, schema, id) {
@@ -4137,9 +4141,9 @@ function $374c4669b044ddf8$var$getStartDate(condition, schema, id) {
     return new Date();
 }
 const $374c4669b044ddf8$var$QueryRow = ({ id: id , condition: condition , index: index , update: update , remove: remove , propertyOptions: propertyOptions , schema: schema  })=>{
-    const md = (0, $hgUW1$useMediaQuery)({
+    const sm = (0, $hgUW1$useMediaQuery)({
         minWidth: 0,
-        maxWidth: 768
+        maxWidth: 544
     });
     const [operator, setOperator] = (0, $hgUW1$useState)(condition.operator);
     const [property, setProperty] = (0, $hgUW1$useState)(condition.property);
@@ -4178,24 +4182,30 @@ const $374c4669b044ddf8$var$QueryRow = ({ id: id , condition: condition , index:
         value
     ]);
     return /*#__PURE__*/ (0, $hgUW1$jsxs)("fieldset", {
-        className: "ds-u-display--flex ds-u-justify-content--between ds-u-align-items--center",
+        className: "ds-u-display--flex ds-u-flex-wrap--wrap ds-u-justify-content--between ds-u-md-justify-content--end ds-u-align-items--center",
         children: [
-            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Dropdown), {
-                options: propertyOptions,
-                value: property,
-                label: "Property",
-                name: `${condition.key}_property`,
-                onChange: (e)=>setProperty(e.target.value)
+            /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                className: "ds-l-md-col--5 ds-l-lg-col--4 ds-l-sm-col--8 ds-l-col--12 ds-u-padding--0 ds-u-md-padding-right--2 ds-u-margin-bottom--0 ds-u-md-margin-bottom--2",
+                children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Dropdown), {
+                    options: propertyOptions,
+                    value: property,
+                    label: "Property",
+                    name: `${condition.key}_property`,
+                    onChange: (e)=>setProperty(e.target.value)
+                })
             }),
-            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Dropdown), {
-                options: (0, $7264a673914aa746$export$2b9377795161999)(schema[id].fields[property].mysql_type),
-                value: operator,
-                size: "small",
-                label: "Operator",
-                name: `${condition.key}_operator`,
-                onChange: (e)=>setOperator(e.target.value)
+            /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                className: "ds-l-sm-col--3 ds-l-md-col--2 ds-l-col--12 ds-u-padding--0 ds-u-md-padding-right--2 ds-u-margin-bottom--0 ds-u-md-margin-bottom--2",
+                children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Dropdown), {
+                    options: (0, $7264a673914aa746$export$2b9377795161999)(schema[id].fields[property].mysql_type),
+                    value: operator,
+                    label: "Operator",
+                    name: `${condition.key}_operator`,
+                    onChange: (e)=>setOperator(e.target.value)
+                })
             }),
             schema[id].fields[property].mysql_type === "date" ? /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+                className: "ds-l-md-col--5 ds-l-lg-col--4 ds-l-sm-col--8 ds-l-col--12 ds-u-padding--0 ds-u-sm-padding-right--2 ds-u-md-padding-right--0 ds-u-lg-padding-right--2",
                 children: [
                     /*#__PURE__*/ (0, $hgUW1$jsx)("label", {
                         className: "ds-c-label",
@@ -4219,26 +4229,20 @@ const $374c4669b044ddf8$var$QueryRow = ({ id: id , condition: condition , index:
                         withPortal: true
                     })
                 ]
-            }) : /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TextField), {
-                label: "Value",
-                name: `${condition.key}_value`,
-                value: (0, $7264a673914aa746$export$6b5e57d20078142b)(value, operator),
-                onChange: (e)=>setValue(e.target.value)
+            }) : /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                className: "ds-l-md-col--5 ds-l-lg-col--4 ds-l-sm-col--8 ds-l-col--12 ds-u-padding--0 ds-u-sm-padding-right--2 ds-u-md-padding-right--0 ds-u-lg-padding-right--2 ds-u-margin-bottom--2",
+                children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TextField), {
+                    label: "Value",
+                    name: `${condition.key}_value`,
+                    value: (0, $7264a673914aa746$export$6b5e57d20078142b)(value, operator),
+                    onChange: (e)=>setValue(e.target.value)
+                })
             }),
             /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Button), {
-                variation: md ? "transparent" : null,
-                size: "small",
-                className: "ds-u-margin-top--3",
+                className: "ds-u-margin-top--2 ds-u-sm-margin-top--4 ds-u-lg-margin-top--4 ds-u-md-margin-top--2 ds-l-col--12 ds-l-md-col--4 ds-l-lg-col--2 ds-l-sm-col--4",
                 "aria-label": "Delete filter",
                 onClick: ()=>remove(index),
-                children: !md ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Fragment), {
-                    children: "Delete filter"
-                }) : /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Fragment), {
-                    children: [
-                        /*#__PURE__*/ (0, $hgUW1$jsx)((0, $847b0964185837b2$export$2e2bcd8739ae039), {}),
-                        " "
-                    ]
-                })
+                children: "Delete filter"
             })
         ]
     });
@@ -4562,6 +4566,7 @@ const $dd6eb2b30d7ad75d$var$FilteredResourceBody = ({ id: id , dataset: dataset
                     ref: apiDocs,
                     children: [
                         /*#__PURE__*/ (0, $hgUW1$jsx)("h2", {
+                            className: "ds-text-heading--2xl ds-u-margin-y--2",
                             children: "Try the API"
                         }),
                         /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$swaggeruireact), {