From 94a73422a6d4bbca0b8f3d3715978ba7d86cc649 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 16 Jul 2024 09:35:19 +0300
Subject: [PATCH 1/9] Location highlight setup

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../src/components/HURUmap/Location/index.js  | 15 ++++-----
 .../LocationHighlight/LocationHighlight.js    | 33 +++++++++++++++++++
 .../src/LocationHighlight/index.js            |  3 ++
 packages/hurumap-core/src/index.js            |  1 +
 4 files changed, 44 insertions(+), 8 deletions(-)
 create mode 100644 packages/hurumap-core/src/LocationHighlight/LocationHighlight.js
 create mode 100644 packages/hurumap-core/src/LocationHighlight/index.js

diff --git a/apps/pesayetu/src/components/HURUmap/Location/index.js b/apps/pesayetu/src/components/HURUmap/Location/index.js
index feb8737cc..4b181ea1b 100644
--- a/apps/pesayetu/src/components/HURUmap/Location/index.js
+++ b/apps/pesayetu/src/components/HURUmap/Location/index.js
@@ -1,12 +1,10 @@
-import { LocationTag } from "@hurumap/core";
+import { LocationTag, LocationHighlight } from "@hurumap/core";
 import { Box } from "@mui/material";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 
 import useStyles from "./useStyles";
 
-import LocationHighlight from "@/pesayetu/components/HURUmap/LocationHighlight";
-
 function Location({ className, highlights, isLoading, tags, ...props }) {
   const classes = useStyles(props);
 
@@ -53,11 +51,12 @@ function Location({ className, highlights, isLoading, tags, ...props }) {
               key={highlight.title}
               isLoading={isLoading}
               {...highlight}
-              classes={{
-                root: classes.highlight,
-                title: classes.highlightTitle,
-                value: classes.highlightValue,
-              }}
+              sx={(theme) => ({
+                paddingTop: "4.5px",
+                "&:not(:first-of-type)": {
+                  borderLeft: `1px solid ${theme.palette.grey.main}`,
+                },
+              })}
             />
           ))}
         </Box>
diff --git a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js
new file mode 100644
index 000000000..be1908efa
--- /dev/null
+++ b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js
@@ -0,0 +1,33 @@
+import { Box, Typography } from "@mui/material";
+import React from "react";
+
+const LocationHighlight = React.forwardRef(function LocationHighlight(
+  { title, value, isLoading, ...props },
+  ref,
+) {
+  return (
+    <Box
+      alignItems="center"
+      display="inline-flex"
+      flexDirection="column"
+      flexGrow={1}
+      ref={ref}
+      {...props}
+    >
+      <Typography
+        variant="subtitle1"
+        sx={(theme) => ({
+          fontSize: theme.typography.pxToRem(10),
+          fontWeight: 300,
+          lineHeight: 24 / 10,
+          textTransform: "uppercase",
+        })}
+      >
+        {title}
+      </Typography>
+      <Typography variant="body2">{isLoading ? "…" : value}</Typography>
+    </Box>
+  );
+});
+
+export default LocationHighlight;
diff --git a/packages/hurumap-core/src/LocationHighlight/index.js b/packages/hurumap-core/src/LocationHighlight/index.js
new file mode 100644
index 000000000..5c355f40a
--- /dev/null
+++ b/packages/hurumap-core/src/LocationHighlight/index.js
@@ -0,0 +1,3 @@
+import LocationHighlight from "./LocationHighlight";
+
+export default LocationHighlight;
diff --git a/packages/hurumap-core/src/index.js b/packages/hurumap-core/src/index.js
index 327f108d2..881ae0422 100644
--- a/packages/hurumap-core/src/index.js
+++ b/packages/hurumap-core/src/index.js
@@ -1,2 +1,3 @@
 /* eslint-disable import/prefer-default-export */
 export { default as LocationTag } from "./LocationTag";
+export { default as LocationHighlight } from "./LocationHighlight";

From 2ac4cb11ad070b51aea9573ce62f791b43c03063 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 16 Jul 2024 09:44:41 +0300
Subject: [PATCH 2/9] Add storybook

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../HURUmap/core/LocationHighlight.stories.js | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 apps/uibook/stories/HURUmap/core/LocationHighlight.stories.js

diff --git a/apps/uibook/stories/HURUmap/core/LocationHighlight.stories.js b/apps/uibook/stories/HURUmap/core/LocationHighlight.stories.js
new file mode 100644
index 000000000..cd960db2e
--- /dev/null
+++ b/apps/uibook/stories/HURUmap/core/LocationHighlight.stories.js
@@ -0,0 +1,39 @@
+import { LocationHighlight } from "@hurumap/core";
+import React from "react";
+
+const highlights = [
+  {
+    title: "Population",
+    value: "1,000,000",
+  },
+  {
+    title: "GDP",
+    value: "1,000,000",
+  },
+  {
+    title: "Area",
+    value: "1,000,000",
+  },
+];
+
+export default {
+  title: "@hurumap/core/LocationHighlight",
+  argTypes: {
+    isLoading: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+};
+
+function Template({ ...args }) {
+  return <LocationHighlight {...args} />;
+}
+
+export const Default = Template.bind({});
+
+Default.args = {
+  isLoading: false,
+  ...highlights[0],
+};

From d4a1f48198125cf2e48022514e535b45fdcd1321 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 16 Jul 2024 09:48:02 +0300
Subject: [PATCH 3/9] Add tests

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../LocationHighlight.snap.js                 | 20 +++++++++++++++++++
 .../LocationHighlight.test.js                 | 13 ++++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js
 create mode 100644 packages/hurumap-core/src/LocationHighlight/LocationHighlight.test.js

diff --git a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js
new file mode 100644
index 000000000..c92cf918e
--- /dev/null
+++ b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LocationHighlight renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiBox-root css-1s0xv82"
+  >
+    <h6
+      class="MuiTypography-root MuiTypography-subtitle1 css-luofes-MuiTypography-root"
+    >
+      Population
+    </h6>
+    <p
+      class="MuiTypography-root MuiTypography-body2 css-e784if-MuiTypography-root"
+    >
+      1,000,000
+    </p>
+  </div>
+</div>
+`;
diff --git a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.test.js b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.test.js
new file mode 100644
index 000000000..d7ae87420
--- /dev/null
+++ b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.test.js
@@ -0,0 +1,13 @@
+import { render } from "@commons-ui/testing-library";
+import * as React from "react";
+
+import LocationHighlight from "./LocationHighlight";
+
+describe("LocationHighlight", () => {
+  it("renders unchanged", () => {
+    const { container } = render(
+      <LocationHighlight title="Population" value="1,000,000" />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

From 7f990af1625e59b213ba3b32009480b9375812fa Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 16 Jul 2024 09:49:29 +0300
Subject: [PATCH 4/9] Delete location Highlight

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../HURUmap/LocationHighlight/index.js        | 58 -------------------
 .../LocationHighlight/index.stories.js        | 22 -------
 .../HURUmap/LocationHighlight/useStyles.js    | 14 -----
 3 files changed, 94 deletions(-)
 delete mode 100644 apps/pesayetu/src/components/HURUmap/LocationHighlight/index.js
 delete mode 100644 apps/pesayetu/src/components/HURUmap/LocationHighlight/index.stories.js
 delete mode 100644 apps/pesayetu/src/components/HURUmap/LocationHighlight/useStyles.js

diff --git a/apps/pesayetu/src/components/HURUmap/LocationHighlight/index.js b/apps/pesayetu/src/components/HURUmap/LocationHighlight/index.js
deleted file mode 100644
index 6e1be30f3..000000000
--- a/apps/pesayetu/src/components/HURUmap/LocationHighlight/index.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Box, Typography } from "@mui/material";
-import clsx from "clsx";
-import PropTypes from "prop-types";
-import React from "react";
-
-import useStyles from "./useStyles";
-
-function LocationHighlight({
-  className,
-  formattedValue: formattedValueProp,
-  isLoading,
-  value: valueProp,
-  title: titleProp,
-  ...props
-}) {
-  const classes = useStyles(props);
-
-  if (!(isLoading || ((valueProp || formattedValueProp) && titleProp))) {
-    return null;
-  }
-
-  const title = titleProp || (isLoading && "…");
-  const formattedValue = isLoading ? "…" : formattedValueProp || valueProp;
-  return (
-    <Box
-      alignItems="center"
-      display="inline-flex"
-      flexDirection="column"
-      flexGrow={1}
-      className={clsx(classes.root, className)}
-    >
-      <Typography variant="subtitle1" className={classes.title}>
-        {title}
-      </Typography>
-      <Typography variant="body2" className={classes.value}>
-        {formattedValue}
-      </Typography>
-    </Box>
-  );
-}
-
-LocationHighlight.propTypes = {
-  className: PropTypes.string,
-  isLoading: PropTypes.bool,
-  formattedValue: PropTypes.string,
-  title: PropTypes.string,
-  value: PropTypes.number,
-};
-
-LocationHighlight.defaultProps = {
-  className: undefined,
-  isLoading: undefined,
-  formattedValue: undefined,
-  title: undefined,
-  value: undefined,
-};
-
-export default LocationHighlight;
diff --git a/apps/pesayetu/src/components/HURUmap/LocationHighlight/index.stories.js b/apps/pesayetu/src/components/HURUmap/LocationHighlight/index.stories.js
deleted file mode 100644
index 159936326..000000000
--- a/apps/pesayetu/src/components/HURUmap/LocationHighlight/index.stories.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-
-import LocationHighlight from ".";
-
-import { hurumapArgs } from "@/pesayetu/config";
-
-const {
-  location: {
-    highlights: [highlight],
-  },
-} = hurumapArgs;
-export default {
-  title: "HURUmap/Components/LocationHighlight",
-};
-
-function Template(args) {
-  return <LocationHighlight {...args} />;
-}
-
-export const Default = Template.bind({});
-
-Default.args = highlight;
diff --git a/apps/pesayetu/src/components/HURUmap/LocationHighlight/useStyles.js b/apps/pesayetu/src/components/HURUmap/LocationHighlight/useStyles.js
deleted file mode 100644
index 18c304770..000000000
--- a/apps/pesayetu/src/components/HURUmap/LocationHighlight/useStyles.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles(({ typography }) => ({
-  root: {},
-  title: {
-    fontSize: typography.pxToRem(10),
-    fontWeight: 300,
-    lineHeight: 24 / 10,
-    textTransform: "uppercase",
-  },
-  value: {},
-}));
-
-export default useStyles;

From da99833a97eb11aedd1386f64e1d01462300794a Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 16 Jul 2024 09:56:34 +0300
Subject: [PATCH 5/9] Add to climatemapped

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../src/components/HURUmap/Location/index.js  | 15 +++--
 .../HURUmap/LocationHighlight/index.js        | 58 -------------------
 .../LocationHighlight/index.stories.js        | 22 -------
 .../HURUmap/LocationHighlight/useStyles.js    | 14 -----
 4 files changed, 7 insertions(+), 102 deletions(-)
 delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.js
 delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.stories.js
 delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/useStyles.js

diff --git a/apps/climatemappedafrica/src/components/HURUmap/Location/index.js b/apps/climatemappedafrica/src/components/HURUmap/Location/index.js
index 6a68d1710..ba9a2fb0c 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Location/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Location/index.js
@@ -1,12 +1,10 @@
-import { LocationTag } from "@hurumap/core";
+import { LocationTag, LocationHighlight } from "@hurumap/core";
 import { Box } from "@mui/material";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 
 import useStyles from "./useStyles";
 
-import LocationHighlight from "@/climatemappedafrica/components/HURUmap/LocationHighlight";
-
 function Location({ className, highlights, isLoading, tags, ...props }) {
   const classes = useStyles(props);
 
@@ -53,11 +51,12 @@ function Location({ className, highlights, isLoading, tags, ...props }) {
               key={highlight.title}
               isLoading={isLoading}
               {...highlight}
-              classes={{
-                root: classes.highlight,
-                title: classes.highlightTitle,
-                value: classes.highlightValue,
-              }}
+              sx={(theme) => ({
+                paddingTop: "4.5px",
+                "&:not(:first-of-type)": {
+                  borderLeft: `1px solid ${theme.palette.grey.main}`,
+                },
+              })}
             />
           ))}
         </Box>
diff --git a/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.js b/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.js
deleted file mode 100644
index 6e1be30f3..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Box, Typography } from "@mui/material";
-import clsx from "clsx";
-import PropTypes from "prop-types";
-import React from "react";
-
-import useStyles from "./useStyles";
-
-function LocationHighlight({
-  className,
-  formattedValue: formattedValueProp,
-  isLoading,
-  value: valueProp,
-  title: titleProp,
-  ...props
-}) {
-  const classes = useStyles(props);
-
-  if (!(isLoading || ((valueProp || formattedValueProp) && titleProp))) {
-    return null;
-  }
-
-  const title = titleProp || (isLoading && "…");
-  const formattedValue = isLoading ? "…" : formattedValueProp || valueProp;
-  return (
-    <Box
-      alignItems="center"
-      display="inline-flex"
-      flexDirection="column"
-      flexGrow={1}
-      className={clsx(classes.root, className)}
-    >
-      <Typography variant="subtitle1" className={classes.title}>
-        {title}
-      </Typography>
-      <Typography variant="body2" className={classes.value}>
-        {formattedValue}
-      </Typography>
-    </Box>
-  );
-}
-
-LocationHighlight.propTypes = {
-  className: PropTypes.string,
-  isLoading: PropTypes.bool,
-  formattedValue: PropTypes.string,
-  title: PropTypes.string,
-  value: PropTypes.number,
-};
-
-LocationHighlight.defaultProps = {
-  className: undefined,
-  isLoading: undefined,
-  formattedValue: undefined,
-  title: undefined,
-  value: undefined,
-};
-
-export default LocationHighlight;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.stories.js b/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.stories.js
deleted file mode 100644
index ce1527380..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.stories.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-
-import LocationHighlight from ".";
-
-import { hurumapArgs } from "@/climatemappedafrica/config";
-
-const {
-  location: {
-    highlights: [highlight],
-  },
-} = hurumapArgs;
-export default {
-  title: "Components/HURUmap/LocationHighlight",
-};
-
-function Template(args) {
-  return <LocationHighlight {...args} />;
-}
-
-export const Default = Template.bind({});
-
-Default.args = highlight;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/useStyles.js
deleted file mode 100644
index 18c304770..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/useStyles.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles(({ typography }) => ({
-  root: {},
-  title: {
-    fontSize: typography.pxToRem(10),
-    fontWeight: 300,
-    lineHeight: 24 / 10,
-    textTransform: "uppercase",
-  },
-  value: {},
-}));
-
-export default useStyles;

From a2cd2dc53ea7b2d565c5bae308ae9ddd6d50274c Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 16 Jul 2024 10:00:16 +0300
Subject: [PATCH 6/9] Remove unused styles

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../src/components/HURUmap/Location/useStyles.js          | 8 --------
 .../pesayetu/src/components/HURUmap/Location/useStyles.js | 8 --------
 2 files changed, 16 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js
index fca627bf5..e659b2925 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js
@@ -17,14 +17,6 @@ const useStyles = makeStyles(({ palette, typography }) => ({
     marginTop: 4.5,
     width: "100%",
   },
-  highlight: {
-    paddingTop: 4.5,
-    "&:not(:first-of-type)": {
-      borderLeft: `1px solid ${palette.grey.main}`,
-    },
-  },
-  highlightTitle: {},
-  highlightValue: {},
 }));
 
 export default useStyles;
diff --git a/apps/pesayetu/src/components/HURUmap/Location/useStyles.js b/apps/pesayetu/src/components/HURUmap/Location/useStyles.js
index fca627bf5..e659b2925 100644
--- a/apps/pesayetu/src/components/HURUmap/Location/useStyles.js
+++ b/apps/pesayetu/src/components/HURUmap/Location/useStyles.js
@@ -17,14 +17,6 @@ const useStyles = makeStyles(({ palette, typography }) => ({
     marginTop: 4.5,
     width: "100%",
   },
-  highlight: {
-    paddingTop: 4.5,
-    "&:not(:first-of-type)": {
-      borderLeft: `1px solid ${palette.grey.main}`,
-    },
-  },
-  highlightTitle: {},
-  highlightValue: {},
 }));
 
 export default useStyles;

From f0c281b11932e782aa9380d3eccde7d97b2712a7 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 16 Jul 2024 15:59:38 +0300
Subject: [PATCH 7/9] Update
 packages/hurumap-core/src/LocationHighlight/LocationHighlight.test.js

Co-authored-by: KEVIN KOECH <koechkevin92@gmail.com>
---
 .../src/LocationHighlight/LocationHighlight.test.js             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.test.js b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.test.js
index d7ae87420..4b417befa 100644
--- a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.test.js
+++ b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.test.js
@@ -1,5 +1,5 @@
 import { render } from "@commons-ui/testing-library";
-import * as React from "react";
+import React from "react";
 
 import LocationHighlight from "./LocationHighlight";
 

From dedba1763b5e63f01a51fdfaa0a9b0ff7326447d Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 16 Jul 2024 16:28:01 +0300
Subject: [PATCH 8/9] add title and value customization options

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../src/LocationHighlight/LocationHighlight.js    | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js
index be1908efa..85e215524 100644
--- a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js
+++ b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js
@@ -2,7 +2,14 @@ import { Box, Typography } from "@mui/material";
 import React from "react";
 
 const LocationHighlight = React.forwardRef(function LocationHighlight(
-  { title, value, isLoading, ...props },
+  {
+    title,
+    value,
+    isLoading,
+    TitleTypographyProps,
+    ValueTypographyProps,
+    ...props
+  },
   ref,
 ) {
   return (
@@ -16,16 +23,20 @@ const LocationHighlight = React.forwardRef(function LocationHighlight(
     >
       <Typography
         variant="subtitle1"
+        {...TitleTypographyProps}
         sx={(theme) => ({
           fontSize: theme.typography.pxToRem(10),
           fontWeight: 300,
           lineHeight: 24 / 10,
           textTransform: "uppercase",
+          ...TitleTypographyProps?.sx,
         })}
       >
         {title}
       </Typography>
-      <Typography variant="body2">{isLoading ? "…" : value}</Typography>
+      <Typography variant="body2" {...ValueTypographyProps}>
+        {isLoading ? "…" : value}
+      </Typography>
     </Box>
   );
 });

From 5b33c4f821dc6df68969a121206266f0cc327386 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 16 Jul 2024 16:49:57 +0300
Subject: [PATCH 9/9] Sort Props alphabetically

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../hurumap-core/src/LocationHighlight/LocationHighlight.js   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js
index 85e215524..b0789e3ba 100644
--- a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js
+++ b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js
@@ -3,11 +3,11 @@ import React from "react";
 
 const LocationHighlight = React.forwardRef(function LocationHighlight(
   {
+    TitleTypographyProps,
+    ValueTypographyProps,
     title,
     value,
     isLoading,
-    TitleTypographyProps,
-    ValueTypographyProps,
     ...props
   },
   ref,