@macrostrat/map-interface 1.2.1 → 1.2.2

package/CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file. The format
 is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this
 project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.2] - 2025-02-16
+
+- Improve styles for map sidebar and expansion panels
+- Add several new CSS variables
+
 ## [1.2.1] - 2025-02-15
 
 Add a `node` target to bundle without imported CSS

package/dist/cjs/{dev.7499151f.js → dev.10ac2fb3.js}

@@ -1,6 +1,6 @@
-var $6f5ca387ac26c0b5$exports = require("./map-page.190b6723.js");
+var $6f5ca387ac26c0b5$exports = require("./map-page.9c19b2a9.js");
 var $abbe8d0af34cbbed$exports = require("./tile-extent.06a4b2ed.js");
-var $db14eb7a5c07abdb$exports = require("./vector-tile-features.456f887b.js");
+var $db14eb7a5c07abdb$exports = require("./vector-tile-features.77121785.js");
 var $8646508ae99a5857$exports = require("./xray.a23f8660.js");
 
 
@@ -30,4 +30,4 @@ $parcel$exportWildcard(module.exports, $db14eb7a5c07abdb$exports);
 $parcel$exportWildcard(module.exports, $8646508ae99a5857$exports);
 
 
-//# sourceMappingURL=dev.7499151f.js.map
+//# sourceMappingURL=dev.10ac2fb3.js.map

package/dist/{esm/dev.ccb6e774.js.map → cjs/dev.10ac2fb3.js.map}

@@ -1 +1 @@
-{"mappings":"","sources":["packages/map-interface/src/dev/index.ts"],"sourcesContent":["export * from \"./map-page\";\nexport * from \"./tile-extent\";\nexport * from \"./vector-tile-features\";\nexport * from \"./xray\";\n"],"names":[],"version":3,"file":"dev.ccb6e774.js.map"}
+{"mappings":"","sources":["packages/map-interface/src/dev/index.ts"],"sourcesContent":["export * from \"./map-page\";\nexport * from \"./tile-extent\";\nexport * from \"./vector-tile-features\";\nexport * from \"./xray\";\n"],"names":[],"version":3,"file":"dev.10ac2fb3.js.map"}

package/dist/cjs/{expansion-panel.08532cee.js → expansion-panel.ef757efe.js}

@@ -1,6 +1,6 @@
-var $b1c160aff794b8f5$exports = require("./main.module.4ecbaaa5.js");
-require("./main.module.ff1b1aca.css");
-var $a0970d22776f9f4c$exports = require("./headers.20eae5f7.js");
+var $b1c160aff794b8f5$exports = require("./main.module.a3a78b0d.js");
+require("./main.module.338867af.css");
+var $a0970d22776f9f4c$exports = require("./headers.d9f3e324.js");
 var $fcjlG$react = require("react");
 var $fcjlG$blueprintjscore = require("@blueprintjs/core");
 var $fcjlG$macrostrathyper = require("@macrostrat/hyper");
@@ -40,7 +40,8 @@ function $750d69d73bfbdc9a$export$cea00a9d724d5a32(props) {
     }, [
         children,
         $750d69d73bfbdc9a$var$h((0, $fcjlG$blueprintjscore.Icon), {
-            icon: icon
+            icon: icon,
+            className: "expansion-panel-icon"
         })
     ]);
 }
@@ -131,4 +132,4 @@ function $750d69d73bfbdc9a$export$263416b670b3f129({ title: title, className: cl
 }
 
 
-//# sourceMappingURL=expansion-panel.08532cee.js.map
+//# sourceMappingURL=expansion-panel.ef757efe.js.map

package/dist/cjs/expansion-panel.ef757efe.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,0BAAI,CAAA,GAAA,gDAAI,EAAE,MAAM,CAAC,CAAA,GAAA,mDAAK;AAE5B,SAAS,0CAAsB,KAAK;IAClC,MAAM,YAAE,QAAQ,YAAE,QAAQ,YAAE,QAAQ,aAAE,SAAS,SAAE,KAAK,kBAAE,cAAc,EAAE,GACtE;IACF,MAAM,OAAO,WAAW,eAAe;IACvC,OAAO,wBACL,CAAA,GAAA,sCAAW,GACX;QACE,WAAW,CAAA,GAAA,2CAAS,EAAE,0BAA0B;QAChD,SAAS;eACT;QACA,WAAW;IACb,GACA;QAAC;QAAU,wBAAE,CAAA,GAAA,2BAAG,GAAG;kBAAE;YAAM,WAAW;QAAuB;KAAG;AAEpE;AAEA,SAAS,yCAAmB,KAAK;IAC/B,IAAI,SACF,KAAK,kBACL,iBAAiB,gBACjB,QAAQ,YACR,QAAQ,YACR,QAAQ,YACR,WAAW,KAAO,kBAClB,gBAAgB,iBAChB,SAAS,EACV,GAAG;IACJ,MAAM,CAAC,QAAQ,QAAQ,GAAG,CAAA,GAAA,qBAAO,EAAE,YAAY;IAE/C,MAAM,YAAY;QAChB;QACA,QAAQ,CAAC;IACX;IAEA,OAAO,wBACL,4BACA;QACE,WAAW,CAAA,GAAA,2CAAS,EAAE,WAAW;YAC/B,UAAU;YACV,WAAW,CAAC;QACd;IACF,GACA;QACE,wBACE,2CACA;YACE,UAAU;YACV,UAAU;mBACV;4BACA;QACF,GACA,wBAAE,oCAAoC;YACpC,wBAAE,gCAAgC;YAClC;YACA;SACD;QAEH,wBAAE,CAAA,GAAA,+BAAO,GAAG;oBAAE;QAAO,GAAG,wBAAE,0BAA0B,MAAM;KAC3D;AAEL;AAEO,SAAS,0CAAiB,KAAK;IACpC,IAAI,SAAE,KAAK,YAAE,QAAQ,aAAE,SAAS,iBAAE,gBAAgB,MAAM,GAAG;IAC3D,OAAO,wBAAE,0BAA0B;mBAAE;IAAU,GAAG;QAChD,wBAAE,qBAAqB,MAAM,iBAAiB,wBAAE,MAAM;QACtD,wBAAE,qBAAqB,MAAM;KAC9B;AACH;AAEA,SAAS,0CAAe,KAAK;IAC3B,OAAO,wBAAE,0CAAoB;QAC3B,GAAG,KAAK;QACR,WAAW;IACb;AACF;AAEA,SAAS,0CAAkB,KAAK;IAC9B,OAAO,wBAAE,0CAAoB;QAC3B,GAAG,KAAK;QACR,WAAW;QACX,gBAAgB;IAClB;AACF;AAEA,SAAS,0CAAuB,KAAK;IACnC,IAAI,SAAE,KAAK,YAAE,QAAQ,SAAE,KAAK,iBAAE,aAAa,aAAE,SAAS,EAAE,GAAG;IAC3D,MAAM,CAAC,QAAQ,UAAU,GAAG,CAAA,GAAA,qBAAO,EAAE;IACrC,kBAAkB,wBAAE;QAAC,wBAAE,aAAa;QAAQ;KAAM;IAClD,OAAO,wBAAE,0BAA0B;mBAAE;IAAU,GAAG;QAChD,wBAAE,+BAA+B;YAC/B,wBAAE,iCAAiC;YACnC,wBAAE,iCAAiC;gBACjC,wBAAE,CAAA,GAAA,6BAAK,GAAG;oBACR,OAAO;oBACP,SAAS;oBACT,QAAQ;oBACR,SAAS,IAAM,UAAU,CAAC;oBAC1B,MAAM;gBACR;aACD;SACF;QACD,wBACE,CAAA,GAAA,+BAAO,GACP;oBAAE;QAAO,GACT,wBAAE,mCAAmC,MAAM;KAE9C;AACH;AAEA,SAAS,0CAAc,SAAE,KAAK,aAAE,SAAS,YAAE,QAAQ,EAAE;IACnD,OAAO,wBAAE,sBAAsB;mBAAE;IAAU,GAAG;QAC5C,wBAAE,qCAAqC;QACvC,wBAAE,mCAAmC,MAAM;KAC5C;AACH","sources":["packages/map-interface/src/expansion-panel/index.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { Collapse, Icon } from \"@blueprintjs/core\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\nimport classNames from \"classnames\";\nimport { Button } from \"@blueprintjs/core\";\nimport { PanelSubhead } from \"./headers\";\n\nconst h = hyper.styled(styles);\n\nfunction ExpansionPanelSummary(props) {\n  const { expanded, children, onChange, className, title, titleComponent } =\n    props;\n  const icon = expanded ? \"chevron-up\" : \"chevron-down\";\n  return h(\n    PanelSubhead,\n    {\n      className: classNames(\"expansion-panel-header\", className),\n      onClick: onChange,\n      title,\n      component: titleComponent,\n    },\n    [children, h(Icon, { icon, className: \"expansion-panel-icon\" })]\n  );\n}\n\nfunction ExpansionPanelBase(props) {\n  let {\n    title,\n    titleComponent = \"h3\",\n    children,\n    expanded,\n    helpText,\n    onChange = () => {},\n    sideComponent = null,\n    className,\n  } = props;\n  const [isOpen, setOpen] = useState(expanded || false);\n\n  const onChange_ = () => {\n    onChange();\n    setOpen(!isOpen);\n  };\n\n  return h(\n    \"div.expansion-panel-base\",\n    {\n      className: classNames(className, {\n        expanded: isOpen,\n        collapsed: !isOpen,\n      }),\n    },\n    [\n      h(\n        ExpansionPanelSummary,\n        {\n          onChange: onChange_,\n          expanded: isOpen,\n          title,\n          titleComponent,\n        },\n        h(\"div.expansion-summary-title-help\", [\n          h(\"span.expansion-panel-subtext\", helpText),\n          \" \",\n          sideComponent,\n        ])\n      ),\n      h(Collapse, { isOpen }, h(\"div.expansion-children\", null, children)),\n    ]\n  );\n}\n\nexport function InfoPanelSection(props) {\n  let { title, children, className, headerElement = null } = props;\n  return h(\"div.info-panel-section\", { className }, [\n    h(\"div.panel-subhead\", null, headerElement ?? h(\"h3\", title)),\n    h(\"div.panel-content\", null, children),\n  ]);\n}\n\nfunction ExpansionPanel(props) {\n  return h(ExpansionPanelBase, {\n    ...props,\n    className: \"expansion-panel\",\n  });\n}\n\nfunction SubExpansionPanel(props) {\n  return h(ExpansionPanelBase, {\n    ...props,\n    className: \"expansion-panel sub-expansion-panel\",\n    titleComponent: \"h4\",\n  });\n}\n\nfunction ExpandableDetailsPanel(props) {\n  let { title, children, value, headerElement, className } = props;\n  const [isOpen, setIsOpen] = useState(false);\n  headerElement ??= h([h(\"div.title\", title), value]);\n  return h(\"div.expandable-details\", { className }, [\n    h(\"div.expandable-details-main\", [\n      h(\"div.expandable-details-header\", headerElement),\n      h(\"div.expandable-details-toggle\", [\n        h(Button, {\n          small: true,\n          minimal: true,\n          active: isOpen,\n          onClick: () => setIsOpen(!isOpen),\n          icon: \"more\",\n        }),\n      ]),\n    ]),\n    h(\n      Collapse,\n      { isOpen },\n      h(\"div.expandable-details-children\", null, children)\n    ),\n  ]);\n}\n\nfunction ExpansionBody({ title, className, children }) {\n  return h(\"div.expansion-body\", { className }, [\n    h(\"div.expansion-panel-detail-header\", title),\n    h(\"div.expansion-panel-detail-body\", null, children),\n  ]);\n}\n\nexport {\n  ExpansionPanel,\n  ExpansionPanelSummary,\n  ExpandableDetailsPanel,\n  SubExpansionPanel,\n  ExpansionBody,\n  PanelSubhead,\n};\n"],"names":[],"version":3,"file":"expansion-panel.ef757efe.js.map"}

package/dist/cjs/{header.58c5c012.js → header.b86c0710.js}

@@ -1,10 +1,11 @@
-require("./main.module.02c4de16.css");
-var $a8d7c4c397e52cf6$exports = require("./main.module.3f2b7c9f.js");
+require("./main.module.3dbc089f.css");
+var $a8d7c4c397e52cf6$exports = require("./main.module.0bbfa859.js");
 var $860d9939f7032c69$exports = require("./location-info.92e70042.js");
 var $hshpw$blueprintjscore = require("@blueprintjs/core");
 var $hshpw$macrostrathyper = require("@macrostrat/hyper");
 var $hshpw$macrostratuicomponents = require("@macrostrat/ui-components");
 var $hshpw$macrostratmapboxreact = require("@macrostrat/mapbox-react");
+var $hshpw$classnames = require("classnames");
 
 
 function $parcel$interopDefault(a) {
@@ -22,6 +23,7 @@ $parcel$export(module.exports, "InfoDrawerHeader", () => $548387e5996cdbbd$expor
 
 
 
+
 const $548387e5996cdbbd$var$h = (0, ($parcel$interopDefault($hshpw$macrostrathyper))).styled((0, ($parcel$interopDefault($a8d7c4c397e52cf6$exports))));
 function $548387e5996cdbbd$var$PositionButton({ position: position, bounds: bounds, showCopyLink: showCopyLink = false }) {
     const focusState = (0, $hshpw$macrostratmapboxreact.useFocusState)(position);
@@ -72,14 +74,18 @@ function $548387e5996cdbbd$var$CopyLinkButton({ itemName: itemName, children: ch
     }, children ?? "Copy link");
 }
 function $548387e5996cdbbd$export$e9ff14c4822c2e8c(props) {
-    const { onClose: onClose, position: position, bounds: bounds, zoom: zoom = 7, elevation: elevation, showCopyPositionButton: showCopyPositionButton, children: children } = props;
+    const { onClose: onClose, position: position, bounds: bounds, zoom: zoom = 7, elevation: elevation, showCopyPositionButton: showCopyPositionButton, fixedHeight: fixedHeight = false, children: children, className: className } = props;
     let leftButton = null;
     if (bounds != null || position != null) leftButton = $548387e5996cdbbd$var$h($548387e5996cdbbd$var$PositionButton, {
         position: position,
         bounds: bounds,
         showCopyLink: showCopyPositionButton
     });
-    return $548387e5996cdbbd$var$h("header.location-panel-header", [
+    return $548387e5996cdbbd$var$h("header.location-panel-header", {
+        className: (0, ($parcel$interopDefault($hshpw$classnames)))(className, {
+            "fixed-height": fixedHeight
+        })
+    }, [
         leftButton,
         children,
         $548387e5996cdbbd$var$h("div.spacer"),
@@ -101,4 +107,4 @@ function $548387e5996cdbbd$export$e9ff14c4822c2e8c(props) {
 }
 
 
-//# sourceMappingURL=header.58c5c012.js.map
+//# sourceMappingURL=header.b86c0710.js.map

package/dist/cjs/header.b86c0710.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,0BAAI,CAAA,GAAA,gDAAI,EAAE,MAAM,CAAC,CAAA,GAAA,mDAAK;AAE5B,SAAS,qCAAe,YAAE,QAAQ,UAAE,MAAM,gBAAE,eAAe,OAAO;IAChE,MAAM,aAAa,CAAA,GAAA,0CAAY,EAAE;IAEjC,MAAM,oBAAoB,CAAA,GAAA,uCAAS,EAAE,eAAe;IAEpD,OAAO,wBAAE,yBAAyB;QAChC,wBAAE,CAAA,GAAA,gDAAkB,GAAG;YAAE,UAAU;oBAAU;wBAAQ;QAAW,GAAG,EAAE;QACrE,wBAAE,EAAE,CAAC,qBAAqB,YAAY,MAAM,sCAAgB;YAC1D,UAAU;QACZ;KACD;AACH;AAEA,SAAS,qCAAe,YAAE,QAAQ,YAAE,QAAQ,WAAE,OAAO,EAAE,GAAG,MAAM;IAC9D,MAAM,UAAU,CAAA,GAAA,wCAAS;IAEzB,IAAI,UAAU,CAAC,WAAW,CAAC;IAC3B,IAAI,YAAY,MACd,WAAW,CAAC,IAAI,EAAE,UAAU;IAE9B,WAAW;IAEX,OAAO,wBACL,CAAA,GAAA,6BAAK,GACL;QACE,WAAW;QACX,WAAW,wBAAE,CAAA,GAAA,2BAAG,GAAG;YAAE,MAAM;YAAQ,MAAM;QAAG;QAC5C,SAAS;QACT,OAAO;QACP;YACE,UAAU,SAAS,CAAC,SAAS,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAE,IAAI,CACtD;gBACE,SAAS,KAAK;6BACZ;oBACA,QAAQ;oBACR,MAAM;oBACN,SAAS;gBACX;gBACA;YACF,GACA;gBACE,SAAS,KAAK;oBACZ,SAAS;oBACT,QAAQ;oBACR,MAAM;oBACN,SAAS;gBACX;YACF;QAEJ;QACA,GAAG,IAAI;IACT,GACA,YAAY;AAEhB;AAcO,SAAS,0CAAiB,KAA4B;IAC3D,MAAM,WACJ,OAAO,YACP,QAAQ,UACR,MAAM,QACN,OAAO,cACP,SAAS,0BACT,sBAAsB,eACtB,cAAc,iBACd,QAAQ,aACR,SAAS,EACV,GAAG;IAEJ,IAAI,aAAa;IACjB,IAAI,UAAU,QAAQ,YAAY,MAChC,aAAa,wBAAE,sCAAgB;kBAC7B;gBACA;QACA,cAAc;IAChB;IAGF,OAAO,wBACL,gCACA;QACE,WAAW,CAAA,GAAA,2CAAS,EAAE,WAAW;YAAE,gBAAgB;QAAY;IACjE,GACA;QACE;QACA;QACA,wBAAE;QACF,wBAAE,EAAE,CAAC,YAAY,MAAM,CAAA,GAAA,sCAAW,GAAG;sBACnC;kBACA;YACA,WAAW;QACb;QACA,wBAAE,EAAE,CAAC,aAAa,MAAM,CAAA,GAAA,mCAAQ,GAAG;uBACjC;YACA,WAAW;QACb;QACA,wBAAE,EAAE,CAAC,WAAW,MAAM,CAAA,GAAA,6BAAK,GAAG;YAC5B,SAAS;YACT,MAAM;YACN,SAAS;QACX;KACD;AAEL","sources":["packages/map-interface/src/location-panel/header.ts"],"sourcesContent":["import { Icon, Button } from \"@blueprintjs/core\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\nimport { useToaster } from \"@macrostrat/ui-components\";\nimport { LngLatCoords, Elevation } from \"../location-info\";\nimport {\n  LocationFocusButton,\n  useFocusState,\n  isCentered,\n} from \"@macrostrat/mapbox-react\";\nimport classNames from \"classnames\";\n\nconst h = hyper.styled(styles);\n\nfunction PositionButton({ position, bounds, showCopyLink = false }) {\n  const focusState = useFocusState(position);\n\n  const copyLinkIsVisible = isCentered(focusState) && showCopyLink;\n\n  return h(\"div.position-controls\", [\n    h(LocationFocusButton, { location: position, bounds, focusState }, []),\n    h.if(copyLinkIsVisible && position != null)(CopyLinkButton, {\n      itemName: \"position\",\n    }),\n  ]);\n}\n\nfunction CopyLinkButton({ itemName, children, onClick, ...rest }) {\n  const toaster = useToaster();\n\n  let message = `Copied link`;\n  if (itemName != null) {\n    message += ` to ${itemName}`;\n  }\n  message += \"!\";\n\n  return h(\n    Button,\n    {\n      className: \"copy-link-button\",\n      rightIcon: h(Icon, { icon: \"link\", size: 12 }),\n      minimal: true,\n      small: true,\n      onClick() {\n        navigator.clipboard.writeText(window.location.href).then(\n          () => {\n            toaster?.show({\n              message,\n              intent: \"success\",\n              icon: \"clipboard\",\n              timeout: 1000,\n            });\n            onClick?.();\n          },\n          () => {\n            toaster?.show({\n              message: \"Failed to copy link\",\n              intent: \"danger\",\n              icon: \"error\",\n              timeout: 1000,\n            });\n          }\n        );\n      },\n      ...rest,\n    },\n    children ?? \"Copy link\"\n  );\n}\n\nexport interface InfoDrawerHeaderProps {\n  onClose?: () => void;\n  position?: mapboxgl.LngLat;\n  zoom?: number;\n  elevation?: number;\n  showCopyPositionButton?: boolean;\n  bounds?: mapboxgl.LngLatBounds;\n  fixedHeight?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport function InfoDrawerHeader(props: InfoDrawerHeaderProps) {\n  const {\n    onClose,\n    position,\n    bounds,\n    zoom = 7,\n    elevation,\n    showCopyPositionButton,\n    fixedHeight = false,\n    children,\n    className,\n  } = props;\n\n  let leftButton = null;\n  if (bounds != null || position != null) {\n    leftButton = h(PositionButton, {\n      position,\n      bounds,\n      showCopyLink: showCopyPositionButton,\n    });\n  }\n\n  return h(\n    \"header.location-panel-header\",\n    {\n      className: classNames(className, { \"fixed-height\": fixedHeight }),\n    },\n    [\n      leftButton,\n      children,\n      h(\"div.spacer\"),\n      h.if(position != null)(LngLatCoords, {\n        position,\n        zoom,\n        className: \"infodrawer-header-item\",\n      }),\n      h.if(elevation != null)(Elevation, {\n        elevation,\n        className: \"infodrawer-header-item\",\n      }),\n      h.if(onClose != null)(Button, {\n        minimal: true,\n        icon: \"cross\",\n        onClick: onClose,\n      }),\n    ]\n  );\n}\n"],"names":[],"version":3,"file":"header.b86c0710.js.map"}

package/dist/cjs/{headers.20eae5f7.js → headers.d9f3e324.js}

@@ -1,5 +1,5 @@
-var $b1c160aff794b8f5$exports = require("./main.module.4ecbaaa5.js");
-require("./main.module.ff1b1aca.css");
+var $b1c160aff794b8f5$exports = require("./main.module.a3a78b0d.js");
+require("./main.module.338867af.css");
 var $br79r$macrostrathyper = require("@macrostrat/hyper");
 
 
@@ -26,4 +26,4 @@ function $a0970d22776f9f4c$export$ed081779ec3709aa(props) {
 }
 
 
-//# sourceMappingURL=headers.20eae5f7.js.map
+//# sourceMappingURL=headers.d9f3e324.js.map

package/dist/cjs/{headers.20eae5f7.js.map → headers.d9f3e324.js.map}

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;AAGA,MAAM,0BAAI,CAAA,GAAA,gDAAI,EAAE,MAAM,CAAC,CAAA,GAAA,mDAAK;AAErB,SAAS,0CAAa,KAAK;IAChC,MAAM,SAAE,KAAK,aAAE,YAAY,gBAAM,QAAQ,EAAE,GAAG,MAAM,GAAG;IACvD,OAAO,wBAAE,qBAAqB,MAAM;QAClC,wBACE,WACA;YACE,WAAW;QACb,GACA;QAEF;KACD;AACH","sources":["packages/map-interface/src/expansion-panel/headers.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\n\nconst h = hyper.styled(styles);\n\nexport function PanelSubhead(props) {\n  const { title, component = \"h3\", children, ...rest } = props;\n  return h(\"div.panel-subhead\", rest, [\n    h(\n      component,\n      {\n        className: \"title\",\n      },\n      title\n    ),\n    children,\n  ]);\n}\n"],"names":[],"version":3,"file":"headers.20eae5f7.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;AAGA,MAAM,0BAAI,CAAA,GAAA,gDAAI,EAAE,MAAM,CAAC,CAAA,GAAA,mDAAK;AAErB,SAAS,0CAAa,KAAK;IAChC,MAAM,SAAE,KAAK,aAAE,YAAY,gBAAM,QAAQ,EAAE,GAAG,MAAM,GAAG;IACvD,OAAO,wBAAE,qBAAqB,MAAM;QAClC,wBACE,WACA;YACE,WAAW;QACb,GACA;QAEF;KACD;AACH","sources":["packages/map-interface/src/expansion-panel/headers.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\n\nconst h = hyper.styled(styles);\n\nexport function PanelSubhead(props) {\n  const { title, component = \"h3\", children, ...rest } = props;\n  return h(\"div.panel-subhead\", rest, [\n    h(\n      component,\n      {\n        className: \"title\",\n      },\n      title\n    ),\n    children,\n  ]);\n}\n"],"names":[],"version":3,"file":"headers.d9f3e324.js.map"}

package/dist/cjs/index.js

@@ -1,13 +1,13 @@
 var $fce5fc950d1fe35b$exports = require("./context-panel.8c4b009c.js");
-var $2bc7c1e4e7da7fdf$exports = require("./location-panel.c95f5e96.js");
-var $9acbb47bf7cb7660$exports = require("./dev.7499151f.js");
+var $2bc7c1e4e7da7fdf$exports = require("./location-panel.42ca3200.js");
+var $9acbb47bf7cb7660$exports = require("./dev.10ac2fb3.js");
 var $c3311f59335df34d$exports = require("./container.72611900.js");
 var $12b6032029db16d4$exports = require("./map-view.93363b41.js");
 var $f333fe6f49373ca9$exports = require("./controls.7ce3e95c.js");
 var $2611a7b4364593e5$exports = require("./helpers.0f72ddaf.js");
 var $3490fc4f4bda12f7$exports = require("./utils.26f02633.js");
 var $860d9939f7032c69$exports = require("./location-info.92e70042.js");
-var $750d69d73bfbdc9a$exports = require("./expansion-panel.08532cee.js");
+var $750d69d73bfbdc9a$exports = require("./expansion-panel.ef757efe.js");
 
 
 function $parcel$exportWildcard(dest, source) {

package/dist/cjs/{location-panel.c95f5e96.js → location-panel.42ca3200.js}

@@ -1,6 +1,6 @@
-var $548387e5996cdbbd$exports = require("./header.58c5c012.js");
-require("./main.module.02c4de16.css");
-var $a8d7c4c397e52cf6$exports = require("./main.module.3f2b7c9f.js");
+var $548387e5996cdbbd$exports = require("./header.b86c0710.js");
+require("./main.module.3dbc089f.css");
+var $a8d7c4c397e52cf6$exports = require("./main.module.0bbfa859.js");
 var $c3311f59335df34d$exports = require("./container.72611900.js");
 var $ah8rZ$macrostrathyper = require("@macrostrat/hyper");
 var $ah8rZ$classnames = require("classnames");
@@ -34,7 +34,7 @@ function $2bc7c1e4e7da7fdf$export$83f9a19cf91c2d06(props) {
     });
 }
 function $2bc7c1e4e7da7fdf$export$a5ddcc2a88716895(props) {
-    const { className: className, headerElement: headerElement = null, title: title, onClose: onClose, children: children, ...rest } = props;
+    const { className: className, headerElement: headerElement = null, title: title, onClose: onClose, children: children, contentContainer: contentContainer = "div.infodrawer-contents", ...rest } = props;
     const header = headerElement ?? $2bc7c1e4e7da7fdf$var$h((0, $548387e5996cdbbd$exports.InfoDrawerHeader), {
         onClose: onClose,
         ...rest
@@ -47,7 +47,7 @@ function $2bc7c1e4e7da7fdf$export$a5ddcc2a88716895(props) {
         className: className
     }, [
         header,
-        $2bc7c1e4e7da7fdf$var$h("div.infodrawer-body", $2bc7c1e4e7da7fdf$var$h("div.infodrawer-contents", $2bc7c1e4e7da7fdf$var$h((0, $ah8rZ$macrostratuicomponents.ErrorBoundary), null, children)))
+        $2bc7c1e4e7da7fdf$var$h("div.infodrawer-body", $2bc7c1e4e7da7fdf$var$h((0, $ah8rZ$macrostratuicomponents.ErrorBoundary), $2bc7c1e4e7da7fdf$var$h(contentContainer, children)))
     ]);
 }
 const $2bc7c1e4e7da7fdf$export$e54a7f2505304e20 = $2bc7c1e4e7da7fdf$export$a5ddcc2a88716895;
@@ -63,4 +63,4 @@ function $2bc7c1e4e7da7fdf$export$aa4baff5242ea6e1(props) {
 }
 
 
-//# sourceMappingURL=location-panel.c95f5e96.js.map
+//# sourceMappingURL=location-panel.42ca3200.js.map

package/dist/cjs/location-panel.42ca3200.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,0BAAI,CAAA,GAAA,gDAAI,EAAE,MAAM,CAAC,CAAA,GAAA,mDAAK;AAErB,SAAS,0CAAoB,KAAK;IACvC,MAAM,YAAY,CAAA,GAAA,2CAAS,EAAE,cAAc,MAAM,SAAS;IAC1D,OAAO,wBAAE,CAAA,GAAA,mCAAQ,GAAG;QAAE,GAAG,KAAK;mBAAE;IAAU;AAC5C;AAYO,SAAS,0CAAe,KAA0B;IACvD,MAAM,aACJ,SAAS,iBACT,gBAAgB,aAChB,KAAK,WACL,OAAO,YACP,QAAQ,oBACR,mBAAmB,2BACnB,GAAG,MACJ,GAAG;IACJ,MAAM,SACJ,iBACA,wBAAE,CAAA,GAAA,0CAAe,GAAG;iBAAE;QAAS,GAAG,IAAI;IAAC,GAAG;QACxC,SAAS,OAAO,OAAO,wBAAE,MAAM;YAAC;SAAM;KACvC;IACH,OAAO,wBAAE,2CAAqB;mBAAE;IAAU,GAAG;QAC3C;QACA,wBAAE,uBAAuB,wBAAE,CAAA,GAAA,2CAAY,GAAG,wBAAE,kBAAkB;KAC/D;AACH;AAEO,MAAM,4CAAe;AAErB,SAAS,0CAAc,KAAK;IACjC,MAAM,YAAE,QAAQ,aAAE,SAAS,WAAE,UAAU,OAAO,GAAG,MAAM,GAAG;IAC1D,MAAM,MAAM,CAAA,GAAA,2CAAS,EAAE,kBAAkB,WAAW;iBAAE;IAAQ;IAC9D,OAAO,wBAAE,2CAAgB;QAAE,WAAW;QAAK,GAAG,IAAI;IAAC,GAAG;AACxD","sources":["packages/map-interface/src/location-panel/index.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport { InfoDrawerHeader, InfoDrawerHeaderProps } from \"./header\";\nimport classNames from \"classnames\";\nimport styles from \"./main.module.sass\";\nimport { ErrorBoundary } from \"@macrostrat/ui-components\";\nimport { PanelCard } from \"../container\";\nimport { ComponentType } from \"react\";\n\nconst h = hyper.styled(styles);\n\nexport function InfoDrawerContainer(props) {\n  const className = classNames(\"infodrawer\", props.className);\n  return h(PanelCard, { ...props, className });\n}\n\ntype Component = string | ComponentType<any>;\n\ninterface BaseInfoDrawerProps extends InfoDrawerHeaderProps {\n  className?: string;\n  title?: string;\n  headerElement?: JSX.Element;\n  children?: React.ReactNode;\n  contentContainer?: Component;\n}\n\nexport function BaseInfoDrawer(props: BaseInfoDrawerProps) {\n  const {\n    className,\n    headerElement = null,\n    title,\n    onClose,\n    children,\n    contentContainer = \"div.infodrawer-contents\",\n    ...rest\n  } = props;\n  const header =\n    headerElement ??\n    h(InfoDrawerHeader, { onClose, ...rest }, [\n      title == null ? null : h(\"h3\", [title]),\n    ]);\n  return h(InfoDrawerContainer, { className }, [\n    header,\n    h(\"div.infodrawer-body\", h(ErrorBoundary, h(contentContainer, children))),\n  ]);\n}\n\nexport const DetailsPanel = BaseInfoDrawer;\n\nexport function LocationPanel(props) {\n  const { children, className, loading = false, ...rest } = props;\n  const cls = classNames(\"location-panel\", className, { loading });\n  return h(BaseInfoDrawer, { className: cls, ...rest }, children);\n}\n"],"names":[],"version":3,"file":"location-panel.42ca3200.js.map"}

package/dist/cjs/{main.module.3f2b7c9f.js → main.module.0bbfa859.js}

@@ -4,6 +4,7 @@ function $parcel$export(e, n, v, s) {
 }
 
 $parcel$export(module.exports, "copy-link-button", () => $a8d7c4c397e52cf6$export$d1352d0c31a65024, (v) => $a8d7c4c397e52cf6$export$d1352d0c31a65024 = v);
+$parcel$export(module.exports, "fixed-height", () => $a8d7c4c397e52cf6$export$72a4dfebf360a7ad, (v) => $a8d7c4c397e52cf6$export$72a4dfebf360a7ad = v);
 $parcel$export(module.exports, "infodrawer", () => $a8d7c4c397e52cf6$export$b5017f7ff265217d, (v) => $a8d7c4c397e52cf6$export$b5017f7ff265217d = v);
 $parcel$export(module.exports, "infodrawer-body", () => $a8d7c4c397e52cf6$export$310e8f86a84c074f, (v) => $a8d7c4c397e52cf6$export$310e8f86a84c074f = v);
 $parcel$export(module.exports, "infodrawer-contents", () => $a8d7c4c397e52cf6$export$69ed3ba502fbf15b, (v) => $a8d7c4c397e52cf6$export$69ed3ba502fbf15b = v);
@@ -14,6 +15,7 @@ $parcel$export(module.exports, "location-panel-header", () => $a8d7c4c397e52cf6$
 $parcel$export(module.exports, "position-controls", () => $a8d7c4c397e52cf6$export$dfae07a3bf0fbd6, (v) => $a8d7c4c397e52cf6$export$dfae07a3bf0fbd6 = v);
 $parcel$export(module.exports, "spacer", () => $a8d7c4c397e52cf6$export$8cc075c801fd6817, (v) => $a8d7c4c397e52cf6$export$8cc075c801fd6817 = v);
 var $a8d7c4c397e52cf6$export$d1352d0c31a65024;
+var $a8d7c4c397e52cf6$export$72a4dfebf360a7ad;
 var $a8d7c4c397e52cf6$export$b5017f7ff265217d;
 var $a8d7c4c397e52cf6$export$310e8f86a84c074f;
 var $a8d7c4c397e52cf6$export$69ed3ba502fbf15b;
@@ -24,6 +26,7 @@ var $a8d7c4c397e52cf6$export$d821beb98a87c6d7;
 var $a8d7c4c397e52cf6$export$dfae07a3bf0fbd6;
 var $a8d7c4c397e52cf6$export$8cc075c801fd6817;
 $a8d7c4c397e52cf6$export$d1352d0c31a65024 = `VPa3-W_copy-link-button`;
+$a8d7c4c397e52cf6$export$72a4dfebf360a7ad = `VPa3-W_fixed-height`;
 $a8d7c4c397e52cf6$export$b5017f7ff265217d = `VPa3-W_infodrawer`;
 $a8d7c4c397e52cf6$export$310e8f86a84c074f = `VPa3-W_infodrawer-body`;
 $a8d7c4c397e52cf6$export$69ed3ba502fbf15b = `VPa3-W_infodrawer-contents`;
@@ -35,4 +38,4 @@ $a8d7c4c397e52cf6$export$dfae07a3bf0fbd6 = `VPa3-W_position-controls`;
 $a8d7c4c397e52cf6$export$8cc075c801fd6817 = `VPa3-W_spacer`;
 
 
-//# sourceMappingURL=main.module.3f2b7c9f.js.map
+//# sourceMappingURL=main.module.0bbfa859.js.map

package/dist/cjs/main.module.0bbfa859.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAVA,4CAAqC,CAAC,uBAAuB,CAAC;AAC9D,4CAAiC,CAAC,mBAAmB,CAAC;AACtD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAoC,CAAC,sBAAsB,CAAC;AAC5D,4CAAwC,CAAC,0BAA0B,CAAC;AACpE,4CAA2C,CAAC,6BAA6B,CAAC;AAC1E,4CAA8B,CAAC,gBAAgB,CAAC;AAChD,4CAA4B,CAAC,cAAc,CAAC;AAC5C,4CAA0C,CAAC,4BAA4B,CAAC;AACxE,2CAAsC,CAAC,wBAAwB,CAAC;AAChE,4CAA2B,CAAC,aAAa,CAAC","sources":["packages/map-interface/src/location-panel/main.module.sass"],"sourcesContent":[".copy-link-button:global(.bp5-minimal.bp5-button)\n  color: var(--text-subtle-color)\n\n  svg\n    fill: var(--text-subtle-color)\n\n.location-panel-header\n  padding: 5px\n  display: flex\n  flex-direction: row\n  align-items: center\n  gap: var(--panel-header-gap, 0.5rem)\n  min-height: var(--panel-header-height, 40px)\n  border-bottom: 1px solid var(--panel-rule-color)\n  &.fixed-height\n    height: var(--panel-header-height, 40px)\n\n  .spacer\n    flex-grow: 1\n    // Ensure the spacer is not extra wide\n    margin-right: calc(-1 * var(--panel-header-gap, 0.5rem))\n\n  .left-icon\n    padding: 7px\n\n  .position-controls :global(.bp5-button)\n    font-size: 12px !important\n\n  // Text elements should\n  h1, h2, h3, h4, h5, h6, p\n    margin: 0\n    font-size: 16px\n    overflow: hidden\n    text-overflow: ellipsis\n    &:first-child\n      margin-left: 10px\n\n.infodrawer-header-item\n  font-size: 12px\n\n  :global(.secondary)\n    font-size: 0.9em\n    color: var(--text-subtle-color)\n\n.infodrawer\n  pointer-events: all\n  max-height: 100%\n  max-width: 100%\n  height: fit-content\n  display: flex\n  flex-direction: column\n  overflow-y: hidden\n  background-color: var(--panel-background-color)\n\n  &:global(.bp5-card)\n    padding: 0\n    background-color: var(--panel-background-color)\n\n\n  &.loading\n    .infodrawer-body\n      overflow-y: hidden\n      min-height: 70px\n\n\n.infodrawer-contents\n  padding: 0 1em\n  &>:first-child\n    margin-top: 1rem\n  &>:last-child\n    margin-bottom: 1rem\n\n// The scrollable body of the infodrawer\n.infodrawer-body\n  flex-shrink: 1\n  min-height: 0\n  transition: min-height 0.5s ease\n  overflow-y: scroll\n  position: relative\n\n// TODO: remove this when we have a better way to handle card media queries\n@media screen and (max-width: 768px)\n  .infodrawer\n    border-radius: var(--panel-border-radius, 0px)\n"],"names":[],"version":3,"file":"main.module.0bbfa859.js.map"}

package/dist/cjs/{main.module.ff1b1aca.css → main.module.338867af.css}

@@ -1,19 +1,20 @@
 .panel-subhead_1340c8 {
-  padding: .2em var(--box-horizontal-padding);
-  border-top: 1px solid var(--panel-rule-color);
+  border: 1px solid var(--panel-rule-color);
   border-bottom: 1px solid var(--panel-rule-color);
   background-color: var(--accent-color);
   z-index: 1;
   align-items: center;
-  gap: var(--box-horizontal-padding);
+  gap: var(--panel-header-gap, .5rem);
+  min-height: var(--panel-header-height, 40px);
   flex-direction: row;
+  padding: 0 1rem;
   display: flex;
   position: sticky;
   top: -1px;
 }
 
 .panel-subhead_1340c8 h1, .panel-subhead_1340c8 h2, .panel-subhead_1340c8 h3, .panel-subhead_1340c8 h4 {
-  margin: .2em 0;
+  margin: 0;
   font-family: Montserrat, sans-serif;
   font-weight: 700;
 }
@@ -26,6 +27,10 @@
   flex-grow: 1;
 }
 
+.panel-subhead_1340c8 .expansion-panel-icon_1340c8 {
+  margin-right: -.35em;
+}
+
 .info-panel-section_1340c8 > .panel-subhead_1340c8 {
   margin: -1px calc(var(--panel-padding-h) * -1) 0;
 }
@@ -53,6 +58,7 @@
 .sub-expansion-panel_1340c8 .expansion-panel-header_1340c8 {
   background-color: var(--accent-secondary-color);
   cursor: pointer;
+  padding: 0 1rem;
 }
 
 .sub-expansion-panel_1340c8 .expansion-panel-header_1340c8:hover {
@@ -63,8 +69,6 @@
   border-bottom: 1px solid var(--tertiary-border-color);
   border-top: 1px solid var(--tertiary-border-color);
   align-items: center;
-  margin-top: -1px;
-  padding: 5px 1em;
   font-weight: 500;
 }
 
@@ -85,16 +89,24 @@
 }
 
 .expansion-children_1340c8 {
-  padding: 5px 1em 10px;
+  padding: 0 1rem;
 }
 
 .expansion-children_1340c8 .expansion-panel_1340c8 {
-  margin-left: -1em;
-  margin-right: -1em;
+  margin-left: -1rem;
+  margin-right: -1rem;
 }
 
 .expansion-children_1340c8 .expansion-panel_1340c8:first-child {
-  margin-top: -5px;
+  margin-top: 0;
+}
+
+.expansion-children_1340c8 > :first-child {
+  margin-top: 1rem;
+}
+
+.expansion-children_1340c8 > :last-child {
+  margin-bottom: 1rem;
 }
 
 .expansion-panel-subtext_1340c8 {
@@ -176,4 +188,4 @@
 .expansion-panel-detail-body_1340c8 {
   display: inline;
 }
-/*# sourceMappingURL=main.module.ff1b1aca.css.map */
+/*# sourceMappingURL=main.module.338867af.css.map */

package/dist/cjs/main.module.338867af.css.map

@@ -0,0 +1 @@
+{"mappings":"AACA;;;;;;;;;;;;;;;AAaE;;;;;;AAIA;;;;AAEA;;;;AAGA;;;;;;;;;;;;;;AAaA;;;;;AAMA;;;;AAGE;;;;;AAGA;;;;;;AAKA;;;;AAGA;;;;;;;AAKE;;;;;;;;;;;;AASJ;;;;AAEE;;;;AAEA;;;;;AAGF;;;;AAEE;;;;AAEA;;;;AAEF;;;;;AAGE;;;;AAIJ;;;;;;;;;;;;;;;;;;;;;;;;AAoBE;;;;;;;;AAKA;;;;;;;;AAKA;;;;AAGA;;;;;;;;;;;AASE;;;;;;;;AAOF;;;;AAGA","sources":["packages/map-interface/src/expansion-panel/main.module.sass"],"sourcesContent":["\n.panel-subhead\n  padding: 0 1rem\n  border: 1px solid var(--panel-rule-color)\n  border-bottom: 1px solid var(--panel-rule-color)\n  background-color: var(--accent-color)\n  display: flex\n  flex-direction: row\n  align-items: center\n  z-index: 1\n  gap: var(--panel-header-gap, 0.5rem)\n  top: -1px\n  position: sticky\n  min-height: var(--panel-header-height, 40px)\n  h1, h2, h3, h4\n    font-family: Montserrat,sans-serif\n    font-weight: 700\n    margin: 0\n  h4\n    font-weight: 600\n  .title\n    flex-grow: 1\n\n  .expansion-panel-icon\n    margin-right: -0.35em\n\n// :global(.bp5-dark) .panel-subhead\n//   margin 0 1px\n\n.info-panel-section\n  &>.panel-subhead\n    margin: -1px calc(var(--panel-padding-h) * -1) 0\n\n.expansion-panel\n  padding: 0\n  flex-wrap: wrap\n  margin-top: -1px\n  // &.collapsed\n  //   .expansion-panel-header\n  //     border-bottom-width: 0;\n\n.sub-expansion-panel\n  margin: -1px calc(var(--panel-padding-h) * -0.5) 0\n  overflow: hidden\n  &:first-child\n    .expansion-panel-header\n      border-top-width: 0\n  .panel-subhead\n    border-top: none\n    border-bottom: none\n\n  .expansion-panel-header\n    background-color: var(--accent-secondary-color)\n    cursor: pointer\n    padding: 0 1rem\n\n    &:hover\n      background-color: var(--accent-secondary-hover-color)\n    h2, h3, h4\n      font-weight: 500\n      border-bottom: 1px solid var(--tertiary-border-color)\n      border-top: 1px solid var(--tertiary-border-color)\n      align-items: center\n\n.expansion-summary-title-help\n  margin-left: 5px\n  :global(.bp5-icon)\n    margin-left: 5px\n\n.expansion-panel-header\n  cursor: pointer\n  &:hover\n    background-color: var(--accent-hover-color)\n  :global(.bp5-icon)\n    transform: translate(0,3px)\n\n.expansion-children\n  padding: 0 1rem\n  .expansion-panel\n    margin-left: -1rem\n    margin-right: -1rem\n    &:first-child\n      margin-top: 0\n  &>:first-child\n    margin-top: 1rem\n  &>:last-child\n    margin-bottom: 1rem\n\n\n\n.expansion-panel-subtext\n  font-size: 85%\n  font-weight: 400\n\n:global\n  .expansion-panel-root\n    padding-left: 15px !important\n\n  .expansion-panel-detail\n    display: block !important\n    padding: 0 !important\n\n  .expansion-panel-detail-sub\n    display: block !important\n\n// New expandable panel for details\n.expandable-details-main\n  display: flex\n  flex-direction: row\n  align-items: center\n  justify-content: space-between\n  margin: 3px 0\n\n.expandable-details-header\n  display: inline-flex\n  flex-direction: row\n  align-items: baseline\n  flex-grow: 1\n\n.expandable-details-children\n  position: relative\n\n.expandable-details-toggle\n  :global(.bp5-button)\n    font-size: 10px\n\n.expandable-details\n  &.macrostrat-unit\n    .title:after\n      content: none\n  .title\n    margin-right: 1em\n    &:after\n      content: \":\"\n\n.expansion-body\n  display: inline-block\n  //flex-direction row\n  align-items: baseline\n  background-color: var(--tertiary-background)\n  padding: 2px 6px\n  border-radius: 4px\n  width: 100%\n  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.2)\n  margin-bottom: 6px\n\n.expansion-panel-detail-header\n  font-size: 90%\n  font-style: italic\n  margin-right: 1em\n  display: inline\n  color: var(--secondary-color)\n  &:after\n    content: \":\"\n\n.expansion-panel-detail-body\n  display: inline\n"],"names":[],"version":3,"file":"main.module.338867af.css.map"}

package/dist/cjs/{main.module.02c4de16.css → main.module.3dbc089f.css}

@@ -7,16 +7,21 @@
 }
 
 .VPa3-W_location-panel-header {
+  align-items: center;
+  gap: var(--panel-header-gap, .5rem);
+  min-height: var(--panel-header-height, 40px);
   border-bottom: 1px solid var(--panel-rule-color);
   flex-direction: row;
-  align-items: center;
-  gap: 1em;
-  min-height: 40px;
   padding: 5px;
   display: flex;
 }
 
+.VPa3-W_location-panel-header.VPa3-W_fixed-height {
+  height: var(--panel-header-height, 40px);
+}
+
 .VPa3-W_location-panel-header .VPa3-W_spacer {
+  margin-right: calc(-1 * var(--panel-header-gap, .5rem));
   flex-grow: 1;
 }
 
@@ -29,7 +34,10 @@
 }
 
 .VPa3-W_location-panel-header h1, .VPa3-W_location-panel-header h2, .VPa3-W_location-panel-header h3, .VPa3-W_location-panel-header h4, .VPa3-W_location-panel-header h5, .VPa3-W_location-panel-header h6, .VPa3-W_location-panel-header p {
+  text-overflow: ellipsis;
   margin: 0;
+  font-size: 16px;
+  overflow: hidden;
 }
 
 .VPa3-W_location-panel-header h1:first-child, .VPa3-W_location-panel-header h2:first-child, .VPa3-W_location-panel-header h3:first-child, .VPa3-W_location-panel-header h4:first-child, .VPa3-W_location-panel-header h5:first-child, .VPa3-W_location-panel-header h6:first-child, .VPa3-W_location-panel-header p:first-child {
@@ -53,7 +61,7 @@
   height: fit-content;
   max-height: 100%;
   display: flex;
-  overflow: hidden;
+  overflow-y: hidden;
 }
 
 .VPa3-W_infodrawer.bp5-card {
@@ -67,7 +75,15 @@
 }
 
 .VPa3-W_infodrawer-contents {
-  padding: 0 1em 1em;
+  padding: 0 1em;
+}
+
+.VPa3-W_infodrawer-contents > :first-child {
+  margin-top: 1rem;
+}
+
+.VPa3-W_infodrawer-contents > :last-child {
+  margin-bottom: 1rem;
 }
 
 .VPa3-W_infodrawer-body {
@@ -83,4 +99,4 @@
     border-radius: var(--panel-border-radius, 0px);
   }
 }
-/*# sourceMappingURL=main.module.02c4de16.css.map */
+/*# sourceMappingURL=main.module.3dbc089f.css.map */

package/dist/cjs/main.module.3dbc089f.css.map

@@ -0,0 +1 @@
+{"mappings":"AAAA;;;;AAGE;;;;AAGF;;;;;;;;;;AAQE;;;;AAGA;;;;;AAKA;;;;AAGA;;;;AAIA;;;;;;;AAKE;;;;AAGJ;;;;AAGE;;;;;AAIF;;;;;;;;;;;AAUE;;;;;AAME;;;;;AAKJ;;;;AAEE;;;;AAEA;;;;AAIF;;;;;;;;AAQA;EACE","sources":["packages/map-interface/src/location-panel/main.module.sass"],"sourcesContent":[".copy-link-button:global(.bp5-minimal.bp5-button)\n  color: var(--text-subtle-color)\n\n  svg\n    fill: var(--text-subtle-color)\n\n.location-panel-header\n  padding: 5px\n  display: flex\n  flex-direction: row\n  align-items: center\n  gap: var(--panel-header-gap, 0.5rem)\n  min-height: var(--panel-header-height, 40px)\n  border-bottom: 1px solid var(--panel-rule-color)\n  &.fixed-height\n    height: var(--panel-header-height, 40px)\n\n  .spacer\n    flex-grow: 1\n    // Ensure the spacer is not extra wide\n    margin-right: calc(-1 * var(--panel-header-gap, 0.5rem))\n\n  .left-icon\n    padding: 7px\n\n  .position-controls :global(.bp5-button)\n    font-size: 12px !important\n\n  // Text elements should\n  h1, h2, h3, h4, h5, h6, p\n    margin: 0\n    font-size: 16px\n    overflow: hidden\n    text-overflow: ellipsis\n    &:first-child\n      margin-left: 10px\n\n.infodrawer-header-item\n  font-size: 12px\n\n  :global(.secondary)\n    font-size: 0.9em\n    color: var(--text-subtle-color)\n\n.infodrawer\n  pointer-events: all\n  max-height: 100%\n  max-width: 100%\n  height: fit-content\n  display: flex\n  flex-direction: column\n  overflow-y: hidden\n  background-color: var(--panel-background-color)\n\n  &:global(.bp5-card)\n    padding: 0\n    background-color: var(--panel-background-color)\n\n\n  &.loading\n    .infodrawer-body\n      overflow-y: hidden\n      min-height: 70px\n\n\n.infodrawer-contents\n  padding: 0 1em\n  &>:first-child\n    margin-top: 1rem\n  &>:last-child\n    margin-bottom: 1rem\n\n// The scrollable body of the infodrawer\n.infodrawer-body\n  flex-shrink: 1\n  min-height: 0\n  transition: min-height 0.5s ease\n  overflow-y: scroll\n  position: relative\n\n// TODO: remove this when we have a better way to handle card media queries\n@media screen and (max-width: 768px)\n  .infodrawer\n    border-radius: var(--panel-border-radius, 0px)\n"],"names":[],"version":3,"file":"main.module.3dbc089f.css.map"}

package/dist/cjs/{main.module.4ecbaaa5.js → main.module.a3a78b0d.js}

@@ -5,6 +5,7 @@ function $parcel$export(e, n, v, s) {
 
 $parcel$export(module.exports, "panel-subhead", () => $b1c160aff794b8f5$export$bb6008c7ec506dc5, (v) => $b1c160aff794b8f5$export$bb6008c7ec506dc5 = v);
 $parcel$export(module.exports, "title", () => $b1c160aff794b8f5$export$fb184b623420d9be, (v) => $b1c160aff794b8f5$export$fb184b623420d9be = v);
+$parcel$export(module.exports, "expansion-panel-icon", () => $b1c160aff794b8f5$export$671c97197a62283c, (v) => $b1c160aff794b8f5$export$671c97197a62283c = v);
 $parcel$export(module.exports, "info-panel-section", () => $b1c160aff794b8f5$export$198bd65f1c7a5309, (v) => $b1c160aff794b8f5$export$198bd65f1c7a5309 = v);
 $parcel$export(module.exports, "expansion-panel", () => $b1c160aff794b8f5$export$1db06abc8684077f, (v) => $b1c160aff794b8f5$export$1db06abc8684077f = v);
 $parcel$export(module.exports, "sub-expansion-panel", () => $b1c160aff794b8f5$export$e1943f56d410f24c, (v) => $b1c160aff794b8f5$export$e1943f56d410f24c = v);
@@ -23,6 +24,7 @@ $parcel$export(module.exports, "expansion-panel-detail-header", () => $b1c160aff
 $parcel$export(module.exports, "expansion-panel-detail-body", () => $b1c160aff794b8f5$export$494f9067c39d24ef, (v) => $b1c160aff794b8f5$export$494f9067c39d24ef = v);
 var $b1c160aff794b8f5$export$bb6008c7ec506dc5;
 var $b1c160aff794b8f5$export$fb184b623420d9be;
+var $b1c160aff794b8f5$export$671c97197a62283c;
 var $b1c160aff794b8f5$export$198bd65f1c7a5309;
 var $b1c160aff794b8f5$export$1db06abc8684077f;
 var $b1c160aff794b8f5$export$e1943f56d410f24c;
@@ -41,6 +43,7 @@ var $b1c160aff794b8f5$export$854d9fad3b5263eb;
 var $b1c160aff794b8f5$export$494f9067c39d24ef;
 $b1c160aff794b8f5$export$bb6008c7ec506dc5 = "panel-subhead_1340c8";
 $b1c160aff794b8f5$export$fb184b623420d9be = "title_1340c8";
+$b1c160aff794b8f5$export$671c97197a62283c = "expansion-panel-icon_1340c8";
 $b1c160aff794b8f5$export$198bd65f1c7a5309 = "info-panel-section_1340c8";
 $b1c160aff794b8f5$export$1db06abc8684077f = "expansion-panel_1340c8";
 $b1c160aff794b8f5$export$e1943f56d410f24c = "sub-expansion-panel_1340c8";
@@ -59,4 +62,4 @@ $b1c160aff794b8f5$export$854d9fad3b5263eb = "expansion-panel-detail-header_1340c
 $b1c160aff794b8f5$export$494f9067c39d24ef = "expansion-panel-detail-body_1340c8";
 
 
-//# sourceMappingURL=main.module.4ecbaaa5.js.map
+//# sourceMappingURL=main.module.a3a78b0d.js.map

package/dist/cjs/main.module.a3a78b0d.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAlBA,4CAAkC;AAClC,4CAA0B;AAC1B,4CAAyC;AACzC,4CAAuC;AACvC,4CAAoC;AACpC,4CAAwC;AACxC,4CAA2C;AAC3C,4CAAiD;AACjD,4CAAuC;AACvC,4CAA4C;AAC5C,4CAA4C;AAC5C,4CAA8C;AAC9C,4CAAgD;AAChD,4CAA8C;AAC9C,4CAAuC;AACvC,4CAAoC;AACpC,4CAAmC;AACnC,4CAAkD;AAClD,4CAAgD","sources":["packages/map-interface/src/expansion-panel/main.module.sass"],"sourcesContent":["\n.panel-subhead\n  padding: 0 1rem\n  border: 1px solid var(--panel-rule-color)\n  border-bottom: 1px solid var(--panel-rule-color)\n  background-color: var(--accent-color)\n  display: flex\n  flex-direction: row\n  align-items: center\n  z-index: 1\n  gap: var(--panel-header-gap, 0.5rem)\n  top: -1px\n  position: sticky\n  min-height: var(--panel-header-height, 40px)\n  h1, h2, h3, h4\n    font-family: Montserrat,sans-serif\n    font-weight: 700\n    margin: 0\n  h4\n    font-weight: 600\n  .title\n    flex-grow: 1\n\n  .expansion-panel-icon\n    margin-right: -0.35em\n\n// :global(.bp5-dark) .panel-subhead\n//   margin 0 1px\n\n.info-panel-section\n  &>.panel-subhead\n    margin: -1px calc(var(--panel-padding-h) * -1) 0\n\n.expansion-panel\n  padding: 0\n  flex-wrap: wrap\n  margin-top: -1px\n  // &.collapsed\n  //   .expansion-panel-header\n  //     border-bottom-width: 0;\n\n.sub-expansion-panel\n  margin: -1px calc(var(--panel-padding-h) * -0.5) 0\n  overflow: hidden\n  &:first-child\n    .expansion-panel-header\n      border-top-width: 0\n  .panel-subhead\n    border-top: none\n    border-bottom: none\n\n  .expansion-panel-header\n    background-color: var(--accent-secondary-color)\n    cursor: pointer\n    padding: 0 1rem\n\n    &:hover\n      background-color: var(--accent-secondary-hover-color)\n    h2, h3, h4\n      font-weight: 500\n      border-bottom: 1px solid var(--tertiary-border-color)\n      border-top: 1px solid var(--tertiary-border-color)\n      align-items: center\n\n.expansion-summary-title-help\n  margin-left: 5px\n  :global(.bp5-icon)\n    margin-left: 5px\n\n.expansion-panel-header\n  cursor: pointer\n  &:hover\n    background-color: var(--accent-hover-color)\n  :global(.bp5-icon)\n    transform: translate(0,3px)\n\n.expansion-children\n  padding: 0 1rem\n  .expansion-panel\n    margin-left: -1rem\n    margin-right: -1rem\n    &:first-child\n      margin-top: 0\n  &>:first-child\n    margin-top: 1rem\n  &>:last-child\n    margin-bottom: 1rem\n\n\n\n.expansion-panel-subtext\n  font-size: 85%\n  font-weight: 400\n\n:global\n  .expansion-panel-root\n    padding-left: 15px !important\n\n  .expansion-panel-detail\n    display: block !important\n    padding: 0 !important\n\n  .expansion-panel-detail-sub\n    display: block !important\n\n// New expandable panel for details\n.expandable-details-main\n  display: flex\n  flex-direction: row\n  align-items: center\n  justify-content: space-between\n  margin: 3px 0\n\n.expandable-details-header\n  display: inline-flex\n  flex-direction: row\n  align-items: baseline\n  flex-grow: 1\n\n.expandable-details-children\n  position: relative\n\n.expandable-details-toggle\n  :global(.bp5-button)\n    font-size: 10px\n\n.expandable-details\n  &.macrostrat-unit\n    .title:after\n      content: none\n  .title\n    margin-right: 1em\n    &:after\n      content: \":\"\n\n.expansion-body\n  display: inline-block\n  //flex-direction row\n  align-items: baseline\n  background-color: var(--tertiary-background)\n  padding: 2px 6px\n  border-radius: 4px\n  width: 100%\n  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.2)\n  margin-bottom: 6px\n\n.expansion-panel-detail-header\n  font-size: 90%\n  font-style: italic\n  margin-right: 1em\n  display: inline\n  color: var(--secondary-color)\n  &:after\n    content: \":\"\n\n.expansion-panel-detail-body\n  display: inline\n"],"names":[],"version":3,"file":"main.module.a3a78b0d.js.map"}

package/dist/cjs/{map-page.190b6723.js → map-page.9c19b2a9.js}

@@ -2,12 +2,12 @@ var $8646508ae99a5857$exports = require("./xray.a23f8660.js");
 var $c3311f59335df34d$exports = require("./container.72611900.js");
 var $fce5fc950d1fe35b$exports = require("./context-panel.8c4b009c.js");
 var $2611a7b4364593e5$exports = require("./helpers.0f72ddaf.js");
-var $2bc7c1e4e7da7fdf$exports = require("./location-panel.c95f5e96.js");
+var $2bc7c1e4e7da7fdf$exports = require("./location-panel.42ca3200.js");
 var $12b6032029db16d4$exports = require("./map-view.93363b41.js");
 var $33088e8384af337c$exports = require("./main.module.ccec47df.js");
 require("./main.module.becc2fe7.css");
 var $abbe8d0af34cbbed$exports = require("./tile-extent.06a4b2ed.js");
-var $db14eb7a5c07abdb$exports = require("./vector-tile-features.456f887b.js");
+var $db14eb7a5c07abdb$exports = require("./vector-tile-features.77121785.js");
 var $g1A1s$blueprintjscore = require("@blueprintjs/core");
 var $g1A1s$macrostrathyper = require("@macrostrat/hyper");
 var $g1A1s$macrostratuicomponents = require("@macrostrat/ui-components");
@@ -179,4 +179,4 @@ function $6f5ca387ac26c0b5$var$MapInspector(props) {
 const $6f5ca387ac26c0b5$export$2391061fbdfb71ef = $6f5ca387ac26c0b5$var$MapInspector;
 
 
-//# sourceMappingURL=map-page.190b6723.js.map
+//# sourceMappingURL=map-page.9c19b2a9.js.map

package/dist/cjs/{map-page.190b6723.js.map → map-page.9c19b2a9.js.map}

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/map-interface/src/dev/map-page.ts"],"sourcesContent":["// Import other components\nimport { Switch } from \"@blueprintjs/core\";\nimport hyper from \"@macrostrat/hyper\";\nimport { Spacer, useDarkMode, useStoredState } from \"@macrostrat/ui-components\";\nimport mapboxgl from \"mapbox-gl\";\nimport { useCallback, useState, useEffect } from \"react\";\nimport { buildInspectorStyle } from \"./xray\";\nimport { MapAreaContainer, PanelCard } from \"../container\";\nimport { FloatingNavbar, MapLoadingButton } from \"../context-panel\";\nimport { MapMarker } from \"../helpers\";\nimport { LocationPanel } from \"../location-panel\";\nimport { MapView } from \"../map-view\";\nimport styles from \"./main.module.sass\";\nimport { TileExtentLayer } from \"./tile-extent\";\nimport {\n  FeaturePanel,\n  FeatureSelectionHandler,\n  TileInfo,\n} from \"./vector-tile-features\";\nimport { MapPosition } from \"@macrostrat/mapbox-utils\";\n\nexport const h = hyper.styled(styles);\n\nexport function MapInspectorV2({\n  title = \"Map inspector\",\n  headerElement = null,\n  transformRequest = null,\n  mapPosition = null,\n  mapboxToken = null,\n  overlayStyle = null,\n  controls = null,\n  children = null,\n  style,\n  bounds = null,\n  focusedSource = null,\n  focusedSourceTitle = null,\n  fitViewport = true,\n  styleType = \"macrostrat\",\n}: {\n  headerElement?: React.ReactNode;\n  transformRequest?: mapboxgl.TransformRequestFunction;\n  title?: string;\n  style?: mapboxgl.Style | string;\n  controls?: React.ReactNode;\n  children?: React.ReactNode;\n  mapboxToken?: string;\n  overlayStyle?: mapboxgl.Style | string;\n  focusedSource?: string;\n  focusedSourceTitle?: string;\n  projection?: string;\n  mapPosition?: MapPosition;\n  bounds?: [number, number, number, number];\n  fitViewport?: boolean;\n  styleType?: \"standard\" | \"macrostrat\";\n}) {\n  /* We apply a custom style to the panel container when we are interacting\n    with the search bar, so that we can block map interactions until search\n    bar focus is lost.\n    We also apply a custom style when the infodrawer is open so we can hide\n    the search bar on mobile platforms\n  */\n\n  const dark = useDarkMode();\n  const isEnabled = dark?.isEnabled;\n\n  if (mapboxToken != null) {\n    mapboxgl.accessToken = mapboxToken;\n  }\n\n  if (styleType == \"macrostrat\") {\n    style ??= isEnabled\n      ? \"mapbox://styles/jczaplewski/cl5uoqzzq003614o6url9ou9z?optimize=true\"\n      : \"mapbox://styles/jczaplewski/clatdbkw4002q14lov8zx0bm0?optimize=true\";\n  } else {\n    style ??= isEnabled\n      ? \"mapbox://styles/mapbox/dark-v10\"\n      : \"mapbox://styles/mapbox/light-v10\";\n  }\n\n  const [isOpen, setOpen] = useState(false);\n\n  const [state, setState] = useStoredState(\"macrostrat:dev-map-page\", {\n    showTileExtent: false,\n    xRay: false,\n  });\n  const { showTileExtent, xRay } = state;\n\n  const [actualStyle, setActualStyle] = useState(null);\n\n  useEffect(() => {\n    buildInspectorStyle(style, overlayStyle, {\n      mapboxToken,\n      inDarkMode: isEnabled,\n      xRay,\n    }).then(setActualStyle);\n  }, [style, xRay, mapboxToken, isEnabled, overlayStyle]);\n\n  const [inspectPosition, setInspectPosition] =\n    useState<mapboxgl.LngLat | null>(null);\n\n  const [data, setData] = useState(null);\n\n  const onSelectPosition = useCallback((position: mapboxgl.LngLat) => {\n    setInspectPosition(position);\n  }, []);\n\n  let detailElement = null;\n  if (inspectPosition != null) {\n    detailElement = h(\n      LocationPanel,\n      {\n        onClose() {\n          setInspectPosition(null);\n        },\n        position: inspectPosition,\n      },\n      [\n        h(TileInfo, {\n          feature: data?.[0] ?? null,\n          showExtent: showTileExtent,\n          setShowExtent() {\n            setState({ ...state, showTileExtent: !showTileExtent });\n          },\n        }),\n        h(FeaturePanel, { features: data, focusedSource, focusedSourceTitle }),\n      ]\n    );\n  }\n\n  let tile = null;\n  if (showTileExtent && data?.[0] != null) {\n    let f = data[0];\n    tile = { x: f._x, y: f._y, z: f._z };\n  }\n\n  return h(\n    MapAreaContainer,\n    {\n      navbar: h(FloatingNavbar, {\n        rightElement: h(MapLoadingButton, {\n          large: true,\n          active: isOpen,\n          onClick: () => setOpen(!isOpen),\n          style: {\n            marginRight: \"-5px\",\n          },\n        }),\n        headerElement,\n        title,\n      }),\n      contextPanel: h(PanelCard, [\n        controls,\n        h(Switch, {\n          checked: xRay,\n          label: \"X-ray mode\",\n          onChange() {\n            setState({ ...state, xRay: !xRay });\n          },\n        }),\n      ]),\n      detailPanel: detailElement,\n      contextPanelOpen: isOpen,\n      fitViewport,\n    },\n    h(\n      MapView,\n      {\n        style: actualStyle,\n        transformRequest,\n        mapPosition,\n        projection: { name: \"globe\" },\n        mapboxToken,\n        bounds,\n      },\n      [\n        h(FeatureSelectionHandler, {\n          selectedLocation: inspectPosition,\n          setFeatures: setData,\n        }),\n        h(MapMarker, {\n          position: inspectPosition,\n          setPosition: onSelectPosition,\n        }),\n        h(TileExtentLayer, { tile, color: isEnabled ? \"white\" : \"black\" }),\n        children,\n      ]\n    )\n  );\n}\n\nfunction MapInspector(props) {\n  const { children, controls, ...rest } = props;\n  /** Compatibility wrapper for MapInspectorV2 */\n  // React warning about this legacy usage\n  console.warn(\"MapInspector is deprecated. Use MapInspectorV2 instead\");\n\n  return h(MapInspectorV2, {\n    ...rest,\n    controls: [children, controls],\n  });\n}\n\n// Legacy export\nexport const DevMapPage = MapInspector;\n"],"names":[],"version":3,"file":"map-page.190b6723.js.map"}
+{"mappings":"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","sources":["packages/map-interface/src/dev/map-page.ts"],"sourcesContent":["// Import other components\nimport { Switch } from \"@blueprintjs/core\";\nimport hyper from \"@macrostrat/hyper\";\nimport { Spacer, useDarkMode, useStoredState } from \"@macrostrat/ui-components\";\nimport mapboxgl from \"mapbox-gl\";\nimport { useCallback, useState, useEffect } from \"react\";\nimport { buildInspectorStyle } from \"./xray\";\nimport { MapAreaContainer, PanelCard } from \"../container\";\nimport { FloatingNavbar, MapLoadingButton } from \"../context-panel\";\nimport { MapMarker } from \"../helpers\";\nimport { LocationPanel } from \"../location-panel\";\nimport { MapView } from \"../map-view\";\nimport styles from \"./main.module.sass\";\nimport { TileExtentLayer } from \"./tile-extent\";\nimport {\n  FeaturePanel,\n  FeatureSelectionHandler,\n  TileInfo,\n} from \"./vector-tile-features\";\nimport { MapPosition } from \"@macrostrat/mapbox-utils\";\n\nexport const h = hyper.styled(styles);\n\nexport function MapInspectorV2({\n  title = \"Map inspector\",\n  headerElement = null,\n  transformRequest = null,\n  mapPosition = null,\n  mapboxToken = null,\n  overlayStyle = null,\n  controls = null,\n  children = null,\n  style,\n  bounds = null,\n  focusedSource = null,\n  focusedSourceTitle = null,\n  fitViewport = true,\n  styleType = \"macrostrat\",\n}: {\n  headerElement?: React.ReactNode;\n  transformRequest?: mapboxgl.TransformRequestFunction;\n  title?: string;\n  style?: mapboxgl.Style | string;\n  controls?: React.ReactNode;\n  children?: React.ReactNode;\n  mapboxToken?: string;\n  overlayStyle?: mapboxgl.Style | string;\n  focusedSource?: string;\n  focusedSourceTitle?: string;\n  projection?: string;\n  mapPosition?: MapPosition;\n  bounds?: [number, number, number, number];\n  fitViewport?: boolean;\n  styleType?: \"standard\" | \"macrostrat\";\n}) {\n  /* We apply a custom style to the panel container when we are interacting\n    with the search bar, so that we can block map interactions until search\n    bar focus is lost.\n    We also apply a custom style when the infodrawer is open so we can hide\n    the search bar on mobile platforms\n  */\n\n  const dark = useDarkMode();\n  const isEnabled = dark?.isEnabled;\n\n  if (mapboxToken != null) {\n    mapboxgl.accessToken = mapboxToken;\n  }\n\n  if (styleType == \"macrostrat\") {\n    style ??= isEnabled\n      ? \"mapbox://styles/jczaplewski/cl5uoqzzq003614o6url9ou9z?optimize=true\"\n      : \"mapbox://styles/jczaplewski/clatdbkw4002q14lov8zx0bm0?optimize=true\";\n  } else {\n    style ??= isEnabled\n      ? \"mapbox://styles/mapbox/dark-v10\"\n      : \"mapbox://styles/mapbox/light-v10\";\n  }\n\n  const [isOpen, setOpen] = useState(false);\n\n  const [state, setState] = useStoredState(\"macrostrat:dev-map-page\", {\n    showTileExtent: false,\n    xRay: false,\n  });\n  const { showTileExtent, xRay } = state;\n\n  const [actualStyle, setActualStyle] = useState(null);\n\n  useEffect(() => {\n    buildInspectorStyle(style, overlayStyle, {\n      mapboxToken,\n      inDarkMode: isEnabled,\n      xRay,\n    }).then(setActualStyle);\n  }, [style, xRay, mapboxToken, isEnabled, overlayStyle]);\n\n  const [inspectPosition, setInspectPosition] =\n    useState<mapboxgl.LngLat | null>(null);\n\n  const [data, setData] = useState(null);\n\n  const onSelectPosition = useCallback((position: mapboxgl.LngLat) => {\n    setInspectPosition(position);\n  }, []);\n\n  let detailElement = null;\n  if (inspectPosition != null) {\n    detailElement = h(\n      LocationPanel,\n      {\n        onClose() {\n          setInspectPosition(null);\n        },\n        position: inspectPosition,\n      },\n      [\n        h(TileInfo, {\n          feature: data?.[0] ?? null,\n          showExtent: showTileExtent,\n          setShowExtent() {\n            setState({ ...state, showTileExtent: !showTileExtent });\n          },\n        }),\n        h(FeaturePanel, { features: data, focusedSource, focusedSourceTitle }),\n      ]\n    );\n  }\n\n  let tile = null;\n  if (showTileExtent && data?.[0] != null) {\n    let f = data[0];\n    tile = { x: f._x, y: f._y, z: f._z };\n  }\n\n  return h(\n    MapAreaContainer,\n    {\n      navbar: h(FloatingNavbar, {\n        rightElement: h(MapLoadingButton, {\n          large: true,\n          active: isOpen,\n          onClick: () => setOpen(!isOpen),\n          style: {\n            marginRight: \"-5px\",\n          },\n        }),\n        headerElement,\n        title,\n      }),\n      contextPanel: h(PanelCard, [\n        controls,\n        h(Switch, {\n          checked: xRay,\n          label: \"X-ray mode\",\n          onChange() {\n            setState({ ...state, xRay: !xRay });\n          },\n        }),\n      ]),\n      detailPanel: detailElement,\n      contextPanelOpen: isOpen,\n      fitViewport,\n    },\n    h(\n      MapView,\n      {\n        style: actualStyle,\n        transformRequest,\n        mapPosition,\n        projection: { name: \"globe\" },\n        mapboxToken,\n        bounds,\n      },\n      [\n        h(FeatureSelectionHandler, {\n          selectedLocation: inspectPosition,\n          setFeatures: setData,\n        }),\n        h(MapMarker, {\n          position: inspectPosition,\n          setPosition: onSelectPosition,\n        }),\n        h(TileExtentLayer, { tile, color: isEnabled ? \"white\" : \"black\" }),\n        children,\n      ]\n    )\n  );\n}\n\nfunction MapInspector(props) {\n  const { children, controls, ...rest } = props;\n  /** Compatibility wrapper for MapInspectorV2 */\n  // React warning about this legacy usage\n  console.warn(\"MapInspector is deprecated. Use MapInspectorV2 instead\");\n\n  return h(MapInspectorV2, {\n    ...rest,\n    controls: [children, controls],\n  });\n}\n\n// Legacy export\nexport const DevMapPage = MapInspector;\n"],"names":[],"version":3,"file":"map-page.9c19b2a9.js.map"}

package/dist/cjs/{vector-tile-features.456f887b.js → vector-tile-features.77121785.js}

@@ -1,6 +1,6 @@
 var $33088e8384af337c$exports = require("./main.module.ccec47df.js");
 require("./main.module.becc2fe7.css");
-var $750d69d73bfbdc9a$exports = require("./expansion-panel.08532cee.js");
+var $750d69d73bfbdc9a$exports = require("./expansion-panel.ef757efe.js");
 var $dHcMG$blueprintjscore = require("@blueprintjs/core");
 var $dHcMG$macrostratmapboxreact = require("@macrostrat/mapbox-react");
 var $dHcMG$macrostrathyper = require("@macrostrat/hyper");
@@ -265,4 +265,4 @@ function $db14eb7a5c07abdb$export$617d79dae526d2cf({ features: features }) {
 }
 
 
-//# sourceMappingURL=vector-tile-features.456f887b.js.map
+//# sourceMappingURL=vector-tile-features.77121785.js.map

package/dist/cjs/{vector-tile-features.456f887b.js.map → vector-tile-features.77121785.js.map}

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/map-interface/src/dev/vector-tile-features.ts"],"sourcesContent":["import { Spinner, Switch, Button, Intent } from \"@blueprintjs/core\";\nimport { useMapRef, useMapStatus } from \"@macrostrat/mapbox-react\";\nimport mapboxgl from \"mapbox-gl\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { JSONView } from \"@macrostrat/ui-components\";\nimport { group } from \"d3-array\";\nimport { ExpansionPanel } from \"../expansion-panel\";\n\nconst h = hyper.styled(styles);\n\nexport function FeatureProperties({ data, ...rest }) {\n  // Instead of managing hover state with CSS, we use a state variable,\n  // so that the button re-renders when the state changes\n  const [showControls, setShowControls] = useState(false);\n  const onMouseEnter = useCallback(() => setShowControls(true), []);\n  const onMouseLeave = useCallback(() => setShowControls(false), []);\n\n  return h(\"div.feature-properties\", { onMouseEnter, onMouseLeave }, [\n    h.if(showControls)(\"div.controls\", h(CopyJSONButton, { data })),\n    h(JSONView, {\n      data,\n      hideRoot: true,\n      ...rest,\n    }),\n  ]);\n}\n\nexport function FeatureRecord({ feature }) {\n  const props = feature.properties;\n  return h(\"div.feature-record\", [\n    h.if(Object.keys(props).length > 0)(FeatureProperties, { data: props }),\n  ]);\n}\n\nfunction CopyJSONButton({ data }) {\n  const [copied, setCopied] = useState(false);\n  return h(Button, {\n    icon: copied ? \"tick\" : \"clipboard\",\n    intent: copied ? Intent.SUCCESS : Intent.NONE,\n    minimal: true,\n    small: true,\n    onClick() {\n      navigator.clipboard.writeText(JSON.stringify(data, null, 2));\n      setCopied(true);\n    },\n  });\n}\n\n/** This component wraps queryRenderedFeatures to get features at a given location */\nexport function FeatureSelectionHandler({\n  selectedLocation,\n  setFeatures,\n  radius = 2,\n}: {\n  selectedLocation: mapboxgl.LngLat;\n  setFeatures: (features: mapboxgl.MapboxGeoJSONFeature[]) => void;\n  radius?: number;\n}) {\n  const mapRef = useMapRef();\n  const isLoading = useMapStatus((s) => s.isLoading);\n  const isInitialized = useMapStatus((s) => s.isInitialized);\n  const prevLocation = useRef(null);\n  const prevFeatures = useRef([]);\n\n  useEffect(() => {\n    const map = mapRef?.current;\n    if (map == null) return;\n    if (selectedLocation == null) {\n      setFeatures(null);\n      return;\n    }\n\n    if (!isInitialized) return;\n\n    const hasPreviouslyLoadedFeatures = prevFeatures.current.length > 0;\n\n    const locationMemo = JSON.stringify(selectedLocation);\n    if (locationMemo == prevLocation.current && hasPreviouslyLoadedFeatures)\n      return;\n\n    prevLocation.current = locationMemo;\n\n    // Don't update if the location hasn't changed\n    //if (selectedLocation == prevLocation) return;\n\n    const r = radius;\n    const pt = map.project(selectedLocation);\n\n    const bbox: [mapboxgl.PointLike, mapboxgl.PointLike] = [\n      [pt.x - r, pt.y - r],\n      [pt.x + r, pt.y + r],\n    ];\n    const features = map.queryRenderedFeatures(bbox);\n    prevFeatures.current = features ?? [];\n    setFeatures(features);\n  }, [isInitialized, selectedLocation, isLoading]);\n\n  return null;\n}\n\nfunction FeatureHeader({ feature }) {\n  return h(\"div.feature-header\", [\n    h(\"h3\", [\n      h(KeyValue, { label: \"Source\", value: feature.source }),\n      h(KeyValue, { label: \"Source layer\", value: feature.sourceLayer }),\n    ]),\n  ]);\n}\n\nfunction KeyValue({ label, value }) {\n  return h(\"span.key-value\", [h(\"span.key\", label), h(\"code.value\", value)]);\n}\n\nfunction LoadingAwareFeatureSet({ features, sourceID }) {\n  const map = useMapRef();\n  if (map?.current == null) return null;\n  const [isLoaded, setIsLoaded] = useState(false);\n\n  const sourceFeatures = features.filter((d) => d.source == \"burwell\");\n\n  useEffect(() => {\n    if (sourceFeatures.length > 0) {\n      setIsLoaded(true);\n      return;\n    }\n\n    const isLoaded = map.current.isSourceLoaded(sourceID);\n    setIsLoaded(isLoaded);\n    if (!isLoaded) {\n      map.current.once(\"sourcedata\", (e) => {\n        if (e.sourceId == sourceID) {\n          setIsLoaded(true);\n        }\n      });\n    }\n  }, [map.current, sourceID, sourceFeatures.length]);\n\n  if (!isLoaded) return h(Spinner);\n  return h(Features, { features: sourceFeatures });\n}\n\nexport function TileInfo({ feature, showExtent, setShowExtent }) {\n  if (feature == null) return null;\n  const size = feature._vectorTileFeature._pbf.length;\n  return h(\"div.tile-info\", [\n    h(\"h3\", \"Tile\"),\n    h(\"div.tile-index\", [\n      h(KeyValue, { label: \"x\", value: feature._x }),\n      h(KeyValue, { label: \"y\", value: feature._y }),\n      h(KeyValue, { label: \"z\", value: feature._z }),\n    ]),\n    h(\"div.spacer\"),\n    h(KeyValue, { label: \"Size\", value: formatSize(size) }),\n    h(Switch, {\n      label: \"Show extent\",\n      alignIndicator: \"right\",\n      checked: showExtent,\n      onChange() {\n        setShowExtent(!showExtent);\n      },\n    }),\n  ]);\n}\n\nfunction formatSize(size: number) {\n  if (size > 1000000)\n    return h(UnitNumber, { value: size / 1000000, unit: \"Mb\" });\n  if (size > 1000) return h(UnitNumber, { value: size / 1000, unit: \"Kb\" });\n  return `${size} bytes`;\n}\n\nfunction UnitNumber({ value, unit, precision = 1 }) {\n  return h(\"span.unit-number\", [\n    h(\"span.number\", value.toFixed(precision)),\n    h(\"span.unit\", unit),\n  ]);\n}\n\nexport function FeaturePanel({ features, focusedSource = null }) {\n  if (features == null) return null;\n\n  let focusedSourcePanel = null;\n  let filteredFeatures = features;\n  let title = \"Features\";\n\n  if (focusedSource != null) {\n    title = \"Basemap features\";\n    focusedSourcePanel = h(\n      ExpansionPanel,\n      {\n        title: \"Macrostrat features\",\n        className: \"macrostrat-features\",\n        expanded: true,\n      },\n      [\n        h(LoadingAwareFeatureSet, {\n          features,\n          sourceID: focusedSource,\n        }),\n      ]\n    );\n    filteredFeatures = features.filter((d) => d.source != focusedSource);\n  }\n\n  return h(\"div.feature-panel\", [\n    focusedSourcePanel,\n    h(\n      ExpansionPanel,\n      { title, className: \"basemap-features\", expanded: focusedSource == null },\n      [\n        h(FeatureGroups, {\n          features: filteredFeatures,\n        }),\n      ]\n    ),\n  ]);\n}\n\nfunction FeatureGroups({ features }) {\n  /** Group features by source and sourceLayer */\n  if (features == null) return null;\n\n  const groups = group(features, (d) => `${d.source} - ${d.sourceLayer}`);\n\n  return h(\n    \"div.feature-groups\",\n    Array.from(groups).map(([key, features]) => {\n      return h(\"div.feature-group\", [\n        h(FeatureHeader, { feature: features[0] }),\n        h(Features, { features }),\n      ]);\n    })\n  );\n}\n\nexport function Features({ features }) {\n  return h(\n    \"div.features\",\n    features.map((feature, i) => h(FeatureRecord, { key: i, feature }))\n  );\n}\n"],"names":[],"version":3,"file":"vector-tile-features.456f887b.js.map"}
+{"mappings":"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","sources":["packages/map-interface/src/dev/vector-tile-features.ts"],"sourcesContent":["import { Spinner, Switch, Button, Intent } from \"@blueprintjs/core\";\nimport { useMapRef, useMapStatus } from \"@macrostrat/mapbox-react\";\nimport mapboxgl from \"mapbox-gl\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { JSONView } from \"@macrostrat/ui-components\";\nimport { group } from \"d3-array\";\nimport { ExpansionPanel } from \"../expansion-panel\";\n\nconst h = hyper.styled(styles);\n\nexport function FeatureProperties({ data, ...rest }) {\n  // Instead of managing hover state with CSS, we use a state variable,\n  // so that the button re-renders when the state changes\n  const [showControls, setShowControls] = useState(false);\n  const onMouseEnter = useCallback(() => setShowControls(true), []);\n  const onMouseLeave = useCallback(() => setShowControls(false), []);\n\n  return h(\"div.feature-properties\", { onMouseEnter, onMouseLeave }, [\n    h.if(showControls)(\"div.controls\", h(CopyJSONButton, { data })),\n    h(JSONView, {\n      data,\n      hideRoot: true,\n      ...rest,\n    }),\n  ]);\n}\n\nexport function FeatureRecord({ feature }) {\n  const props = feature.properties;\n  return h(\"div.feature-record\", [\n    h.if(Object.keys(props).length > 0)(FeatureProperties, { data: props }),\n  ]);\n}\n\nfunction CopyJSONButton({ data }) {\n  const [copied, setCopied] = useState(false);\n  return h(Button, {\n    icon: copied ? \"tick\" : \"clipboard\",\n    intent: copied ? Intent.SUCCESS : Intent.NONE,\n    minimal: true,\n    small: true,\n    onClick() {\n      navigator.clipboard.writeText(JSON.stringify(data, null, 2));\n      setCopied(true);\n    },\n  });\n}\n\n/** This component wraps queryRenderedFeatures to get features at a given location */\nexport function FeatureSelectionHandler({\n  selectedLocation,\n  setFeatures,\n  radius = 2,\n}: {\n  selectedLocation: mapboxgl.LngLat;\n  setFeatures: (features: mapboxgl.MapboxGeoJSONFeature[]) => void;\n  radius?: number;\n}) {\n  const mapRef = useMapRef();\n  const isLoading = useMapStatus((s) => s.isLoading);\n  const isInitialized = useMapStatus((s) => s.isInitialized);\n  const prevLocation = useRef(null);\n  const prevFeatures = useRef([]);\n\n  useEffect(() => {\n    const map = mapRef?.current;\n    if (map == null) return;\n    if (selectedLocation == null) {\n      setFeatures(null);\n      return;\n    }\n\n    if (!isInitialized) return;\n\n    const hasPreviouslyLoadedFeatures = prevFeatures.current.length > 0;\n\n    const locationMemo = JSON.stringify(selectedLocation);\n    if (locationMemo == prevLocation.current && hasPreviouslyLoadedFeatures)\n      return;\n\n    prevLocation.current = locationMemo;\n\n    // Don't update if the location hasn't changed\n    //if (selectedLocation == prevLocation) return;\n\n    const r = radius;\n    const pt = map.project(selectedLocation);\n\n    const bbox: [mapboxgl.PointLike, mapboxgl.PointLike] = [\n      [pt.x - r, pt.y - r],\n      [pt.x + r, pt.y + r],\n    ];\n    const features = map.queryRenderedFeatures(bbox);\n    prevFeatures.current = features ?? [];\n    setFeatures(features);\n  }, [isInitialized, selectedLocation, isLoading]);\n\n  return null;\n}\n\nfunction FeatureHeader({ feature }) {\n  return h(\"div.feature-header\", [\n    h(\"h3\", [\n      h(KeyValue, { label: \"Source\", value: feature.source }),\n      h(KeyValue, { label: \"Source layer\", value: feature.sourceLayer }),\n    ]),\n  ]);\n}\n\nfunction KeyValue({ label, value }) {\n  return h(\"span.key-value\", [h(\"span.key\", label), h(\"code.value\", value)]);\n}\n\nfunction LoadingAwareFeatureSet({ features, sourceID }) {\n  const map = useMapRef();\n  if (map?.current == null) return null;\n  const [isLoaded, setIsLoaded] = useState(false);\n\n  const sourceFeatures = features.filter((d) => d.source == \"burwell\");\n\n  useEffect(() => {\n    if (sourceFeatures.length > 0) {\n      setIsLoaded(true);\n      return;\n    }\n\n    const isLoaded = map.current.isSourceLoaded(sourceID);\n    setIsLoaded(isLoaded);\n    if (!isLoaded) {\n      map.current.once(\"sourcedata\", (e) => {\n        if (e.sourceId == sourceID) {\n          setIsLoaded(true);\n        }\n      });\n    }\n  }, [map.current, sourceID, sourceFeatures.length]);\n\n  if (!isLoaded) return h(Spinner);\n  return h(Features, { features: sourceFeatures });\n}\n\nexport function TileInfo({ feature, showExtent, setShowExtent }) {\n  if (feature == null) return null;\n  const size = feature._vectorTileFeature._pbf.length;\n  return h(\"div.tile-info\", [\n    h(\"h3\", \"Tile\"),\n    h(\"div.tile-index\", [\n      h(KeyValue, { label: \"x\", value: feature._x }),\n      h(KeyValue, { label: \"y\", value: feature._y }),\n      h(KeyValue, { label: \"z\", value: feature._z }),\n    ]),\n    h(\"div.spacer\"),\n    h(KeyValue, { label: \"Size\", value: formatSize(size) }),\n    h(Switch, {\n      label: \"Show extent\",\n      alignIndicator: \"right\",\n      checked: showExtent,\n      onChange() {\n        setShowExtent(!showExtent);\n      },\n    }),\n  ]);\n}\n\nfunction formatSize(size: number) {\n  if (size > 1000000)\n    return h(UnitNumber, { value: size / 1000000, unit: \"Mb\" });\n  if (size > 1000) return h(UnitNumber, { value: size / 1000, unit: \"Kb\" });\n  return `${size} bytes`;\n}\n\nfunction UnitNumber({ value, unit, precision = 1 }) {\n  return h(\"span.unit-number\", [\n    h(\"span.number\", value.toFixed(precision)),\n    h(\"span.unit\", unit),\n  ]);\n}\n\nexport function FeaturePanel({ features, focusedSource = null }) {\n  if (features == null) return null;\n\n  let focusedSourcePanel = null;\n  let filteredFeatures = features;\n  let title = \"Features\";\n\n  if (focusedSource != null) {\n    title = \"Basemap features\";\n    focusedSourcePanel = h(\n      ExpansionPanel,\n      {\n        title: \"Macrostrat features\",\n        className: \"macrostrat-features\",\n        expanded: true,\n      },\n      [\n        h(LoadingAwareFeatureSet, {\n          features,\n          sourceID: focusedSource,\n        }),\n      ]\n    );\n    filteredFeatures = features.filter((d) => d.source != focusedSource);\n  }\n\n  return h(\"div.feature-panel\", [\n    focusedSourcePanel,\n    h(\n      ExpansionPanel,\n      { title, className: \"basemap-features\", expanded: focusedSource == null },\n      [\n        h(FeatureGroups, {\n          features: filteredFeatures,\n        }),\n      ]\n    ),\n  ]);\n}\n\nfunction FeatureGroups({ features }) {\n  /** Group features by source and sourceLayer */\n  if (features == null) return null;\n\n  const groups = group(features, (d) => `${d.source} - ${d.sourceLayer}`);\n\n  return h(\n    \"div.feature-groups\",\n    Array.from(groups).map(([key, features]) => {\n      return h(\"div.feature-group\", [\n        h(FeatureHeader, { feature: features[0] }),\n        h(Features, { features }),\n      ]);\n    })\n  );\n}\n\nexport function Features({ features }) {\n  return h(\n    \"div.features\",\n    features.map((feature, i) => h(FeatureRecord, { key: i, feature }))\n  );\n}\n"],"names":[],"version":3,"file":"vector-tile-features.77121785.js.map"}