datastake-daf 0.6.419 → 0.6.420

package/dist/components/index.js

@@ -13276,7 +13276,6 @@ DAFFooter.propTypes = {
 };
 
 const PAGE_HEIGHT = 1587;
-// margin-top: 20, bottom: 20;
 const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
 const Row = _ref => {
@@ -13293,7 +13292,7 @@ const Row = _ref => {
         setHeight(entry.contentRect.height);
       }
     });
-    observer.observe(ref.current);
+    if (ref.current) observer.observe(ref.current);
     return () => observer.disconnect();
   }, []);
   React.useEffect(() => {
@@ -13303,23 +13302,23 @@ const Row = _ref => {
         ref
       });
     }
-  }, [height]);
+  }, [height, i, onChangeHeight]);
   return /*#__PURE__*/jsxRuntime.jsx("section", {
     ref: ref,
     style: widgets.style,
-    children: typeof widgets.render === 'function' ? widgets.render() : null
+    children: typeof widgets.render === "function" ? widgets.render() : null
   });
 };
 function PdfView(_ref2) {
   let {
     config = [],
     customClassName,
-    title = 'Title',
-    imgSrc = '',
-    userId = 'IDD-0000000',
-    accountId = 'IDD-0000000',
-    documentId = 'IDD-0000000',
-    downloadId = 'DWL-00000123'
+    title = "Title",
+    imgSrc = "",
+    userId = "IDD-0000000",
+    accountId = "IDD-0000000",
+    documentId = "IDD-0000000",
+    downloadId = "DWL-00000123"
   } = _ref2;
   const [sectionsConfig, setSectionsConfig] = React.useState({});
   const [pages, setPages] = React.useState([1]);
@@ -13333,8 +13332,7 @@ function PdfView(_ref2) {
         const {
           ref
         } = sectionsConfig[k];
-        ref.current.style.marginBottom = '0px';
-        // ref.current.style.marginTop = '15px';
+        ref.current.style.marginBottom = "0px";
       });
       keys.forEach((k, i) => {
         const {
@@ -13347,11 +13345,11 @@ function PdfView(_ref2) {
         }
         const newHeight = incrHeight + height;
         if (i === keys.length - 1) {
-          ref.current.style.paddingBottom = '30px';
+          ref.current.style.paddingBottom = "30px";
         }
         if (newHeight > PAGE_HEIGHT - 30 - FOOTER_HEIGHT - HEADER_HEIGHT) {
           const dif = Math.abs(PAGE_HEIGHT - incrHeight);
-          ref.current.style.marginTop = '30px';
+          ref.current.style.marginTop = "30px";
           _page += 1;
           _pages.push(_page);
           if (sectionsConfig[keys[i - 1]]) {
@@ -13360,16 +13358,14 @@ function PdfView(_ref2) {
             } = sectionsConfig[keys[i - 1]];
             topRef.current.style.marginBottom = "".concat(dif + HEADER_HEIGHT - 24, "px");
             incrHeight = height + 24 + HEADER_HEIGHT;
-            // console.log('margin', dif);
           }
         } else {
           incrHeight = newHeight + 24;
         }
-        // console.groupEnd();
       });
       setPages(_pages);
     }
-  }, [sectionsConfig]);
+  }, [sectionsConfig, config.length]);
   React.useEffect(() => {
     doSizing();
   }, [doSizing]);
@@ -13378,7 +13374,7 @@ function PdfView(_ref2) {
       [index]: conf
     }));
   }, []);
-  const contClassName = formatClassname(['daf-analysis daf-pdf-view', customClassName]);
+  const contClassName = formatClassname(["daf-analysis daf-pdf-view", customClassName]);
   const renderDashboard = React.useCallback(() => {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "view-content",
@@ -13395,22 +13391,12 @@ function PdfView(_ref2) {
       })
     });
   }, [config, onChangeHeight]);
-
-  // <div className="daf-analysis">
-  // <Header title={t('Dashboard Title')} />
-
-  // <div className="content">
-  //   <div className="view-content">
-  //     <div className="daf-analysis-layout">
-  //       <div className='sections-cont w-pt'>
-  //         <section>
-
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: contClassName,
     style: {
-      position: 'relative'
+      position: "relative"
     },
-    children: [renderDashboard(), pages.map(page => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [renderDashboard(), pages.map(page => /*#__PURE__*/jsxRuntime.jsxs("div", {
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
           top: (page - 1) * PAGE_HEIGHT,
@@ -13446,26 +13432,26 @@ function PdfView(_ref2) {
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex flex-column justify-center",
           children: /*#__PURE__*/jsxRuntime.jsx("h5", {
-            children: moment__default["default"]().format('DD MMM YYYY')
+            children: moment__default["default"]().format("DD MMM YYYY")
           })
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex flex-column justify-center",
           children: /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "flex gap-2",
             children: [/*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["User ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
+              children: ["User ID: ", /*#__PURE__*/jsxRuntime.jsx("strong", {
                 children: userId
               })]
             }), /*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["Account ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
+              children: ["Account ID: ", /*#__PURE__*/jsxRuntime.jsx("strong", {
                 children: accountId
               })]
             }), /*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["Document ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
+              children: ["Document ID: ", /*#__PURE__*/jsxRuntime.jsx("strong", {
                 children: documentId
               })]
             }), /*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["Download ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
+              children: ["Download ID: ", /*#__PURE__*/jsxRuntime.jsx("strong", {
                 children: downloadId
               })]
             })]
@@ -13477,7 +13463,7 @@ function PdfView(_ref2) {
           })
         })]
       }, "footers-".concat(page))]
-    }))]
+    }, page))]
   });
 }
 PdfView.propTypes = {
@@ -13487,7 +13473,8 @@ PdfView.propTypes = {
   imgSrc: PropTypes__default["default"].string,
   userId: PropTypes__default["default"].string,
   accountId: PropTypes__default["default"].string,
-  documentId: PropTypes__default["default"].string
+  documentId: PropTypes__default["default"].string,
+  downloadId: PropTypes__default["default"].string
 };
 
 const ajaxSelectFieldData = async (value, config, getApiBaseUrl = () => {}, getAppHeader = () => {}, app, formValues = {}) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.419",
+	"version": "0.6.420",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Dashboard/PdfView/PdfView.stories.js

@@ -189,5 +189,15 @@ export const Primary = {
       },
     ],
   },
-}
-
+  render: (args) => (
+    <div style={{
+      height: '100vh',
+      overflowY: 'auto',
+        background: "#f8f8f8",
+        padding: "20px",
+      }}
+    >
+      <PdfView {...args} />
+    </div>
+  ),
+};

package/src/@daf/core/components/Dashboard/PdfView/index.jsx

@@ -1,14 +1,13 @@
 import moment from "moment";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { formatClassname } from "../../../../../helpers/ClassesHelper";
 
 const PAGE_HEIGHT = 1587;
-// margin-top: 20, bottom: 20;
 const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
 
-const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
+const Row = ({ widgets, i, onChangeHeight = () => {} }) => {
   const ref = useRef();
   const [height, setHeight] = useState(0);
 
@@ -19,8 +18,7 @@ const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
       }
     });
 
-    observer.observe(ref.current);
-
+    if (ref.current) observer.observe(ref.current);
     return () => observer.disconnect();
   }, []);
 
@@ -28,24 +26,24 @@ const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
     if (height) {
       onChangeHeight(i, { height, ref });
     }
-  }, [height])
+  }, [height, i, onChangeHeight]);
 
   return (
     <section ref={ref} style={widgets.style}>
-      {typeof widgets.render === 'function' ? widgets.render() : null}
+      {typeof widgets.render === "function" ? widgets.render() : null}
     </section>
-  )
+  );
 };
 
 export default function PdfView({
   config = [],
   customClassName,
-  title = 'Title',
-  imgSrc = '',
-  userId = 'IDD-0000000',
-  accountId = 'IDD-0000000',
-  documentId = 'IDD-0000000',
-  downloadId = 'DWL-00000123',
+  title = "Title",
+  imgSrc = "",
+  userId = "IDD-0000000",
+  accountId = "IDD-0000000",
+  documentId = "IDD-0000000",
+  downloadId = "DWL-00000123",
 }) {
   const [sectionsConfig, setSectionsConfig] = useState({});
   const [pages, setPages] = useState([1]);
@@ -58,11 +56,10 @@ export default function PdfView({
     if (keys.length === config.length) {
       let incrHeight = 0;
 
-      keys.forEach(k => {
+      keys.forEach((k) => {
         const { ref } = sectionsConfig[k];
-        ref.current.style.marginBottom = '0px';
-        // ref.current.style.marginTop = '15px';
-      })
+        ref.current.style.marginBottom = "0px";
+      });
 
       keys.forEach((k, i) => {
         const { height, ref } = sectionsConfig[k];
@@ -75,45 +72,48 @@ export default function PdfView({
         const newHeight = incrHeight + height;
 
         if (i === keys.length - 1) {
-          ref.current.style.paddingBottom = '30px';
+          ref.current.style.paddingBottom = "30px";
         }
 
         if (newHeight > PAGE_HEIGHT - 30 - FOOTER_HEIGHT - HEADER_HEIGHT) {
           const dif = Math.abs(PAGE_HEIGHT - incrHeight);
-          ref.current.style.marginTop = '30px';
+          ref.current.style.marginTop = "30px";
           _page += 1;
           _pages.push(_page);
 
           if (sectionsConfig[keys[i - 1]]) {
             const { ref: topRef } = sectionsConfig[keys[i - 1]];
-            topRef.current.style.marginBottom = `${dif + HEADER_HEIGHT - 24}px`;
+            topRef.current.style.marginBottom = `${
+              dif + HEADER_HEIGHT - 24
+            }px`;
             incrHeight = height + 24 + HEADER_HEIGHT;
-            // console.log('margin', dif);
           }
         } else {
           incrHeight = newHeight + 24;
         }
-        // console.groupEnd();
-      })
+      });
       setPages(_pages);
     }
-  }, [sectionsConfig]);
+  }, [sectionsConfig, config.length]);
 
   useEffect(() => {
     doSizing();
   }, [doSizing]);
 
   const onChangeHeight = useCallback((index, conf) => {
-    setSectionsConfig((prev) => ({ ...prev, [index]: conf }))
+    setSectionsConfig((prev) => ({ ...prev, [index]: conf }));
   }, []);
 
-  const contClassName = formatClassname(['daf-analysis daf-pdf-view', customClassName]);
+  const contClassName = formatClassname([
+    "daf-analysis daf-pdf-view",
+    customClassName,
+  ]);
 
   const renderDashboard = useCallback(() => {
     return (
       <div className="view-content">
         <div className="daf-analysis-layout">
-          <div className='sections-cont'>
+          <div className="sections-cont">
             {config.map((widgets, i) => (
               <Row
                 widgets={widgets}
@@ -128,20 +128,19 @@ export default function PdfView({
     );
   }, [config, onChangeHeight]);
 
-  // <div className="daf-analysis">
-  // <Header title={t('Dashboard Title')} />
-
-  // <div className="content">
-  //   <div className="view-content">
-  //     <div className="daf-analysis-layout">
-  //       <div className='sections-cont w-pt'>
-  //         <section>
 
   return (
-    <div className={contClassName} style={{ position: 'relative' }}>
+    <div
+      className={contClassName}
+      style={{
+        position: "relative",
+      }}
+    >
       {renderDashboard()}
+
       {pages.map((page) => (
-        <>
+        <div key={page}>
+          {/* Header */}
           <div
             style={{ top: ((page - 1) * PAGE_HEIGHT), width: '100%', height: HEADER_HEIGHT - 24, position: 'absolute', left: 0, zIndex: 1000000 }}
             key={`headers-${page}`}
@@ -154,35 +153,29 @@ export default function PdfView({
               <img src={imgSrc} alt="logo" />
             </div>
           </div>
+
+          {/* Footer */}
           <div
             style={{ top: (page * PAGE_HEIGHT) - FOOTER_HEIGHT, width: '100%', height: FOOTER_HEIGHT, position: 'absolute', left: 0, zIndex: 1000000 }}
             key={`footers-${page}`}
             className="dashboard-footer flex-row"
           >
             <div className="flex flex-column justify-center">
-              <h5>{moment().format('DD MMM YYYY')}</h5>
+              <h5>{moment().format("DD MMM YYYY")}</h5>
             </div>
             <div className="flex flex-column justify-center">
               <div className="flex gap-2">
                 <h5>
-                  User ID:
-                  {' '}
-                  <strong>{userId}</strong>
+                  User ID: <strong>{userId}</strong>
                 </h5>
                 <h5>
-                  Account ID:
-                  {' '}
-                  <strong>{accountId}</strong>
+                  Account ID: <strong>{accountId}</strong>
                 </h5>
                 <h5>
-                  Document ID:
-                  {' '}
-                  <strong>{documentId}</strong>
+                  Document ID: <strong>{documentId}</strong>
                 </h5>
                 <h5>
-                  Download ID:
-                  {' '}
-                  <strong>{downloadId}</strong>
+                  Download ID: <strong>{downloadId}</strong>
                 </h5>
               </div>
             </div>
@@ -190,7 +183,7 @@ export default function PdfView({
               <h5>{page}</h5>
             </div>
           </div>
-        </>
+        </div>
       ))}
     </div>
   );
@@ -204,4 +197,5 @@ PdfView.propTypes = {
   userId: PropTypes.string,
   accountId: PropTypes.string,
   documentId: PropTypes.string,
-}
+  downloadId: PropTypes.string,
+};

package/dist/style/datastake/mapbox-gl.css

@@ -1,330 +0,0 @@
-/* Isolated Mapbox GL CSS - Scoped to prevent Leaflet conflicts */
-
-/* Mapbox GL Core Styles - Scoped with .mapbox-gl-scope */
-.mapbox-gl-scope .mapboxgl-map {
-  font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif;
-  overflow: hidden;
-  position: relative;
-  -webkit-tap-highlight-color: rgb(0 0 0/0);
-}
-
-.mapbox-gl-scope .mapboxgl-canvas {
-  left: 0;
-  position: absolute;
-  top: 0;
-}
-
-.mapbox-gl-scope .mapboxgl-map:-webkit-full-screen {
-  height: 100%;
-  width: 100%;
-}
-
-.mapbox-gl-scope .mapboxgl-canary {
-  background-color: salmon;
-}
-
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive,
-.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
-  cursor: grab;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer {
-  cursor: pointer;
-}
-
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive:active,
-.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active {
-  cursor: grabbing;
-}
-
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas {
-  touch-action: pan-x pan-y;
-}
-
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan,
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas {
-  touch-action: pinch-zoom;
-}
-
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
-  touch-action: none;
-}
-
-/* Control positioning */
-.mapbox-gl-scope .mapboxgl-ctrl-bottom,
-.mapbox-gl-scope .mapboxgl-ctrl-bottom-left,
-.mapbox-gl-scope .mapboxgl-ctrl-bottom-right,
-.mapbox-gl-scope .mapboxgl-ctrl-left,
-.mapbox-gl-scope .mapboxgl-ctrl-right,
-.mapbox-gl-scope .mapboxgl-ctrl-top,
-.mapbox-gl-scope .mapboxgl-ctrl-top-left,
-.mapbox-gl-scope .mapboxgl-ctrl-top-right {
-  pointer-events: none;
-  position: absolute;
-  z-index: 2;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-top-left {
-  left: 0;
-  top: 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-top {
-  left: 50%;
-  top: 0;
-  transform: translateX(-50%);
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-top-right {
-  right: 0;
-  top: 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-right {
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-bottom-right {
-  bottom: 0;
-  right: 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-bottom {
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-bottom-left {
-  bottom: 0;
-  left: 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-left {
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl {
-  clear: both;
-  pointer-events: auto;
-  transform: translate(0);
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
-  float: left;
-  margin: 10px 0 0 10px;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-top .mapboxgl-ctrl {
-  float: left;
-  margin: 10px 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
-  float: right;
-  margin: 10px 10px 0 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,
-.mapbox-gl-scope .mapboxgl-ctrl-right .mapboxgl-ctrl {
-  float: right;
-  margin: 0 10px 10px 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-bottom .mapboxgl-ctrl {
-  float: left;
-  margin: 10px 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,
-.mapbox-gl-scope .mapboxgl-ctrl-left .mapboxgl-ctrl {
-  float: left;
-  margin: 0 0 10px 10px;
-}
-
-/* Control group styling */
-.mapbox-gl-scope .mapboxgl-ctrl-group {
-  background: #fff;
-  border-radius: 4px;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-group:not(:empty) {
-  box-shadow: 0 0 0 2px #0000001a;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-group button {
-  background-color: initial;
-  border: 0;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: block;
-  height: 29px;
-  outline: none;
-  overflow: hidden;
-  padding: 0;
-  width: 29px;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-group button+button {
-  border-top: 1px solid #ddd;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl button .mapboxgl-ctrl-icon {
-  background-position: 50%;
-  background-repeat: no-repeat;
-  display: block;
-  height: 100%;
-  width: 100%;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-attrib-button:focus,
-.mapbox-gl-scope .mapboxgl-ctrl-group button:focus {
-  box-shadow: 0 0 2px 2px #0096ff;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl button:disabled {
-  cursor: not-allowed;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon {
-  opacity: .25;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-group button:first-child {
-  border-radius: 4px 4px 0 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-group button:last-child {
-  border-radius: 0 0 4px 4px;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-group button:only-child {
-  border-radius: inherit;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl button:not(:disabled):hover {
-  background-color: #0000000d;
-}
-
-/* Marker styles */
-.mapbox-gl-scope .mapboxgl-marker {
-  position: absolute;
-  z-index: 1;
-}
-
-.mapbox-gl-scope .mapboxgl-marker svg {
-  display: block;
-}
-
-/* Popup styles */
-.mapbox-gl-scope .mapboxgl-popup {
-  position: absolute;
-  text-align: center;
-  margin-bottom: 20px;
-}
-
-.mapbox-gl-scope .mapboxgl-popup-content-wrapper {
-  padding: 1px;
-  text-align: left;
-  border-radius: 12px;
-}
-
-.mapbox-gl-scope .mapboxgl-popup-content {
-  margin: 13px 24px 13px 20px;
-  line-height: 1.3;
-  font-size: 13px;
-  min-height: 1px;
-}
-
-.mapbox-gl-scope .mapboxgl-popup-content p {
-  margin: 17px 0;
-}
-
-.mapbox-gl-scope .mapboxgl-popup-tip-container {
-  width: 40px;
-  height: 20px;
-  position: absolute;
-  left: 50%;
-  margin-top: -1px;
-  margin-left: -20px;
-  overflow: hidden;
-  pointer-events: none;
-}
-
-.mapbox-gl-scope .mapboxgl-popup-tip {
-  width: 17px;
-  height: 17px;
-  padding: 1px;
-  margin: -10px auto 0;
-  pointer-events: auto;
-  -webkit-transform: rotate(45deg);
-  -moz-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-
-.mapbox-gl-scope .mapboxgl-popup-content-wrapper,
-.mapbox-gl-scope .mapboxgl-popup-tip {
-  background: white;
-  color: #333;
-  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
-}
-
-.mapbox-gl-scope .mapboxgl-popup-close-button {
-  position: absolute;
-  top: 0;
-  right: 0;
-  border: none;
-  text-align: center;
-  width: 24px;
-  height: 24px;
-  font: 16px/24px Tahoma, Verdana, sans-serif;
-  color: #757575;
-  text-decoration: none;
-  background: transparent;
-}
-
-.mapbox-gl-scope .mapboxgl-popup-close-button:hover,
-.mapbox-gl-scope .mapboxgl-popup-close-button:focus {
-  color: #585858;
-}
-
-/* Attribution */
-.mapbox-gl-scope .mapboxgl-ctrl-attribution {
-  background: #fff;
-  background: rgba(255, 255, 255, 0.8);
-  margin: 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-attribution,
-.mapbox-gl-scope .mapboxgl-ctrl-scale-line {
-  padding: 0 5px;
-  color: #333;
-  line-height: 1.4;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-attribution a {
-  text-decoration: none;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-attribution a:hover,
-.mapbox-gl-scope .mapboxgl-ctrl-attribution a:focus {
-  text-decoration: underline;
-}
-
-/* Hide attribution by default */
-.mapbox-gl-scope .mapboxgl-ctrl-attribution {
-  display: none !important;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-logo {
-  display: none !important;
-}