@macrostrat/map-interface 1.5.7 → 2.0.0

package/CHANGELOG.md

@@ -4,6 +4,21 @@ 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).
 
+## [2.0.0] - 2026-01-26
+
+- Update peer dependencies to React 18
+- Convert last remaining Stylus to Sass
+- Update bundling process to `@macrostrat/web-components-bundler`
+- Make styles optional: import of `@macrostrat/map-interface/styles.css` or
+  `@macrostrat/map-interface/dist/map-interface.css` is now required for styles
+
+## [1.6.0] - 2025-11-28
+
+- Update XDD panel components to remove Typescript
+- Remove circular dependencies
+- Move `LngLatCoords` and `Elevation` components to
+  `@macrostrat/data-components`
+
 ## [1.5.7] - 2025-08-19
 
 - Remove a duplicate export

package/dist/container.cjs

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const h$1 = require("@macrostrat/hyper");
+const main_module = require("./main.module.sass.cjs");
+const classNames = require("classnames");
+const transitionHook = require("transition-hook");
+const mapboxReact = require("@macrostrat/mapbox-react");
+const uiComponents = require("@macrostrat/ui-components");
+const controls = require("./controls.cjs");
+const mapboxUtils = require("@macrostrat/mapbox-utils");
+const core = require("@blueprintjs/core");
+const h = h$1.styled(main_module.default);
+const PanelCard = (props) => h(core.Card, { ...props, className: classNames("panel-card", props.className) });
+var DetailPanelStyle = /* @__PURE__ */ ((DetailPanelStyle2) => {
+  DetailPanelStyle2["FIXED"] = "fixed";
+  DetailPanelStyle2["FLOATING"] = "floating";
+  return DetailPanelStyle2;
+})(DetailPanelStyle || {});
+const MapAreaContainer = (props) => h(MapProviders, h(_MapAreaContainer, props));
+function _MapAreaContainer({
+  children,
+  className,
+  navbar,
+  contextPanel = null,
+  detailPanel = null,
+  detailPanelOpen,
+  contextPanelOpen = true,
+  bottomPanel = null,
+  mainPanel,
+  mapControls = h(controls.MapBottomControls),
+  contextStackProps = null,
+  detailStackProps = null,
+  detailPanelStyle = "floating",
+  fitViewport = true,
+  showPanelOutlines = false,
+  preventMapInteraction = false,
+  ...rest
+}) {
+  const _detailPanelOpen = detailPanelOpen ?? detailPanel != null;
+  const contextPanelTrans = transitionHook.useTransition(contextPanelOpen, 800);
+  const detailPanelTrans = transitionHook.useTransition(_detailPanelOpen, 800);
+  const mainUIClassNames = classNames(
+    "map-container",
+    className,
+    `detail-panel-${detailPanelStyle}`,
+    `context-panel-${contextPanelTrans.stage}`,
+    `map-context-${contextPanelTrans.stage}`,
+    `detail-panel-${detailPanelTrans.stage}`,
+    `map-detail-${detailPanelTrans.stage}`,
+    {
+      "detail-panel-open": _detailPanelOpen,
+      "map-context-open": contextPanelOpen,
+      "show-panel-outlines": showPanelOutlines,
+      "fit-viewport": fitViewport
+    }
+  );
+  const mapControlsExt = h([
+    h(mapboxReact.ZoomControl, { className: "zoom-control" }),
+    h("div.spacer"),
+    mapControls
+  ]);
+  const detailStackExt = h(
+    "div.detail-stack.infodrawer-container",
+    detailStackProps,
+    [
+      h("div.detail-panel-holder", null, detailPanel),
+      h.if(
+        detailPanelStyle == "floating"
+        /* FLOATING */
+      )([mapControlsExt])
+    ]
+  );
+  let contextStack = null;
+  if (navbar != null || contextPanel != null) {
+    contextStack = h(ContextStack, { navbar, ...contextStackProps }, [
+      h.if(contextPanelTrans.shouldMount)([contextPanel])
+    ]);
+  }
+  return h(MapStyledContainer, { className: mainUIClassNames }, [
+    h("div.main-row", [
+      h("div.map-ui", { ...rest }, [
+        contextStack,
+        //h(MapView),
+        children ?? mainPanel,
+        h.if(
+          detailPanelStyle == "floating"
+          /* FLOATING */
+        )([detailStackExt]),
+        h.if(
+          detailPanelStyle == "fixed"
+          /* FIXED */
+        )(
+          "div.map-control-stack",
+          mapControlsExt
+        )
+      ]),
+      h.if(
+        detailPanelStyle == "fixed"
+        /* FIXED */
+      )([detailStackExt])
+    ]),
+    h("div.bottom", null, bottomPanel)
+  ]);
+}
+function ContextStack(props) {
+  const { adaptiveWidth, navbar, children, ...rest } = props;
+  const props1 = h$1.addClassNames(rest, { "adaptive-width": adaptiveWidth });
+  return h("div.context-stack", props1, [
+    navbar,
+    h("div.context-panel-holder", null, children),
+    h("div.spacer")
+  ]);
+}
+const MapProviders = ({ children }) => h(uiComponents.ToasterContext, h(mapboxReact.MapboxMapProvider, children));
+function MapStyledContainer({ className, children }) {
+  const mapPosition = mapboxReact.useMapPosition();
+  if (mapPosition != null) {
+    const { mapIsRotated, mapUse3D, mapIsGlobal } = mapboxUtils.mapViewInfo(mapPosition);
+    className = classNames(className, {
+      "map-is-rotated": mapIsRotated,
+      "map-3d-available": mapUse3D,
+      "map-is-global": mapIsGlobal
+    });
+  }
+  return h("div", { className }, children);
+}
+exports.DetailPanelStyle = DetailPanelStyle;
+exports.MapAreaContainer = MapAreaContainer;
+exports.MapStyledContainer = MapStyledContainer;
+exports.PanelCard = PanelCard;
+//# sourceMappingURL=container.cjs.map

package/dist/container.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.cjs","sources":["../src/container.ts"],"sourcesContent":["import hyper, { addClassNames } from \"@macrostrat/hyper\";\nimport { HTMLDivProps } from \"@blueprintjs/core\";\nimport styles from \"./main.module.sass\";\nimport classNames from \"classnames\";\nimport { useTransition } from \"transition-hook\";\nimport {\n  MapboxMapProvider,\n  ZoomControl,\n  useMapPosition,\n} from \"@macrostrat/mapbox-react\";\nimport { ToasterContext } from \"@macrostrat/ui-components\";\nimport { MapBottomControls } from \"./controls\";\nimport { mapViewInfo, MapPosition } from \"@macrostrat/mapbox-utils\";\nimport { Card } from \"@blueprintjs/core\";\n\nimport { ReactNode } from \"react\";\n\nconst h = hyper.styled(styles);\n\ntype AnyElement = React.ReactNode | React.ReactElement | React.ReactFragment;\n\nexport const PanelCard = (props) =>\n  h(Card, { ...props, className: classNames(\"panel-card\", props.className) });\n\ninterface ContextStackProps extends HTMLDivProps {\n  adaptiveWidth: boolean;\n  navbar: AnyElement;\n}\n\nexport enum DetailPanelStyle {\n  FIXED = \"fixed\",\n  FLOATING = \"floating\",\n}\n\nexport const MapAreaContainer = (props) =>\n  h(MapProviders, h(_MapAreaContainer, props));\n\ninterface MapAreaContainerProps {\n  navbar: AnyElement;\n  children?: AnyElement;\n  mapControls?: AnyElement;\n  contextPanel?: AnyElement;\n  contextStack?: AnyElement;\n  mainPanel?: AnyElement;\n  detailPanel?: AnyElement;\n  bottomPanel?: AnyElement;\n  className?: string;\n  detailPanelOpen?: boolean;\n  contextPanelOpen?: boolean;\n  contextStackProps?: ContextStackProps;\n  detailStackProps?: HTMLDivProps;\n  detailPanelStyle: DetailPanelStyle;\n  fitViewport?: boolean;\n  showPanelOutlines?: boolean;\n  preventMapInteraction?: boolean;\n}\n\nfunction _MapAreaContainer({\n  children,\n  className,\n  navbar,\n  contextPanel = null,\n  detailPanel = null,\n  detailPanelOpen,\n  contextPanelOpen = true,\n  bottomPanel = null,\n  mainPanel,\n  mapControls = h(MapBottomControls),\n  contextStackProps = null,\n  detailStackProps = null,\n  detailPanelStyle = DetailPanelStyle.FLOATING,\n  fitViewport = true,\n  showPanelOutlines = false,\n  preventMapInteraction = false,\n  ...rest\n}: MapAreaContainerProps) {\n  const _detailPanelOpen = detailPanelOpen ?? detailPanel != null;\n  const contextPanelTrans = useTransition(contextPanelOpen, 800);\n  const detailPanelTrans = useTransition(_detailPanelOpen, 800);\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    - These styles are doubly applied so we can have both namespaced and\n      outside-accessible styles for each case.\n  */\n  const mainUIClassNames = classNames(\n    \"map-container\",\n    className,\n    `detail-panel-${detailPanelStyle}`,\n    `context-panel-${contextPanelTrans.stage}`,\n    `map-context-${contextPanelTrans.stage}`,\n    `detail-panel-${detailPanelTrans.stage}`,\n    `map-detail-${detailPanelTrans.stage}`,\n    {\n      \"detail-panel-open\": _detailPanelOpen,\n      \"map-context-open\": contextPanelOpen,\n      \"show-panel-outlines\": showPanelOutlines,\n      \"fit-viewport\": fitViewport,\n    },\n  );\n\n  const mapControlsExt = h([\n    h(ZoomControl, { className: \"zoom-control\" }),\n    h(\"div.spacer\"),\n    mapControls,\n  ]);\n\n  const detailStackExt = h(\n    \"div.detail-stack.infodrawer-container\",\n    detailStackProps,\n    [\n      h(\"div.detail-panel-holder\", null, detailPanel),\n      h.if(detailPanelStyle == DetailPanelStyle.FLOATING)([mapControlsExt]),\n    ],\n  );\n\n  let contextStack = null;\n  if (navbar != null || contextPanel != null) {\n    contextStack = h(ContextStack, { navbar, ...contextStackProps }, [\n      h.if(contextPanelTrans.shouldMount)([contextPanel]),\n    ]);\n  }\n\n  return h(MapStyledContainer, { className: mainUIClassNames }, [\n    h(\"div.main-row\", [\n      h(\"div.map-ui\", { ...rest }, [\n        contextStack,\n        //h(MapView),\n        children ?? mainPanel,\n        h.if(detailPanelStyle == DetailPanelStyle.FLOATING)([detailStackExt]),\n        h.if(detailPanelStyle == DetailPanelStyle.FIXED)(\n          \"div.map-control-stack\",\n          mapControlsExt,\n        ),\n      ]),\n      h.if(detailPanelStyle == DetailPanelStyle.FIXED)([detailStackExt]),\n    ]),\n    h(\"div.bottom\", null, bottomPanel),\n  ]);\n}\n\nfunction ContextStack(props: ContextStackProps) {\n  const { adaptiveWidth, navbar, children, ...rest } = props;\n  const props1 = addClassNames(rest, { \"adaptive-width\": adaptiveWidth });\n  return h(\"div.context-stack\", props1, [\n    navbar,\n    h(\"div.context-panel-holder\", null, children),\n    h(\"div.spacer\"),\n  ]);\n}\n\nconst MapProviders = ({ children }) =>\n  h(ToasterContext, h(MapboxMapProvider, children));\n\ninterface MapContainerProps {\n  className?: string;\n  children?: ReactNode;\n}\n\nexport function MapStyledContainer({ className, children }: MapContainerProps) {\n  const mapPosition = useMapPosition();\n  if (mapPosition != null) {\n    const { mapIsRotated, mapUse3D, mapIsGlobal } = mapViewInfo(mapPosition);\n    className = classNames(className, {\n      \"map-is-rotated\": mapIsRotated,\n      \"map-3d-available\": mapUse3D,\n      \"map-is-global\": mapIsGlobal,\n    });\n  }\n\n  return h(\"div\", { className }, children);\n}\n\n//const _MapPage = compose(HotkeysProvider, MapPage);\n"],"names":["hyper","styles","Card","DetailPanelStyle","MapBottomControls","useTransition","ZoomControl","addClassNames","ToasterContext","MapboxMapProvider","useMapPosition","mapViewInfo"],"mappings":"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"}

package/dist/container.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export declare const PanelCard: (props: any) => import('react').FunctionComponentElement<import('@blueprintjs/core').CardProps>;
+export declare enum DetailPanelStyle {
+    FIXED = "fixed",
+    FLOATING = "floating"
+}
+export declare const MapAreaContainer: (props: any) => import('react').FunctionComponentElement<{
+    children: any;
+}>;
+interface MapContainerProps {
+    className?: string;
+    children?: ReactNode;
+}
+export declare function MapStyledContainer({ className, children }: MapContainerProps): import('react').DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+export {};

package/dist/container.js

@@ -0,0 +1,131 @@
+import h$1, { addClassNames } from "@macrostrat/hyper";
+import styles from "./main.module.sass.js";
+import classNames from "classnames";
+import { useTransition } from "transition-hook";
+import { useMapPosition, MapboxMapProvider, ZoomControl } from "@macrostrat/mapbox-react";
+import { ToasterContext } from "@macrostrat/ui-components";
+import { MapBottomControls } from "./controls.js";
+import { mapViewInfo } from "@macrostrat/mapbox-utils";
+import { Card } from "@blueprintjs/core";
+const h = h$1.styled(styles);
+const PanelCard = (props) => h(Card, { ...props, className: classNames("panel-card", props.className) });
+var DetailPanelStyle = /* @__PURE__ */ ((DetailPanelStyle2) => {
+  DetailPanelStyle2["FIXED"] = "fixed";
+  DetailPanelStyle2["FLOATING"] = "floating";
+  return DetailPanelStyle2;
+})(DetailPanelStyle || {});
+const MapAreaContainer = (props) => h(MapProviders, h(_MapAreaContainer, props));
+function _MapAreaContainer({
+  children,
+  className,
+  navbar,
+  contextPanel = null,
+  detailPanel = null,
+  detailPanelOpen,
+  contextPanelOpen = true,
+  bottomPanel = null,
+  mainPanel,
+  mapControls = h(MapBottomControls),
+  contextStackProps = null,
+  detailStackProps = null,
+  detailPanelStyle = "floating",
+  fitViewport = true,
+  showPanelOutlines = false,
+  preventMapInteraction = false,
+  ...rest
+}) {
+  const _detailPanelOpen = detailPanelOpen ?? detailPanel != null;
+  const contextPanelTrans = useTransition(contextPanelOpen, 800);
+  const detailPanelTrans = useTransition(_detailPanelOpen, 800);
+  const mainUIClassNames = classNames(
+    "map-container",
+    className,
+    `detail-panel-${detailPanelStyle}`,
+    `context-panel-${contextPanelTrans.stage}`,
+    `map-context-${contextPanelTrans.stage}`,
+    `detail-panel-${detailPanelTrans.stage}`,
+    `map-detail-${detailPanelTrans.stage}`,
+    {
+      "detail-panel-open": _detailPanelOpen,
+      "map-context-open": contextPanelOpen,
+      "show-panel-outlines": showPanelOutlines,
+      "fit-viewport": fitViewport
+    }
+  );
+  const mapControlsExt = h([
+    h(ZoomControl, { className: "zoom-control" }),
+    h("div.spacer"),
+    mapControls
+  ]);
+  const detailStackExt = h(
+    "div.detail-stack.infodrawer-container",
+    detailStackProps,
+    [
+      h("div.detail-panel-holder", null, detailPanel),
+      h.if(
+        detailPanelStyle == "floating"
+        /* FLOATING */
+      )([mapControlsExt])
+    ]
+  );
+  let contextStack = null;
+  if (navbar != null || contextPanel != null) {
+    contextStack = h(ContextStack, { navbar, ...contextStackProps }, [
+      h.if(contextPanelTrans.shouldMount)([contextPanel])
+    ]);
+  }
+  return h(MapStyledContainer, { className: mainUIClassNames }, [
+    h("div.main-row", [
+      h("div.map-ui", { ...rest }, [
+        contextStack,
+        //h(MapView),
+        children ?? mainPanel,
+        h.if(
+          detailPanelStyle == "floating"
+          /* FLOATING */
+        )([detailStackExt]),
+        h.if(
+          detailPanelStyle == "fixed"
+          /* FIXED */
+        )(
+          "div.map-control-stack",
+          mapControlsExt
+        )
+      ]),
+      h.if(
+        detailPanelStyle == "fixed"
+        /* FIXED */
+      )([detailStackExt])
+    ]),
+    h("div.bottom", null, bottomPanel)
+  ]);
+}
+function ContextStack(props) {
+  const { adaptiveWidth, navbar, children, ...rest } = props;
+  const props1 = addClassNames(rest, { "adaptive-width": adaptiveWidth });
+  return h("div.context-stack", props1, [
+    navbar,
+    h("div.context-panel-holder", null, children),
+    h("div.spacer")
+  ]);
+}
+const MapProviders = ({ children }) => h(ToasterContext, h(MapboxMapProvider, children));
+function MapStyledContainer({ className, children }) {
+  const mapPosition = useMapPosition();
+  if (mapPosition != null) {
+    const { mapIsRotated, mapUse3D, mapIsGlobal } = mapViewInfo(mapPosition);
+    className = classNames(className, {
+      "map-is-rotated": mapIsRotated,
+      "map-3d-available": mapUse3D,
+      "map-is-global": mapIsGlobal
+    });
+  }
+  return h("div", { className }, children);
+}
+export {
+  DetailPanelStyle,
+  MapAreaContainer,
+  MapStyledContainer,
+  PanelCard
+};
+//# sourceMappingURL=container.js.map

package/dist/container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","sources":["../src/container.ts"],"sourcesContent":["import hyper, { addClassNames } from \"@macrostrat/hyper\";\nimport { HTMLDivProps } from \"@blueprintjs/core\";\nimport styles from \"./main.module.sass\";\nimport classNames from \"classnames\";\nimport { useTransition } from \"transition-hook\";\nimport {\n  MapboxMapProvider,\n  ZoomControl,\n  useMapPosition,\n} from \"@macrostrat/mapbox-react\";\nimport { ToasterContext } from \"@macrostrat/ui-components\";\nimport { MapBottomControls } from \"./controls\";\nimport { mapViewInfo, MapPosition } from \"@macrostrat/mapbox-utils\";\nimport { Card } from \"@blueprintjs/core\";\n\nimport { ReactNode } from \"react\";\n\nconst h = hyper.styled(styles);\n\ntype AnyElement = React.ReactNode | React.ReactElement | React.ReactFragment;\n\nexport const PanelCard = (props) =>\n  h(Card, { ...props, className: classNames(\"panel-card\", props.className) });\n\ninterface ContextStackProps extends HTMLDivProps {\n  adaptiveWidth: boolean;\n  navbar: AnyElement;\n}\n\nexport enum DetailPanelStyle {\n  FIXED = \"fixed\",\n  FLOATING = \"floating\",\n}\n\nexport const MapAreaContainer = (props) =>\n  h(MapProviders, h(_MapAreaContainer, props));\n\ninterface MapAreaContainerProps {\n  navbar: AnyElement;\n  children?: AnyElement;\n  mapControls?: AnyElement;\n  contextPanel?: AnyElement;\n  contextStack?: AnyElement;\n  mainPanel?: AnyElement;\n  detailPanel?: AnyElement;\n  bottomPanel?: AnyElement;\n  className?: string;\n  detailPanelOpen?: boolean;\n  contextPanelOpen?: boolean;\n  contextStackProps?: ContextStackProps;\n  detailStackProps?: HTMLDivProps;\n  detailPanelStyle: DetailPanelStyle;\n  fitViewport?: boolean;\n  showPanelOutlines?: boolean;\n  preventMapInteraction?: boolean;\n}\n\nfunction _MapAreaContainer({\n  children,\n  className,\n  navbar,\n  contextPanel = null,\n  detailPanel = null,\n  detailPanelOpen,\n  contextPanelOpen = true,\n  bottomPanel = null,\n  mainPanel,\n  mapControls = h(MapBottomControls),\n  contextStackProps = null,\n  detailStackProps = null,\n  detailPanelStyle = DetailPanelStyle.FLOATING,\n  fitViewport = true,\n  showPanelOutlines = false,\n  preventMapInteraction = false,\n  ...rest\n}: MapAreaContainerProps) {\n  const _detailPanelOpen = detailPanelOpen ?? detailPanel != null;\n  const contextPanelTrans = useTransition(contextPanelOpen, 800);\n  const detailPanelTrans = useTransition(_detailPanelOpen, 800);\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    - These styles are doubly applied so we can have both namespaced and\n      outside-accessible styles for each case.\n  */\n  const mainUIClassNames = classNames(\n    \"map-container\",\n    className,\n    `detail-panel-${detailPanelStyle}`,\n    `context-panel-${contextPanelTrans.stage}`,\n    `map-context-${contextPanelTrans.stage}`,\n    `detail-panel-${detailPanelTrans.stage}`,\n    `map-detail-${detailPanelTrans.stage}`,\n    {\n      \"detail-panel-open\": _detailPanelOpen,\n      \"map-context-open\": contextPanelOpen,\n      \"show-panel-outlines\": showPanelOutlines,\n      \"fit-viewport\": fitViewport,\n    },\n  );\n\n  const mapControlsExt = h([\n    h(ZoomControl, { className: \"zoom-control\" }),\n    h(\"div.spacer\"),\n    mapControls,\n  ]);\n\n  const detailStackExt = h(\n    \"div.detail-stack.infodrawer-container\",\n    detailStackProps,\n    [\n      h(\"div.detail-panel-holder\", null, detailPanel),\n      h.if(detailPanelStyle == DetailPanelStyle.FLOATING)([mapControlsExt]),\n    ],\n  );\n\n  let contextStack = null;\n  if (navbar != null || contextPanel != null) {\n    contextStack = h(ContextStack, { navbar, ...contextStackProps }, [\n      h.if(contextPanelTrans.shouldMount)([contextPanel]),\n    ]);\n  }\n\n  return h(MapStyledContainer, { className: mainUIClassNames }, [\n    h(\"div.main-row\", [\n      h(\"div.map-ui\", { ...rest }, [\n        contextStack,\n        //h(MapView),\n        children ?? mainPanel,\n        h.if(detailPanelStyle == DetailPanelStyle.FLOATING)([detailStackExt]),\n        h.if(detailPanelStyle == DetailPanelStyle.FIXED)(\n          \"div.map-control-stack\",\n          mapControlsExt,\n        ),\n      ]),\n      h.if(detailPanelStyle == DetailPanelStyle.FIXED)([detailStackExt]),\n    ]),\n    h(\"div.bottom\", null, bottomPanel),\n  ]);\n}\n\nfunction ContextStack(props: ContextStackProps) {\n  const { adaptiveWidth, navbar, children, ...rest } = props;\n  const props1 = addClassNames(rest, { \"adaptive-width\": adaptiveWidth });\n  return h(\"div.context-stack\", props1, [\n    navbar,\n    h(\"div.context-panel-holder\", null, children),\n    h(\"div.spacer\"),\n  ]);\n}\n\nconst MapProviders = ({ children }) =>\n  h(ToasterContext, h(MapboxMapProvider, children));\n\ninterface MapContainerProps {\n  className?: string;\n  children?: ReactNode;\n}\n\nexport function MapStyledContainer({ className, children }: MapContainerProps) {\n  const mapPosition = useMapPosition();\n  if (mapPosition != null) {\n    const { mapIsRotated, mapUse3D, mapIsGlobal } = mapViewInfo(mapPosition);\n    className = classNames(className, {\n      \"map-is-rotated\": mapIsRotated,\n      \"map-3d-available\": mapUse3D,\n      \"map-is-global\": mapIsGlobal,\n    });\n  }\n\n  return h(\"div\", { className }, children);\n}\n\n//const _MapPage = compose(HotkeysProvider, MapPage);\n"],"names":["hyper","DetailPanelStyle"],"mappings":"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"}

package/dist/context-panel/index.cjs

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const core = require("@blueprintjs/core");
+const h$1 = require("@macrostrat/hyper");
+const main_module = require("./main.module.sass.cjs");
+const mapboxReact = require("@macrostrat/mapbox-react");
+const uiComponents = require("@macrostrat/ui-components");
+const h = h$1.styled(main_module.default);
+const spinnerElement = h(core.Spinner, { size: 16 });
+function LoadingButton({
+  isLoading = false,
+  onClick,
+  active = false,
+  large = true,
+  icon = "menu",
+  style
+}) {
+  return h(core.Button, {
+    className: "loading-button",
+    icon: isLoading ? spinnerElement : icon,
+    large,
+    minimal: true,
+    onClick,
+    active: active && !isLoading,
+    style
+  });
+}
+function MapLoadingButton(props) {
+  const isLoading = mapboxReact.useMapStatus((s) => s.isLoading);
+  return h(LoadingButton, { ...props, isLoading });
+}
+function FloatingNavbar({
+  className,
+  children,
+  headerElement = null,
+  title = null,
+  statusElement = null,
+  rightElement = null,
+  height,
+  width,
+  style = {}
+}) {
+  let _rightElement = null;
+  if (rightElement != null) {
+    _rightElement = h("div.right-element", rightElement);
+  }
+  let _headerElement = headerElement;
+  if (title != null && _headerElement == null) {
+    if (typeof title === "string") {
+      _headerElement = h(core.Text, { tagName: "h2", ellipsize: true }, title);
+    } else {
+      _headerElement = title;
+    }
+  }
+  if (_headerElement != null) {
+    _headerElement = h([_headerElement, h(uiComponents.Spacer)]);
+  }
+  return h("div.searchbar-holder", { className, style: { width } }, [
+    h("div.navbar-holder", [
+      h(
+        core.Navbar,
+        {
+          className: "searchbar navbar panel",
+          style: { height, ...style }
+        },
+        [_headerElement, children, _rightElement]
+      )
+    ]),
+    h.if(statusElement != null)(
+      core.Card,
+      { className: "status-tongue" },
+      statusElement
+    )
+  ]);
+}
+exports.FloatingNavbar = FloatingNavbar;
+exports.LoadingButton = LoadingButton;
+exports.MapLoadingButton = MapLoadingButton;
+//# sourceMappingURL=index.cjs.map

package/dist/context-panel/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/context-panel/index.ts"],"sourcesContent":["import { Navbar, Button, Spinner, Card, Text } from \"@blueprintjs/core\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\nimport { useMapStatus } from \"@macrostrat/mapbox-react\";\nimport { Spacer } from \"@macrostrat/ui-components\";\nimport type { ReactNode } from \"react\";\n\nconst h = hyper.styled(styles);\n\nconst spinnerElement = h(Spinner, { size: 16 });\n\nexport function LoadingButton({\n  isLoading = false,\n  onClick,\n  active = false,\n  large = true,\n  icon = \"menu\",\n  style,\n}) {\n  return h(Button, {\n    className: \"loading-button\",\n    icon: (isLoading ? spinnerElement : icon) as any,\n    large,\n    minimal: true,\n    onClick,\n    active: active && !isLoading,\n    style,\n  });\n}\n\nexport function MapLoadingButton(props: any) {\n  const isLoading = useMapStatus((s) => s.isLoading);\n  return h(LoadingButton, { ...props, isLoading });\n}\n\ntype AnyChildren = ReactNode;\n\nexport interface FloatingNavbarProps {\n  className?: string;\n  children?: AnyChildren;\n  headerElement?: AnyChildren;\n  title?: AnyChildren;\n  statusElement?: AnyChildren;\n  rightElement?: AnyChildren;\n  height?: number | string;\n  width?: number | string;\n  style?: object;\n}\n\nexport function FloatingNavbar({\n  className,\n  children,\n  headerElement = null,\n  title = null,\n  statusElement = null,\n  rightElement = null,\n  height,\n  width,\n  style = {},\n}: FloatingNavbarProps) {\n  let _rightElement: ReactNode | null = null;\n  if (rightElement != null) {\n    _rightElement = h(\"div.right-element\", rightElement);\n  }\n\n  let _headerElement: ReactNode | null = headerElement;\n  if (title != null && _headerElement == null) {\n    if (typeof title === \"string\") {\n      _headerElement = h(Text, { tagName: \"h2\", ellipsize: true }, title);\n    } else {\n      _headerElement = title;\n    }\n  }\n\n  if (_headerElement != null) {\n    _headerElement = h([_headerElement, h(Spacer)]);\n  }\n\n  return h(\"div.searchbar-holder\", { className, style: { width } }, [\n    h(\"div.navbar-holder\", [\n      h(\n        Navbar,\n        {\n          className: \"searchbar navbar panel\",\n          style: { height, ...style },\n        },\n        [_headerElement, children, _rightElement],\n      ),\n    ]),\n    h.if(statusElement != null)(\n      Card,\n      { className: \"status-tongue\" },\n      statusElement,\n    ),\n  ]);\n}\n"],"names":["hyper","styles","Spinner","Button","useMapStatus","Text","Spacer","Navbar","Card"],"mappings":";;;;;;;AAOA,MAAM,IAAIA,IAAM,OAAOC,mBAAM;AAE7B,MAAM,iBAAiB,EAAEC,KAAAA,SAAS,EAAE,MAAM,IAAI;AAEvC,SAAS,cAAc;AAAA,EAC5B,YAAY;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AACF,GAAG;AACD,SAAO,EAAEC,KAAAA,QAAQ;AAAA,IACf,WAAW;AAAA,IACX,MAAO,YAAY,iBAAiB;AAAA,IACpC;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,QAAQ,UAAU,CAAC;AAAA,IACnB;AAAA,EAAA,CACD;AACH;AAEO,SAAS,iBAAiB,OAAY;AAC3C,QAAM,YAAYC,YAAAA,aAAa,CAAC,MAAM,EAAE,SAAS;AACjD,SAAO,EAAE,eAAe,EAAE,GAAG,OAAO,WAAW;AACjD;AAgBO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,QAAQ,CAAA;AACV,GAAwB;AACtB,MAAI,gBAAkC;AACtC,MAAI,gBAAgB,MAAM;AACxB,oBAAgB,EAAE,qBAAqB,YAAY;AAAA,EACrD;AAEA,MAAI,iBAAmC;AACvC,MAAI,SAAS,QAAQ,kBAAkB,MAAM;AAC3C,QAAI,OAAO,UAAU,UAAU;AAC7B,uBAAiB,EAAEC,KAAAA,MAAM,EAAE,SAAS,MAAM,WAAW,KAAA,GAAQ,KAAK;AAAA,IACpE,OAAO;AACL,uBAAiB;AAAA,IACnB;AAAA,EACF;AAEA,MAAI,kBAAkB,MAAM;AAC1B,qBAAiB,EAAE,CAAC,gBAAgB,EAAEC,aAAAA,MAAM,CAAC,CAAC;AAAA,EAChD;AAEA,SAAO,EAAE,wBAAwB,EAAE,WAAW,OAAO,EAAE,MAAA,KAAW;AAAA,IAChE,EAAE,qBAAqB;AAAA,MACrB;AAAA,QACEC,KAAAA;AAAAA,QACA;AAAA,UACE,WAAW;AAAA,UACX,OAAO,EAAE,QAAQ,GAAG,MAAA;AAAA,QAAM;AAAA,QAE5B,CAAC,gBAAgB,UAAU,aAAa;AAAA,MAAA;AAAA,IAC1C,CACD;AAAA,IACD,EAAE,GAAG,iBAAiB,IAAI;AAAA,MACxBC,KAAAA;AAAAA,MACA,EAAE,WAAW,gBAAA;AAAA,MACb;AAAA,IAAA;AAAA,EACF,CACD;AACH;;;;"}

package/dist/context-panel/index.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+export declare function LoadingButton({ isLoading, onClick, active, large, icon, style, }: {
+    isLoading?: boolean;
+    onClick: any;
+    active?: boolean;
+    large?: boolean;
+    icon?: string;
+    style: any;
+}): import('react').FunctionComponentElement<import('@blueprintjs/core').ButtonProps>;
+export declare function MapLoadingButton(props: any): import('react').FunctionComponentElement<{
+    isLoading?: boolean;
+    onClick: any;
+    active?: boolean;
+    large?: boolean;
+    icon?: string;
+    style: any;
+}>;
+type AnyChildren = ReactNode;
+export interface FloatingNavbarProps {
+    className?: string;
+    children?: AnyChildren;
+    headerElement?: AnyChildren;
+    title?: AnyChildren;
+    statusElement?: AnyChildren;
+    rightElement?: AnyChildren;
+    height?: number | string;
+    width?: number | string;
+    style?: object;
+}
+export declare function FloatingNavbar({ className, children, headerElement, title, statusElement, rightElement, height, width, style, }: FloatingNavbarProps): import('react').ReactElement<{
+    className: string;
+    style: {
+        width: string | number;
+    };
+}, string | import('react').JSXElementConstructor<any>>;
+export {};

package/dist/context-panel/index.js

@@ -0,0 +1,79 @@
+import { Spinner, Button, Text, Navbar, Card } from "@blueprintjs/core";
+import h$1 from "@macrostrat/hyper";
+import styles from "./main.module.sass.js";
+import { useMapStatus } from "@macrostrat/mapbox-react";
+import { Spacer } from "@macrostrat/ui-components";
+const h = h$1.styled(styles);
+const spinnerElement = h(Spinner, { size: 16 });
+function LoadingButton({
+  isLoading = false,
+  onClick,
+  active = false,
+  large = true,
+  icon = "menu",
+  style
+}) {
+  return h(Button, {
+    className: "loading-button",
+    icon: isLoading ? spinnerElement : icon,
+    large,
+    minimal: true,
+    onClick,
+    active: active && !isLoading,
+    style
+  });
+}
+function MapLoadingButton(props) {
+  const isLoading = useMapStatus((s) => s.isLoading);
+  return h(LoadingButton, { ...props, isLoading });
+}
+function FloatingNavbar({
+  className,
+  children,
+  headerElement = null,
+  title = null,
+  statusElement = null,
+  rightElement = null,
+  height,
+  width,
+  style = {}
+}) {
+  let _rightElement = null;
+  if (rightElement != null) {
+    _rightElement = h("div.right-element", rightElement);
+  }
+  let _headerElement = headerElement;
+  if (title != null && _headerElement == null) {
+    if (typeof title === "string") {
+      _headerElement = h(Text, { tagName: "h2", ellipsize: true }, title);
+    } else {
+      _headerElement = title;
+    }
+  }
+  if (_headerElement != null) {
+    _headerElement = h([_headerElement, h(Spacer)]);
+  }
+  return h("div.searchbar-holder", { className, style: { width } }, [
+    h("div.navbar-holder", [
+      h(
+        Navbar,
+        {
+          className: "searchbar navbar panel",
+          style: { height, ...style }
+        },
+        [_headerElement, children, _rightElement]
+      )
+    ]),
+    h.if(statusElement != null)(
+      Card,
+      { className: "status-tongue" },
+      statusElement
+    )
+  ]);
+}
+export {
+  FloatingNavbar,
+  LoadingButton,
+  MapLoadingButton
+};
+//# sourceMappingURL=index.js.map

package/dist/context-panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/context-panel/index.ts"],"sourcesContent":["import { Navbar, Button, Spinner, Card, Text } from \"@blueprintjs/core\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\nimport { useMapStatus } from \"@macrostrat/mapbox-react\";\nimport { Spacer } from \"@macrostrat/ui-components\";\nimport type { ReactNode } from \"react\";\n\nconst h = hyper.styled(styles);\n\nconst spinnerElement = h(Spinner, { size: 16 });\n\nexport function LoadingButton({\n  isLoading = false,\n  onClick,\n  active = false,\n  large = true,\n  icon = \"menu\",\n  style,\n}) {\n  return h(Button, {\n    className: \"loading-button\",\n    icon: (isLoading ? spinnerElement : icon) as any,\n    large,\n    minimal: true,\n    onClick,\n    active: active && !isLoading,\n    style,\n  });\n}\n\nexport function MapLoadingButton(props: any) {\n  const isLoading = useMapStatus((s) => s.isLoading);\n  return h(LoadingButton, { ...props, isLoading });\n}\n\ntype AnyChildren = ReactNode;\n\nexport interface FloatingNavbarProps {\n  className?: string;\n  children?: AnyChildren;\n  headerElement?: AnyChildren;\n  title?: AnyChildren;\n  statusElement?: AnyChildren;\n  rightElement?: AnyChildren;\n  height?: number | string;\n  width?: number | string;\n  style?: object;\n}\n\nexport function FloatingNavbar({\n  className,\n  children,\n  headerElement = null,\n  title = null,\n  statusElement = null,\n  rightElement = null,\n  height,\n  width,\n  style = {},\n}: FloatingNavbarProps) {\n  let _rightElement: ReactNode | null = null;\n  if (rightElement != null) {\n    _rightElement = h(\"div.right-element\", rightElement);\n  }\n\n  let _headerElement: ReactNode | null = headerElement;\n  if (title != null && _headerElement == null) {\n    if (typeof title === \"string\") {\n      _headerElement = h(Text, { tagName: \"h2\", ellipsize: true }, title);\n    } else {\n      _headerElement = title;\n    }\n  }\n\n  if (_headerElement != null) {\n    _headerElement = h([_headerElement, h(Spacer)]);\n  }\n\n  return h(\"div.searchbar-holder\", { className, style: { width } }, [\n    h(\"div.navbar-holder\", [\n      h(\n        Navbar,\n        {\n          className: \"searchbar navbar panel\",\n          style: { height, ...style },\n        },\n        [_headerElement, children, _rightElement],\n      ),\n    ]),\n    h.if(statusElement != null)(\n      Card,\n      { className: \"status-tongue\" },\n      statusElement,\n    ),\n  ]);\n}\n"],"names":["hyper"],"mappings":";;;;;AAOA,MAAM,IAAIA,IAAM,OAAO,MAAM;AAE7B,MAAM,iBAAiB,EAAE,SAAS,EAAE,MAAM,IAAI;AAEvC,SAAS,cAAc;AAAA,EAC5B,YAAY;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AACF,GAAG;AACD,SAAO,EAAE,QAAQ;AAAA,IACf,WAAW;AAAA,IACX,MAAO,YAAY,iBAAiB;AAAA,IACpC;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,QAAQ,UAAU,CAAC;AAAA,IACnB;AAAA,EAAA,CACD;AACH;AAEO,SAAS,iBAAiB,OAAY;AAC3C,QAAM,YAAY,aAAa,CAAC,MAAM,EAAE,SAAS;AACjD,SAAO,EAAE,eAAe,EAAE,GAAG,OAAO,WAAW;AACjD;AAgBO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,QAAQ,CAAA;AACV,GAAwB;AACtB,MAAI,gBAAkC;AACtC,MAAI,gBAAgB,MAAM;AACxB,oBAAgB,EAAE,qBAAqB,YAAY;AAAA,EACrD;AAEA,MAAI,iBAAmC;AACvC,MAAI,SAAS,QAAQ,kBAAkB,MAAM;AAC3C,QAAI,OAAO,UAAU,UAAU;AAC7B,uBAAiB,EAAE,MAAM,EAAE,SAAS,MAAM,WAAW,KAAA,GAAQ,KAAK;AAAA,IACpE,OAAO;AACL,uBAAiB;AAAA,IACnB;AAAA,EACF;AAEA,MAAI,kBAAkB,MAAM;AAC1B,qBAAiB,EAAE,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;AAAA,EAChD;AAEA,SAAO,EAAE,wBAAwB,EAAE,WAAW,OAAO,EAAE,MAAA,KAAW;AAAA,IAChE,EAAE,qBAAqB;AAAA,MACrB;AAAA,QACE;AAAA,QACA;AAAA,UACE,WAAW;AAAA,UACX,OAAO,EAAE,QAAQ,GAAG,MAAA;AAAA,QAAM;AAAA,QAE5B,CAAC,gBAAgB,UAAU,aAAa;AAAA,MAAA;AAAA,IAC1C,CACD;AAAA,IACD,EAAE,GAAG,iBAAiB,IAAI;AAAA,MACxB;AAAA,MACA,EAAE,WAAW,gBAAA;AAAA,MACb;AAAA,IAAA;AAAA,EACF,CACD;AACH;"}

package/dist/context-panel/main.module.sass.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const searchbar = "_searchbar_n1neb_1";
+const navbar = "_navbar_n1neb_7";
+const styles = {
+  "searchbar-holder": "_searchbar-holder_n1neb_1",
+  "navbar-holder": "_navbar-holder_n1neb_7",
+  searchbar,
+  navbar,
+  "loading-button": "_loading-button_n1neb_30",
+  "status-tongue": "_status-tongue_n1neb_35"
+};
+exports.default = styles;
+exports.navbar = navbar;
+exports.searchbar = searchbar;
+//# sourceMappingURL=main.module.sass.cjs.map

package/dist/context-panel/main.module.sass.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.module.sass.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/context-panel/main.module.sass.js

@@ -0,0 +1,16 @@
+const searchbar = "_searchbar_n1neb_1";
+const navbar = "_navbar_n1neb_7";
+const styles = {
+  "searchbar-holder": "_searchbar-holder_n1neb_1",
+  "navbar-holder": "_navbar-holder_n1neb_7",
+  searchbar,
+  navbar,
+  "loading-button": "_loading-button_n1neb_30",
+  "status-tongue": "_status-tongue_n1neb_35"
+};
+export {
+  styles as default,
+  navbar,
+  searchbar
+};
+//# sourceMappingURL=main.module.sass.js.map

package/dist/context-panel/main.module.sass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.module.sass.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/controls.cjs

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const mapboxgl = require("mapbox-gl");
+const h$1 = require("@macrostrat/hyper");
+const main_module = require("./main.module.sass.cjs");
+const mapboxReact = require("@macrostrat/mapbox-react");
+const uiComponents = require("@macrostrat/ui-components");
+const h = h$1.styled(main_module.default);
+function ScaleControl(props) {
+  const optionsRef = React.useRef({
+    maxWidth: 200,
+    unit: "metric"
+  });
+  return h(mapboxReact.MapControlWrapper, {
+    className: "map-scale-control",
+    control: mapboxgl.ScaleControl,
+    options: optionsRef.current,
+    ...props
+  });
+}
+function GeolocationControl(props) {
+  const optionsRef = React.useRef({
+    showAccuracyCircle: true,
+    showUserLocation: true,
+    trackUserLocation: true,
+    positionOptions: {
+      enableHighAccuracy: true
+    }
+  });
+  return h(mapboxReact.MapControlWrapper, {
+    control: mapboxgl.GeolocateControl,
+    options: optionsRef.current,
+    ...props
+  });
+}
+function MapBottomControls({ children }) {
+  const { isInitialized } = mapboxReact.useMapStatus();
+  if (!isInitialized) {
+    return null;
+  }
+  return h("div.map-controls", [
+    h(ScaleControl),
+    h(mapboxReact.ThreeDControl, { className: "map-3d-control" }),
+    h(mapboxReact.CompassControl, { className: "compass-control" }),
+    h(mapboxReact.GlobeControl, { className: "globe-control" }),
+    h(GeolocationControl, { className: "geolocation-control" }),
+    // If we have global development tools enabled, show the button
+    h(uiComponents.DevToolsButtonSlot, { className: "map-control" }),
+    children
+  ]);
+}
+exports.MapBottomControls = MapBottomControls;
+//# sourceMappingURL=controls.cjs.map

package/dist/controls.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.cjs","sources":["../src/controls.ts"],"sourcesContent":["import { useRef } from \"react\";\nimport { GeolocateControl } from \"mapbox-gl\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\nimport {\n  CompassControl,\n  GlobeControl,\n  ThreeDControl,\n  MapControlWrapper,\n  useMapStatus,\n} from \"@macrostrat/mapbox-react\";\nimport { ScaleControl as BaseScaleControl } from \"mapbox-gl\";\nimport { DevToolsButtonSlot } from \"@macrostrat/ui-components\";\n\nconst h = hyper.styled(styles);\n\nfunction ScaleControl(props) {\n  const optionsRef = useRef({\n    maxWidth: 200,\n    unit: \"metric\",\n  });\n  return h(MapControlWrapper, {\n    className: \"map-scale-control\",\n    control: BaseScaleControl,\n    options: optionsRef.current,\n    ...props,\n  });\n}\n\nfunction GeolocationControl(props) {\n  const optionsRef = useRef({\n    showAccuracyCircle: true,\n    showUserLocation: true,\n    trackUserLocation: true,\n    positionOptions: {\n      enableHighAccuracy: true,\n    },\n  });\n  return h(MapControlWrapper, {\n    control: GeolocateControl,\n    options: optionsRef.current,\n    ...props,\n  });\n}\n\nexport function MapBottomControls({ children }) {\n  const { isInitialized } = useMapStatus();\n\n  if (!isInitialized) {\n    return null;\n  }\n\n  return h(\"div.map-controls\", [\n    h(ScaleControl),\n    h(ThreeDControl, { className: \"map-3d-control\" }),\n    h(CompassControl, { className: \"compass-control\" }),\n    h(GlobeControl, { className: \"globe-control\" }),\n    h(GeolocationControl, { className: \"geolocation-control\" }),\n    // If we have global development tools enabled, show the button\n    h(DevToolsButtonSlot, { className: \"map-control\" }),\n    children,\n  ]);\n}\n"],"names":["hyper","styles","useRef","MapControlWrapper","BaseScaleControl","GeolocateControl","useMapStatus","ThreeDControl","CompassControl","GlobeControl","DevToolsButtonSlot"],"mappings":";;;;;;;;AAcA,MAAM,IAAIA,IAAM,OAAOC,mBAAM;AAE7B,SAAS,aAAa,OAAO;AAC3B,QAAM,aAAaC,MAAAA,OAAO;AAAA,IACxB,UAAU;AAAA,IACV,MAAM;AAAA,EAAA,CACP;AACD,SAAO,EAAEC,YAAAA,mBAAmB;AAAA,IAC1B,WAAW;AAAA,IACX,SAASC,SAAAA;AAAAA,IACT,SAAS,WAAW;AAAA,IACpB,GAAG;AAAA,EAAA,CACJ;AACH;AAEA,SAAS,mBAAmB,OAAO;AACjC,QAAM,aAAaF,MAAAA,OAAO;AAAA,IACxB,oBAAoB;AAAA,IACpB,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,MACf,oBAAoB;AAAA,IAAA;AAAA,EACtB,CACD;AACD,SAAO,EAAEC,YAAAA,mBAAmB;AAAA,IAC1B,SAASE,SAAAA;AAAAA,IACT,SAAS,WAAW;AAAA,IACpB,GAAG;AAAA,EAAA,CACJ;AACH;AAEO,SAAS,kBAAkB,EAAE,YAAY;AAC9C,QAAM,EAAE,cAAA,IAAkBC,yBAAA;AAE1B,MAAI,CAAC,eAAe;AAClB,WAAO;AAAA,EACT;AAEA,SAAO,EAAE,oBAAoB;AAAA,IAC3B,EAAE,YAAY;AAAA,IACd,EAAEC,YAAAA,eAAe,EAAE,WAAW,kBAAkB;AAAA,IAChD,EAAEC,YAAAA,gBAAgB,EAAE,WAAW,mBAAmB;AAAA,IAClD,EAAEC,YAAAA,cAAc,EAAE,WAAW,iBAAiB;AAAA,IAC9C,EAAE,oBAAoB,EAAE,WAAW,uBAAuB;AAAA;AAAA,IAE1D,EAAEC,aAAAA,oBAAoB,EAAE,WAAW,eAAe;AAAA,IAClD;AAAA,EAAA,CACD;AACH;;"}