@geowiki/map 0.16.9-dev.2 → 0.16.9-dev.4

package/dist/index.mjs

@@ -546,13 +546,13 @@ var prepareRGBImage = (array, width, height) => {
   var data = imageData == null ? void 0 : imageData.data;
   let index = 0;
   for (var i = 0; i < array.length; ) {
-    const r = array[i++];
+    const r2 = array[i++];
     const g = array[i++];
     const b = array[i++];
-    data[index++] = r;
+    data[index++] = r2;
     data[index++] = g;
     data[index++] = b;
-    data[index++] = r === 0 && g === 0 && b === 0 ? 0 : 255;
+    data[index++] = r2 === 0 && g === 0 && b === 0 ? 0 : 255;
   }
   ctx == null ? void 0 : ctx.putImageData(imageData, 0, 0);
   return canvas;
@@ -5105,7 +5105,7 @@ var GoogleSheetsPopup = ({
       return Object.keys(value).length === 0;
     return false;
   };
-  const isUrl = (value) => {
+  const isUrl2 = (value) => {
     if (typeof value !== "string")
       return false;
     const trimmedValue = value.trim();
@@ -5131,7 +5131,7 @@ var GoogleSheetsPopup = ({
     return key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).replace(/_/g, " ").replace(/\s+/g, " ").trim();
   };
   const formatFieldValue = (value) => {
-    if (isUrl(value)) {
+    if (isUrl2(value)) {
       const url = value.startsWith("http") ? value : `https://${value}`;
       const displayText = value.length > 50 ? `${value.substring(0, 47)}...` : value;
       return /* @__PURE__ */ jsx15(
@@ -5149,11 +5149,11 @@ var GoogleSheetsPopup = ({
     return String(value);
   };
   const urlFields = filteredProperties.filter(([_key, value]) => {
-    const isUrlValue = isUrl(value);
+    const isUrlValue = isUrl2(value);
     return isUrlValue;
   });
   const otherFields = filteredProperties.filter(([_key, value]) => {
-    const isUrlValue = isUrl(value);
+    const isUrlValue = isUrl2(value);
     return !isUrlValue;
   });
   return /* @__PURE__ */ jsxs6("div", { className: "bg-white rounded-lg shadow-lg p-6 w-full max-w-md overflow-hidden", children: [
@@ -10244,8 +10244,8 @@ var Questions = (props) => {
       if (Array.isArray(y.answers)) {
         y.answers = y.answers.filter((answer) => {
           const value = answer.text;
-          const isInteger = parseInt(value);
-          if (isInteger)
+          const isInteger2 = parseInt(value);
+          if (isInteger2)
             return Object.values(taskChangeDetail).includes(Number(value));
           return true;
         });
@@ -10844,12 +10844,12 @@ var BingLayer = class extends L13.TileLayer {
     (_a = document.getElementsByTagName("head")[0]) == null ? void 0 : _a.appendChild(script);
   }
   initMetadata(meta) {
-    const r = meta.resourceSets[0].resources[0];
-    this.options.subdomains = r.imageUrlSubdomains;
-    this._url = r.imageUrl;
-    if (r.imageryProviders) {
-      for (let i = 0; i < r.imageryProviders.length; i++) {
-        const p = r.imageryProviders[i];
+    const r2 = meta.resourceSets[0].resources[0];
+    this.options.subdomains = r2.imageUrlSubdomains;
+    this._url = r2.imageUrl;
+    if (r2.imageryProviders) {
+      for (let i = 0; i < r2.imageryProviders.length; i++) {
+        const p = r2.imageryProviders[i];
         for (let j = 0; j < p.coverageAreas.length; j++) {
           const c = p.coverageAreas[j];
           const bounds = new L13.LatLngBounds(
@@ -12423,7 +12423,7 @@ var ControlItem = memo5(({ control, position }) => {
     ] });
   }
   const positionClass = POSITION_CLASSES2[position];
-  const getDefaultDirection = () => {
+  const getDefaultDirection2 = () => {
     switch (position) {
       case "topleft":
       case "bottomleft":
@@ -12435,7 +12435,7 @@ var ControlItem = memo5(({ control, position }) => {
         return "right";
     }
   };
-  const popoverDirection = control.popoverDirection || getDefaultDirection();
+  const popoverDirection = control.popoverDirection || getDefaultDirection2();
   return /* @__PURE__ */ jsxs34(Fragment16, { children: [
     /* @__PURE__ */ jsx50("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsxs34(Popover5.Root, { open: control.isOpen, children: [
       /* @__PURE__ */ jsxs34(Tooltip2, { delayDuration: 100, children: [
@@ -16869,13 +16869,3081 @@ var WaybackTimelineMap = (props) => {
 };
 
 // src/Components/Map/MapLibre.tsx
-import { useEffect as useEffect34, useRef as useRef16, useState as useState36 } from "react";
+import { useEffect as useEffect35, useRef as useRef16, useState as useState37 } from "react";
 import { forwardRef as forwardRef5 } from "react";
 import maplibregl from "maplibre-gl";
 import MapPinIcon5 from "@heroicons/react/24/solid/MapPinIcon";
 import { renderToStaticMarkup } from "react-dom/server";
-import { MapControlToolbar, GlobeIcon as GlobeIcon2, PlusIcon as PlusIcon3, MinusIcon as MinusIcon3, LayerGroupIcon as LayerGroupIcon5, LayerSwitcher as LayerSwitcher2 } from "@geowiki/design-system";
-import { jsx as jsx79, jsxs as jsxs57 } from "react/jsx-runtime";
+
+// src/Components/Generic/Map/LayerSwitcher.tsx
+import { memo as memo16, useEffect as useEffect34, useCallback as useCallback12, useState as useState36 } from "react";
+import {
+  HoverCard as HoverCard2,
+  HoverCardContent as HoverCardContent2,
+  HoverCardTrigger as HoverCardTrigger2,
+  Switch as Switch2,
+  KeyInfoItem as KeyInfoItem2,
+  SimpleLink as SimpleLink2
+} from "@geowiki/ui";
+
+// src/Components/Generic/Map/store/mapLayers.ts
+import { create as create9 } from "zustand";
+import { arrayMove as arrayMove2 } from "@dnd-kit/sortable";
+var useMapLayerStore2 = create9()((set, get) => ({
+  layers: [],
+  add: (layer) => {
+    var _a;
+    if (layer.id === "geotrees-external-layer" || layer.title === "GEO-TREES Sites" || ((_a = layer.layerInfo) == null ? void 0 : _a.source) === "GeoTrees External API") {
+      const existingGeoTreesLayer = get().layers.find(
+        (existingLayer) => {
+          var _a2;
+          return existingLayer.id === "geotrees-external-layer" || existingLayer.title === "GEO-TREES Sites" || ((_a2 = existingLayer.layerInfo) == null ? void 0 : _a2.source) === "GeoTrees External API";
+        }
+      );
+      if (existingGeoTreesLayer) {
+        console.warn(
+          "GeoTrees External layer already exists in map store, preventing duplicate addition"
+        );
+        return;
+      }
+    }
+    set((state) => {
+      const layersWithName = state.layers.filter((l) => l == null ? void 0 : l.layerName);
+      const layersWithoutName = state.layers.filter((l) => !(l == null ? void 0 : l.layerName));
+      if (layer.layerName) {
+        const insertIndex = layersWithName.findIndex(
+          (l) => {
+            var _a2, _b, _c, _d;
+            return ((_b = (_a2 = l.order) != null ? _a2 : l.index) != null ? _b : 0) > ((_d = (_c = layer.order) != null ? _c : layer.index) != null ? _d : 0);
+          }
+        );
+        const updatedLayersWithName = insertIndex === -1 ? [...layersWithName, layer] : [
+          ...layersWithName.slice(0, insertIndex),
+          layer,
+          ...layersWithName.slice(insertIndex)
+        ];
+        updatedLayersWithName.forEach((l, idx) => {
+          l.index = updatedLayersWithName.length + layersWithoutName.length - idx;
+        });
+        layersWithoutName.forEach((l, idx) => {
+          l.index = layersWithoutName.length - idx;
+        });
+        const newState = {
+          layers: [...updatedLayersWithName, ...layersWithoutName]
+        };
+        return newState;
+      } else {
+        const insertIndex = layersWithoutName.findIndex(
+          (l) => {
+            var _a2, _b, _c, _d;
+            return ((_b = (_a2 = l.order) != null ? _a2 : l.index) != null ? _b : 0) > ((_d = (_c = layer.order) != null ? _c : layer.index) != null ? _d : 0);
+          }
+        );
+        const updatedLayersWithoutName = insertIndex === -1 ? [...layersWithoutName, layer] : [
+          ...layersWithoutName.slice(0, insertIndex),
+          layer,
+          ...layersWithoutName.slice(insertIndex)
+        ];
+        updatedLayersWithoutName.forEach((l, idx) => {
+          l.index = updatedLayersWithoutName.length - idx;
+        });
+        layersWithName.forEach((l, idx) => {
+          l.index = layersWithName.length + updatedLayersWithoutName.length - idx;
+        });
+        const newState = {
+          layers: [...layersWithName, ...updatedLayersWithoutName]
+        };
+        console.log(
+          "MapLayerStore: New state with unnamed layer:",
+          newState.layers.length
+        );
+        return newState;
+      }
+    });
+  },
+  remove: (layer) => set((state) => {
+    return { layers: state.layers.filter((l) => l.id !== layer.id) };
+  }),
+  updateOpacity: (id, opacity) => set((state) => {
+    var index = state.layers.findIndex((l) => l.id === id);
+    if (index > -1) {
+      state.layers[index].opacity = opacity;
+    }
+    return { layers: state.layers };
+  }),
+  updateLayer: (id, updates) => set((state) => {
+    var index = state.layers.findIndex((l) => l.id === id);
+    if (index > -1) {
+      state.layers[index] = __spreadValues(__spreadValues({}, state.layers[index]), updates);
+    }
+    return { layers: state.layers };
+  }),
+  reorderLayers: (oldIndex, newIndex) => set((state) => {
+    const newLayers = [...state.layers];
+    const layersWithoutName = newLayers.filter((layer) => !(layer == null ? void 0 : layer.layerName));
+    const layersToReorder = newLayers.filter((layer) => layer == null ? void 0 : layer.layerName);
+    const reorderedLayers = arrayMove2(layersToReorder, oldIndex, newIndex);
+    reorderedLayers.forEach((layer, idx) => {
+      layer.index = reorderedLayers.length + layersWithoutName.length - idx;
+    });
+    layersWithoutName.forEach((layer, idx) => {
+      layer.index = layersWithoutName.length - idx;
+    });
+    const resultLayers = [...reorderedLayers, ...layersWithoutName];
+    return { layers: resultLayers };
+  }),
+  refresh: () => set((state) => {
+    return { layers: state.layers };
+  }),
+  selectedLayer: "",
+  setSelectedLayer: (selectedLayer) => set({ selectedLayer }),
+  layerOpacity: 0,
+  setLayerOpacity: (layerOpacity) => set({ layerOpacity })
+}));
+
+// src/Components/Generic/Map/LayerSwitcher.tsx
+import { Dialog as Dialog4, Transition as Transition3 } from "@headlessui/react";
+import { Fragment as Fragment29 } from "react";
+import { XMarkIcon as XMarkIcon2 } from "@heroicons/react/24/outline";
+import { Disclosure as Disclosure2 } from "@headlessui/react";
+import { ChevronDown as ChevronDown2 } from "lucide-react";
+import { v4 as v42 } from "uuid";
+import { Fragment as Fragment30, jsx as jsx79, jsxs as jsxs57 } from "react/jsx-runtime";
+var LayerInfoIcon2 = memo16(({ onClick }) => /* @__PURE__ */ jsxs57(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "fill-tag-light-purple cursor-pointer",
+    onClick,
+    role: "button",
+    "aria-label": "Show layer information",
+    children: [
+      /* @__PURE__ */ jsx79("circle", { cx: "10", cy: "10", r: "10", fill: "text-tag-light-purple" }),
+      /* @__PURE__ */ jsx79(
+        "path",
+        {
+          d: "M9.24963 14V7.592H10.7496V14H9.24963ZM10.0056 6.536C9.72563 6.536 9.49363 6.448 9.30963 6.272C9.13363 6.096 9.04563 5.884 9.04563 5.636C9.04563 5.38 9.13363 5.168 9.30963 5C9.49363 4.824 9.72563 4.736 10.0056 4.736C10.2856 4.736 10.5136 4.82 10.6896 4.988C10.8736 5.148 10.9656 5.352 10.9656 5.6C10.9656 5.864 10.8776 6.088 10.7016 6.272C10.5256 6.448 10.2936 6.536 10.0056 6.536Z",
+          fill: "white"
+        }
+      )
+    ]
+  }
+));
+LayerInfoIcon2.displayName = "LayerInfoIcon";
+var LayerItemInfo2 = memo16(({ layer, open, setOpen }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+  const isCustomLayer = "isCustom" in layer && layer.isCustom;
+  const mapDetails = [
+    {
+      label: "Source",
+      value: ((_b = (_a = layer.layerInfo) == null ? void 0 : _a.sourceLink) == null ? void 0 : _b.href) ? /* @__PURE__ */ jsx79(
+        SimpleLink2,
+        {
+          link: {
+            title: (_c = layer.layerInfo.sourceLink.name) != null ? _c : "",
+            href: (_d = layer.layerInfo.sourceLink.href) != null ? _d : "#",
+            isNewTab: !((_e = layer.layerInfo.sourceLink.href) == null ? void 0 : _e.startsWith("/"))
+          }
+        }
+      ) : ((_f = layer.layerInfo) == null ? void 0 : _f.source) || (isCustomLayer ? "Custom Layer" : void 0)
+    },
+    {
+      label: "Geographic Coverage",
+      value: (_g = layer.layerInfo) == null ? void 0 : _g.geographicCoverage
+    },
+    {
+      label: "Citation",
+      value: ((_i = (_h = layer.layerInfo) == null ? void 0 : _h.citationLink) == null ? void 0 : _i.href) ? /* @__PURE__ */ jsx79(
+        SimpleLink2,
+        {
+          link: {
+            title: (_j = layer.layerInfo.citationLink.name) != null ? _j : "",
+            href: (_k = layer.layerInfo.citationLink.href) != null ? _k : "#",
+            isNewTab: !((_l = layer.layerInfo.citationLink.href) == null ? void 0 : _l.startsWith("/"))
+          }
+        }
+      ) : (_m = layer.layerInfo) == null ? void 0 : _m.citation
+    },
+    ...isCustomLayer ? [
+      { label: "Layer Type", value: layer.type },
+      { label: "Custom Layer", value: "Yes" }
+    ] : []
+  ];
+  return /* @__PURE__ */ jsx79(Transition3.Root, { show: open, as: Fragment29, "data-component": "ResourceView", children: /* @__PURE__ */ jsxs57(Dialog4, { as: "div", className: "relative z-20", onClose: setOpen, children: [
+    /* @__PURE__ */ jsx79(
+      Transition3.Child,
+      {
+        as: Fragment29,
+        enter: "ease-out duration-300",
+        enterFrom: "opacity-0",
+        enterTo: "opacity-100",
+        leave: "ease-in duration-200",
+        leaveFrom: "opacity-100",
+        leaveTo: "opacity-0",
+        children: /* @__PURE__ */ jsx79("div", { className: "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" })
+      }
+    ),
+    /* @__PURE__ */ jsx79("div", { className: "fixed z-10 inset-0 overflow-y-auto text-black", children: /* @__PURE__ */ jsx79("div", { className: "flex items-end sm:items-center justify-center min-h-full text-center lg:p-4", children: /* @__PURE__ */ jsx79(
+      Transition3.Child,
+      {
+        as: Fragment29,
+        enter: "ease-out duration-300",
+        enterFrom: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+        enterTo: "opacity-100 translate-y-0 sm:scale-100",
+        leave: "ease-in duration-200",
+        leaveFrom: "opacity-100 translate-y-0 sm:scale-100",
+        leaveTo: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+        children: /* @__PURE__ */ jsxs57(Dialog4.Panel, { className: "w-screen relative bg-white rounded-t-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all lg:rounded-lg sm:my-8 sm:w-[740px] sm:p-10", children: [
+          /* @__PURE__ */ jsx79("div", { className: "absolute top-0 right-0 pt-3 pr-3 lg:pt-10 lg:pr-10", children: /* @__PURE__ */ jsxs57(
+            "button",
+            {
+              type: "button",
+              className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2",
+              onClick: () => setOpen(false),
+              children: [
+                /* @__PURE__ */ jsx79("span", { className: "sr-only", children: "Close" }),
+                /* @__PURE__ */ jsx79(XMarkIcon2, { className: "h-6 w-6", "aria-hidden": "true" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs57("div", { className: "flex flex-col items-start justify-center", children: [
+            /* @__PURE__ */ jsx79("div", { className: "text-lg font-semibold lg:text-[2rem] lg:font-light leading-[120%]", children: layer.title }),
+            /* @__PURE__ */ jsxs57("div", { className: "w-full pt-6 space-y-4 text-grey leading-[130%]", children: [
+              ((_n = layer.layerInfo) == null ? void 0 : _n.overview) && /* @__PURE__ */ jsxs57(Fragment30, { children: [
+                /* @__PURE__ */ jsx79("div", { className: "uppercase text-sm", children: "Overview" }),
+                /* @__PURE__ */ jsx79("div", { className: "text-sm lg:text-base font-normal", children: (_o = layer.layerInfo) == null ? void 0 : _o.overview })
+              ] }),
+              mapDetails.map(
+                (detail) => detail.value && /* @__PURE__ */ jsx79(
+                  KeyInfoItem2,
+                  {
+                    label: detail.label,
+                    value: detail.value
+                  },
+                  v42()
+                )
+              )
+            ] })
+          ] })
+        ] })
+      }
+    ) }) })
+  ] }) });
+});
+LayerItemInfo2.displayName = "LayerItemInfo";
+var LayerItem2 = memo16(
+  ({
+    layer,
+    isActive,
+    onToggle,
+    openHoverCardId,
+    onInfoClick
+  }) => {
+    var _a;
+    const [open, setOpen] = useState36(false);
+    return /* @__PURE__ */ jsxs57("li", { className: "bg-white rounded-xl p-4 lg:w-[310px] lg:p-0", children: [
+      /* @__PURE__ */ jsxs57("div", { className: "flex flex-row justify-between items-center", children: [
+        /* @__PURE__ */ jsxs57("div", { className: "flex flex-row justify-start items-center space-x-2", children: [
+          /* @__PURE__ */ jsx79("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsx79(
+            Switch2,
+            {
+              checked: isActive,
+              onCheckedChange: onToggle,
+              "aria-label": `Toggle ${layer.title} layer`
+            }
+          ) }),
+          /* @__PURE__ */ jsx79("div", { className: " text-base font-medium leading-[120%] break-words max-w-[210px] lg:max-w-none md:max-w-none", children: layer.title }),
+          /* @__PURE__ */ jsx79("div", { className: "block lg:hidden", children: /* @__PURE__ */ jsx79(LayerInfoIcon2, { onClick: () => setOpen(true) }) })
+        ] }),
+        /* @__PURE__ */ jsx79("div", { className: "block lg:hidden", children: /* @__PURE__ */ jsx79(
+          Switch2,
+          {
+            checked: isActive,
+            onCheckedChange: onToggle,
+            "aria-label": `Toggle ${layer.title} layer`
+          }
+        ) }),
+        /* @__PURE__ */ jsx79("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsxs57(
+          HoverCard2,
+          {
+            open: openHoverCardId === layer.id,
+            onOpenChange: () => onInfoClick(layer.id),
+            children: [
+              /* @__PURE__ */ jsx79(HoverCardTrigger2, { asChild: true, children: /* @__PURE__ */ jsx79(
+                "div",
+                {
+                  onClick: () => onInfoClick(layer.id),
+                  className: "cursor-pointer",
+                  children: /* @__PURE__ */ jsx79(LayerInfoIcon2, { onClick: () => setOpen(true) })
+                }
+              ) }),
+              /* @__PURE__ */ jsx79(HoverCardContent2, { className: "w-80 rounded-2xl ", children: /* @__PURE__ */ jsxs57("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsx79("h4", { className: "text-sm font-semibold", children: layer.title }),
+                /* @__PURE__ */ jsx79("p", { className: "text-sm text-grey", children: ((_a = layer.layerInfo) == null ? void 0 : _a.hoverCardText) || "" })
+              ] }) })
+            ]
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx79(LayerItemInfo2, { layer, open, setOpen })
+    ] });
+  }
+);
+LayerItem2.displayName = "LayerItem";
+var LayerSwitcher2 = memo16(({ mapMenuItems, customLayers }) => {
+  const store = useMapLayerStore2();
+  const [openHoverCardId, setOpenHoverCardId] = useState36(null);
+  useEffect34(() => {
+    if (store.layers.length == 0 && customLayers.length > 0)
+      customLayers.map((layer) => store.add(layer));
+  }, []);
+  const handleToggle = useCallback12(
+    (layer) => {
+      store.layers.findIndex((l) => l.id === layer.id) !== -1 ? store.remove(layer) : store.add(layer);
+    },
+    [store]
+  );
+  const handleInfoClick = useCallback12(
+    (id) => {
+      setOpenHoverCardId(openHoverCardId === id ? null : id);
+    },
+    [openHoverCardId]
+  );
+  const hasRegularLayers = (mapMenuItems == null ? void 0 : mapMenuItems.length) > 0;
+  const hasCustomLayers = customLayers.length > 0;
+  if (!hasRegularLayers && !hasCustomLayers) {
+    return /* @__PURE__ */ jsx79("div", { children: "No map layers available" });
+  }
+  return /* @__PURE__ */ jsx79("div", { className: "lg:max-h-[calc(100dvh-15rem)] overflow-y-auto pr-1", children: mapMenuItems == null ? void 0 : mapMenuItems.map((menu, index) => {
+    var _a;
+    return /* @__PURE__ */ jsxs57("div", { children: [
+      /* @__PURE__ */ jsxs57("div", { className: "hidden lg:block", children: [
+        /* @__PURE__ */ jsx79(
+          Disclosure2,
+          {
+            "data-component": menu.title,
+            defaultOpen: mapMenuItems.length === 1,
+            children: ({ open }) => {
+              var _a2;
+              return /* @__PURE__ */ jsxs57(Fragment30, { children: [
+                /* @__PURE__ */ jsxs57(Disclosure2.Button, { className: "w-[310px] flex-row flex justify-between items-center gap-2 border-zinc-300 ", children: [
+                  /* @__PURE__ */ jsx79("span", { className: "text-sm font-normal uppercase text-grey leading-[130%]", children: menu.title }),
+                  /* @__PURE__ */ jsx79(
+                    ChevronDown2,
+                    {
+                      className: ` ${open ? "rotate-180 transform" : ""} h-7 w-7 `,
+                      stroke: "grey"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx79(Disclosure2.Panel, { className: "space-y-2", children: /* @__PURE__ */ jsx79("div", { children: /* @__PURE__ */ jsxs57("ul", { className: "pt-2 space-y-2", children: [
+                  index === 0 && hasCustomLayers && customLayers.map((layer) => /* @__PURE__ */ jsx79(
+                    LayerItem2,
+                    {
+                      layer,
+                      isActive: store.layers.findIndex(
+                        (l) => l.id === layer.id
+                      ) !== -1,
+                      onToggle: () => {
+                        handleToggle(layer);
+                        if (layer.ontoggle)
+                          layer.ontoggle();
+                      },
+                      openHoverCardId,
+                      onInfoClick: handleInfoClick
+                    },
+                    layer.id
+                  )),
+                  (_a2 = menu.subMenus) == null ? void 0 : _a2.map((layer) => /* @__PURE__ */ jsx79(
+                    LayerItem2,
+                    {
+                      layer,
+                      isActive: store.layers.findIndex(
+                        (l) => l.id === layer.id
+                      ) !== -1,
+                      onToggle: () => handleToggle(layer),
+                      openHoverCardId,
+                      onInfoClick: handleInfoClick
+                    },
+                    layer.id
+                  ))
+                ] }) }) })
+              ] });
+            }
+          }
+        ),
+        index !== mapMenuItems.length - 1 && /* @__PURE__ */ jsx79("div", { className: "my-4 h-px bg-grey-light" })
+      ] }),
+      /* @__PURE__ */ jsxs57("div", { className: "block lg:hidden px-5 pt-6", children: [
+        /* @__PURE__ */ jsx79("span", { className: "text-sm font-normal uppercase text-grey leading-[130%]", children: menu.title }),
+        /* @__PURE__ */ jsx79("div", { className: "space-y-2", children: /* @__PURE__ */ jsxs57("ul", { className: "pt-2 space-y-2", children: [
+          index === 0 && hasCustomLayers && customLayers.map((layer) => /* @__PURE__ */ jsx79(
+            LayerItem2,
+            {
+              layer,
+              isActive: store.layers.findIndex((l) => l.id === layer.id) !== -1,
+              onToggle: () => handleToggle(layer),
+              openHoverCardId,
+              onInfoClick: handleInfoClick
+            },
+            layer.id
+          )),
+          (_a = menu.subMenus) == null ? void 0 : _a.map((layer) => /* @__PURE__ */ jsx79(
+            LayerItem2,
+            {
+              layer,
+              isActive: store.layers.findIndex((l) => l.id === layer.id) !== -1,
+              onToggle: () => handleToggle(layer),
+              openHoverCardId,
+              onInfoClick: handleInfoClick
+            },
+            layer.id
+          ))
+        ] }) })
+      ] })
+    ] }, menu.id);
+  }) });
+});
+LayerSwitcher2.displayName = "LayerSwitcher";
+
+// src/Components/Generic/Map/MapControlToolbar.tsx
+import * as Popover7 from "@radix-ui/react-popover";
+import {
+  Tooltip as Tooltip4,
+  TooltipContent as TooltipContent2,
+  TooltipProvider as TooltipProvider2,
+  TooltipTrigger as TooltipTrigger2
+} from "@geowiki/ui";
+
+// ../../node_modules/clsx/dist/clsx.m.js
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e)
+    n += e;
+  else if ("object" == typeof e)
+    if (Array.isArray(e))
+      for (t = 0; t < e.length; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    else
+      for (t in e)
+        e[t] && (n && (n += " "), n += t);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = ""; f < arguments.length; )
+    (e = arguments[f++]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// ../../node_modules/tailwind-merge/dist/lib/tw-join.mjs
+function twJoin() {
+  var index = 0;
+  var argument;
+  var resolvedValue;
+  var string4 = "";
+  while (index < arguments.length) {
+    if (argument = arguments[index++]) {
+      if (resolvedValue = toValue(argument)) {
+        string4 && (string4 += " ");
+        string4 += resolvedValue;
+      }
+    }
+  }
+  return string4;
+}
+function toValue(mix) {
+  if (typeof mix === "string") {
+    return mix;
+  }
+  var resolvedValue;
+  var string4 = "";
+  for (var k = 0; k < mix.length; k++) {
+    if (mix[k]) {
+      if (resolvedValue = toValue(mix[k])) {
+        string4 && (string4 += " ");
+        string4 += resolvedValue;
+      }
+    }
+  }
+  return string4;
+}
+
+// ../../node_modules/tailwind-merge/dist/lib/class-utils.mjs
+var CLASS_PART_SEPARATOR = "-";
+function createClassUtils(config) {
+  var classMap = createClassMap(config);
+  var conflictingClassGroups = config.conflictingClassGroups, _config$conflictingCl = config.conflictingClassGroupModifiers, conflictingClassGroupModifiers = _config$conflictingCl === void 0 ? {} : _config$conflictingCl;
+  function getClassGroupId(className) {
+    var classParts = className.split(CLASS_PART_SEPARATOR);
+    if (classParts[0] === "" && classParts.length !== 1) {
+      classParts.shift();
+    }
+    return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
+  }
+  function getConflictingClassGroupIds(classGroupId, hasPostfixModifier) {
+    var conflicts = conflictingClassGroups[classGroupId] || [];
+    if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
+      return [].concat(conflicts, conflictingClassGroupModifiers[classGroupId]);
+    }
+    return conflicts;
+  }
+  return {
+    getClassGroupId,
+    getConflictingClassGroupIds
+  };
+}
+function getGroupRecursive(classParts, classPartObject) {
+  var _a;
+  if (classParts.length === 0) {
+    return classPartObject.classGroupId;
+  }
+  var currentClassPart = classParts[0];
+  var nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
+  var classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : void 0;
+  if (classGroupFromNextClassPart) {
+    return classGroupFromNextClassPart;
+  }
+  if (classPartObject.validators.length === 0) {
+    return void 0;
+  }
+  var classRest = classParts.join(CLASS_PART_SEPARATOR);
+  return (_a = classPartObject.validators.find(function(_ref) {
+    var validator = _ref.validator;
+    return validator(classRest);
+  })) == null ? void 0 : _a.classGroupId;
+}
+var arbitraryPropertyRegex = /^\[(.+)\]$/;
+function getGroupIdForArbitraryProperty(className) {
+  if (arbitraryPropertyRegex.test(className)) {
+    var arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
+    var property = arbitraryPropertyClassName == null ? void 0 : arbitraryPropertyClassName.substring(0, arbitraryPropertyClassName.indexOf(":"));
+    if (property) {
+      return "arbitrary.." + property;
+    }
+  }
+}
+function createClassMap(config) {
+  var theme = config.theme, prefix = config.prefix;
+  var classMap = {
+    nextPart: /* @__PURE__ */ new Map(),
+    validators: []
+  };
+  var prefixedClassGroupEntries = getPrefixedClassGroupEntries(Object.entries(config.classGroups), prefix);
+  prefixedClassGroupEntries.forEach(function(_ref2) {
+    var classGroupId = _ref2[0], classGroup = _ref2[1];
+    processClassesRecursively(classGroup, classMap, classGroupId, theme);
+  });
+  return classMap;
+}
+function processClassesRecursively(classGroup, classPartObject, classGroupId, theme) {
+  classGroup.forEach(function(classDefinition) {
+    if (typeof classDefinition === "string") {
+      var classPartObjectToEdit = classDefinition === "" ? classPartObject : getPart(classPartObject, classDefinition);
+      classPartObjectToEdit.classGroupId = classGroupId;
+      return;
+    }
+    if (typeof classDefinition === "function") {
+      if (isThemeGetter(classDefinition)) {
+        processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
+        return;
+      }
+      classPartObject.validators.push({
+        validator: classDefinition,
+        classGroupId
+      });
+      return;
+    }
+    Object.entries(classDefinition).forEach(function(_ref3) {
+      var key = _ref3[0], classGroup2 = _ref3[1];
+      processClassesRecursively(classGroup2, getPart(classPartObject, key), classGroupId, theme);
+    });
+  });
+}
+function getPart(classPartObject, path) {
+  var currentClassPartObject = classPartObject;
+  path.split(CLASS_PART_SEPARATOR).forEach(function(pathPart) {
+    if (!currentClassPartObject.nextPart.has(pathPart)) {
+      currentClassPartObject.nextPart.set(pathPart, {
+        nextPart: /* @__PURE__ */ new Map(),
+        validators: []
+      });
+    }
+    currentClassPartObject = currentClassPartObject.nextPart.get(pathPart);
+  });
+  return currentClassPartObject;
+}
+function isThemeGetter(func) {
+  return func.isThemeGetter;
+}
+function getPrefixedClassGroupEntries(classGroupEntries, prefix) {
+  if (!prefix) {
+    return classGroupEntries;
+  }
+  return classGroupEntries.map(function(_ref4) {
+    var classGroupId = _ref4[0], classGroup = _ref4[1];
+    var prefixedClassGroup = classGroup.map(function(classDefinition) {
+      if (typeof classDefinition === "string") {
+        return prefix + classDefinition;
+      }
+      if (typeof classDefinition === "object") {
+        return Object.fromEntries(Object.entries(classDefinition).map(function(_ref5) {
+          var key = _ref5[0], value = _ref5[1];
+          return [prefix + key, value];
+        }));
+      }
+      return classDefinition;
+    });
+    return [classGroupId, prefixedClassGroup];
+  });
+}
+
+// ../../node_modules/tailwind-merge/dist/lib/lru-cache.mjs
+function createLruCache(maxCacheSize) {
+  if (maxCacheSize < 1) {
+    return {
+      get: function get() {
+        return void 0;
+      },
+      set: function set() {
+      }
+    };
+  }
+  var cacheSize = 0;
+  var cache = /* @__PURE__ */ new Map();
+  var previousCache = /* @__PURE__ */ new Map();
+  function update(key, value) {
+    cache.set(key, value);
+    cacheSize++;
+    if (cacheSize > maxCacheSize) {
+      cacheSize = 0;
+      previousCache = cache;
+      cache = /* @__PURE__ */ new Map();
+    }
+  }
+  return {
+    get: function get(key) {
+      var value = cache.get(key);
+      if (value !== void 0) {
+        return value;
+      }
+      if ((value = previousCache.get(key)) !== void 0) {
+        update(key, value);
+        return value;
+      }
+    },
+    set: function set(key, value) {
+      if (cache.has(key)) {
+        cache.set(key, value);
+      } else {
+        update(key, value);
+      }
+    }
+  };
+}
+
+// ../../node_modules/tailwind-merge/dist/lib/modifier-utils.mjs
+var IMPORTANT_MODIFIER = "!";
+function createSplitModifiers(config) {
+  var separator = config.separator || ":";
+  var isSeparatorSingleCharacter = separator.length === 1;
+  var firstSeparatorCharacter = separator[0];
+  var separatorLength = separator.length;
+  return function splitModifiers(className) {
+    var modifiers = [];
+    var bracketDepth = 0;
+    var modifierStart = 0;
+    var postfixModifierPosition;
+    for (var index = 0; index < className.length; index++) {
+      var currentCharacter = className[index];
+      if (bracketDepth === 0) {
+        if (currentCharacter === firstSeparatorCharacter && (isSeparatorSingleCharacter || className.slice(index, index + separatorLength) === separator)) {
+          modifiers.push(className.slice(modifierStart, index));
+          modifierStart = index + separatorLength;
+          continue;
+        }
+        if (currentCharacter === "/") {
+          postfixModifierPosition = index;
+          continue;
+        }
+      }
+      if (currentCharacter === "[") {
+        bracketDepth++;
+      } else if (currentCharacter === "]") {
+        bracketDepth--;
+      }
+    }
+    var baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.substring(modifierStart);
+    var hasImportantModifier = baseClassNameWithImportantModifier.startsWith(IMPORTANT_MODIFIER);
+    var baseClassName = hasImportantModifier ? baseClassNameWithImportantModifier.substring(1) : baseClassNameWithImportantModifier;
+    var maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : void 0;
+    return {
+      modifiers,
+      hasImportantModifier,
+      baseClassName,
+      maybePostfixModifierPosition
+    };
+  };
+}
+function sortModifiers(modifiers) {
+  if (modifiers.length <= 1) {
+    return modifiers;
+  }
+  var sortedModifiers = [];
+  var unsortedModifiers = [];
+  modifiers.forEach(function(modifier) {
+    var isArbitraryVariant = modifier[0] === "[";
+    if (isArbitraryVariant) {
+      sortedModifiers.push.apply(sortedModifiers, unsortedModifiers.sort().concat([modifier]));
+      unsortedModifiers = [];
+    } else {
+      unsortedModifiers.push(modifier);
+    }
+  });
+  sortedModifiers.push.apply(sortedModifiers, unsortedModifiers.sort());
+  return sortedModifiers;
+}
+
+// ../../node_modules/tailwind-merge/dist/lib/config-utils.mjs
+function createConfigUtils(config) {
+  return __spreadValues({
+    cache: createLruCache(config.cacheSize),
+    splitModifiers: createSplitModifiers(config)
+  }, createClassUtils(config));
+}
+
+// ../../node_modules/tailwind-merge/dist/lib/merge-classlist.mjs
+var SPLIT_CLASSES_REGEX = /\s+/;
+function mergeClassList(classList, configUtils) {
+  var splitModifiers = configUtils.splitModifiers, getClassGroupId = configUtils.getClassGroupId, getConflictingClassGroupIds = configUtils.getConflictingClassGroupIds;
+  var classGroupsInConflict = /* @__PURE__ */ new Set();
+  return classList.trim().split(SPLIT_CLASSES_REGEX).map(function(originalClassName) {
+    var _splitModifiers = splitModifiers(originalClassName), modifiers = _splitModifiers.modifiers, hasImportantModifier = _splitModifiers.hasImportantModifier, baseClassName = _splitModifiers.baseClassName, maybePostfixModifierPosition = _splitModifiers.maybePostfixModifierPosition;
+    var classGroupId = getClassGroupId(maybePostfixModifierPosition ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
+    var hasPostfixModifier = Boolean(maybePostfixModifierPosition);
+    if (!classGroupId) {
+      if (!maybePostfixModifierPosition) {
+        return {
+          isTailwindClass: false,
+          originalClassName
+        };
+      }
+      classGroupId = getClassGroupId(baseClassName);
+      if (!classGroupId) {
+        return {
+          isTailwindClass: false,
+          originalClassName
+        };
+      }
+      hasPostfixModifier = false;
+    }
+    var variantModifier = sortModifiers(modifiers).join(":");
+    var modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
+    return {
+      isTailwindClass: true,
+      modifierId,
+      classGroupId,
+      originalClassName,
+      hasPostfixModifier
+    };
+  }).reverse().filter(function(parsed) {
+    if (!parsed.isTailwindClass) {
+      return true;
+    }
+    var modifierId = parsed.modifierId, classGroupId = parsed.classGroupId, hasPostfixModifier = parsed.hasPostfixModifier;
+    var classId = modifierId + classGroupId;
+    if (classGroupsInConflict.has(classId)) {
+      return false;
+    }
+    classGroupsInConflict.add(classId);
+    getConflictingClassGroupIds(classGroupId, hasPostfixModifier).forEach(function(group) {
+      return classGroupsInConflict.add(modifierId + group);
+    });
+    return true;
+  }).reverse().map(function(parsed) {
+    return parsed.originalClassName;
+  }).join(" ");
+}
+
+// ../../node_modules/tailwind-merge/dist/lib/create-tailwind-merge.mjs
+function createTailwindMerge() {
+  for (var _len = arguments.length, createConfig = new Array(_len), _key = 0; _key < _len; _key++) {
+    createConfig[_key] = arguments[_key];
+  }
+  var configUtils;
+  var cacheGet;
+  var cacheSet;
+  var functionToCall = initTailwindMerge;
+  function initTailwindMerge(classList) {
+    var firstCreateConfig = createConfig[0], restCreateConfig = createConfig.slice(1);
+    var config = restCreateConfig.reduce(function(previousConfig, createConfigCurrent) {
+      return createConfigCurrent(previousConfig);
+    }, firstCreateConfig());
+    configUtils = createConfigUtils(config);
+    cacheGet = configUtils.cache.get;
+    cacheSet = configUtils.cache.set;
+    functionToCall = tailwindMerge;
+    return tailwindMerge(classList);
+  }
+  function tailwindMerge(classList) {
+    var cachedResult = cacheGet(classList);
+    if (cachedResult) {
+      return cachedResult;
+    }
+    var result = mergeClassList(classList, configUtils);
+    cacheSet(classList, result);
+    return result;
+  }
+  return function callTailwindMerge() {
+    return functionToCall(twJoin.apply(null, arguments));
+  };
+}
+
+// ../../node_modules/tailwind-merge/dist/lib/from-theme.mjs
+function fromTheme(key) {
+  var themeGetter = function themeGetter2(theme) {
+    return theme[key] || [];
+  };
+  themeGetter.isThemeGetter = true;
+  return themeGetter;
+}
+
+// ../../node_modules/tailwind-merge/dist/lib/validators.mjs
+var arbitraryValueRegex = /^\[(?:([a-z-]+):)?(.+)\]$/i;
+var fractionRegex = /^\d+\/\d+$/;
+var stringLengths = /* @__PURE__ */ new Set(["px", "full", "screen"]);
+var tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
+var lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))/;
+var shadowRegex = /^-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
+function isLength(value) {
+  return isNumber(value) || stringLengths.has(value) || fractionRegex.test(value) || isArbitraryLength(value);
+}
+function isArbitraryLength(value) {
+  return getIsArbitraryValue(value, "length", isLengthOnly);
+}
+function isArbitrarySize(value) {
+  return getIsArbitraryValue(value, "size", isNever);
+}
+function isArbitraryPosition(value) {
+  return getIsArbitraryValue(value, "position", isNever);
+}
+function isArbitraryUrl(value) {
+  return getIsArbitraryValue(value, "url", isUrl);
+}
+function isArbitraryNumber(value) {
+  return getIsArbitraryValue(value, "number", isNumber);
+}
+function isNumber(value) {
+  return !Number.isNaN(Number(value));
+}
+function isPercent(value) {
+  return value.endsWith("%") && isNumber(value.slice(0, -1));
+}
+function isInteger(value) {
+  return isIntegerOnly(value) || getIsArbitraryValue(value, "number", isIntegerOnly);
+}
+function isArbitraryValue(value) {
+  return arbitraryValueRegex.test(value);
+}
+function isAny() {
+  return true;
+}
+function isTshirtSize(value) {
+  return tshirtUnitRegex.test(value);
+}
+function isArbitraryShadow(value) {
+  return getIsArbitraryValue(value, "", isShadow);
+}
+function getIsArbitraryValue(value, label, testValue) {
+  var result = arbitraryValueRegex.exec(value);
+  if (result) {
+    if (result[1]) {
+      return result[1] === label;
+    }
+    return testValue(result[2]);
+  }
+  return false;
+}
+function isLengthOnly(value) {
+  return lengthUnitRegex.test(value);
+}
+function isNever() {
+  return false;
+}
+function isUrl(value) {
+  return value.startsWith("url(");
+}
+function isIntegerOnly(value) {
+  return Number.isInteger(Number(value));
+}
+function isShadow(value) {
+  return shadowRegex.test(value);
+}
+
+// ../../node_modules/tailwind-merge/dist/lib/default-config.mjs
+function getDefaultConfig() {
+  var colors = fromTheme("colors");
+  var spacing = fromTheme("spacing");
+  var blur = fromTheme("blur");
+  var brightness = fromTheme("brightness");
+  var borderColor = fromTheme("borderColor");
+  var borderRadius = fromTheme("borderRadius");
+  var borderSpacing = fromTheme("borderSpacing");
+  var borderWidth = fromTheme("borderWidth");
+  var contrast = fromTheme("contrast");
+  var grayscale = fromTheme("grayscale");
+  var hueRotate = fromTheme("hueRotate");
+  var invert = fromTheme("invert");
+  var gap = fromTheme("gap");
+  var gradientColorStops = fromTheme("gradientColorStops");
+  var gradientColorStopPositions = fromTheme("gradientColorStopPositions");
+  var inset = fromTheme("inset");
+  var margin = fromTheme("margin");
+  var opacity = fromTheme("opacity");
+  var padding = fromTheme("padding");
+  var saturate = fromTheme("saturate");
+  var scale = fromTheme("scale");
+  var sepia = fromTheme("sepia");
+  var skew = fromTheme("skew");
+  var space = fromTheme("space");
+  var translate = fromTheme("translate");
+  var getOverscroll = function getOverscroll2() {
+    return ["auto", "contain", "none"];
+  };
+  var getOverflow = function getOverflow2() {
+    return ["auto", "hidden", "clip", "visible", "scroll"];
+  };
+  var getSpacingWithAuto = function getSpacingWithAuto2() {
+    return ["auto", spacing];
+  };
+  var getLengthWithEmpty = function getLengthWithEmpty2() {
+    return ["", isLength];
+  };
+  var getNumberWithAutoAndArbitrary = function getNumberWithAutoAndArbitrary2() {
+    return ["auto", isNumber, isArbitraryValue];
+  };
+  var getPositions = function getPositions2() {
+    return ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"];
+  };
+  var getLineStyles = function getLineStyles2() {
+    return ["solid", "dashed", "dotted", "double", "none"];
+  };
+  var getBlendModes = function getBlendModes2() {
+    return ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity", "plus-lighter"];
+  };
+  var getAlign = function getAlign2() {
+    return ["start", "end", "center", "between", "around", "evenly", "stretch"];
+  };
+  var getZeroAndEmpty = function getZeroAndEmpty2() {
+    return ["", "0", isArbitraryValue];
+  };
+  var getBreaks = function getBreaks2() {
+    return ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"];
+  };
+  var getNumber = function getNumber2() {
+    return [isNumber, isArbitraryNumber];
+  };
+  var getNumberAndArbitrary = function getNumberAndArbitrary2() {
+    return [isNumber, isArbitraryValue];
+  };
+  return {
+    cacheSize: 500,
+    theme: {
+      colors: [isAny],
+      spacing: [isLength],
+      blur: ["none", "", isTshirtSize, isArbitraryLength],
+      brightness: getNumber(),
+      borderColor: [colors],
+      borderRadius: ["none", "", "full", isTshirtSize, isArbitraryLength],
+      borderSpacing: [spacing],
+      borderWidth: getLengthWithEmpty(),
+      contrast: getNumber(),
+      grayscale: getZeroAndEmpty(),
+      hueRotate: getNumberAndArbitrary(),
+      invert: getZeroAndEmpty(),
+      gap: [spacing],
+      gradientColorStops: [colors],
+      gradientColorStopPositions: [isPercent, isArbitraryLength],
+      inset: getSpacingWithAuto(),
+      margin: getSpacingWithAuto(),
+      opacity: getNumber(),
+      padding: [spacing],
+      saturate: getNumber(),
+      scale: getNumber(),
+      sepia: getZeroAndEmpty(),
+      skew: getNumberAndArbitrary(),
+      space: [spacing],
+      translate: [spacing]
+    },
+    classGroups: {
+      // Layout
+      /**
+       * Aspect Ratio
+       * @see https://tailwindcss.com/docs/aspect-ratio
+       */
+      aspect: [{
+        aspect: ["auto", "square", "video", isArbitraryValue]
+      }],
+      /**
+       * Container
+       * @see https://tailwindcss.com/docs/container
+       */
+      container: ["container"],
+      /**
+       * Columns
+       * @see https://tailwindcss.com/docs/columns
+       */
+      columns: [{
+        columns: [isTshirtSize]
+      }],
+      /**
+       * Break After
+       * @see https://tailwindcss.com/docs/break-after
+       */
+      "break-after": [{
+        "break-after": getBreaks()
+      }],
+      /**
+       * Break Before
+       * @see https://tailwindcss.com/docs/break-before
+       */
+      "break-before": [{
+        "break-before": getBreaks()
+      }],
+      /**
+       * Break Inside
+       * @see https://tailwindcss.com/docs/break-inside
+       */
+      "break-inside": [{
+        "break-inside": ["auto", "avoid", "avoid-page", "avoid-column"]
+      }],
+      /**
+       * Box Decoration Break
+       * @see https://tailwindcss.com/docs/box-decoration-break
+       */
+      "box-decoration": [{
+        "box-decoration": ["slice", "clone"]
+      }],
+      /**
+       * Box Sizing
+       * @see https://tailwindcss.com/docs/box-sizing
+       */
+      box: [{
+        box: ["border", "content"]
+      }],
+      /**
+       * Display
+       * @see https://tailwindcss.com/docs/display
+       */
+      display: ["block", "inline-block", "inline", "flex", "inline-flex", "table", "inline-table", "table-caption", "table-cell", "table-column", "table-column-group", "table-footer-group", "table-header-group", "table-row-group", "table-row", "flow-root", "grid", "inline-grid", "contents", "list-item", "hidden"],
+      /**
+       * Floats
+       * @see https://tailwindcss.com/docs/float
+       */
+      "float": [{
+        "float": ["right", "left", "none"]
+      }],
+      /**
+       * Clear
+       * @see https://tailwindcss.com/docs/clear
+       */
+      clear: [{
+        clear: ["left", "right", "both", "none"]
+      }],
+      /**
+       * Isolation
+       * @see https://tailwindcss.com/docs/isolation
+       */
+      isolation: ["isolate", "isolation-auto"],
+      /**
+       * Object Fit
+       * @see https://tailwindcss.com/docs/object-fit
+       */
+      "object-fit": [{
+        object: ["contain", "cover", "fill", "none", "scale-down"]
+      }],
+      /**
+       * Object Position
+       * @see https://tailwindcss.com/docs/object-position
+       */
+      "object-position": [{
+        object: [].concat(getPositions(), [isArbitraryValue])
+      }],
+      /**
+       * Overflow
+       * @see https://tailwindcss.com/docs/overflow
+       */
+      overflow: [{
+        overflow: getOverflow()
+      }],
+      /**
+       * Overflow X
+       * @see https://tailwindcss.com/docs/overflow
+       */
+      "overflow-x": [{
+        "overflow-x": getOverflow()
+      }],
+      /**
+       * Overflow Y
+       * @see https://tailwindcss.com/docs/overflow
+       */
+      "overflow-y": [{
+        "overflow-y": getOverflow()
+      }],
+      /**
+       * Overscroll Behavior
+       * @see https://tailwindcss.com/docs/overscroll-behavior
+       */
+      overscroll: [{
+        overscroll: getOverscroll()
+      }],
+      /**
+       * Overscroll Behavior X
+       * @see https://tailwindcss.com/docs/overscroll-behavior
+       */
+      "overscroll-x": [{
+        "overscroll-x": getOverscroll()
+      }],
+      /**
+       * Overscroll Behavior Y
+       * @see https://tailwindcss.com/docs/overscroll-behavior
+       */
+      "overscroll-y": [{
+        "overscroll-y": getOverscroll()
+      }],
+      /**
+       * Position
+       * @see https://tailwindcss.com/docs/position
+       */
+      position: ["static", "fixed", "absolute", "relative", "sticky"],
+      /**
+       * Top / Right / Bottom / Left
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      inset: [{
+        inset: [inset]
+      }],
+      /**
+       * Right / Left
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      "inset-x": [{
+        "inset-x": [inset]
+      }],
+      /**
+       * Top / Bottom
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      "inset-y": [{
+        "inset-y": [inset]
+      }],
+      /**
+       * Start
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      start: [{
+        start: [inset]
+      }],
+      /**
+       * End
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      end: [{
+        end: [inset]
+      }],
+      /**
+       * Top
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      top: [{
+        top: [inset]
+      }],
+      /**
+       * Right
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      right: [{
+        right: [inset]
+      }],
+      /**
+       * Bottom
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      bottom: [{
+        bottom: [inset]
+      }],
+      /**
+       * Left
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      left: [{
+        left: [inset]
+      }],
+      /**
+       * Visibility
+       * @see https://tailwindcss.com/docs/visibility
+       */
+      visibility: ["visible", "invisible", "collapse"],
+      /**
+       * Z-Index
+       * @see https://tailwindcss.com/docs/z-index
+       */
+      z: [{
+        z: ["auto", isInteger]
+      }],
+      // Flexbox and Grid
+      /**
+       * Flex Basis
+       * @see https://tailwindcss.com/docs/flex-basis
+       */
+      basis: [{
+        basis: [spacing]
+      }],
+      /**
+       * Flex Direction
+       * @see https://tailwindcss.com/docs/flex-direction
+       */
+      "flex-direction": [{
+        flex: ["row", "row-reverse", "col", "col-reverse"]
+      }],
+      /**
+       * Flex Wrap
+       * @see https://tailwindcss.com/docs/flex-wrap
+       */
+      "flex-wrap": [{
+        flex: ["wrap", "wrap-reverse", "nowrap"]
+      }],
+      /**
+       * Flex
+       * @see https://tailwindcss.com/docs/flex
+       */
+      flex: [{
+        flex: ["1", "auto", "initial", "none", isArbitraryValue]
+      }],
+      /**
+       * Flex Grow
+       * @see https://tailwindcss.com/docs/flex-grow
+       */
+      grow: [{
+        grow: getZeroAndEmpty()
+      }],
+      /**
+       * Flex Shrink
+       * @see https://tailwindcss.com/docs/flex-shrink
+       */
+      shrink: [{
+        shrink: getZeroAndEmpty()
+      }],
+      /**
+       * Order
+       * @see https://tailwindcss.com/docs/order
+       */
+      order: [{
+        order: ["first", "last", "none", isInteger]
+      }],
+      /**
+       * Grid Template Columns
+       * @see https://tailwindcss.com/docs/grid-template-columns
+       */
+      "grid-cols": [{
+        "grid-cols": [isAny]
+      }],
+      /**
+       * Grid Column Start / End
+       * @see https://tailwindcss.com/docs/grid-column
+       */
+      "col-start-end": [{
+        col: ["auto", {
+          span: [isInteger]
+        }, isArbitraryValue]
+      }],
+      /**
+       * Grid Column Start
+       * @see https://tailwindcss.com/docs/grid-column
+       */
+      "col-start": [{
+        "col-start": getNumberWithAutoAndArbitrary()
+      }],
+      /**
+       * Grid Column End
+       * @see https://tailwindcss.com/docs/grid-column
+       */
+      "col-end": [{
+        "col-end": getNumberWithAutoAndArbitrary()
+      }],
+      /**
+       * Grid Template Rows
+       * @see https://tailwindcss.com/docs/grid-template-rows
+       */
+      "grid-rows": [{
+        "grid-rows": [isAny]
+      }],
+      /**
+       * Grid Row Start / End
+       * @see https://tailwindcss.com/docs/grid-row
+       */
+      "row-start-end": [{
+        row: ["auto", {
+          span: [isInteger]
+        }, isArbitraryValue]
+      }],
+      /**
+       * Grid Row Start
+       * @see https://tailwindcss.com/docs/grid-row
+       */
+      "row-start": [{
+        "row-start": getNumberWithAutoAndArbitrary()
+      }],
+      /**
+       * Grid Row End
+       * @see https://tailwindcss.com/docs/grid-row
+       */
+      "row-end": [{
+        "row-end": getNumberWithAutoAndArbitrary()
+      }],
+      /**
+       * Grid Auto Flow
+       * @see https://tailwindcss.com/docs/grid-auto-flow
+       */
+      "grid-flow": [{
+        "grid-flow": ["row", "col", "dense", "row-dense", "col-dense"]
+      }],
+      /**
+       * Grid Auto Columns
+       * @see https://tailwindcss.com/docs/grid-auto-columns
+       */
+      "auto-cols": [{
+        "auto-cols": ["auto", "min", "max", "fr", isArbitraryValue]
+      }],
+      /**
+       * Grid Auto Rows
+       * @see https://tailwindcss.com/docs/grid-auto-rows
+       */
+      "auto-rows": [{
+        "auto-rows": ["auto", "min", "max", "fr", isArbitraryValue]
+      }],
+      /**
+       * Gap
+       * @see https://tailwindcss.com/docs/gap
+       */
+      gap: [{
+        gap: [gap]
+      }],
+      /**
+       * Gap X
+       * @see https://tailwindcss.com/docs/gap
+       */
+      "gap-x": [{
+        "gap-x": [gap]
+      }],
+      /**
+       * Gap Y
+       * @see https://tailwindcss.com/docs/gap
+       */
+      "gap-y": [{
+        "gap-y": [gap]
+      }],
+      /**
+       * Justify Content
+       * @see https://tailwindcss.com/docs/justify-content
+       */
+      "justify-content": [{
+        justify: ["normal"].concat(getAlign())
+      }],
+      /**
+       * Justify Items
+       * @see https://tailwindcss.com/docs/justify-items
+       */
+      "justify-items": [{
+        "justify-items": ["start", "end", "center", "stretch"]
+      }],
+      /**
+       * Justify Self
+       * @see https://tailwindcss.com/docs/justify-self
+       */
+      "justify-self": [{
+        "justify-self": ["auto", "start", "end", "center", "stretch"]
+      }],
+      /**
+       * Align Content
+       * @see https://tailwindcss.com/docs/align-content
+       */
+      "align-content": [{
+        content: ["normal"].concat(getAlign(), ["baseline"])
+      }],
+      /**
+       * Align Items
+       * @see https://tailwindcss.com/docs/align-items
+       */
+      "align-items": [{
+        items: ["start", "end", "center", "baseline", "stretch"]
+      }],
+      /**
+       * Align Self
+       * @see https://tailwindcss.com/docs/align-self
+       */
+      "align-self": [{
+        self: ["auto", "start", "end", "center", "stretch", "baseline"]
+      }],
+      /**
+       * Place Content
+       * @see https://tailwindcss.com/docs/place-content
+       */
+      "place-content": [{
+        "place-content": [].concat(getAlign(), ["baseline"])
+      }],
+      /**
+       * Place Items
+       * @see https://tailwindcss.com/docs/place-items
+       */
+      "place-items": [{
+        "place-items": ["start", "end", "center", "baseline", "stretch"]
+      }],
+      /**
+       * Place Self
+       * @see https://tailwindcss.com/docs/place-self
+       */
+      "place-self": [{
+        "place-self": ["auto", "start", "end", "center", "stretch"]
+      }],
+      // Spacing
+      /**
+       * Padding
+       * @see https://tailwindcss.com/docs/padding
+       */
+      p: [{
+        p: [padding]
+      }],
+      /**
+       * Padding X
+       * @see https://tailwindcss.com/docs/padding
+       */
+      px: [{
+        px: [padding]
+      }],
+      /**
+       * Padding Y
+       * @see https://tailwindcss.com/docs/padding
+       */
+      py: [{
+        py: [padding]
+      }],
+      /**
+       * Padding Start
+       * @see https://tailwindcss.com/docs/padding
+       */
+      ps: [{
+        ps: [padding]
+      }],
+      /**
+       * Padding End
+       * @see https://tailwindcss.com/docs/padding
+       */
+      pe: [{
+        pe: [padding]
+      }],
+      /**
+       * Padding Top
+       * @see https://tailwindcss.com/docs/padding
+       */
+      pt: [{
+        pt: [padding]
+      }],
+      /**
+       * Padding Right
+       * @see https://tailwindcss.com/docs/padding
+       */
+      pr: [{
+        pr: [padding]
+      }],
+      /**
+       * Padding Bottom
+       * @see https://tailwindcss.com/docs/padding
+       */
+      pb: [{
+        pb: [padding]
+      }],
+      /**
+       * Padding Left
+       * @see https://tailwindcss.com/docs/padding
+       */
+      pl: [{
+        pl: [padding]
+      }],
+      /**
+       * Margin
+       * @see https://tailwindcss.com/docs/margin
+       */
+      m: [{
+        m: [margin]
+      }],
+      /**
+       * Margin X
+       * @see https://tailwindcss.com/docs/margin
+       */
+      mx: [{
+        mx: [margin]
+      }],
+      /**
+       * Margin Y
+       * @see https://tailwindcss.com/docs/margin
+       */
+      my: [{
+        my: [margin]
+      }],
+      /**
+       * Margin Start
+       * @see https://tailwindcss.com/docs/margin
+       */
+      ms: [{
+        ms: [margin]
+      }],
+      /**
+       * Margin End
+       * @see https://tailwindcss.com/docs/margin
+       */
+      me: [{
+        me: [margin]
+      }],
+      /**
+       * Margin Top
+       * @see https://tailwindcss.com/docs/margin
+       */
+      mt: [{
+        mt: [margin]
+      }],
+      /**
+       * Margin Right
+       * @see https://tailwindcss.com/docs/margin
+       */
+      mr: [{
+        mr: [margin]
+      }],
+      /**
+       * Margin Bottom
+       * @see https://tailwindcss.com/docs/margin
+       */
+      mb: [{
+        mb: [margin]
+      }],
+      /**
+       * Margin Left
+       * @see https://tailwindcss.com/docs/margin
+       */
+      ml: [{
+        ml: [margin]
+      }],
+      /**
+       * Space Between X
+       * @see https://tailwindcss.com/docs/space
+       */
+      "space-x": [{
+        "space-x": [space]
+      }],
+      /**
+       * Space Between X Reverse
+       * @see https://tailwindcss.com/docs/space
+       */
+      "space-x-reverse": ["space-x-reverse"],
+      /**
+       * Space Between Y
+       * @see https://tailwindcss.com/docs/space
+       */
+      "space-y": [{
+        "space-y": [space]
+      }],
+      /**
+       * Space Between Y Reverse
+       * @see https://tailwindcss.com/docs/space
+       */
+      "space-y-reverse": ["space-y-reverse"],
+      // Sizing
+      /**
+       * Width
+       * @see https://tailwindcss.com/docs/width
+       */
+      w: [{
+        w: ["auto", "min", "max", "fit", spacing]
+      }],
+      /**
+       * Min-Width
+       * @see https://tailwindcss.com/docs/min-width
+       */
+      "min-w": [{
+        "min-w": ["min", "max", "fit", isLength]
+      }],
+      /**
+       * Max-Width
+       * @see https://tailwindcss.com/docs/max-width
+       */
+      "max-w": [{
+        "max-w": ["0", "none", "full", "min", "max", "fit", "prose", {
+          screen: [isTshirtSize]
+        }, isTshirtSize, isArbitraryLength]
+      }],
+      /**
+       * Height
+       * @see https://tailwindcss.com/docs/height
+       */
+      h: [{
+        h: [spacing, "auto", "min", "max", "fit"]
+      }],
+      /**
+       * Min-Height
+       * @see https://tailwindcss.com/docs/min-height
+       */
+      "min-h": [{
+        "min-h": ["min", "max", "fit", isLength]
+      }],
+      /**
+       * Max-Height
+       * @see https://tailwindcss.com/docs/max-height
+       */
+      "max-h": [{
+        "max-h": [spacing, "min", "max", "fit"]
+      }],
+      // Typography
+      /**
+       * Font Size
+       * @see https://tailwindcss.com/docs/font-size
+       */
+      "font-size": [{
+        text: ["base", isTshirtSize, isArbitraryLength]
+      }],
+      /**
+       * Font Smoothing
+       * @see https://tailwindcss.com/docs/font-smoothing
+       */
+      "font-smoothing": ["antialiased", "subpixel-antialiased"],
+      /**
+       * Font Style
+       * @see https://tailwindcss.com/docs/font-style
+       */
+      "font-style": ["italic", "not-italic"],
+      /**
+       * Font Weight
+       * @see https://tailwindcss.com/docs/font-weight
+       */
+      "font-weight": [{
+        font: ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", isArbitraryNumber]
+      }],
+      /**
+       * Font Family
+       * @see https://tailwindcss.com/docs/font-family
+       */
+      "font-family": [{
+        font: [isAny]
+      }],
+      /**
+       * Font Variant Numeric
+       * @see https://tailwindcss.com/docs/font-variant-numeric
+       */
+      "fvn-normal": ["normal-nums"],
+      /**
+       * Font Variant Numeric
+       * @see https://tailwindcss.com/docs/font-variant-numeric
+       */
+      "fvn-ordinal": ["ordinal"],
+      /**
+       * Font Variant Numeric
+       * @see https://tailwindcss.com/docs/font-variant-numeric
+       */
+      "fvn-slashed-zero": ["slashed-zero"],
+      /**
+       * Font Variant Numeric
+       * @see https://tailwindcss.com/docs/font-variant-numeric
+       */
+      "fvn-figure": ["lining-nums", "oldstyle-nums"],
+      /**
+       * Font Variant Numeric
+       * @see https://tailwindcss.com/docs/font-variant-numeric
+       */
+      "fvn-spacing": ["proportional-nums", "tabular-nums"],
+      /**
+       * Font Variant Numeric
+       * @see https://tailwindcss.com/docs/font-variant-numeric
+       */
+      "fvn-fraction": ["diagonal-fractions", "stacked-fractons"],
+      /**
+       * Letter Spacing
+       * @see https://tailwindcss.com/docs/letter-spacing
+       */
+      tracking: [{
+        tracking: ["tighter", "tight", "normal", "wide", "wider", "widest", isArbitraryLength]
+      }],
+      /**
+       * Line Clamp
+       * @see https://tailwindcss.com/docs/line-clamp
+       */
+      "line-clamp": [{
+        "line-clamp": ["none", isNumber, isArbitraryNumber]
+      }],
+      /**
+       * Line Height
+       * @see https://tailwindcss.com/docs/line-height
+       */
+      leading: [{
+        leading: ["none", "tight", "snug", "normal", "relaxed", "loose", isLength]
+      }],
+      /**
+       * List Style Image
+       * @see https://tailwindcss.com/docs/list-style-image
+       */
+      "list-image": [{
+        "list-image": ["none", isArbitraryValue]
+      }],
+      /**
+       * List Style Type
+       * @see https://tailwindcss.com/docs/list-style-type
+       */
+      "list-style-type": [{
+        list: ["none", "disc", "decimal", isArbitraryValue]
+      }],
+      /**
+       * List Style Position
+       * @see https://tailwindcss.com/docs/list-style-position
+       */
+      "list-style-position": [{
+        list: ["inside", "outside"]
+      }],
+      /**
+       * Placeholder Color
+       * @deprecated since Tailwind CSS v3.0.0
+       * @see https://tailwindcss.com/docs/placeholder-color
+       */
+      "placeholder-color": [{
+        placeholder: [colors]
+      }],
+      /**
+       * Placeholder Opacity
+       * @see https://tailwindcss.com/docs/placeholder-opacity
+       */
+      "placeholder-opacity": [{
+        "placeholder-opacity": [opacity]
+      }],
+      /**
+       * Text Alignment
+       * @see https://tailwindcss.com/docs/text-align
+       */
+      "text-alignment": [{
+        text: ["left", "center", "right", "justify", "start", "end"]
+      }],
+      /**
+       * Text Color
+       * @see https://tailwindcss.com/docs/text-color
+       */
+      "text-color": [{
+        text: [colors]
+      }],
+      /**
+       * Text Opacity
+       * @see https://tailwindcss.com/docs/text-opacity
+       */
+      "text-opacity": [{
+        "text-opacity": [opacity]
+      }],
+      /**
+       * Text Decoration
+       * @see https://tailwindcss.com/docs/text-decoration
+       */
+      "text-decoration": ["underline", "overline", "line-through", "no-underline"],
+      /**
+       * Text Decoration Style
+       * @see https://tailwindcss.com/docs/text-decoration-style
+       */
+      "text-decoration-style": [{
+        decoration: [].concat(getLineStyles(), ["wavy"])
+      }],
+      /**
+       * Text Decoration Thickness
+       * @see https://tailwindcss.com/docs/text-decoration-thickness
+       */
+      "text-decoration-thickness": [{
+        decoration: ["auto", "from-font", isLength]
+      }],
+      /**
+       * Text Underline Offset
+       * @see https://tailwindcss.com/docs/text-underline-offset
+       */
+      "underline-offset": [{
+        "underline-offset": ["auto", isLength]
+      }],
+      /**
+       * Text Decoration Color
+       * @see https://tailwindcss.com/docs/text-decoration-color
+       */
+      "text-decoration-color": [{
+        decoration: [colors]
+      }],
+      /**
+       * Text Transform
+       * @see https://tailwindcss.com/docs/text-transform
+       */
+      "text-transform": ["uppercase", "lowercase", "capitalize", "normal-case"],
+      /**
+       * Text Overflow
+       * @see https://tailwindcss.com/docs/text-overflow
+       */
+      "text-overflow": ["truncate", "text-ellipsis", "text-clip"],
+      /**
+       * Text Indent
+       * @see https://tailwindcss.com/docs/text-indent
+       */
+      indent: [{
+        indent: [spacing]
+      }],
+      /**
+       * Vertical Alignment
+       * @see https://tailwindcss.com/docs/vertical-align
+       */
+      "vertical-align": [{
+        align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", isArbitraryLength]
+      }],
+      /**
+       * Whitespace
+       * @see https://tailwindcss.com/docs/whitespace
+       */
+      whitespace: [{
+        whitespace: ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces"]
+      }],
+      /**
+       * Word Break
+       * @see https://tailwindcss.com/docs/word-break
+       */
+      "break": [{
+        "break": ["normal", "words", "all", "keep"]
+      }],
+      /**
+       * Hyphens
+       * @see https://tailwindcss.com/docs/hyphens
+       */
+      hyphens: [{
+        hyphens: ["none", "manual", "auto"]
+      }],
+      /**
+       * Content
+       * @see https://tailwindcss.com/docs/content
+       */
+      content: [{
+        content: ["none", isArbitraryValue]
+      }],
+      // Backgrounds
+      /**
+       * Background Attachment
+       * @see https://tailwindcss.com/docs/background-attachment
+       */
+      "bg-attachment": [{
+        bg: ["fixed", "local", "scroll"]
+      }],
+      /**
+       * Background Clip
+       * @see https://tailwindcss.com/docs/background-clip
+       */
+      "bg-clip": [{
+        "bg-clip": ["border", "padding", "content", "text"]
+      }],
+      /**
+       * Background Opacity
+       * @deprecated since Tailwind CSS v3.0.0
+       * @see https://tailwindcss.com/docs/background-opacity
+       */
+      "bg-opacity": [{
+        "bg-opacity": [opacity]
+      }],
+      /**
+       * Background Origin
+       * @see https://tailwindcss.com/docs/background-origin
+       */
+      "bg-origin": [{
+        "bg-origin": ["border", "padding", "content"]
+      }],
+      /**
+       * Background Position
+       * @see https://tailwindcss.com/docs/background-position
+       */
+      "bg-position": [{
+        bg: [].concat(getPositions(), [isArbitraryPosition])
+      }],
+      /**
+       * Background Repeat
+       * @see https://tailwindcss.com/docs/background-repeat
+       */
+      "bg-repeat": [{
+        bg: ["no-repeat", {
+          repeat: ["", "x", "y", "round", "space"]
+        }]
+      }],
+      /**
+       * Background Size
+       * @see https://tailwindcss.com/docs/background-size
+       */
+      "bg-size": [{
+        bg: ["auto", "cover", "contain", isArbitrarySize]
+      }],
+      /**
+       * Background Image
+       * @see https://tailwindcss.com/docs/background-image
+       */
+      "bg-image": [{
+        bg: ["none", {
+          "gradient-to": ["t", "tr", "r", "br", "b", "bl", "l", "tl"]
+        }, isArbitraryUrl]
+      }],
+      /**
+       * Background Color
+       * @see https://tailwindcss.com/docs/background-color
+       */
+      "bg-color": [{
+        bg: [colors]
+      }],
+      /**
+       * Gradient Color Stops From Position
+       * @see https://tailwindcss.com/docs/gradient-color-stops
+       */
+      "gradient-from-pos": [{
+        from: [gradientColorStopPositions]
+      }],
+      /**
+       * Gradient Color Stops Via Position
+       * @see https://tailwindcss.com/docs/gradient-color-stops
+       */
+      "gradient-via-pos": [{
+        via: [gradientColorStopPositions]
+      }],
+      /**
+       * Gradient Color Stops To Position
+       * @see https://tailwindcss.com/docs/gradient-color-stops
+       */
+      "gradient-to-pos": [{
+        to: [gradientColorStopPositions]
+      }],
+      /**
+       * Gradient Color Stops From
+       * @see https://tailwindcss.com/docs/gradient-color-stops
+       */
+      "gradient-from": [{
+        from: [gradientColorStops]
+      }],
+      /**
+       * Gradient Color Stops Via
+       * @see https://tailwindcss.com/docs/gradient-color-stops
+       */
+      "gradient-via": [{
+        via: [gradientColorStops]
+      }],
+      /**
+       * Gradient Color Stops To
+       * @see https://tailwindcss.com/docs/gradient-color-stops
+       */
+      "gradient-to": [{
+        to: [gradientColorStops]
+      }],
+      // Borders
+      /**
+       * Border Radius
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      rounded: [{
+        rounded: [borderRadius]
+      }],
+      /**
+       * Border Radius Start
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      "rounded-s": [{
+        "rounded-s": [borderRadius]
+      }],
+      /**
+       * Border Radius End
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      "rounded-e": [{
+        "rounded-e": [borderRadius]
+      }],
+      /**
+       * Border Radius Top
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      "rounded-t": [{
+        "rounded-t": [borderRadius]
+      }],
+      /**
+       * Border Radius Right
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      "rounded-r": [{
+        "rounded-r": [borderRadius]
+      }],
+      /**
+       * Border Radius Bottom
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      "rounded-b": [{
+        "rounded-b": [borderRadius]
+      }],
+      /**
+       * Border Radius Left
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      "rounded-l": [{
+        "rounded-l": [borderRadius]
+      }],
+      /**
+       * Border Radius Start Start
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      "rounded-ss": [{
+        "rounded-ss": [borderRadius]
+      }],
+      /**
+       * Border Radius Start End
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      "rounded-se": [{
+        "rounded-se": [borderRadius]
+      }],
+      /**
+       * Border Radius End End
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      "rounded-ee": [{
+        "rounded-ee": [borderRadius]
+      }],
+      /**
+       * Border Radius End Start
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      "rounded-es": [{
+        "rounded-es": [borderRadius]
+      }],
+      /**
+       * Border Radius Top Left
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      "rounded-tl": [{
+        "rounded-tl": [borderRadius]
+      }],
+      /**
+       * Border Radius Top Right
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      "rounded-tr": [{
+        "rounded-tr": [borderRadius]
+      }],
+      /**
+       * Border Radius Bottom Right
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      "rounded-br": [{
+        "rounded-br": [borderRadius]
+      }],
+      /**
+       * Border Radius Bottom Left
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      "rounded-bl": [{
+        "rounded-bl": [borderRadius]
+      }],
+      /**
+       * Border Width
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      "border-w": [{
+        border: [borderWidth]
+      }],
+      /**
+       * Border Width X
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      "border-w-x": [{
+        "border-x": [borderWidth]
+      }],
+      /**
+       * Border Width Y
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      "border-w-y": [{
+        "border-y": [borderWidth]
+      }],
+      /**
+       * Border Width Start
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      "border-w-s": [{
+        "border-s": [borderWidth]
+      }],
+      /**
+       * Border Width End
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      "border-w-e": [{
+        "border-e": [borderWidth]
+      }],
+      /**
+       * Border Width Top
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      "border-w-t": [{
+        "border-t": [borderWidth]
+      }],
+      /**
+       * Border Width Right
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      "border-w-r": [{
+        "border-r": [borderWidth]
+      }],
+      /**
+       * Border Width Bottom
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      "border-w-b": [{
+        "border-b": [borderWidth]
+      }],
+      /**
+       * Border Width Left
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      "border-w-l": [{
+        "border-l": [borderWidth]
+      }],
+      /**
+       * Border Opacity
+       * @see https://tailwindcss.com/docs/border-opacity
+       */
+      "border-opacity": [{
+        "border-opacity": [opacity]
+      }],
+      /**
+       * Border Style
+       * @see https://tailwindcss.com/docs/border-style
+       */
+      "border-style": [{
+        border: [].concat(getLineStyles(), ["hidden"])
+      }],
+      /**
+       * Divide Width X
+       * @see https://tailwindcss.com/docs/divide-width
+       */
+      "divide-x": [{
+        "divide-x": [borderWidth]
+      }],
+      /**
+       * Divide Width X Reverse
+       * @see https://tailwindcss.com/docs/divide-width
+       */
+      "divide-x-reverse": ["divide-x-reverse"],
+      /**
+       * Divide Width Y
+       * @see https://tailwindcss.com/docs/divide-width
+       */
+      "divide-y": [{
+        "divide-y": [borderWidth]
+      }],
+      /**
+       * Divide Width Y Reverse
+       * @see https://tailwindcss.com/docs/divide-width
+       */
+      "divide-y-reverse": ["divide-y-reverse"],
+      /**
+       * Divide Opacity
+       * @see https://tailwindcss.com/docs/divide-opacity
+       */
+      "divide-opacity": [{
+        "divide-opacity": [opacity]
+      }],
+      /**
+       * Divide Style
+       * @see https://tailwindcss.com/docs/divide-style
+       */
+      "divide-style": [{
+        divide: getLineStyles()
+      }],
+      /**
+       * Border Color
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      "border-color": [{
+        border: [borderColor]
+      }],
+      /**
+       * Border Color X
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      "border-color-x": [{
+        "border-x": [borderColor]
+      }],
+      /**
+       * Border Color Y
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      "border-color-y": [{
+        "border-y": [borderColor]
+      }],
+      /**
+       * Border Color Top
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      "border-color-t": [{
+        "border-t": [borderColor]
+      }],
+      /**
+       * Border Color Right
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      "border-color-r": [{
+        "border-r": [borderColor]
+      }],
+      /**
+       * Border Color Bottom
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      "border-color-b": [{
+        "border-b": [borderColor]
+      }],
+      /**
+       * Border Color Left
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      "border-color-l": [{
+        "border-l": [borderColor]
+      }],
+      /**
+       * Divide Color
+       * @see https://tailwindcss.com/docs/divide-color
+       */
+      "divide-color": [{
+        divide: [borderColor]
+      }],
+      /**
+       * Outline Style
+       * @see https://tailwindcss.com/docs/outline-style
+       */
+      "outline-style": [{
+        outline: [""].concat(getLineStyles())
+      }],
+      /**
+       * Outline Offset
+       * @see https://tailwindcss.com/docs/outline-offset
+       */
+      "outline-offset": [{
+        "outline-offset": [isLength]
+      }],
+      /**
+       * Outline Width
+       * @see https://tailwindcss.com/docs/outline-width
+       */
+      "outline-w": [{
+        outline: [isLength]
+      }],
+      /**
+       * Outline Color
+       * @see https://tailwindcss.com/docs/outline-color
+       */
+      "outline-color": [{
+        outline: [colors]
+      }],
+      /**
+       * Ring Width
+       * @see https://tailwindcss.com/docs/ring-width
+       */
+      "ring-w": [{
+        ring: getLengthWithEmpty()
+      }],
+      /**
+       * Ring Width Inset
+       * @see https://tailwindcss.com/docs/ring-width
+       */
+      "ring-w-inset": ["ring-inset"],
+      /**
+       * Ring Color
+       * @see https://tailwindcss.com/docs/ring-color
+       */
+      "ring-color": [{
+        ring: [colors]
+      }],
+      /**
+       * Ring Opacity
+       * @see https://tailwindcss.com/docs/ring-opacity
+       */
+      "ring-opacity": [{
+        "ring-opacity": [opacity]
+      }],
+      /**
+       * Ring Offset Width
+       * @see https://tailwindcss.com/docs/ring-offset-width
+       */
+      "ring-offset-w": [{
+        "ring-offset": [isLength]
+      }],
+      /**
+       * Ring Offset Color
+       * @see https://tailwindcss.com/docs/ring-offset-color
+       */
+      "ring-offset-color": [{
+        "ring-offset": [colors]
+      }],
+      // Effects
+      /**
+       * Box Shadow
+       * @see https://tailwindcss.com/docs/box-shadow
+       */
+      shadow: [{
+        shadow: ["", "inner", "none", isTshirtSize, isArbitraryShadow]
+      }],
+      /**
+       * Box Shadow Color
+       * @see https://tailwindcss.com/docs/box-shadow-color
+       */
+      "shadow-color": [{
+        shadow: [isAny]
+      }],
+      /**
+       * Opacity
+       * @see https://tailwindcss.com/docs/opacity
+       */
+      opacity: [{
+        opacity: [opacity]
+      }],
+      /**
+       * Mix Beldn Mode
+       * @see https://tailwindcss.com/docs/mix-blend-mode
+       */
+      "mix-blend": [{
+        "mix-blend": getBlendModes()
+      }],
+      /**
+       * Background Blend Mode
+       * @see https://tailwindcss.com/docs/background-blend-mode
+       */
+      "bg-blend": [{
+        "bg-blend": getBlendModes()
+      }],
+      // Filters
+      /**
+       * Filter
+       * @deprecated since Tailwind CSS v3.0.0
+       * @see https://tailwindcss.com/docs/filter
+       */
+      filter: [{
+        filter: ["", "none"]
+      }],
+      /**
+       * Blur
+       * @see https://tailwindcss.com/docs/blur
+       */
+      blur: [{
+        blur: [blur]
+      }],
+      /**
+       * Brightness
+       * @see https://tailwindcss.com/docs/brightness
+       */
+      brightness: [{
+        brightness: [brightness]
+      }],
+      /**
+       * Contrast
+       * @see https://tailwindcss.com/docs/contrast
+       */
+      contrast: [{
+        contrast: [contrast]
+      }],
+      /**
+       * Drop Shadow
+       * @see https://tailwindcss.com/docs/drop-shadow
+       */
+      "drop-shadow": [{
+        "drop-shadow": ["", "none", isTshirtSize, isArbitraryValue]
+      }],
+      /**
+       * Grayscale
+       * @see https://tailwindcss.com/docs/grayscale
+       */
+      grayscale: [{
+        grayscale: [grayscale]
+      }],
+      /**
+       * Hue Rotate
+       * @see https://tailwindcss.com/docs/hue-rotate
+       */
+      "hue-rotate": [{
+        "hue-rotate": [hueRotate]
+      }],
+      /**
+       * Invert
+       * @see https://tailwindcss.com/docs/invert
+       */
+      invert: [{
+        invert: [invert]
+      }],
+      /**
+       * Saturate
+       * @see https://tailwindcss.com/docs/saturate
+       */
+      saturate: [{
+        saturate: [saturate]
+      }],
+      /**
+       * Sepia
+       * @see https://tailwindcss.com/docs/sepia
+       */
+      sepia: [{
+        sepia: [sepia]
+      }],
+      /**
+       * Backdrop Filter
+       * @deprecated since Tailwind CSS v3.0.0
+       * @see https://tailwindcss.com/docs/backdrop-filter
+       */
+      "backdrop-filter": [{
+        "backdrop-filter": ["", "none"]
+      }],
+      /**
+       * Backdrop Blur
+       * @see https://tailwindcss.com/docs/backdrop-blur
+       */
+      "backdrop-blur": [{
+        "backdrop-blur": [blur]
+      }],
+      /**
+       * Backdrop Brightness
+       * @see https://tailwindcss.com/docs/backdrop-brightness
+       */
+      "backdrop-brightness": [{
+        "backdrop-brightness": [brightness]
+      }],
+      /**
+       * Backdrop Contrast
+       * @see https://tailwindcss.com/docs/backdrop-contrast
+       */
+      "backdrop-contrast": [{
+        "backdrop-contrast": [contrast]
+      }],
+      /**
+       * Backdrop Grayscale
+       * @see https://tailwindcss.com/docs/backdrop-grayscale
+       */
+      "backdrop-grayscale": [{
+        "backdrop-grayscale": [grayscale]
+      }],
+      /**
+       * Backdrop Hue Rotate
+       * @see https://tailwindcss.com/docs/backdrop-hue-rotate
+       */
+      "backdrop-hue-rotate": [{
+        "backdrop-hue-rotate": [hueRotate]
+      }],
+      /**
+       * Backdrop Invert
+       * @see https://tailwindcss.com/docs/backdrop-invert
+       */
+      "backdrop-invert": [{
+        "backdrop-invert": [invert]
+      }],
+      /**
+       * Backdrop Opacity
+       * @see https://tailwindcss.com/docs/backdrop-opacity
+       */
+      "backdrop-opacity": [{
+        "backdrop-opacity": [opacity]
+      }],
+      /**
+       * Backdrop Saturate
+       * @see https://tailwindcss.com/docs/backdrop-saturate
+       */
+      "backdrop-saturate": [{
+        "backdrop-saturate": [saturate]
+      }],
+      /**
+       * Backdrop Sepia
+       * @see https://tailwindcss.com/docs/backdrop-sepia
+       */
+      "backdrop-sepia": [{
+        "backdrop-sepia": [sepia]
+      }],
+      // Tables
+      /**
+       * Border Collapse
+       * @see https://tailwindcss.com/docs/border-collapse
+       */
+      "border-collapse": [{
+        border: ["collapse", "separate"]
+      }],
+      /**
+       * Border Spacing
+       * @see https://tailwindcss.com/docs/border-spacing
+       */
+      "border-spacing": [{
+        "border-spacing": [borderSpacing]
+      }],
+      /**
+       * Border Spacing X
+       * @see https://tailwindcss.com/docs/border-spacing
+       */
+      "border-spacing-x": [{
+        "border-spacing-x": [borderSpacing]
+      }],
+      /**
+       * Border Spacing Y
+       * @see https://tailwindcss.com/docs/border-spacing
+       */
+      "border-spacing-y": [{
+        "border-spacing-y": [borderSpacing]
+      }],
+      /**
+       * Table Layout
+       * @see https://tailwindcss.com/docs/table-layout
+       */
+      "table-layout": [{
+        table: ["auto", "fixed"]
+      }],
+      /**
+       * Caption Side
+       * @see https://tailwindcss.com/docs/caption-side
+       */
+      caption: [{
+        caption: ["top", "bottom"]
+      }],
+      // Transitions and Animation
+      /**
+       * Tranisition Property
+       * @see https://tailwindcss.com/docs/transition-property
+       */
+      transition: [{
+        transition: ["none", "all", "", "colors", "opacity", "shadow", "transform", isArbitraryValue]
+      }],
+      /**
+       * Transition Duration
+       * @see https://tailwindcss.com/docs/transition-duration
+       */
+      duration: [{
+        duration: getNumberAndArbitrary()
+      }],
+      /**
+       * Transition Timing Function
+       * @see https://tailwindcss.com/docs/transition-timing-function
+       */
+      ease: [{
+        ease: ["linear", "in", "out", "in-out", isArbitraryValue]
+      }],
+      /**
+       * Transition Delay
+       * @see https://tailwindcss.com/docs/transition-delay
+       */
+      delay: [{
+        delay: getNumberAndArbitrary()
+      }],
+      /**
+       * Animation
+       * @see https://tailwindcss.com/docs/animation
+       */
+      animate: [{
+        animate: ["none", "spin", "ping", "pulse", "bounce", isArbitraryValue]
+      }],
+      // Transforms
+      /**
+       * Transform
+       * @see https://tailwindcss.com/docs/transform
+       */
+      transform: [{
+        transform: ["", "gpu", "none"]
+      }],
+      /**
+       * Scale
+       * @see https://tailwindcss.com/docs/scale
+       */
+      scale: [{
+        scale: [scale]
+      }],
+      /**
+       * Scale X
+       * @see https://tailwindcss.com/docs/scale
+       */
+      "scale-x": [{
+        "scale-x": [scale]
+      }],
+      /**
+       * Scale Y
+       * @see https://tailwindcss.com/docs/scale
+       */
+      "scale-y": [{
+        "scale-y": [scale]
+      }],
+      /**
+       * Rotate
+       * @see https://tailwindcss.com/docs/rotate
+       */
+      rotate: [{
+        rotate: [isInteger, isArbitraryValue]
+      }],
+      /**
+       * Translate X
+       * @see https://tailwindcss.com/docs/translate
+       */
+      "translate-x": [{
+        "translate-x": [translate]
+      }],
+      /**
+       * Translate Y
+       * @see https://tailwindcss.com/docs/translate
+       */
+      "translate-y": [{
+        "translate-y": [translate]
+      }],
+      /**
+       * Skew X
+       * @see https://tailwindcss.com/docs/skew
+       */
+      "skew-x": [{
+        "skew-x": [skew]
+      }],
+      /**
+       * Skew Y
+       * @see https://tailwindcss.com/docs/skew
+       */
+      "skew-y": [{
+        "skew-y": [skew]
+      }],
+      /**
+       * Transform Origin
+       * @see https://tailwindcss.com/docs/transform-origin
+       */
+      "transform-origin": [{
+        origin: ["center", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left", "top-left", isArbitraryValue]
+      }],
+      // Interactivity
+      /**
+       * Accent Color
+       * @see https://tailwindcss.com/docs/accent-color
+       */
+      accent: [{
+        accent: ["auto", colors]
+      }],
+      /**
+       * Appearance
+       * @see https://tailwindcss.com/docs/appearance
+       */
+      appearance: ["appearance-none"],
+      /**
+       * Cursor
+       * @see https://tailwindcss.com/docs/cursor
+       */
+      cursor: [{
+        cursor: ["auto", "default", "pointer", "wait", "text", "move", "help", "not-allowed", "none", "context-menu", "progress", "cell", "crosshair", "vertical-text", "alias", "copy", "no-drop", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out", isArbitraryValue]
+      }],
+      /**
+       * Caret Color
+       * @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities
+       */
+      "caret-color": [{
+        caret: [colors]
+      }],
+      /**
+       * Pointer Events
+       * @see https://tailwindcss.com/docs/pointer-events
+       */
+      "pointer-events": [{
+        "pointer-events": ["none", "auto"]
+      }],
+      /**
+       * Resize
+       * @see https://tailwindcss.com/docs/resize
+       */
+      resize: [{
+        resize: ["none", "y", "x", ""]
+      }],
+      /**
+       * Scroll Behavior
+       * @see https://tailwindcss.com/docs/scroll-behavior
+       */
+      "scroll-behavior": [{
+        scroll: ["auto", "smooth"]
+      }],
+      /**
+       * Scroll Margin
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      "scroll-m": [{
+        "scroll-m": [spacing]
+      }],
+      /**
+       * Scroll Margin X
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      "scroll-mx": [{
+        "scroll-mx": [spacing]
+      }],
+      /**
+       * Scroll Margin Y
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      "scroll-my": [{
+        "scroll-my": [spacing]
+      }],
+      /**
+       * Scroll Margin Start
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      "scroll-ms": [{
+        "scroll-ms": [spacing]
+      }],
+      /**
+       * Scroll Margin End
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      "scroll-me": [{
+        "scroll-me": [spacing]
+      }],
+      /**
+       * Scroll Margin Top
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      "scroll-mt": [{
+        "scroll-mt": [spacing]
+      }],
+      /**
+       * Scroll Margin Right
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      "scroll-mr": [{
+        "scroll-mr": [spacing]
+      }],
+      /**
+       * Scroll Margin Bottom
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      "scroll-mb": [{
+        "scroll-mb": [spacing]
+      }],
+      /**
+       * Scroll Margin Left
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      "scroll-ml": [{
+        "scroll-ml": [spacing]
+      }],
+      /**
+       * Scroll Padding
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      "scroll-p": [{
+        "scroll-p": [spacing]
+      }],
+      /**
+       * Scroll Padding X
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      "scroll-px": [{
+        "scroll-px": [spacing]
+      }],
+      /**
+       * Scroll Padding Y
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      "scroll-py": [{
+        "scroll-py": [spacing]
+      }],
+      /**
+       * Scroll Padding Start
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      "scroll-ps": [{
+        "scroll-ps": [spacing]
+      }],
+      /**
+       * Scroll Padding End
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      "scroll-pe": [{
+        "scroll-pe": [spacing]
+      }],
+      /**
+       * Scroll Padding Top
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      "scroll-pt": [{
+        "scroll-pt": [spacing]
+      }],
+      /**
+       * Scroll Padding Right
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      "scroll-pr": [{
+        "scroll-pr": [spacing]
+      }],
+      /**
+       * Scroll Padding Bottom
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      "scroll-pb": [{
+        "scroll-pb": [spacing]
+      }],
+      /**
+       * Scroll Padding Left
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      "scroll-pl": [{
+        "scroll-pl": [spacing]
+      }],
+      /**
+       * Scroll Snap Align
+       * @see https://tailwindcss.com/docs/scroll-snap-align
+       */
+      "snap-align": [{
+        snap: ["start", "end", "center", "align-none"]
+      }],
+      /**
+       * Scroll Snap Stop
+       * @see https://tailwindcss.com/docs/scroll-snap-stop
+       */
+      "snap-stop": [{
+        snap: ["normal", "always"]
+      }],
+      /**
+       * Scroll Snap Type
+       * @see https://tailwindcss.com/docs/scroll-snap-type
+       */
+      "snap-type": [{
+        snap: ["none", "x", "y", "both"]
+      }],
+      /**
+       * Scroll Snap Type Strictness
+       * @see https://tailwindcss.com/docs/scroll-snap-type
+       */
+      "snap-strictness": [{
+        snap: ["mandatory", "proximity"]
+      }],
+      /**
+       * Touch Action
+       * @see https://tailwindcss.com/docs/touch-action
+       */
+      touch: [{
+        touch: ["auto", "none", "pinch-zoom", "manipulation", {
+          pan: ["x", "left", "right", "y", "up", "down"]
+        }]
+      }],
+      /**
+       * User Select
+       * @see https://tailwindcss.com/docs/user-select
+       */
+      select: [{
+        select: ["none", "text", "all", "auto"]
+      }],
+      /**
+       * Will Change
+       * @see https://tailwindcss.com/docs/will-change
+       */
+      "will-change": [{
+        "will-change": ["auto", "scroll", "contents", "transform", isArbitraryValue]
+      }],
+      // SVG
+      /**
+       * Fill
+       * @see https://tailwindcss.com/docs/fill
+       */
+      fill: [{
+        fill: [colors, "none"]
+      }],
+      /**
+       * Stroke Width
+       * @see https://tailwindcss.com/docs/stroke-width
+       */
+      "stroke-w": [{
+        stroke: [isLength, isArbitraryNumber]
+      }],
+      /**
+       * Stroke
+       * @see https://tailwindcss.com/docs/stroke
+       */
+      stroke: [{
+        stroke: [colors, "none"]
+      }],
+      // Accessibility
+      /**
+       * Screen Readers
+       * @see https://tailwindcss.com/docs/screen-readers
+       */
+      sr: ["sr-only", "not-sr-only"]
+    },
+    conflictingClassGroups: {
+      overflow: ["overflow-x", "overflow-y"],
+      overscroll: ["overscroll-x", "overscroll-y"],
+      inset: ["inset-x", "inset-y", "start", "end", "top", "right", "bottom", "left"],
+      "inset-x": ["right", "left"],
+      "inset-y": ["top", "bottom"],
+      flex: ["basis", "grow", "shrink"],
+      gap: ["gap-x", "gap-y"],
+      p: ["px", "py", "ps", "pe", "pt", "pr", "pb", "pl"],
+      px: ["pr", "pl"],
+      py: ["pt", "pb"],
+      m: ["mx", "my", "ms", "me", "mt", "mr", "mb", "ml"],
+      mx: ["mr", "ml"],
+      my: ["mt", "mb"],
+      "font-size": ["leading"],
+      "fvn-normal": ["fvn-ordinal", "fvn-slashed-zero", "fvn-figure", "fvn-spacing", "fvn-fraction"],
+      "fvn-ordinal": ["fvn-normal"],
+      "fvn-slashed-zero": ["fvn-normal"],
+      "fvn-figure": ["fvn-normal"],
+      "fvn-spacing": ["fvn-normal"],
+      "fvn-fraction": ["fvn-normal"],
+      rounded: ["rounded-s", "rounded-e", "rounded-t", "rounded-r", "rounded-b", "rounded-l", "rounded-ss", "rounded-se", "rounded-ee", "rounded-es", "rounded-tl", "rounded-tr", "rounded-br", "rounded-bl"],
+      "rounded-s": ["rounded-ss", "rounded-es"],
+      "rounded-e": ["rounded-se", "rounded-ee"],
+      "rounded-t": ["rounded-tl", "rounded-tr"],
+      "rounded-r": ["rounded-tr", "rounded-br"],
+      "rounded-b": ["rounded-br", "rounded-bl"],
+      "rounded-l": ["rounded-tl", "rounded-bl"],
+      "border-spacing": ["border-spacing-x", "border-spacing-y"],
+      "border-w": ["border-w-s", "border-w-e", "border-w-t", "border-w-r", "border-w-b", "border-w-l"],
+      "border-w-x": ["border-w-r", "border-w-l"],
+      "border-w-y": ["border-w-t", "border-w-b"],
+      "border-color": ["border-color-t", "border-color-r", "border-color-b", "border-color-l"],
+      "border-color-x": ["border-color-r", "border-color-l"],
+      "border-color-y": ["border-color-t", "border-color-b"],
+      "scroll-m": ["scroll-mx", "scroll-my", "scroll-ms", "scroll-me", "scroll-mt", "scroll-mr", "scroll-mb", "scroll-ml"],
+      "scroll-mx": ["scroll-mr", "scroll-ml"],
+      "scroll-my": ["scroll-mt", "scroll-mb"],
+      "scroll-p": ["scroll-px", "scroll-py", "scroll-ps", "scroll-pe", "scroll-pt", "scroll-pr", "scroll-pb", "scroll-pl"],
+      "scroll-px": ["scroll-pr", "scroll-pl"],
+      "scroll-py": ["scroll-pt", "scroll-pb"]
+    },
+    conflictingClassGroupModifiers: {
+      "font-size": ["leading"]
+    }
+  };
+}
+
+// ../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs
+var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
+
+// src/Components/Generic/Map/MapControlToolbar.tsx
+import { jsx as jsx80, jsxs as jsxs58 } from "react/jsx-runtime";
+function cn2(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var POSITION_CLASSES3 = {
+  topleft: "absolute top-4 left-4",
+  topright: "absolute top-4 right-4",
+  bottomleft: "absolute bottom-4 left-4",
+  bottomright: "absolute bottom-4 right-4"
+};
+var getDefaultDirection = (position) => {
+  switch (position) {
+    case "topleft":
+    case "bottomleft":
+      return "right";
+    case "topright":
+    case "bottomright":
+      return "left";
+    default:
+      return "right";
+  }
+};
+var MapControlToolbar = ({
+  controls,
+  onToggleControl
+}) => {
+  return /* @__PURE__ */ jsx80(TooltipProvider2, { children: /* @__PURE__ */ jsx80("div", { className: "pointer-events-none", children: Object.entries(controls.reduce((acc, control) => {
+    var _a, _b;
+    const position = (_a = control.position) != null ? _a : "topright";
+    acc[position] = (_b = acc[position]) != null ? _b : [];
+    acc[position].push(control);
+    return acc;
+  }, {})).map(([position, items]) => /* @__PURE__ */ jsx80("div", { className: cn2(POSITION_CLASSES3[position], "pointer-events-auto"), children: items.map((control) => {
+    var _a;
+    const Icon3 = control.icon;
+    const popoverDirection = control.popoverDirection || getDefaultDirection((_a = control.position) != null ? _a : "topright");
+    if (control.isDisplayOnly) {
+      return /* @__PURE__ */ jsx80(
+        "div",
+        {
+          className: "pointer-events-auto",
+          children: /* @__PURE__ */ jsx80(Icon3, { className: "w-6 h-6" })
+        },
+        control.id
+      );
+    }
+    if (control.onClick && !control.panel) {
+      return /* @__PURE__ */ jsx80(
+        "div",
+        {
+          className: "pointer-events-auto",
+          children: /* @__PURE__ */ jsxs58(Tooltip4, { delayDuration: 100, children: [
+            /* @__PURE__ */ jsx80(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsx80(
+              "button",
+              {
+                onClick: control.onClick,
+                className: "p-[11px] w-12 h-12 flex justify-center items-center rounded-full shadow-xl transition-colors bg-white hover:bg-gray-50 text-gray-700",
+                children: /* @__PURE__ */ jsx80(Icon3, { className: "w-6 h-6" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx80(
+              TooltipContent2,
+              {
+                side: "right",
+                className: "bg-secondary font-semibold text-foreground",
+                children: /* @__PURE__ */ jsx80("p", { children: control.title })
+              }
+            )
+          ] })
+        },
+        control.id
+      );
+    }
+    return /* @__PURE__ */ jsx80(
+      "div",
+      {
+        className: "pointer-events-auto",
+        children: /* @__PURE__ */ jsxs58(Popover7.Root, { open: control.isOpen, children: [
+          /* @__PURE__ */ jsxs58(Tooltip4, { delayDuration: 100, children: [
+            /* @__PURE__ */ jsx80(Popover7.Trigger, { asChild: true, children: /* @__PURE__ */ jsx80(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsx80(
+              "button",
+              {
+                onClick: () => onToggleControl(control.id),
+                className: cn2(
+                  "p-[11px] w-12 h-12 flex justify-center items-center rounded-full shadow-xl transition-colors",
+                  control.isOpen ? "bg-primary text-white" : "bg-white hover:bg-gray-50 text-gray-700"
+                ),
+                children: /* @__PURE__ */ jsx80(Icon3, { className: "w-6 h-6" })
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx80(
+              TooltipContent2,
+              {
+                side: "right",
+                className: "bg-secondary font-semibold text-foreground",
+                children: /* @__PURE__ */ jsx80("p", { children: control.title })
+              }
+            )
+          ] }),
+          control.panel ? /* @__PURE__ */ jsx80(Popover7.Portal, { children: /* @__PURE__ */ jsxs58(
+            Popover7.Content,
+            {
+              className: "bg-white p-4 rounded-lg shadow-lg min-w-[250px] z-[10] max-w-[380px] hidden lg:block",
+              side: popoverDirection,
+              align: control.position === "bottomright" ? "end" : "start",
+              sideOffset: 5,
+              children: [
+                control.panel,
+                /* @__PURE__ */ jsx80(Popover7.Arrow, { className: "fill-white" })
+              ]
+            }
+          ) }) : null
+        ] })
+      },
+      control.id
+    );
+  }) }, position)) }) });
+};
+MapControlToolbar.displayName = "MapControlToolbar";
+
+// src/Components/Map/MapLibre.tsx
+import { GlobeIcon as GlobeIcon2, PlusIcon as PlusIcon3, MinusIcon as MinusIcon3, LayerGroupIcon as LayerGroupIcon5 } from "@geowiki/ui";
+import { jsx as jsx81, jsxs as jsxs59 } from "react/jsx-runtime";
 var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData }, ref) => {
   const mapContainer = ref;
   const mapRef = useRef16(null);
@@ -16961,7 +20029,7 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData
           return {
             id: "overlay",
             icon: LayerGroupIcon5,
-            panel: /* @__PURE__ */ jsx79(
+            panel: /* @__PURE__ */ jsx81(
               LayerSwitcher2,
               {
                 mapMenuItems: [
@@ -16985,7 +20053,8 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData
       }
     }).flat();
   };
-  const [mapControl, setMapControl] = useState36(() => buildControls(mapControls));
+  const [mapControl, setMapControl] = useState37(() => buildControls(mapControls));
+  console.log(mapControl);
   const toggleControl = (id) => {
     setMapControl((prevControls) => prevControls.map((control) => {
       if (control.id === id) {
@@ -16994,7 +20063,7 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData
       return control;
     }));
   };
-  useEffect34(() => {
+  useEffect35(() => {
     if (typeof mapContainer === "function")
       return;
     if (!(mapContainer == null ? void 0 : mapContainer.current))
@@ -17036,7 +20105,7 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData
     function loadSvgImage() {
       return __async(this, null, function* () {
         let svgText = renderToStaticMarkup(
-          /* @__PURE__ */ jsx79(MapPinIcon5, { className: "w-6 h-6" })
+          /* @__PURE__ */ jsx81(MapPinIcon5, { className: "w-6 h-6" })
         );
         svgText = svgText.replace('fill="currentColor"', 'fill="#06b6d4"');
         const img = new Image();
@@ -17132,9 +20201,9 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData
   }, [sourceData, mapControls]);
   if (!sourceData)
     return;
-  return /* @__PURE__ */ jsxs57("div", { className: "relative", style: { width: "100%", height: "100vh" }, children: [
-    /* @__PURE__ */ jsx79("div", { ref: mapContainer, className: "w-full h-full" }),
-    /* @__PURE__ */ jsx79(MapControlToolbar, { controls: mapControl, onToggleControl: (id) => toggleControl(id) })
+  return /* @__PURE__ */ jsxs59("div", { className: "relative", style: { width: "100%", height: "100vh" }, children: [
+    /* @__PURE__ */ jsx81("div", { ref: mapContainer, className: "w-full h-full" }),
+    /* @__PURE__ */ jsx81(MapControlToolbar, { controls: mapControl, onToggleControl: (id) => toggleControl(id) })
   ] });
 });
 export {