@macrostrat/map-interface 1.0.12 → 1.2.0

package/dist/cjs/main.module.e958948e.js

@@ -0,0 +1,26 @@
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "loading-button", () => $7a1b0f72a2e7f87d$export$fcaa8d3bc8e9cf1e, (v) => $7a1b0f72a2e7f87d$export$fcaa8d3bc8e9cf1e = v);
+$parcel$export(module.exports, "navbar", () => $7a1b0f72a2e7f87d$export$58733aaf927c3bbe, (v) => $7a1b0f72a2e7f87d$export$58733aaf927c3bbe = v);
+$parcel$export(module.exports, "navbar-holder", () => $7a1b0f72a2e7f87d$export$d8779dd86528d602, (v) => $7a1b0f72a2e7f87d$export$d8779dd86528d602 = v);
+$parcel$export(module.exports, "searchbar", () => $7a1b0f72a2e7f87d$export$2ac23befe9d406ee, (v) => $7a1b0f72a2e7f87d$export$2ac23befe9d406ee = v);
+$parcel$export(module.exports, "searchbar-holder", () => $7a1b0f72a2e7f87d$export$3a39e67bbbcbd4ae, (v) => $7a1b0f72a2e7f87d$export$3a39e67bbbcbd4ae = v);
+$parcel$export(module.exports, "status-tongue", () => $7a1b0f72a2e7f87d$export$764ade2d69041360, (v) => $7a1b0f72a2e7f87d$export$764ade2d69041360 = v);
+var $7a1b0f72a2e7f87d$export$fcaa8d3bc8e9cf1e;
+var $7a1b0f72a2e7f87d$export$58733aaf927c3bbe;
+var $7a1b0f72a2e7f87d$export$d8779dd86528d602;
+var $7a1b0f72a2e7f87d$export$2ac23befe9d406ee;
+var $7a1b0f72a2e7f87d$export$3a39e67bbbcbd4ae;
+var $7a1b0f72a2e7f87d$export$764ade2d69041360;
+$7a1b0f72a2e7f87d$export$fcaa8d3bc8e9cf1e = `_8hZKsW_loading-button`;
+$7a1b0f72a2e7f87d$export$58733aaf927c3bbe = `_8hZKsW_navbar`;
+$7a1b0f72a2e7f87d$export$d8779dd86528d602 = `_8hZKsW_navbar-holder`;
+$7a1b0f72a2e7f87d$export$2ac23befe9d406ee = `_8hZKsW_searchbar`;
+$7a1b0f72a2e7f87d$export$3a39e67bbbcbd4ae = `_8hZKsW_searchbar-holder`;
+$7a1b0f72a2e7f87d$export$764ade2d69041360 = `_8hZKsW_status-tongue`;
+
+
+//# sourceMappingURL=main.module.e958948e.js.map

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

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AALA,4CAAmC,CAAC,sBAAsB,CAAC;AAC3D,4CAA2B,CAAC,cAAc,CAAC;AAC3C,4CAAkC,CAAC,qBAAqB,CAAC;AACzD,4CAA8B,CAAC,iBAAiB,CAAC;AACjD,4CAAqC,CAAC,wBAAwB,CAAC;AAC/D,4CAAkC,CAAC,qBAAqB,CAAC","sources":["packages/map-interface/src/context-panel/main.module.sass"],"sourcesContent":[".searchbar-holder\n  transition: margin 300ms\n  display: flex\n  flex-direction: column\n  margin: 0\n\n  .navbar-holder\n    display: flex\n    flex-direction: row\n\n  .searchbar\n    width: 100%\n    background-color: var(--panel-background-color)\n    border-radius: var(--map-panel-border-radius, 5px)\n    padding: var(--navbar-padding, 10px)\n    display: flex\n    flex-direction: row\n    align-items: center\n    gap: 5px\n\n    :global(.bp5-input-group)\n      flex-grow: 1\n      cursor: text\n\n.navbar\n  min-height: 50px\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-bottom: 0\n  margin-top: -12px\n  padding: 0\n  padding-top: 12px\n  overflow: hidden\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"],"names":[],"version":3,"file":"main.module.e958948e.js.map"}

package/dist/{index.css → cjs/main.module.f085a193.css}

@@ -1,133 +1,5 @@
-._8hZKsW_searchbar-holder {
-  flex-direction: column;
-  margin: 0;
-  transition: margin .3s;
-  display: flex;
-}
-
-._8hZKsW_searchbar-holder ._8hZKsW_navbar-holder {
-  flex-direction: row;
-  display: flex;
-}
-
-._8hZKsW_searchbar-holder ._8hZKsW_searchbar {
-  background-color: var(--panel-background-color);
-  padding: var(--navbar-padding, 10px);
-  border-radius: 5px;
-  flex-direction: row;
-  align-items: center;
-  gap: 5px;
-  width: 100%;
-  display: flex;
-}
-
-._8hZKsW_searchbar-holder ._8hZKsW_searchbar .bp5-input-group {
-  cursor: text;
-  flex-grow: 1;
-}
-
-._8hZKsW_navbar {
-  min-height: 50px;
-}
-
-.bp5-navbar > ._8hZKsW_loading-button {
-  width: 40px;
-  height: 40px;
-}
-
-._8hZKsW_status-tongue {
-  background-color: var(--panel-background-color);
-  margin: -12px 5px 0;
-  padding: 12px 0 0;
-  overflow: hidden;
-}
-
-@media screen and (width <= 768px) {
-  ._8hZKsW_status-tongue {
-    border-radius: 0;
-    max-width: 100vw;
-    margin: -3px 0 0;
-  }
-}
-
-.VPa3-W_copy-link-button.bp5-minimal.bp5-button {
-  color: var(--text-subtle-color);
-}
-
-.VPa3-W_copy-link-button.bp5-minimal.bp5-button svg {
-  fill: var(--text-subtle-color);
-}
-
-.VPa3-W_location-panel-header {
-  border-bottom: 1px solid var(--panel-rule-color);
-  flex-direction: row;
-  align-items: center;
-  gap: 1em;
-  padding: 5px;
-  display: flex;
-}
-
-.VPa3-W_location-panel-header .VPa3-W_spacer {
-  flex-grow: 1;
-}
-
-.VPa3-W_location-panel-header .VPa3-W_left-icon {
-  padding: 7px;
-}
-
-.VPa3-W_location-panel-header .VPa3-W_position-controls .bp5-button {
-  font-size: 12px !important;
-}
-
-.VPa3-W_infodrawer-header-item {
-  font-size: 12px;
-}
-
-.VPa3-W_infodrawer-header-item .secondary {
-  color: var(--text-subtle-color);
-  font-size: .9em;
-}
-
-.VPa3-W_infodrawer {
-  pointer-events: all;
-  background-color: var(--panel-background-color);
-  flex-direction: column;
-  max-width: 100%;
-  height: fit-content;
-  max-height: 100%;
-  display: flex;
-  overflow: hidden;
-}
-
-.VPa3-W_infodrawer.bp5-card {
-  background-color: var(--panel-background-color);
-  padding: 0;
-}
-
-.VPa3-W_infodrawer.VPa3-W_loading .VPa3-W_infodrawer-body {
-  min-height: 70px;
-  overflow-y: hidden;
-}
-
-.VPa3-W_infodrawer-contents {
-  padding: 0 1em 1em;
-}
-
-.VPa3-W_infodrawer-body {
-  flex-shrink: 1;
-  min-height: 0;
-  transition: min-height .5s;
-  position: relative;
-  overflow-y: scroll;
-}
-
-@media screen and (width <= 768px) {
-  .VPa3-W_infodrawer {
-    border-radius: var(--panel-border-radius, 0px);
-  }
-}
-
 .map-container_4c0a66 {
+  --map-panel-border-radius: 4px;
   flex-direction: column;
   width: 100%;
   height: 100%;
@@ -211,11 +83,11 @@
 }
 
 .map-ui_4c0a66 {
+  height: 100%;
+  max-height: 100%;
   box-shadow: 0 0 10px 4px var(--card-shadow-color);
   flex-direction: column;
   flex: 1;
-  height: 100%;
-  max-height: 100%;
   display: flex;
   position: relative;
 }
@@ -236,6 +108,7 @@
 
 .panel-card_4c0a66 {
   background-color: var(--panel-background-color);
+  border-radius: var(--map-panel-border-radius);
   padding: 10px;
   overflow: hidden;
 }
@@ -468,10 +341,10 @@
 
 .map-controls_4c0a66 .mapbox-control, .map-controls_4c0a66 .map-control-wrapper, .map-controls_4c0a66 .map-control {
   background-color: var(--panel-background-color);
-  box-shadow: 0 0 0 1px var(--card-shadow-color);
-  border-radius: 4px;
   height: 22px;
   max-height: 22px;
+  box-shadow: 0 0 0 1px var(--card-shadow-color);
+  border-radius: 4px;
 }
 
 .map-controls_4c0a66 .mapbox-control button, .map-controls_4c0a66 .map-control-wrapper button, .map-controls_4c0a66 .map-control button {
@@ -503,8 +376,8 @@
   }
 
   .detail-stack_4c0a66 {
-    position: inherit;
     height: fit-content;
+    position: inherit;
     max-height: 70%;
   }
 
@@ -541,9 +414,9 @@
 
   .context-stack_4c0a66 {
     max-width: var(--map-context-stack-max-width, 34em);
+    min-width: 14em;
     width: var(--map-context-stack-width, 16em);
     flex-direction: column;
-    min-width: 14em;
     margin-right: .5em;
     padding-bottom: .5em;
     transition: width .3s;
@@ -697,265 +570,4 @@
     margin-left: -16em;
   }
 }
-
-.feature-panel_48e225 {
-  margin: 0 -1em;
-  position: relative;
-}
-
-.key-value_48e225 {
-  margin-right: 1em;
-  display: inline-block;
-}
-
-.key-value_48e225 .key_48e225 {
-  font-size: .9em;
-  font-weight: bold;
-}
-
-.key-value_48e225 .key_48e225:after {
-  content: ": ";
-}
-
-.key-value_48e225 .value_48e225 {
-  font-size: .9em;
-}
-
-.feature-properties_48e225 {
-  position: relative;
-}
-
-.feature-properties_48e225:before {
-  content: "–";
-  position: absolute;
-  top: 4px;
-  left: 0;
-}
-
-.feature-header_48e225 h3 {
-  margin-top: .5em;
-  margin-bottom: 0;
-}
-
-.feature-group_48e225 {
-  border-bottom: 1px solid var(--panel-rule-inner);
-  margin-bottom: .5em;
-}
-
-.feature-group_48e225:last-child {
-  border-bottom: none;
-}
-
-.tile-info_48e225 {
-  flex-direction: row;
-  align-items: baseline;
-  display: flex;
-}
-
-.tile-info_48e225 h3 {
-  margin-right: .5em;
-}
-
-.opacity-slider_48e225 {
-  margin: 0 1em .5em;
-}
-
-.opacity-slider_48e225 .bp5-slider-handle .bp5-slider-label {
-  background-color: var(--secondary-color);
-  color: var(--text-color);
-}
-
-.unit-number_48e225 .unit_48e225 {
-  margin-left: .2em;
-  font-size: .9em;
-  font-weight: bold;
-}
-
-.page_48e225 {
-  max-width: 50em;
-  margin: 2em auto;
-}
-
-.dev-index-page_48e225 {
-  overflow-y: scroll;
-}
-
-.panel-subhead_1340c8 {
-  padding: .2em var(--box-horizontal-padding);
-  border-top: 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);
-  flex-direction: row;
-  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;
-  font-family: Montserrat, sans-serif;
-  font-weight: 700;
-}
-
-.panel-subhead_1340c8 h4 {
-  font-weight: 600;
-}
-
-.panel-subhead_1340c8 .title_1340c8 {
-  flex-grow: 1;
-}
-
-.info-panel-section_1340c8 > .panel-subhead_1340c8 {
-  margin: -1px calc(var(--panel-padding-h) * -1) 0;
-}
-
-.expansion-panel_1340c8 {
-  flex-wrap: wrap;
-  margin-top: -1px;
-  padding: 0;
-}
-
-.sub-expansion-panel_1340c8 {
-  margin: -1px calc(var(--panel-padding-h) * -.5) 0;
-  overflow: hidden;
-}
-
-.sub-expansion-panel_1340c8:first-child .expansion-panel-header_1340c8 {
-  border-top-width: 0;
-}
-
-.sub-expansion-panel_1340c8 .panel-subhead_1340c8 {
-  border-top: none;
-  border-bottom: none;
-}
-
-.sub-expansion-panel_1340c8 .expansion-panel-header_1340c8 {
-  background-color: var(--accent-secondary-color);
-  cursor: pointer;
-}
-
-.sub-expansion-panel_1340c8 .expansion-panel-header_1340c8:hover {
-  background-color: var(--accent-secondary-hover-color);
-}
-
-.sub-expansion-panel_1340c8 .expansion-panel-header_1340c8 h2, .sub-expansion-panel_1340c8 .expansion-panel-header_1340c8 h3, .sub-expansion-panel_1340c8 .expansion-panel-header_1340c8 h4 {
-  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;
-}
-
-.expansion-summary-title-help_1340c8, .expansion-summary-title-help_1340c8 .bp5-icon {
-  margin-left: 5px;
-}
-
-.expansion-panel-header_1340c8 {
-  cursor: pointer;
-}
-
-.expansion-panel-header_1340c8:hover {
-  background-color: var(--accent-hover-color);
-}
-
-.expansion-panel-header_1340c8 .bp5-icon {
-  transform: translate(0, 3px);
-}
-
-.expansion-children_1340c8 {
-  padding: 5px 1em 10px;
-}
-
-.expansion-children_1340c8 .expansion-panel_1340c8 {
-  margin-left: -1em;
-  margin-right: -1em;
-}
-
-.expansion-children_1340c8 .expansion-panel_1340c8:first-child {
-  margin-top: -5px;
-}
-
-.expansion-panel-subtext_1340c8 {
-  font-size: 85%;
-  font-weight: 400;
-}
-
-.expansion-panel-root {
-  padding-left: 15px !important;
-}
-
-.expansion-panel-detail {
-  padding: 0 !important;
-  display: block !important;
-}
-
-.expansion-panel-detail-sub {
-  display: block !important;
-}
-
-.expandable-details-main_1340c8 {
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  margin: 3px 0;
-  display: flex;
-}
-
-.expandable-details-header_1340c8 {
-  flex-direction: row;
-  flex-grow: 1;
-  align-items: baseline;
-  display: inline-flex;
-}
-
-.expandable-details-children_1340c8 {
-  position: relative;
-}
-
-.expandable-details-toggle_1340c8 .bp5-button {
-  font-size: 10px;
-}
-
-.expandable-details_1340c8.macrostrat-unit_1340c8 .title_1340c8:after {
-  content: none;
-}
-
-.expandable-details_1340c8 .title_1340c8 {
-  margin-right: 1em;
-}
-
-.expandable-details_1340c8 .title_1340c8:after {
-  content: ":";
-}
-
-.expansion-body_1340c8 {
-  background-color: var(--tertiary-background);
-  border-radius: 4px;
-  align-items: baseline;
-  width: 100%;
-  margin-bottom: 6px;
-  padding: 2px 6px;
-  display: inline-block;
-  box-shadow: 0 1px 2px 1px #0003;
-}
-
-.expansion-panel-detail-header_1340c8 {
-  color: var(--secondary-color);
-  margin-right: 1em;
-  font-size: 90%;
-  font-style: italic;
-  display: inline;
-}
-
-.expansion-panel-detail-header_1340c8:after {
-  content: ":";
-}
-
-.expansion-panel-detail-body_1340c8 {
-  display: inline;
-}
-/*# sourceMappingURL=index.css.map */
+/*# sourceMappingURL=main.module.f085a193.css.map */

package/dist/cjs/main.module.f085a193.css.map

@@ -0,0 +1 @@
+{"mappings":"AAAA;;;;;;;;;;AAUI;;;;AAGF;;;;;;AAOA;;;;AAIE;;;;AAGF;;;;AAGA;;;;AAGA;;;;AAME;;;;AAGF;;;;AAIE;;;;;AAME;;;;;;;;;;;;;;;;;;;;;;AAgBJ;;;;;;;;;AAOA;;;;;;;;;;AAYF;;;;;AAME;;;;AAGA;;;;;AAKE;;;;;;;;;;;AAQF;;;;AAGA;;;;AAGE;;;;AAEJ;;;;;AAKI;;;;;;;;;AAKJ;;;;;;;;;AAOE;;;;;;;;;;;;;;AASA;;;;;;;AAKA;;;;;;;;;;;;;;;;;AAYA;;;;;AAGF;;;;AAGE;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA;;;;;;;;AAKA;;;;;;;;AAKA;;;;;AAEF;;;;;AAIA;;;;AAGE;;;;AAGE;;;;AAGA;;;;AAIA;;;;AAGF;;;;AAGA;;;;;;;;AAME;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAIE;;;;;;;;;;;;;;;;AAcJ;;;;;;;;;;;;;;;;;;;;;;;AAqBA;;;;;;;;;;;;AAaF;EAAA;;;;;;EAME;;;;;;EAGF;;;;EAIE;;;;EAGA;;;;;;;;;;;;;;;;EA4BE;;;;;;;EAMA;;;;;;;;;;;;;;;;;;;;;;;;;EAoBJ;;;;;EAME;;;;EAIA;;;;;;;;;;;EASE;;;;;EAIA;;;;EAIA;;;;EAGE;;;;EAQF;;;;;AAKA;;;;;;;;;;AAQA;;;;AAGA;;;;AAGA;;;;;;;;;;;;;;;;AAeF;;;;AAQE;;;;AAGA;;;;;;;;;EAQF;;;;EAGA;;;;;EAOI;;;;EAGA;;;;;;;;;;;;;;AAaF;EACE;;;;EAGA;;;;EAGA","sources":["packages/map-interface/src/main.module.sass"],"sourcesContent":[".map-container\n  display: flex\n  flex-direction: column\n  position: relative\n  width: 100%\n  height: 100%\n  overflow: hidden\n  --map-panel-border-radius: 4px\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.context-panel-holder > :global(.bp5-card)\n  padding: 10px\n  background-color: var(--panel-background-color)\n\n.panel-card\n  padding: 10px\n  background-color: var(--panel-background-color)\n  overflow: hidden\n  border-radius: var(--map-panel-border-radius)\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\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\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"],"names":[],"version":3,"file":"main.module.f085a193.css.map"}

package/dist/cjs/main.module.ff1b1aca.css

@@ -0,0 +1,179 @@
+.panel-subhead_1340c8 {
+  padding: .2em var(--box-horizontal-padding);
+  border-top: 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);
+  flex-direction: row;
+  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;
+  font-family: Montserrat, sans-serif;
+  font-weight: 700;
+}
+
+.panel-subhead_1340c8 h4 {
+  font-weight: 600;
+}
+
+.panel-subhead_1340c8 .title_1340c8 {
+  flex-grow: 1;
+}
+
+.info-panel-section_1340c8 > .panel-subhead_1340c8 {
+  margin: -1px calc(var(--panel-padding-h) * -1) 0;
+}
+
+.expansion-panel_1340c8 {
+  flex-wrap: wrap;
+  margin-top: -1px;
+  padding: 0;
+}
+
+.sub-expansion-panel_1340c8 {
+  margin: -1px calc(var(--panel-padding-h) * -.5) 0;
+  overflow: hidden;
+}
+
+.sub-expansion-panel_1340c8:first-child .expansion-panel-header_1340c8 {
+  border-top-width: 0;
+}
+
+.sub-expansion-panel_1340c8 .panel-subhead_1340c8 {
+  border-top: none;
+  border-bottom: none;
+}
+
+.sub-expansion-panel_1340c8 .expansion-panel-header_1340c8 {
+  background-color: var(--accent-secondary-color);
+  cursor: pointer;
+}
+
+.sub-expansion-panel_1340c8 .expansion-panel-header_1340c8:hover {
+  background-color: var(--accent-secondary-hover-color);
+}
+
+.sub-expansion-panel_1340c8 .expansion-panel-header_1340c8 h2, .sub-expansion-panel_1340c8 .expansion-panel-header_1340c8 h3, .sub-expansion-panel_1340c8 .expansion-panel-header_1340c8 h4 {
+  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;
+}
+
+.expansion-summary-title-help_1340c8, .expansion-summary-title-help_1340c8 .bp5-icon {
+  margin-left: 5px;
+}
+
+.expansion-panel-header_1340c8 {
+  cursor: pointer;
+}
+
+.expansion-panel-header_1340c8:hover {
+  background-color: var(--accent-hover-color);
+}
+
+.expansion-panel-header_1340c8 .bp5-icon {
+  transform: translate(0, 3px);
+}
+
+.expansion-children_1340c8 {
+  padding: 5px 1em 10px;
+}
+
+.expansion-children_1340c8 .expansion-panel_1340c8 {
+  margin-left: -1em;
+  margin-right: -1em;
+}
+
+.expansion-children_1340c8 .expansion-panel_1340c8:first-child {
+  margin-top: -5px;
+}
+
+.expansion-panel-subtext_1340c8 {
+  font-size: 85%;
+  font-weight: 400;
+}
+
+.expansion-panel-root {
+  padding-left: 15px !important;
+}
+
+.expansion-panel-detail {
+  padding: 0 !important;
+  display: block !important;
+}
+
+.expansion-panel-detail-sub {
+  display: block !important;
+}
+
+.expandable-details-main_1340c8 {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin: 3px 0;
+  display: flex;
+}
+
+.expandable-details-header_1340c8 {
+  flex-direction: row;
+  flex-grow: 1;
+  align-items: baseline;
+  display: inline-flex;
+}
+
+.expandable-details-children_1340c8 {
+  position: relative;
+}
+
+.expandable-details-toggle_1340c8 .bp5-button {
+  font-size: 10px;
+}
+
+.expandable-details_1340c8.macrostrat-unit_1340c8 .title_1340c8:after {
+  content: none;
+}
+
+.expandable-details_1340c8 .title_1340c8 {
+  margin-right: 1em;
+}
+
+.expandable-details_1340c8 .title_1340c8:after {
+  content: ":";
+}
+
+.expansion-body_1340c8 {
+  background-color: var(--tertiary-background);
+  border-radius: 4px;
+  align-items: baseline;
+  width: 100%;
+  margin-bottom: 6px;
+  padding: 2px 6px;
+  display: inline-block;
+  box-shadow: 0 1px 2px 1px #0003;
+}
+
+.expansion-panel-detail-header_1340c8 {
+  color: var(--secondary-color);
+  margin-right: 1em;
+  font-size: 90%;
+  font-style: italic;
+  display: inline;
+}
+
+.expansion-panel-detail-header_1340c8:after {
+  content: ":";
+}
+
+.expansion-panel-detail-body_1340c8 {
+  display: inline;
+}
+/*# sourceMappingURL=main.module.ff1b1aca.css.map */

package/dist/cjs/main.module.ff1b1aca.css.map

@@ -0,0 +1 @@
+{"mappings":"AACA;;;;;;;;;;;;;;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":["packages/map-interface/src/expansion-panel/main.module.sass"],"sourcesContent":["\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.module.ff1b1aca.css.map"}