diff --git a/packages/map-styles/package.json b/packages/map-styles/package.json
index f5f598b6..5bfe217f 100644
--- a/packages/map-styles/package.json
+++ b/packages/map-styles/package.json
@@ -27,7 +27,10 @@
   },
   "dependencies": {
     "@macrostrat/color-utils": "workspace:*",
+    "@macrostrat/ui-components": "workspace:*",
+    "@types/d3-selection": "^3.0.11",
     "axios": "^1.7.9",
+    "d3-selection": "^3.0.0",
     "mapbox-gl": "^2.15.0||^3.0.0",
     "textures": "^1.2.3"
   }
diff --git a/packages/map-styles/src/layer-helpers/pattern-fill.ts b/packages/map-styles/src/layer-helpers/pattern-fill.ts
index 39f19623..8eaaedb0 100644
--- a/packages/map-styles/src/layer-helpers/pattern-fill.ts
+++ b/packages/map-styles/src/layer-helpers/pattern-fill.ts
@@ -62,7 +62,9 @@ export function createSolidColorImage(imgColor) {
   return ctx.getImageData(0, 0, 40, 40);
 }
 
-export async function createUnitFill(spec: PatternFillSpec): Promise<ImageData> {
+export async function createUnitFill(
+  spec: PatternFillSpec,
+): Promise<ImageData> {
   /** Create a fill image for a map unit. */
   if (spec.patternURL != null) {
     const img = await loadImage(spec.patternURL);
@@ -71,4 +73,3 @@ export async function createUnitFill(spec: PatternFillSpec): Promise<ImageData>
     return createSolidColorImage(spec.color);
   }
 }
-
diff --git a/packages/map-styles/src/style-image-manager/pattern-images.ts b/packages/map-styles/src/style-image-manager/pattern-images.ts
index a649f8ed..30c03018 100644
--- a/packages/map-styles/src/style-image-manager/pattern-images.ts
+++ b/packages/map-styles/src/style-image-manager/pattern-images.ts
@@ -2,7 +2,7 @@
 
 export async function mapLoadImage(map, url: string) {
   return new Promise((resolve, reject) => {
-    map.loadImage(url, function(err, image) {
+    map.loadImage(url, function (err, image) {
       // Throw an error if something went wrong
       if (err) {
         console.error(`Could not load image ${url}`);
@@ -24,4 +24,3 @@ export function createTransparentImage() {
   ctx.fillRect(0, 0, 40, 40);
   return ctx.getImageData(0, 0, 40, 40);
 }
-
diff --git a/packages/static-map-utils/src/map-scale/index.ts b/packages/static-map-utils/src/map-scale/index.ts
index 6111ce0f..fe80b1ff 100644
--- a/packages/static-map-utils/src/map-scale/index.ts
+++ b/packages/static-map-utils/src/map-scale/index.ts
@@ -1,7 +1,7 @@
 import hyper from "@macrostrat/hyper";
 import { scaleLinear } from "@visx/scale";
 import styles from "./index.module.sass";
-import {  useCallback, useState } from "react";
+import { useCallback, useState } from "react";
 import classNames from "classnames";
 
 const h = hyper.styled(styles);
diff --git a/yarn.lock b/yarn.lock
index de8ae32a..bdc2cbb6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2531,7 +2531,10 @@ __metadata:
   resolution: "@macrostrat/map-styles@workspace:packages/map-styles"
   dependencies:
     "@macrostrat/color-utils": "workspace:*"
+    "@macrostrat/ui-components": "workspace:*"
+    "@types/d3-selection": "npm:^3.0.11"
     axios: "npm:^1.7.9"
+    d3-selection: "npm:^3.0.0"
     mapbox-gl: "npm:^2.15.0||^3.0.0"
     parcel: "npm:^2.16.0"
     textures: "npm:^1.2.3"
@@ -2668,7 +2671,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@macrostrat/ui-components@workspace:^, @macrostrat/ui-components@workspace:packages/ui-components":
+"@macrostrat/ui-components@workspace:*, @macrostrat/ui-components@workspace:^, @macrostrat/ui-components@workspace:packages/ui-components":
   version: 0.0.0-use.local
   resolution: "@macrostrat/ui-components@workspace:packages/ui-components"
   dependencies: