@macrostrat/map-interface 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -4,6 +4,10 @@ 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.0.1] - 2024-10-02
+
+- Bug fix: missing package specifier
+
 ## [1.0.0] - 2024-10-02
 
 Updated to use BlueprintJS 5.0 

package/dist/main.css

@@ -85,6 +85,7 @@
 
 .VPa3-W_infodrawer {
   pointer-events: all;
+  background-color: var(--panel-background-color);
   flex-direction: column;
   max-width: 100%;
   height: fit-content;
@@ -94,6 +95,7 @@
 }
 
 .VPa3-W_infodrawer.bp5-card {
+  background-color: var(--panel-background-color);
   padding: 0;
 }
 
@@ -396,6 +398,10 @@
   transform: scale(.9)translate(-8px, 2px);
 }
 
+.bp5-dark .mapboxgl-ctrl-group {
+  background-color: var(--panel-background-color);
+}
+
 .bp5-dark .mapboxgl-ctrl-logo {
   filter: invert();
 }

package/dist/main.css.map

@@ -1 +1 @@
-{"mappings":"ACAA;;;;;;;AAKE;;;;;AAGA;;;;;;;;;;;AASE;;;;;AAIJ;;;;;AAIA;;;;;;AAOA;EACE;;;;;;;ACjCF;;;;AAEE;;;;AAGF;;;;;;;;;AAOE;;;;AAEA;;;;AAGA;;;;AAGF;;;;AAEE;;;;;AAIF;;;;;;;;;;AAQE;;;;AAIE;;;;;AAIJ;;;;AAGA;;;;;;;;AAQA;EACE;;;;;ACtDF;;;;;;;;;AAQI;;;;AAEF;;;;;;AAOA;;;;AAGE;;;;AAGF;;;;AAEA;;;;AAEA;;;;AAKE;;;;AAEF;;;;AAIE;;;;;AAME;;;;;;;;;;;;;;;;;;;;;;AAeJ;;;;;;;;;AAOA;;;;;;;;;;AAYF;;;;;AAME;;;;AAGA;;;;;;;;;;AASA;;;;;;;;;;;;AAQA;;;;;;;;;;;;;;AAWA;;;;;;;;;;;;;;;AAUF;;;;;;;;AAKE;;;;;;;AAKA;;;;;;;;;;;;;;;;;AAYA;;;;;AAGA;;;;AAGA;;;;;;;AAMA;;;;;;AAKA;;;;;;;;;;;;;;;AAWA;;;;AAEF;;;;AAGE;;;;AAEF;;;;;;;;;AAME;;;;;AAGA;;;;;;;;;;;;;;;;AAaI;;;;AAGF;;;;AAGA;;;;AAGF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA;;;;;;;;AAOE;;;;;;;;;;;;;;AAcJ;;;;;;;;;AASE;;;;;;AAME;;;;;;AAMJ;EAAA;;;;;;EAOE;;;;;;EAEF;;;;EAKE;;;;EAGA;;;;EASF;;;;;;EAKE;;;;;AAQF;EAMI;;;;;;;;;;;;;;;;;;EAeF;;;;;;EAKA;;;;;;;;EAMF;;;;;EAKI;;;;EAIA;;;;;;EAKF;;;;;EAIE;;;;;EAIA;;;;EAGE;;;;;;;;EAWA;;;;;;;;;;AAQJ;;;;;;;;;AAOE;;;;AAGE;;;;AAMA;;;;AAGF;;;;AAGF;;;;AAGE;;;;AAQA;;;;AAEE;;;;AAGJ;;;;AAEA;EACE;;;;EAEA;;;;;;;;;;;;;;EAWA;;;;EAKA;;;;;AAGE;;;;;;;;;;;;;;AC/cN;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBE;;;;;;;AAKE;;;;;AAGF;;;;;AAGF;;;;;;;;;;AAMA;;;;AAGE;;;;AAEE;;;;;AAGF;;;;;;;;;;;AASE;;;;ACjDJ;;;;;;;;;;;;;;AAYE;;;;;;AAIA;;;;AAEA;;;;;;;;;;;;;;AAaA;;;;;AAMA;;;;AAGE;;;;;AAGA;;;;;AAIA;;;;AAEA;;;;;;;;;AAOE;;;;;;;;;;;;AASJ;;;;AAEE;;;;AAEA;;;;;AAGF;;;;AAEE;;;;;AAGE;;;;AAEN;;;;;;;;;;;;;;;;;;;;;;;;AAoBE;;;;;;;;AAKA;;;;;;;;AAKA;;;;AAGA;;;;;;;;;;;AASE;;;;;;;;AAOF;;;;AAGA","sources":["026f05482703be1f","packages/map-interface/src/context-panel/main.module.sass","packages/map-interface/src/location-panel/main.module.sass","packages/map-interface/src/main.module.sass","packages/map-interface/src/dev/main.module.sass","packages/map-interface/src/expansion-panel/main.module.sass"],"sourcesContent":["@import \"ae7b07f141202fc9\";\n@import \"48f0a4a6f8ddc91e\";\n@import \"82cdba93b0548a93\";\n@import \"07c2aff8cd76b425\";\n@import \"b685950deb9cf075\";\n",".searchbar-holder\n  transition: margin 300ms\n  display: flex\n  flex-direction: column\n  margin: 0\n  .navbar-holder\n    display: flex\n    flex-direction: row\n  .searchbar\n    width: 100%\n    background-color: var(--panel-background-color)\n    border-radius: 5px\n    padding: 0 5px\n    display: flex\n    flex-direction: row\n    align-items: center\n    gap: 5px\n    :global(.bp5-input-group)\n      flex-grow: 1\n      cursor: text\n\n:global(.bp5-navbar)>.loading-button\n  width: 40px\n  height: 40px\n\n.status-tongue\n  background-color: var(--panel-background-color)\n  margin: 5px\n  margin-top: -12px\n  padding: 0\n  padding-top: 12px\n\n@media screen and (max-width: 768px)\n  .status-tongue\n    max-width: 100vw\n    margin: 0\n    border-radius: 0\n    margin-top: -3px\n",".copy-link-button:global(.bp5-minimal.bp5-button)\n  color: var(--text-subtle-color)\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: 1em\n  border-bottom: 1px solid var(--panel-rule-color)\n  .spacer\n    flex-grow: 1\n  .left-icon\n    padding: 7px\n\n  .position-controls :global(.bp5-button)\n    font-size: 12px !important\n\n.infodrawer-header-item\n  font-size: 12px\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: hidden\n  &:global(.bp5-card)\n    padding: 0\n\n  &.loading\n    .infodrawer-body\n      overflow-y: hidden\n      min-height: 70px\n\n.infodrawer-contents\n  padding: 0 1em 1em\n\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",".map-container\n  display: flex\n  flex-direction: column\n  position: relative\n  width: 100%\n  height: 100%\n  overflow: hidden\n  &.show-panel-outlines\n    .map-view-container\n      outline: 2px dotted dodgerblue\n  &.fit-viewport\n    height: 100vh\n    width: 100vw\n    /* mobile viewport bug fix */\n    max-height: -webkit-fill-available\n\n  // Compass display\n  .compass-control\n    display: none\n  &.map-is-rotated\n    .compass-control\n      display: block\n\n  .map-3d-control\n    display: none\n  &.map-3d-available .map-3d-control\n    display: block\n  &.map-is-rotated.map-3d-available .map-3d-control\n    display: none\n\n  .globe-control\n    display: none\n    svg\n      color: var(--secondary-color)\n  &.map-is-global .globe-control\n    display: block\n\n  &.detail-panel-open\n    .zoom-control\n      opacity: 0\n      display: none\n\n  &.detail-panel-fixed\n    .detail-panel-holder\n      &>*\n        border-radius: unset\n\n.detail-panel-holder\n  display: flex\n  flex-direction: column\n  min-height: 0\n  &>*\n    flex: 1\n\n.map-control-stack\n  display: flex\n  flex-direction: column\n  width: 30em\n  margin-left: -30em\n  pointer-events: none\n\n.main-row\n  flex: 1\n  display: flex\n  flex-direction: row\n  position: relative\n  max-height: 100%\n  min-height: 0\n\n.map-ui\n  flex: 1\n  position: relative\n  display: flex\n  flex-direction: column\n  max-height: 100%\n  height: 100%\n  box-shadow: 0 0 10px 4px var(--card-shadow-color)\n\n.map-view-container\n  flex-grow: 1\n  position: relative\n  overflow: hidden\n\n.mapbox-map\n  position: absolute\n  top: 0\n  bottom: 0\n  left: 0\n  right: 0\n  &:global(.mapboxgl-map)\n    // override the default mapbox position: relative in all cases\n    position: absolute\n\n\n\n.panel-card\n  padding: 10px\n  background-color: var(--panel-background-color)\n  overflow: hidden\n\n  & >:last-child\n    margin-bottom: 0\n\n:global(.bp5-dark) .panel-card\n  background-color: var(--panel-background-color)\n\n.context-stack\n  &>div\n    flex-shrink: 1\n\n  &>.searchbar\n    flex: 0\n\n.context-stack,\n.detail-stack\n  z-index: 10\n  max-height: 100%\n\n.panel-container\n  display: flex\n  flex-direction: column\n\n  &>div\n    pointer-events: all\n\n.panel-title\n  font-size: 16px\n\n.spacer\n  flex-grow: 1\n  pointer-events: none\n\n.map-view-container\n  flex-grow: 1\n  position: relative\n  overflow: hidden\n\n.searchbar-holder\n  margin-bottom: 0.5em\n\n.right-panel\n  width: 24em\n\n.buttons\n  display: flex\n  flex-direction: row\n  flex: 1\n  min-width: 0\n\n.tab-button\n  flex-shrink: 1\n  min-width: 40px\n  overflow: hidden\n  text-align: right\n\n  & :global(.bp5-button-text)\n    transition: all 0.2s\n    transition-delay: 0.1s\n\n  .menu-card.narrow-card .panel-header:not(.minimal) &:global(.bp5-active) ~ & :global(.bp5-button-text)\n    width: 0\n    opacity: 0\n    margin-left: -7px\n\n  .context-panel-leave .menu-card .panel-header & :global(.bp5-button-text)\n    opacity: 0\n    width: 0\n\n.narrow-card.narrow-enter .panel-header .buttons\n  margin-right: -500px\n\n.panel-header.minimal .tab-button:not(:hover):not(:global(.bp5-active))\n  padding-left: 0\n  padding-right: 0\n  min-width: 30px\n  width: 30px\n\n.panel-header.minimal .tab-button:not(:hover) :global(.bp5-button-text)\n  width: 0\n  opacity: 0\n  margin-left: -7px\n\n.menu-group\n  margin-bottom: 0.5em\n  margin-top: 0.2em\n\n.menu-card :global .bp5-text ul,\n.menu-card :global .text-panel ul\n  padding-left: 1em\n\n.menu-content\n  display: flex\n  flex-direction: column\n  margin-bottom: -8px\n\n  & .bp5-button-group\n    margin-bottom: 4px\n\n  & hr\n    width: 100%\n\n:global\n  .mapbox-map\n    .mapbox-compass, .mapbox-3d\n      display: none\n\n  .mapboxgl-ctrl.mapbox-3d.mapbox-control\n    width: unset\n\n  .mapboxgl-ctrl.mapbox-3d.mapbox-control button\n    width: unset\n    padding-inline: 4px\n\n  .mapboxgl-canvas-container\n    width: 100%\n    height: 100%\n\n  .mapboxgl-ctrl.mapboxgl-ctrl-attrib\n    background-color: var(--translucent-panel-background-color) !important\n\n  .mapboxgl-ctrl.mapboxgl-ctrl-attrib a\n    color: var(--text-color)\n\n  .mapboxgl-marker svg path\n    fill: var(--panel-background-color) !important\n\n  .mapboxgl-marker svg circle\n    fill: var(--secondary-color) !important\n\n  .mapbox-control.mapbox-zoom\n    background: var(--translucent-panel-background-inner)\n\n  .mapbox-control.mapbox-zoom svg\n    fill: var(--text-color) !important\n\n  .mapboxgl-ctrl-logo\n    transform: scale(0.9) translate(-8px, 2px)\n\n  .bp5-dark .mapboxgl-ctrl-logo\n    filter: invert(100%)\n\n  .mapboxgl-ctrl-group button + button\n    border-top: 1px solid var(--panel-rule-color) !important\n\n  .bp5-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon\n    filter: invert(40%)\n\n  .bp5-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon:hover\n    filter: invert(50%)\n\n  .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon\n    filter: invert(40%)\n\n  .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon:hover\n    filter: invert(50%)\n\n.detail-stack\n  position: relative\n\n.detail-panel-container, .map-right-controls\n  flex: 1\n  \n\n\n\n.zoom-control\n  transition: opacity 1s ease-in-out\n  width: 30px\n  position: absolute\n  top: 0\n  right: 0\n\n.map-controls\n  display: flex\n  flex-direction: row\n  justify-content: right\n  margin-bottom: 0\n  gap: 0.5em\n\n  :global(.map-control)\n    &>:global(.bp5-button)\n      padding: 0\n      transform: translate(-3.5px, -3.5px)\n      width: 22px !important\n\n\n.map-controls :global(.mapbox-control),\n.map-controls :global(.map-control-wrapper),\n.map-controls :global(.map-control)\n  max-height: 22px\n  height: 22px\n  border-radius: 4px\n  background-color: var(--panel-background-color)\n  box-shadow: 0 0 0 1px var(--card-shadow-color)\n\n.map-controls :global(.mapbox-control) button,\n.map-controls :global(.map-control-wrapper) button,\n.map-controls :global(.map-control) button\n  max-height: 22px\n  height: 22px\n  width: 22px\n  max-width: 22px\n  background-position: center center\n  padding: 0\n  //background-color: var(--panel-background-color)\n  //color: var(--text-color)\n\n//.map-controls :global(.mapbox-control) button:hover,\n//.map-controls :global(.map-control-wrapper) button:hover,\n//.map-controls .map-control button:hover\n//  background-color: var(--panel-background-color) !important\n\n.map-controls .map-scale-control\n  background: none\n  box-shadow: none\n  padding-top: 8px\n\n  :global(.mapboxgl-ctrl-scale)\n    background-color: var(--translucent-panel-background-color)\n    border-color: var(--secondary-text-color)\n    color: var(--secondary-text-color)\n\n// .map-container.detail-panel-fixed\n//   right: 30em\n\n/* For mobile phones, we want to make the most of screen space,\n which in some cases means adding complications to the basic page. */\n@media only screen and (max-width: 768px)\n  .map-container.detail-panel-enter .context-stack\n    height: 0\n    visibility: hidden\n    transition: height 0.5s ease-in-out\n\n  .detail-stack\n    height: fit-content\n    position: inherit\n    max-height: 70%\n\n  .infodrawer-stack\n    max-height: 70%\n    &:global(.exit-active)\n      max-height: 0\n\n  :global(.mapbox-control.mapbox-zoom)\n    display: none\n\n  .map-controls\n    position: absolute\n    top: -60px\n    right: 10px\n\n  .detail-panel\n    border-radius: 0px\n\n  \n/* Desktop styling is necessarily much more complicated than mobile\n to handle a two-column layout. */\n@media screen and (min-width: 768px)\n  /* Make map fill page rather than containing div,\n   by unsetting map position */\n  // We should move this to another file.\n  .map-view-container\n    position: unset\n\n\n  .map-ui\n    flex-direction: row\n    padding: 1em 1em 2em\n    min-height: 80px\n    gap: 0.5em\n\n  .context-stack\n    max-width: var(--map-context-stack-max-width, 34em)\n    min-width: 14em\n    transition: width 300ms ease\n    padding-bottom: 0.5em\n    width: var(--map-context-stack-width, 16em)\n    margin-right: 0.5em\n    display: flex\n    flex-direction: column\n\n    &.adaptive-width\n      width: var(--map-context-stack-width, none)\n      max-width: var(--map-context-stack-max-width, none)\n      transition: width 300ms ease\n\n    :global(.bp5-navbar)\n      //height: unset\n      //padding: 5px\n      h1, h2, h3\n        margin: 0\n\n    &>.spacer\n      flex-grow: 0\n\n  .context-panel-holder\n    min-height: 0\n    position: relative\n    &>div\n      max-height: 100%\n\n  .detail-stack\n    width: var(--map-detail-stack-width, 30em)\n    display: flex\n    flex-direction: column\n\n  .context-stack, .detail-stack\n    pointer-events: none\n    z-index: 10\n\n    &>div\n      pointer-events: all\n      margin-bottom: 0.5em\n\n      &:last-child\n        margin-bottom: 0\n\n      &.spacer\n        pointer-events: none\n\n    .context-stack .spacer\n      min-height: 1em\n\n  /* Make map fill page rather than containing div,\n   by unsetting map position */\n  .map-view-container\n    position: unset\n\n/** CSS Transitions **/\n\n.map-container\n  // Context panel\n  .context-panel-holder\n    pointer-events: none\n    flex: 1\n    &>div\n      pointer-events: all\n      transition: opacity 0.8s ease //, height 0.8s ease, max-height 0.8s ease, padding 0.8s ease\n\n  &.context-panel-from .context-panel-holder>div\n    opacity: 0\n  &.context-panel-enter .context-panel-holder>div\n    opacity: 1\n  &.context-panel-leave .context-panel-holder>div\n    opacity: 0\n\n  // Detail panel (floating)\n  &.detail-panel-floating\n    // We assume that the relevant panel is the first child of the stack.\n    &.detail-panel-from .detail-panel-holder\n      opacity: 0\n    &.detail-panel-enter .detail-panel-holder\n      opacity: 1\n    &.detail-panel-leave .detail-panel-holder\n      opacity: 0\n    .detail-panel\n      transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease\n\n  // TODO: these styles have not been evaluated for mobile\n  &.detail-panel-fixed\n    .map-ui\n      transition: margin-right 0.8s ease\n    .detail-stack\n      transition: margin-right 0.8s ease\n\n    &.detail-panel-from .detail-panel-holder\n      margin-right: calc(-1 * var(--map-detail-stack-width, 30em)) \n    &.detail-panel-enter .detail-panel-holder\n      margin-right: 0\n    &.detail-panel-leave .detail-panel-holder\n      margin-right: calc(-1 * var(--map-detail-stack-width, 30em)) \n\n\n  // The max-height transition is a bit jerky because of panel padding.\n  // We could probably fix this by pulling the panel container itself into\n  // the class.\n  //max-height: 0\n  //padding: 0i\n\n@media only screen and (max-width: 768px)\n  .map-container .detail-stack\n    transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease\n\n  .map-container.detail-panel-from .detail-stack\n    max-height: 0\n    height: 0\n\n  .map-container.detail-panel-leave .detail-stack\n    max-height: 0\n\n  .map-container.context-panel-from .context-panel\n    max-height: 0\n    height: 0\n\n  .map-container.context-panel-leave\n    .context-stack\n      .context-panel-holder\n        flex: 0\n      .spacer\n        flex: 1\n\n// Shift UI around to center elements if we're in the global view \n@media only screen and (min-width: 768px)\n  .map-container.detail-panel-leave .map-view-container\n    margin-right: -14em\n\n  .map-container.map-is-global.detail-panel-leave .map-view-container\n    margin-right: -30em\n\n  .map-container.map-is-global.context-panel-leave .map-view-container\n    margin-left: -16em\n",".feature-panel\n  position: relative\n  margin: 0 -1em\n\n.key-value\n  display: inline-block\n  margin-right: 1em\n  .key\n    font-weight: bold\n    font-size: 0.9em\n    &:after\n      content: ': '\n  .value\n    font-size: 0.9em\n\n.feature-properties\n  position: relative\n  &:before\n    content: \"–\"\n    position: absolute\n    top: 4px\n    left: 0\n\n.feature-header h3\n  margin-bottom: 0\n  margin-top: 0.5em\n\n.feature-group\n  border-bottom: 1px solid var(--panel-rule-inner)\n  margin-bottom: 0.5em\n  &:last-child\n    border-bottom: none\n\n.tile-info\n  display: flex\n  flex-direction: row\n  align-items: baseline\n  h3\n    margin-right: 0.5em\n\n.opacity-slider\n  margin: 0 1em 0.5em\n  :global\n    .bp5-slider-handle .bp5-slider-label\n      background-color: var(--secondary-color)\n      color: var(--text-color)\n\n.unit-number\n  .unit\n    font-size: 0.9em\n    margin-left: 0.2em\n    font-weight: bold\n\n.page\n  margin: 2em auto\n  max-width: 50em\n\n.dev-index-page\n  overflow-y: scroll\n","\n.panel-subhead\n  padding: 0.2em var(--box-horizontal-padding)\n  border-top: 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(--box-horizontal-padding)\n  top: -1px\n  position: sticky\n  h1, h2, h3, h4\n    font-family: Montserrat,sans-serif\n    font-weight: 700\n    margin: 0.2em 0\n  h4\n    font-weight: 600\n  .title\n    flex-grow: 1\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    &: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      margin-top: -1px\n      padding: 5px 1em 5px\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: 5px 1em 10px\n  .expansion-panel\n    margin-left: -1em\n    margin-right: -1em\n    &:first-child\n      margin-top: -5px\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.css.map"}
+{"mappings":"ACAA;;;;;;;AAKE;;;;;AAGA;;;;;;;;;;;AASE;;;;;AAIJ;;;;;AAIA;;;;;;AAOA;EACE;;;;;;;ACjCF;;;;AAGE;;;;AAGF;;;;;;;;;AAQE;;;;AAGA;;;;AAGA;;;;AAGF;;;;AAGE;;;;;AAIF;;;;;;;;;;;AAUE;;;;;AAME;;;;;AAKJ;;;;AAGA;;;;;;;;AAQA;EACE;;;;;AC/DF;;;;;;;;;AASI;;;;AAGF;;;;;;AAOA;;;;AAIE;;;;AAGF;;;;AAGA;;;;AAGA;;;;AAME;;;;AAGF;;;;AAIE;;;;;AAME;;;;;;;;;;;;;;;;;;;;;;AAgBJ;;;;;;;;;AAOA;;;;;;;;;;AAYF;;;;;AAME;;;;AAGA;;;;;;;;;;AASA;;;;;;;;;;;;AAQA;;;;;;;;;;;;;;AAWA;;;;;;;;;;;;;;;AAUF;;;;;;;;AAKE;;;;;;;AAKA;;;;;;;;;;;;;;;;;AAYA;;;;;AAGA;;;;AAGA;;;;;;;AAMA;;;;;;AAKA;;;;;;;;;;;;;;;AAWA;;;;AAEF;;;;AAGE;;;;AAEF;;;;;;;;;AAME;;;;;AAGA;;;;;;;;;;;;;;;;AAaI;;;;AAGF;;;;AAGA;;;;AAGF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA;;;;;;;;AAOE;;;;;;;;;;;;;;AAYJ;;;;;;;;;AASE;;;;;;AAME;;;;;;AAMJ;EAAA;;;;;;EAOE;;;;;;EAEF;;;;EAKE;;;;EAGA;;;;EASF;;;;;;EAKE;;;;;AAQF;EAMI;;;;;;;;;;;;;;;;;;EAgBF;;;;;;EAKA;;;;;;;;EAMF;;;;;EAKI;;;;EAIA;;;;;;EAKF;;;;;EAIE;;;;;EAIA;;;;EAGE;;;;;;;;EAWA;;;;;;;;;;AASJ;;;;;;;;;AAOE;;;;AAGE;;;;AAMA;;;;AAGF;;;;AAGF;;;;AAGE;;;;AAQA;;;;AAGE;;;;AAIJ;;;;AAGA;EACE;;;;EAGA;;;;;;;;;;;;;;EAcA;;;;EAKA;;;;;AAIE;;;;;;;;;;;;;;ACneN;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBE;;;;;;;AAKE;;;;;AAGF;;;;;AAGF;;;;;;;;;;AAMA;;;;AAGE;;;;AAEE;;;;;AAGF;;;;;;;;;;;AASE;;;;ACjDJ;;;;;;;;;;;;;;AAYE;;;;;;AAIA;;;;AAEA;;;;;;;;;;;;;;AAaA;;;;;AAMA;;;;AAGE;;;;;AAGA;;;;;AAIA;;;;AAEA;;;;;;;;;AAOE;;;;;;;;;;;;AASJ;;;;AAEE;;;;AAEA;;;;;AAGF;;;;AAEE;;;;;AAGE;;;;AAEN;;;;;;;;;;;;;;;;;;;;;;;;AAoBE;;;;;;;;AAKA;;;;;;;;AAKA;;;;AAGA;;;;;;;;;;;AASE;;;;;;;;AAOF;;;;AAGA","sources":["026f05482703be1f","packages/map-interface/src/context-panel/main.module.sass","packages/map-interface/src/location-panel/main.module.sass","packages/map-interface/src/main.module.sass","packages/map-interface/src/dev/main.module.sass","packages/map-interface/src/expansion-panel/main.module.sass"],"sourcesContent":["@import \"ae7b07f141202fc9\";\n@import \"48f0a4a6f8ddc91e\";\n@import \"82cdba93b0548a93\";\n@import \"07c2aff8cd76b425\";\n@import \"b685950deb9cf075\";\n",".searchbar-holder\n  transition: margin 300ms\n  display: flex\n  flex-direction: column\n  margin: 0\n  .navbar-holder\n    display: flex\n    flex-direction: row\n  .searchbar\n    width: 100%\n    background-color: var(--panel-background-color)\n    border-radius: 5px\n    padding: 0 5px\n    display: flex\n    flex-direction: row\n    align-items: center\n    gap: 5px\n    :global(.bp5-input-group)\n      flex-grow: 1\n      cursor: text\n\n:global(.bp5-navbar)>.loading-button\n  width: 40px\n  height: 40px\n\n.status-tongue\n  background-color: var(--panel-background-color)\n  margin: 5px\n  margin-top: -12px\n  padding: 0\n  padding-top: 12px\n\n@media screen and (max-width: 768px)\n  .status-tongue\n    max-width: 100vw\n    margin: 0\n    border-radius: 0\n    margin-top: -3px\n",".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: 1em\n  border-bottom: 1px solid var(--panel-rule-color)\n\n  .spacer\n    flex-grow: 1\n\n  .left-icon\n    padding: 7px\n\n  .position-controls :global(.bp5-button)\n    font-size: 12px !important\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: 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 1em\n\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",".map-container\n  display: flex\n  flex-direction: column\n  position: relative\n  width: 100%\n  height: 100%\n  overflow: hidden\n\n  &.show-panel-outlines\n    .map-view-container\n      outline: 2px dotted dodgerblue\n\n  &.fit-viewport\n    height: 100vh\n    width: 100vw\n    /* mobile viewport bug fix */\n    max-height: -webkit-fill-available\n\n  // Compass display\n  .compass-control\n    display: none\n\n  &.map-is-rotated\n    .compass-control\n      display: block\n\n  .map-3d-control\n    display: none\n\n  &.map-3d-available .map-3d-control\n    display: block\n\n  &.map-is-rotated.map-3d-available .map-3d-control\n    display: none\n\n  .globe-control\n    display: none\n\n    svg\n      color: var(--secondary-color)\n\n  &.map-is-global .globe-control\n    display: block\n\n  &.detail-panel-open\n    .zoom-control\n      opacity: 0\n      display: none\n\n  &.detail-panel-fixed\n    .detail-panel-holder\n      & > *\n        border-radius: unset\n\n.detail-panel-holder\n  display: flex\n  flex-direction: column\n  min-height: 0\n\n  & > *\n    flex: 1\n\n.map-control-stack\n  display: flex\n  flex-direction: column\n  width: 30em\n  margin-left: -30em\n  pointer-events: none\n\n.main-row\n  flex: 1\n  display: flex\n  flex-direction: row\n  position: relative\n  max-height: 100%\n  min-height: 0\n\n.map-ui\n  flex: 1\n  position: relative\n  display: flex\n  flex-direction: column\n  max-height: 100%\n  height: 100%\n  box-shadow: 0 0 10px 4px var(--card-shadow-color)\n\n.map-view-container\n  flex-grow: 1\n  position: relative\n  overflow: hidden\n\n.mapbox-map\n  position: absolute\n  top: 0\n  bottom: 0\n  left: 0\n  right: 0\n\n  &:global(.mapboxgl-map)\n    // override the default mapbox position: relative in all cases\n    position: absolute\n\n\n.panel-card\n  padding: 10px\n  background-color: var(--panel-background-color)\n  overflow: hidden\n\n  & > :last-child\n    margin-bottom: 0\n\n:global(.bp5-dark) .panel-card\n  background-color: var(--panel-background-color)\n\n.context-stack\n  & > div\n    flex-shrink: 1\n\n  & > .searchbar\n    flex: 0\n\n.context-stack,\n.detail-stack\n  z-index: 10\n  max-height: 100%\n\n.panel-container\n  display: flex\n  flex-direction: column\n\n  & > div\n    pointer-events: all\n\n.panel-title\n  font-size: 16px\n\n.spacer\n  flex-grow: 1\n  pointer-events: none\n\n.map-view-container\n  flex-grow: 1\n  position: relative\n  overflow: hidden\n\n.searchbar-holder\n  margin-bottom: 0.5em\n\n.right-panel\n  width: 24em\n\n.buttons\n  display: flex\n  flex-direction: row\n  flex: 1\n  min-width: 0\n\n.tab-button\n  flex-shrink: 1\n  min-width: 40px\n  overflow: hidden\n  text-align: right\n\n  & :global(.bp5-button-text)\n    transition: all 0.2s\n    transition-delay: 0.1s\n\n  .menu-card.narrow-card .panel-header:not(.minimal) &:global(.bp5-active) ~ & :global(.bp5-button-text)\n    width: 0\n    opacity: 0\n    margin-left: -7px\n\n  .context-panel-leave .menu-card .panel-header & :global(.bp5-button-text)\n    opacity: 0\n    width: 0\n\n.narrow-card.narrow-enter .panel-header .buttons\n  margin-right: -500px\n\n.panel-header.minimal .tab-button:not(:hover):not(:global(.bp5-active))\n  padding-left: 0\n  padding-right: 0\n  min-width: 30px\n  width: 30px\n\n.panel-header.minimal .tab-button:not(:hover) :global(.bp5-button-text)\n  width: 0\n  opacity: 0\n  margin-left: -7px\n\n.menu-group\n  margin-bottom: 0.5em\n  margin-top: 0.2em\n\n.menu-card :global .bp5-text ul,\n.menu-card :global .text-panel ul\n  padding-left: 1em\n\n.menu-content\n  display: flex\n  flex-direction: column\n  margin-bottom: -8px\n\n  & .bp5-button-group\n    margin-bottom: 4px\n\n  & hr\n    width: 100%\n\n:global\n  .mapbox-map\n    .mapbox-compass, .mapbox-3d\n      display: none\n\n  .mapboxgl-ctrl.mapbox-3d.mapbox-control\n    width: unset\n\n  .mapboxgl-ctrl.mapbox-3d.mapbox-control button\n    width: unset\n    padding-inline: 4px\n\n  .mapboxgl-canvas-container\n    width: 100%\n    height: 100%\n\n  .mapboxgl-ctrl.mapboxgl-ctrl-attrib\n    background-color: var(--translucent-panel-background-color) !important\n\n  .mapboxgl-ctrl.mapboxgl-ctrl-attrib a\n    color: var(--text-color)\n\n  .mapboxgl-marker svg path\n    fill: var(--panel-background-color) !important\n\n  .mapboxgl-marker svg circle\n    fill: var(--secondary-color) !important\n\n  .mapbox-control.mapbox-zoom\n    background: var(--translucent-panel-background-inner)\n\n  .mapbox-control.mapbox-zoom svg\n    fill: var(--text-color) !important\n\n  .mapboxgl-ctrl-logo\n    transform: scale(0.9) translate(-8px, 2px)\n\n  .bp5-dark\n    .mapboxgl-ctrl-group\n      background-color: var(--panel-background-color)\n\n    .mapboxgl-ctrl-logo\n      filter: invert(100%)\n\n  .mapboxgl-ctrl-group button + button\n    border-top: 1px solid var(--panel-rule-color) !important\n\n  .bp5-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon\n    filter: invert(40%)\n\n  .bp5-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon:hover\n    filter: invert(50%)\n\n  .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon\n    filter: invert(40%)\n\n  .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon:hover\n    filter: invert(50%)\n\n.detail-stack\n  position: relative\n\n.detail-panel-container, .map-right-controls\n  flex: 1\n\n\n.zoom-control\n  transition: opacity 1s ease-in-out\n  width: 30px\n  position: absolute\n  top: 0\n  right: 0\n\n.map-controls\n  display: flex\n  flex-direction: row\n  justify-content: right\n  margin-bottom: 0\n  gap: 0.5em\n\n  :global(.map-control)\n    & > :global(.bp5-button)\n      padding: 0\n      transform: translate(-3.5px, -3.5px)\n      width: 22px !important\n\n\n.map-controls :global(.mapbox-control),\n.map-controls :global(.map-control-wrapper),\n.map-controls :global(.map-control)\n  max-height: 22px\n  height: 22px\n  border-radius: 4px\n  background-color: var(--panel-background-color)\n  box-shadow: 0 0 0 1px var(--card-shadow-color)\n\n.map-controls :global(.mapbox-control) button,\n.map-controls :global(.map-control-wrapper) button,\n.map-controls :global(.map-control) button\n  max-height: 22px\n  height: 22px\n  width: 22px\n  max-width: 22px\n  background-position: center center\n  padding: 0\n//background-color: var(--panel-background-color)\n//color: var(--text-color)\n\n//.map-controls :global(.mapbox-control) button:hover,\n//.map-controls :global(.map-control-wrapper) button:hover,\n//.map-controls .map-control button:hover\n//  background-color: var(--panel-background-color) !important\n\n.map-controls .map-scale-control\n  background: none\n  box-shadow: none\n  padding-top: 8px\n\n  :global(.mapboxgl-ctrl-scale)\n    background-color: var(--translucent-panel-background-color)\n    border-color: var(--secondary-text-color)\n    color: var(--secondary-text-color)\n\n// .map-container.detail-panel-fixed\n//   right: 30em\n\n/* For mobile phones, we want to make the most of screen space,\n which in some cases means adding complications to the basic page. */\n@media only screen and (max-width: 768px)\n  .map-container.detail-panel-enter .context-stack\n    height: 0\n    visibility: hidden\n    transition: height 0.5s ease-in-out\n\n  .detail-stack\n    height: fit-content\n    position: inherit\n    max-height: 70%\n\n  .infodrawer-stack\n    max-height: 70%\n\n    &:global(.exit-active)\n      max-height: 0\n\n  :global(.mapbox-control.mapbox-zoom)\n    display: none\n\n  .map-controls\n    position: absolute\n    top: -60px\n    right: 10px\n\n  .detail-panel\n    border-radius: 0px\n\n\n/* Desktop styling is necessarily much more complicated than mobile\n to handle a two-column layout. */\n@media screen and (min-width: 768px)\n  /* Make map fill page rather than containing div,\n   by unsetting map position */\n  // We should move this to another file.\n  .map-view-container\n    position: unset\n\n\n  .map-ui\n    flex-direction: row\n    padding: 1em 1em 2em\n    min-height: 80px\n    gap: 0.5em\n\n  .context-stack\n    max-width: var(--map-context-stack-max-width, 34em)\n    min-width: 14em\n    transition: width 300ms ease\n    padding-bottom: 0.5em\n    width: var(--map-context-stack-width, 16em)\n    margin-right: 0.5em\n    display: flex\n    flex-direction: column\n\n    &.adaptive-width\n      width: var(--map-context-stack-width, none)\n      max-width: var(--map-context-stack-max-width, none)\n      transition: width 300ms ease\n\n    :global(.bp5-navbar)\n      //height: unset\n      //padding: 5px\n      h1, h2, h3\n        margin: 0\n\n    & > .spacer\n      flex-grow: 0\n\n  .context-panel-holder\n    min-height: 0\n    position: relative\n\n    & > div\n      max-height: 100%\n\n  .detail-stack\n    width: var(--map-detail-stack-width, 30em)\n    display: flex\n    flex-direction: column\n\n  .context-stack, .detail-stack\n    pointer-events: none\n    z-index: 10\n\n    & > div\n      pointer-events: all\n      margin-bottom: 0.5em\n\n      &:last-child\n        margin-bottom: 0\n\n      &.spacer\n        pointer-events: none\n\n    .context-stack .spacer\n      min-height: 1em\n\n  /* Make map fill page rather than containing div,\n   by unsetting map position */\n  .map-view-container\n    position: unset\n\n/** CSS Transitions **/\n\n.map-container\n  // Context panel\n  .context-panel-holder\n    pointer-events: none\n    flex: 1\n\n    & > div\n      pointer-events: all\n      transition: opacity 0.8s ease\n  //, height 0.8s ease, max-height 0.8s ease, padding 0.8s ease\n\n  &.context-panel-from .context-panel-holder > div\n    opacity: 0\n\n  &.context-panel-enter .context-panel-holder > div\n    opacity: 1\n\n  &.context-panel-leave .context-panel-holder > div\n    opacity: 0\n\n  // Detail panel (floating)\n  &.detail-panel-floating\n    // We assume that the relevant panel is the first child of the stack.\n    &.detail-panel-from .detail-panel-holder\n      opacity: 0\n\n    &.detail-panel-enter .detail-panel-holder\n      opacity: 1\n\n    &.detail-panel-leave .detail-panel-holder\n      opacity: 0\n\n    .detail-panel\n      transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease\n\n  // TODO: these styles have not been evaluated for mobile\n  &.detail-panel-fixed\n    .map-ui\n      transition: margin-right 0.8s ease\n\n    .detail-stack\n      transition: margin-right 0.8s ease\n\n    &.detail-panel-from .detail-panel-holder\n      margin-right: calc(-1 * var(--map-detail-stack-width, 30em))\n\n    &.detail-panel-enter .detail-panel-holder\n      margin-right: 0\n\n    &.detail-panel-leave .detail-panel-holder\n      margin-right: calc(-1 * var(--map-detail-stack-width, 30em))\n\n\n// The max-height transition is a bit jerky because of panel padding.\n// We could probably fix this by pulling the panel container itself into\n// the class.\n//max-height: 0\n//padding: 0i\n\n@media only screen and (max-width: 768px)\n  .map-container .detail-stack\n    transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease\n\n  .map-container.detail-panel-from .detail-stack\n    max-height: 0\n    height: 0\n\n  .map-container.detail-panel-leave .detail-stack\n    max-height: 0\n\n  .map-container.context-panel-from .context-panel\n    max-height: 0\n    height: 0\n\n  .map-container.context-panel-leave\n    .context-stack\n      .context-panel-holder\n        flex: 0\n\n      .spacer\n        flex: 1\n\n// Shift UI around to center elements if we're in the global view \n@media only screen and (min-width: 768px)\n  .map-container.detail-panel-leave .map-view-container\n    margin-right: -14em\n\n  .map-container.map-is-global.detail-panel-leave .map-view-container\n    margin-right: -30em\n\n  .map-container.map-is-global.context-panel-leave .map-view-container\n    margin-left: -16em\n",".feature-panel\n  position: relative\n  margin: 0 -1em\n\n.key-value\n  display: inline-block\n  margin-right: 1em\n  .key\n    font-weight: bold\n    font-size: 0.9em\n    &:after\n      content: ': '\n  .value\n    font-size: 0.9em\n\n.feature-properties\n  position: relative\n  &:before\n    content: \"–\"\n    position: absolute\n    top: 4px\n    left: 0\n\n.feature-header h3\n  margin-bottom: 0\n  margin-top: 0.5em\n\n.feature-group\n  border-bottom: 1px solid var(--panel-rule-inner)\n  margin-bottom: 0.5em\n  &:last-child\n    border-bottom: none\n\n.tile-info\n  display: flex\n  flex-direction: row\n  align-items: baseline\n  h3\n    margin-right: 0.5em\n\n.opacity-slider\n  margin: 0 1em 0.5em\n  :global\n    .bp5-slider-handle .bp5-slider-label\n      background-color: var(--secondary-color)\n      color: var(--text-color)\n\n.unit-number\n  .unit\n    font-size: 0.9em\n    margin-left: 0.2em\n    font-weight: bold\n\n.page\n  margin: 2em auto\n  max-width: 50em\n\n.dev-index-page\n  overflow-y: scroll\n","\n.panel-subhead\n  padding: 0.2em var(--box-horizontal-padding)\n  border-top: 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(--box-horizontal-padding)\n  top: -1px\n  position: sticky\n  h1, h2, h3, h4\n    font-family: Montserrat,sans-serif\n    font-weight: 700\n    margin: 0.2em 0\n  h4\n    font-weight: 600\n  .title\n    flex-grow: 1\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    &: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      margin-top: -1px\n      padding: 5px 1em 5px\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: 5px 1em 10px\n  .expansion-panel\n    margin-left: -1em\n    margin-right: -1em\n    &:first-child\n      margin-top: -5px\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.css.map"}

package/dist/main.js

@@ -442,9 +442,8 @@ function $2bc7c1e4e7da7fdf$export$aa4baff5242ea6e1(props) {
 var $9acbb47bf7cb7660$exports = {};
 var $6f5ca387ac26c0b5$exports = {};
 
-$parcel$export($6f5ca387ac26c0b5$exports, "MacrostratVectorTileset", () => $6f5ca387ac26c0b5$export$dce4b6e67bb5f25a);
-$parcel$export($6f5ca387ac26c0b5$exports, "MacrostratRasterTileset", () => $6f5ca387ac26c0b5$export$cc7c195070dfb906);
 $parcel$export($6f5ca387ac26c0b5$exports, "h", () => $6f5ca387ac26c0b5$export$dda1d9f60106f0e9);
+$parcel$export($6f5ca387ac26c0b5$exports, "MapInspector", () => $6f5ca387ac26c0b5$export$c5febf3ae8816972);
 $parcel$export($6f5ca387ac26c0b5$exports, "DevMapPage", () => $6f5ca387ac26c0b5$export$2391061fbdfb71ef);
 // Import other components
 
@@ -777,12 +776,12 @@ const $c3311f59335df34d$export$ec68dd77edbe678b = (props)=>$c3311f59335df34d$var
         ...props,
         className: (0, ($parcel$interopDefault($9B3TU$classnames)))("panel-card", props.className)
     });
-var $c3311f59335df34d$export$612ca936d3ed4784;
-(function(DetailPanelStyle) {
+let $c3311f59335df34d$export$612ca936d3ed4784 = /*#__PURE__*/ function(DetailPanelStyle) {
     DetailPanelStyle["FIXED"] = "fixed";
     DetailPanelStyle["FLOATING"] = "floating";
-})($c3311f59335df34d$export$612ca936d3ed4784 || ($c3311f59335df34d$export$612ca936d3ed4784 = {}));
-function $c3311f59335df34d$var$_MapAreaContainer({ children: children, className: className, navbar: navbar, contextPanel: contextPanel = null, detailPanel: detailPanel = null, detailPanelOpen: detailPanelOpen, contextPanelOpen: contextPanelOpen = true, bottomPanel: bottomPanel = null, mainPanel: mainPanel, mapControls: mapControls = $c3311f59335df34d$var$h((0, $f333fe6f49373ca9$export$db1a2e058a06fb5c)), contextStackProps: contextStackProps = null, detailStackProps: detailStackProps = null, detailPanelStyle: detailPanelStyle = "floating", fitViewport: fitViewport = true, showPanelOutlines: showPanelOutlines = false, preventMapInteraction: preventMapInteraction = false, ...rest }) {
+    return DetailPanelStyle;
+}({});
+function $c3311f59335df34d$var$_MapAreaContainer({ children: children, className: className, navbar: navbar, contextPanel: contextPanel = null, detailPanel: detailPanel = null, detailPanelOpen: detailPanelOpen, contextPanelOpen: contextPanelOpen = true, bottomPanel: bottomPanel = null, mainPanel: mainPanel, mapControls: mapControls = $c3311f59335df34d$var$h((0, $f333fe6f49373ca9$export$db1a2e058a06fb5c)), contextStackProps: contextStackProps = null, detailStackProps: detailStackProps = null, detailPanelStyle: detailPanelStyle = $c3311f59335df34d$export$612ca936d3ed4784.FLOATING, fitViewport: fitViewport = true, showPanelOutlines: showPanelOutlines = false, preventMapInteraction: preventMapInteraction = false, ...rest }) {
     const _detailPanelOpen = detailPanelOpen ?? detailPanel != null;
     const contextPanelTrans = (0, $9B3TU$transitionhook.useTransition)(contextPanelOpen, 800);
     const detailPanelTrans = (0, $9B3TU$transitionhook.useTransition)(_detailPanelOpen, 800);
@@ -808,7 +807,7 @@ function $c3311f59335df34d$var$_MapAreaContainer({ children: children, className
     ]);
     const detailStackExt = $c3311f59335df34d$var$h("div.detail-stack.infodrawer-container", detailStackProps, [
         $c3311f59335df34d$var$h("div.detail-panel-holder", null, detailPanel),
-        $c3311f59335df34d$var$h.if(detailPanelStyle == "floating")([
+        $c3311f59335df34d$var$h.if(detailPanelStyle == $c3311f59335df34d$export$612ca936d3ed4784.FLOATING)([
             mapControlsExt
         ])
     ]);
@@ -829,12 +828,12 @@ function $c3311f59335df34d$var$_MapAreaContainer({ children: children, className
                 ]),
                 //h(MapView),
                 children ?? mainPanel,
-                $c3311f59335df34d$var$h.if(detailPanelStyle == "floating")([
+                $c3311f59335df34d$var$h.if(detailPanelStyle == $c3311f59335df34d$export$612ca936d3ed4784.FLOATING)([
                     detailStackExt
                 ]),
-                $c3311f59335df34d$var$h.if(detailPanelStyle == "fixed")("div.map-control-stack", mapControlsExt)
+                $c3311f59335df34d$var$h.if(detailPanelStyle == $c3311f59335df34d$export$612ca936d3ed4784.FIXED)("div.map-control-stack", mapControlsExt)
             ]),
-            $c3311f59335df34d$var$h.if(detailPanelStyle == "fixed")([
+            $c3311f59335df34d$var$h.if(detailPanelStyle == $c3311f59335df34d$export$612ca936d3ed4784.FIXED)([
                 detailStackExt
             ])
         ]),
@@ -1051,7 +1050,8 @@ function $2611a7b4364593e5$export$5c90a91c7455938c({ position: position, setPosi
             center: event.lngLat,
             duration: 800
         });
-    }, [
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
         mapRef.current,
         setPosition
     ]);
@@ -1609,7 +1609,8 @@ function $db14eb7a5c07abdb$export$214daccdda0f4ac6({ selectedLocation: selectedL
         const features = map.queryRenderedFeatures(bbox);
         setFeatures(features);
     }, [
-        mapRef?.current,
+        mapRef.current,
+        prevLocation?.current,
         selectedLocation,
         isLoading
     ]);
@@ -1765,19 +1766,8 @@ function $db14eb7a5c07abdb$export$617d79dae526d2cf({ features: features }) {
 }
 
 
-var $6f5ca387ac26c0b5$export$dce4b6e67bb5f25a;
-(function(MacrostratVectorTileset) {
-    MacrostratVectorTileset["Carto"] = "carto";
-    MacrostratVectorTileset["CartoSlim"] = "carto-slim";
-    MacrostratVectorTileset["IGCPOrogens"] = "igcp-orogens";
-})($6f5ca387ac26c0b5$export$dce4b6e67bb5f25a || ($6f5ca387ac26c0b5$export$dce4b6e67bb5f25a = {}));
-var $6f5ca387ac26c0b5$export$cc7c195070dfb906;
-(function(MacrostratRasterTileset) {
-    MacrostratRasterTileset["Carto"] = "carto";
-    MacrostratRasterTileset["Emphasized"] = "emphasized";
-})($6f5ca387ac26c0b5$export$cc7c195070dfb906 || ($6f5ca387ac26c0b5$export$cc7c195070dfb906 = {}));
 const $6f5ca387ac26c0b5$export$dda1d9f60106f0e9 = (0, ($parcel$interopDefault($9B3TU$macrostrathyper))).styled((0, (/*@__PURE__*/$parcel$interopDefault($33088e8384af337c$exports))));
-function $6f5ca387ac26c0b5$export$2391061fbdfb71ef({ title: title = "Map inspector", headerElement: headerElement = null, transformRequest: transformRequest = null, mapPosition: mapPosition = null, mapboxToken: mapboxToken = null, overlayStyle: overlayStyle = null, children: children, style: style, focusedSource: focusedSource = null, focusedSourceTitle: focusedSourceTitle = null, projection: projection = null }) {
+function $6f5ca387ac26c0b5$export$c5febf3ae8816972({ title: title = "Map inspector", headerElement: headerElement = null, transformRequest: transformRequest = null, mapPosition: mapPosition = null, mapboxToken: mapboxToken = null, overlayStyle: overlayStyle = null, children: children, style: style, focusedSource: focusedSource = null, focusedSourceTitle: focusedSourceTitle = null, fitViewport: fitViewport = true, projection: projection = null }) {
     /* We apply a custom style to the panel container when we are interacting
     with the search bar, so that we can block map interactions until search
     bar focus is lost.
@@ -1867,7 +1857,8 @@ function $6f5ca387ac26c0b5$export$2391061fbdfb71ef({ title: title = "Map inspect
             children
         ]),
         detailPanel: detailElement,
-        contextPanelOpen: isOpen
+        contextPanelOpen: isOpen,
+        fitViewport: fitViewport
     }, $6f5ca387ac26c0b5$export$dda1d9f60106f0e9((0, $12b6032029db16d4$export$ab1e7a67d6ec5ad8), {
         style: actualStyle,
         transformRequest: transformRequest,
@@ -1891,6 +1882,7 @@ function $6f5ca387ac26c0b5$export$2391061fbdfb71ef({ title: title = "Map inspect
         })
     ]));
 }
+const $6f5ca387ac26c0b5$export$2391061fbdfb71ef = $6f5ca387ac26c0b5$export$c5febf3ae8816972;