datastake-daf 0.6.362 → 0.6.364

package/dist/components/index.js

@@ -51378,6 +51378,7 @@ function NameNode({
     token
   } = useToken$7();
   const translateFN = typeof data?.t === "function" ? data.t : key => key;
+  const isPdf = data?.isPdf;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(react.Handle, {
       type: "source",
@@ -51396,6 +51397,7 @@ function NameNode({
         opacity: 0
       }
     }), /*#__PURE__*/jsxRuntime.jsxs(Style$d, {
+      $isPdf: isPdf,
       style: {
         opacity: data.isEmpty ? 0.5 : 1
       },
@@ -51446,7 +51448,7 @@ function NameNode({
               }
             })
           }) : null]
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        }), !isPdf && /*#__PURE__*/jsxRuntime.jsx("div", {
           style: {
             marginLeft: "auto"
           },
@@ -51483,27 +51485,32 @@ function NameNode({
   });
 }
 const Style$d = dt.div`
-	width: ${NAME_CARD_WIDTH}px;
-	display: flex;
-	background: white;
-	border-radius: 8px;
-	box-shadow: 0px 3.76px 10.03px 0px #00000014;
-	box-shadow: 0px 1.88px 3.76px -2.51px #0000001f;
-	overflow: hidden;
-	box-shadow: 0px 5.64px 17.56px 5.02px #0000000d;
+    width: ${NAME_CARD_WIDTH}px;
+    display: flex;
+    background: white;
+    border-radius: 8px;
+    /* Box-shadows for screen */
+    box-shadow: 0px 3.76px 10.03px 0px #00000014;
+    box-shadow: 0px 1.88px 3.76px -2.51px #0000001f;
+    overflow: hidden;
+    box-shadow: 0px 5.64px 17.56px 5.02px #0000000d;
+    /* Ensure borders/colors survive PDF rendering */
+    border: ${props => props.$isPdf ? '1px solid var(--base-gray-30)' : 'none'};
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
 
-	.left {
-		width: 32px;
-		background: red;
-		border-top-left-radius: 12px;
-		border-bottom-left-radius: 12px;
-	}
+    .left {
+        width: 32px;
+        background: red;
+        border-top-left-radius: 12px;
+        border-bottom-left-radius: 12px;
+    }
 
-	.right {
-		padding: 16px 12px;
-		width: 100%
-		border-bottom: 1px solid var(--base-gray-30);
-	}
+    .right {
+        padding: 16px 12px;
+        width: 100%;
+        border-bottom: 1px solid var(--base-gray-30);
+    }
 `;
 
 const Style$c = dt.div`
@@ -52078,6 +52085,7 @@ const BaseGraph = /*#__PURE__*/React.forwardRef(function BaseGraph({
   t,
   withDuration = true,
   onFilterChange,
+  isPdf,
   ...props
 }, ref) {
   const {
@@ -52134,7 +52142,7 @@ const BaseGraph = /*#__PURE__*/React.forwardRef(function BaseGraph({
           duration: withDuration ? 300 : undefined
         },
         ...props,
-        children: /*#__PURE__*/jsxRuntime.jsxs(react.Controls, {
+        children: !isPdf && /*#__PURE__*/jsxRuntime.jsxs(react.Controls, {
           position: "bottom-right",
           showFitView: false,
           showInteractive: false,
@@ -52651,7 +52659,8 @@ function positionDataNodes(_ref2) {
     total,
     mainNode,
     type,
-    hasContent
+    hasContent,
+    isPdf
   } = _ref2;
   const DATA_NODE_WIDTH = DATA_NODE_SIZE[type].width;
   const DATA_NODE_HEIGHT = DATA_NODE_SIZE[type].height;
@@ -52677,7 +52686,7 @@ function positionDataNodes(_ref2) {
   const startY = iconNodeCenterY - totalHeight / 2;
   const END_Y = startY + totalHeight;
   const yOffset = index * MIN_SPACE_REQUIRED;
-  let yPosition = startY + yOffset;
+  let yPosition = startY + yOffset + (isPdf ? 50 : 0);
   if (isAboveMainNode && END_Y >= mainNode.position.y + DATA_NODE_HEIGHT / 2) {
     yPosition = mainNode.position.y + DATA_NODE_HEIGHT / 2 - totalHeight + yOffset;
   } else if (!isAboveMainNode && startY < mainNode.position.y + DATA_NODE_HEIGHT / 2) {
@@ -52868,6 +52877,7 @@ function StakeholderMappings(_ref3) {
             isLeftSide: node.data.order % 2 !== 0,
             isAboveMainNode: node.data.order <= 2,
             iconNode: node,
+            isPdf: true,
             index: 0,
             total: 1,
             mainNode,
@@ -52966,7 +52976,8 @@ function StakeholderMappings(_ref3) {
         duration: 300
       });
     },
-    ref: reactFlowWrapper
+    ref: reactFlowWrapper,
+    isPdf: isPdf
   });
 }
 var index$1 = withProvider(StakeholderMappings);
@@ -54005,6 +54016,13 @@ function AddUserModal({
             }
           }
         })
+      }), accountUsed && /*#__PURE__*/jsxRuntime.jsx(antd.Alert, {
+        message: t("FB00001"),
+        type: "error",
+        className: "mb-2",
+        showIcon: true,
+        closable: true,
+        onClose: () => setAccountUsed(false)
       }), /*#__PURE__*/jsxRuntime.jsx(antd.Form.Item, {
         name: "role",
         label: t("Role"),
@@ -56876,6 +56894,13 @@ function NewUser({
             }
           }
         })
+      }), accountUsed && /*#__PURE__*/jsxRuntime.jsx(antd.Alert, {
+        message: t("FB00001"),
+        type: "error",
+        className: "mb-2",
+        showIcon: true,
+        closable: true,
+        onClose: () => setAccountUsed(false)
       }), /*#__PURE__*/jsxRuntime.jsx(antd.Form.Item, {
         name: "role",
         label: t("Role"),

package/package.json

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

package/src/@daf/core/components/Charts/ColumnChart/ColumnChart.stories.jsx

@@ -457,6 +457,34 @@ export const Pdf = {
 		showBackground: true,
 		isPercentage: true,
 		shouldSeperateLegendName: true,
+		formattedXAxis: (s) => {
+			if (!s) return "";
+		  
+			const limit = 20;
+			let result = "";
+			let line = "";
+		  
+			for (let word of s.split(" ")) {
+			  if ((line + word).length <= limit) {
+				line += (line ? " " : "") + word;
+			  } else if (word.length > limit) {
+				// break long word with hyphen
+				while (word.length > limit) {
+				  result += word.slice(0, limit - 1) + "-\n";
+				  word = word.slice(limit - 1);
+				}
+				line = word;
+			  } else {
+				// move current line into result
+				if (line) result += line + "\n";
+				line = word;
+			  }
+			}
+		  
+			if (line) result += line;
+		  
+			return result;
+		  },
 	},
 	render: (args) => {
 		return <Widget title="Pdf Column Chart" className={"with-border-header"}>

package/src/@daf/core/components/Graphs/StakeholderMappings/index.jsx

@@ -72,6 +72,7 @@ function positionDataNodes({
 	mainNode,
 	type,
 	hasContent,
+	isPdf,
 }) {
 	const DATA_NODE_WIDTH = DATA_NODE_SIZE[type].width;
 	const DATA_NODE_HEIGHT = DATA_NODE_SIZE[type].height;
@@ -104,7 +105,7 @@ function positionDataNodes({
 
 	const yOffset = index * MIN_SPACE_REQUIRED;
 
-	let yPosition = startY + yOffset;
+	let yPosition = startY + yOffset + (isPdf ? 50 : 0);
 
 	if (isAboveMainNode && END_Y >= mainNode.position.y + DATA_NODE_HEIGHT / 2) {
 		yPosition = mainNode.position.y + DATA_NODE_HEIGHT / 2 - totalHeight + yOffset;
@@ -325,6 +326,7 @@ function StakeholderMappings({
 							isLeftSide: node.data.order % 2 !== 0,
 							isAboveMainNode: node.data.order <= 2,
 							iconNode: node,
+							isPdf: true,
 							index: 0,
 							total: 1,
 							mainNode,
@@ -444,6 +446,7 @@ function StakeholderMappings({
 				});
 			}}
 			ref={reactFlowWrapper}
+			isPdf={isPdf}
 		/>
 	);
 }

package/src/@daf/core/components/Graphs/components/BaseGraph.jsx

@@ -32,6 +32,7 @@ const BaseGraph = forwardRef(function BaseGraph(
 		t,
 		withDuration = true,
 		onFilterChange,
+		isPdf,
 		...props
 	},
 	ref,
@@ -87,43 +88,45 @@ const BaseGraph = forwardRef(function BaseGraph(
 					}}
 					{...props}
 				>
-					<Controls position="bottom-right" showFitView={false} showInteractive={false}>
-						<ControlButton
-							onClick={() => {
-								fitView({
-									padding: 0.1,
-									nodes: [...nodesToFit],
-									duration: withDuration ? 300 : undefined,
-								});
-							}}
-						>
-							<AimOutlined height={20} width={20} />
-						</ControlButton>
-						<ControlButton
-							onClick={() => {
-								const viewport = getViewport();
-								setViewport({
-									x: viewport.x,
-									y: viewport.y + 20,
-									zoom: viewport.zoom,
-								});
-							}}
-						>
-							<UpOutlined height={20} width={20}></UpOutlined>
-						</ControlButton>
-						<ControlButton
-							onClick={() => {
-								const viewport = getViewport();
-								setViewport({
-									x: viewport.x,
-									y: viewport.y - 20,
-									zoom: viewport.zoom,
-								});
-							}}
-						>
-							<DownOutlined height={20} width={20}></DownOutlined>
-						</ControlButton>
-					</Controls>
+					{!isPdf && (
+						<Controls position="bottom-right" showFitView={false} showInteractive={false}>
+							<ControlButton
+								onClick={() => {
+									fitView({
+										padding: 0.1,
+										nodes: [...nodesToFit],
+										duration: withDuration ? 300 : undefined,
+									});
+								}}
+							>
+								<AimOutlined height={20} width={20} />
+							</ControlButton>
+							<ControlButton
+								onClick={() => {
+									const viewport = getViewport();
+									setViewport({
+										x: viewport.x,
+										y: viewport.y + 20,
+										zoom: viewport.zoom,
+									});
+								}}
+							>
+								<UpOutlined height={20} width={20}></UpOutlined>
+							</ControlButton>
+							<ControlButton
+								onClick={() => {
+									const viewport = getViewport();
+									setViewport({
+										x: viewport.x,
+										y: viewport.y - 20,
+										zoom: viewport.zoom,
+									});
+								}}
+							>
+								<DownOutlined height={20} width={20}></DownOutlined>
+							</ControlButton>
+						</Controls>	
+					)}
 				</ReactFlow>
 			</div>
 		</ComponentWithFocus>

package/src/@daf/core/components/Graphs/components/Nodes/NameNode.jsx

@@ -13,6 +13,8 @@ const { useToken } = theme;
 export default function NameNode({ data }) {
   const { token } = useToken();
   const translateFN = typeof data?.t === "function" ? data.t : (key) => key;
+  const isPdf = data?.isPdf;
+
   return (
     <>
       <Handle
@@ -34,6 +36,7 @@ export default function NameNode({ data }) {
         }}
       />
       <Style
+        $isPdf={isPdf}
         style={{
           opacity: data.isEmpty ? 0.5 : 1,
         }}
@@ -95,19 +98,21 @@ export default function NameNode({ data }) {
             ) : null}
           </div>
 
-          <div
-            style={{
-              marginLeft: "auto",
-            }}
-            className="go-to"
-            onClick={() => {
-              if (typeof data.onClick === "function") {
-                data.onClick();
-              }
-            }}
-          >
-            <CustomIcon height={14} width={14} name="LinkNewTab" />
-          </div>
+          {!isPdf && (
+            <div
+                style={{
+                  marginLeft: "auto",
+                }}
+                className="go-to"
+                onClick={() => {
+                  if (typeof data.onClick === "function") {
+                    data.onClick();
+                  }
+                }}
+              >
+                <CustomIcon height={14} width={14} name="LinkNewTab" />
+            </div> 
+          )}
         </div>
       </Style>
       <Handle
@@ -129,25 +134,30 @@ export default function NameNode({ data }) {
 }
 
 const Style = styled.div`
-	width: ${NAME_CARD_WIDTH}px;
-	display: flex;
-	background: white;
-	border-radius: 8px;
-	box-shadow: 0px 3.76px 10.03px 0px #00000014;
-	box-shadow: 0px 1.88px 3.76px -2.51px #0000001f;
-	overflow: hidden;
-	box-shadow: 0px 5.64px 17.56px 5.02px #0000000d;
+    width: ${NAME_CARD_WIDTH}px;
+    display: flex;
+    background: white;
+    border-radius: 8px;
+    /* Box-shadows for screen */
+    box-shadow: 0px 3.76px 10.03px 0px #00000014;
+    box-shadow: 0px 1.88px 3.76px -2.51px #0000001f;
+    overflow: hidden;
+    box-shadow: 0px 5.64px 17.56px 5.02px #0000000d;
+    /* Ensure borders/colors survive PDF rendering */
+    border: ${(props) => (props.$isPdf ? '1px solid var(--base-gray-30)' : 'none')};
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
 
-	.left {
-		width: 32px;
-		background: red;
-		border-top-left-radius: 12px;
-		border-bottom-left-radius: 12px;
-	}
+    .left {
+        width: 32px;
+        background: red;
+        border-top-left-radius: 12px;
+        border-bottom-left-radius: 12px;
+    }
 
-	.right {
-		padding: 16px 12px;
-		width: 100%
-		border-bottom: 1px solid var(--base-gray-30);
-	}
+    .right {
+        padding: 16px 12px;
+        width: 100%;
+        border-bottom: 1px solid var(--base-gray-30);
+    }
 `;

package/src/@daf/core/components/Screens/Admin/AdminModals/AddUser/index.jsx

@@ -55,7 +55,7 @@ export default function AddUserModal({ isOpen, defaultData = {}, userRoles = [],
 						}}
 					/>
 				</Form.Item>
-				{/* {accountUsed && (
+				{accountUsed && (
 					<Alert
 						message={t("FB00001")}
 						type="error"
@@ -64,7 +64,7 @@ export default function AddUserModal({ isOpen, defaultData = {}, userRoles = [],
 						closable
 						onClose={() => setAccountUsed(false)}
 					/>
-				)} */}
+				)}
 
 				<Form.Item name="role" label={t("Role")} rules={[{ required: true }]}>
 					<Select

package/src/@daf/core/components/Screens/Admin/AdminModals/NewUser/index.jsx

@@ -45,7 +45,7 @@ export default function NewUser({ t, isOpen, onClose, defaultData, userRoles = [
 						}}
 					/>
 				</Form.Item>
-				{/* {accountUsed && (
+				{accountUsed && (
 					<Alert
 						message={t("FB00001")}
 						type="error"
@@ -54,7 +54,7 @@ export default function NewUser({ t, isOpen, onClose, defaultData, userRoles = [
 						closable
 						onClose={() => setAccountUsed(false)}
 					/>
-				)} */}
+				)}
 
 				<Form.Item name="role" label={t("Role")} rules={[{ required: true }]}>
 					<Select

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;
-}