datastake-daf 0.6.825 → 0.6.827

package/dist/pages/index.js

@@ -42258,7 +42258,7 @@ const getFilterOptions$a = (options, t) => {
 const formConfig$8 = {
   namespace: 'armed-groups',
   view: ['scoping', 'new'],
-  scope: 'global',
+  scope: 'createArmedGroup',
   formType: 'armed-group'
 };
 const viewConfig$8 = {
@@ -44012,7 +44012,7 @@ const getFilterOptions$6 = (options, t) => {
 const formConfig$4 = {
   namespace: 'testimonials',
   view: 'testimonials',
-  scope: 'create',
+  scope: 'createTestimonial',
   formType: 'testimonial'
 };
 const viewConfig$4 = {
@@ -44979,7 +44979,7 @@ const getFilterOptions$3 = (options, t) => {
 const formConfig$1 = {
   namespace: 'conflict-areas',
   view: ['scoping', 'new'],
-  scope: 'conflictAreaCreate',
+  scope: 'createConflictArea',
   formType: 'conflict-area'
 };
 const viewConfig$1 = {
@@ -52898,9 +52898,8 @@ class AdminService extends BaseService {
     subject,
     id
   }) {
-    const type = subject === 'location' ? 'location' : 'stakeholder';
     return this.apiDelete({
-      url: `/management/subject/${type}/${id}`
+      url: `/management/subject/${subject}/${id}`
     });
   }
   async getUserGrowth(activeFilter) {
@@ -55414,14 +55413,19 @@ const PlantingActivitiesTimeline = ({
     const dataToProcess = !activitiesTimelineChart || !Array.isArray(activitiesTimelineChart) || activitiesTimelineChart.length === 0 ? [] : activitiesTimelineChart;
 
     // Process data without cumulative calculation (for activities timeline)
-    return processChartDateData({
+    const processedData = processChartDateData({
       mainData: dataToProcess,
       isCumulative: false,
       valueField: 'count'
     });
-  }, [activitiesTimelineChart, processChartDateData]);
 
-  // Calculate max value for Y-axis (default to 100 if all values are 0 or very small)
+    // Remove trailing periods with 0 jobs (optional: remove all zero if you prefer)
+    let lastNonZeroIndex = processedData.length - 1;
+    while (lastNonZeroIndex >= 0 && (processedData[lastNonZeroIndex].jobs || 0) === 0) {
+      lastNonZeroIndex--;
+    }
+    return processedData.slice(0, lastNonZeroIndex + 1);
+  }, [activitiesTimelineChart, processChartDateData]);
   const maxActivitiesYValue = React.useMemo(() => {
     if (!activitiesTimelineData || activitiesTimelineData.length === 0) {
       return 100;
@@ -55766,6 +55770,29 @@ const CyclePartners = ({
   });
 };
 
+// Custom tooltip labels per field/value
+const FIELD_TOOLTIP_LABELS = {
+  aidKitAccessible: {
+    compliant: "Available",
+    notCompliant: "Not available",
+    empty: "No data"
+  },
+  hsTrainingConfirmation: {
+    compliant: "Training delivered",
+    notCompliant: "No training",
+    empty: "No data"
+  },
+  duosFormed: {
+    compliant: "Duos formed",
+    notCompliant: "Not implemented",
+    empty: "No data"
+  },
+  presenceOfChildren: {
+    compliant: "None reported",
+    notCompliant: "Children present",
+    empty: "No data"
+  }
+};
 const HEALTH_SAFETY_COLORS = {
   compliant: '#016C6E',
   notCompliant: '#F97066',
@@ -55777,12 +55804,6 @@ const getIndicatorType$1 = value => {
   if (value === null || value === undefined) return "empty";
   return "empty";
 };
-
-/**
- * Gets health and safety distribution data from activity data
- * @param {Object} activityData - Activity data object
- * @returns {Object} Distribution object with compliant, notCompliant, and empty counts
- */
 const getHealthAndSafetyDistributionData = activityData => {
   // Define health and safety indicator fields
   const indicators = [{
@@ -55818,53 +55839,26 @@ const getHealthAndSafetyDistributionData = activityData => {
   });
   return distribution;
 };
-
-/**
- * Checks if the health and safety distribution data is empty
- * @param {Object} healthAndSafetyDistributionData - Distribution object
- * @returns {boolean} True if all values are 0 or empty
- */
 const isHealthAndSafetyDistributionEmpty = healthAndSafetyDistributionData => {
   return Object.values(healthAndSafetyDistributionData).every(val => !val || val === 0);
 };
-
-/**
- * Calculates pie chart data from health and safety distribution
- * @param {Object} healthAndSafetyDistributionData - Distribution object
- * @param {Function} t - Translation function
- * @returns {Array} Array of pie chart data points with value, percent, color, label, and key
- */
-const calculateHealthAndSafetyPieData = (healthAndSafetyDistributionData, t) => {
-  const total = Object.values(healthAndSafetyDistributionData).reduce((all, val) => all + (val || 0), 0);
+const calculateHealthAndSafetyPieData = (data, t, selectedField) => {
+  const total = Object.values(data).reduce((a, v) => a + (v || 0), 0);
   const labels = {
     compliant: t("Available"),
     notCompliant: t("Not available"),
     empty: t("Not answered")
   };
-  return Object.keys(healthAndSafetyDistributionData).map(key => {
-    const color = HEALTH_SAFETY_COLORS[key] || '#D9D9D9';
-    return {
-      value: healthAndSafetyDistributionData[key] || 0,
-      percent: total > 0 ? (healthAndSafetyDistributionData[key] || 0) / total : 0,
-      color: color,
-      label: labels[key] || key,
-      key: key
-    };
-  });
+  return Object.keys(data).map(key => ({
+    value: data[key] || 0,
+    percent: total > 0 ? (data[key] || 0) / total : 0,
+    color: HEALTH_SAFETY_COLORS[key] || '#D9D9D9',
+    label: labels[key] || key,
+    key,
+    keyOfField: selectedField //  <-- ADD THIS
+  }));
 };
-
-/**
- * Generates tooltip content for health and safety pie chart
- * Shows all statuses with their percentages
- * @param {Object} item - The pie chart item being hovered (not used, but kept for compatibility)
- * @param {boolean} isEmpty - Whether the distribution is empty
- * @param {Object} healthAndSafetyDistributionData - Distribution object
- * @param {Function} t - Translation function
- * @param {Function} renderTooltipJsx - Function to render tooltip JSX
- * @param {string} tooltipTitle - Title to display in the tooltip (defaults to "Health and Safety")
- * @returns {JSX.Element|null} Tooltip content or null
- */
-const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafetyDistributionData, t, renderTooltipJsx, tooltipTitle = "Health and Safety") => {
+const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafetyDistributionData, t, renderTooltipJsx, tooltipTitle = "Health and Safety", selectedField) => {
   // If empty or no data, return null to display nothing
   if (isEmpty || !Object.keys(healthAndSafetyDistributionData).length) {
     return null;
@@ -55877,10 +55871,10 @@ const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafetyDistrib
   if (total === 0) {
     return null;
   }
-  const labels = {
+  const labels = FIELD_TOOLTIP_LABELS[item?.keyOfField] || {
     compliant: t("Available"),
     notCompliant: t("Not available"),
-    empty: t("Not answered")
+    empty: t("No data")
   };
 
   // Filter items with values > 0
@@ -55963,7 +55957,6 @@ const HealthAndSafety = ({
     getData: customGetData
   });
 
-  // Process the fetched pie chart data
   // The API returns data in format: [{count: 1, [field]: "null"}, {count: 1, [field]: "no"}, {count: 1, [field]: "yes"}]
   const healthAndSafetyDistributionData = React.useMemo(() => {
     if (!pieChartData) return {
@@ -56004,7 +55997,7 @@ const HealthAndSafety = ({
     return getHealthAndSafetyDistributionData(pieChartData);
   }, [pieChartData, selectedField]);
   const isEmpty = React.useMemo(() => isHealthAndSafetyDistributionEmpty(healthAndSafetyDistributionData), [healthAndSafetyDistributionData]);
-  const pieData = React.useMemo(() => calculateHealthAndSafetyPieData(healthAndSafetyDistributionData, t), [healthAndSafetyDistributionData, t]);
+  const pieData = React.useMemo(() => calculateHealthAndSafetyPieData(healthAndSafetyDistributionData, t, selectedField), [healthAndSafetyDistributionData, t, selectedField]);
 
   // Get the label for the selected field to use as tooltip title
   const selectedFieldLabel = React.useMemo(() => {
@@ -56018,9 +56011,10 @@ const HealthAndSafety = ({
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     loading: loading || pieChartLoading,
     title: /*#__PURE__*/jsxRuntime.jsx("div", {
-      children: t("Health and Safety")
+      children: t("Operational Health & Safety")
     }),
-    className: "with-border-header h-w-btn-header ",
+    className: "with-border-header h-w-btn-header",
+    description: t("Across all activities in this cycle."),
     addedHeader: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
         className: "flex-1"
@@ -56339,17 +56333,41 @@ const JobsTimeline = ({
     defaultFilter: 'monthly'
   });
   const jobsData = Array.isArray(dayJobsTimeline) ? dayJobsTimeline : dayJobsTimeline?.jobsTimeline || dayJobsTimeline?.jobs || dayJobsTimeline?.timeline || [];
+
+  // const jobsTimelineData = useMemo(() => {
+  //     // Always process data, even if empty, to generate default date range for x-axis
+  //     const dataToProcess = (!jobsData || !Array.isArray(jobsData) || jobsData.length === 0) 
+  //         ? [] 
+  //         : jobsData;
+
+  //     // Process data without cumulative calculation (for jobs timeline)
+  //     // Try to find value in total, count, jobs, or value fields
+  //     return processChartDateData({
+  //         mainData: dataToProcess,
+  //         isCumulative: false,
+  //         valueField: 'total', // Will fallback to count/jobs/value if total doesn't exist
+  //     });
+  // }, [jobsData, processChartDateData]);
+
   const jobsTimelineData = React.useMemo(() => {
-    // Always process data, even if empty, to generate default date range for x-axis
+    // Prepare data first
     const dataToProcess = !jobsData || !Array.isArray(jobsData) || jobsData.length === 0 ? [] : jobsData;
 
-    // Process data without cumulative calculation (for jobs timeline)
-    // Try to find value in total, count, jobs, or value fields
-    return processChartDateData({
+    // Process data without cumulative calculation
+    const processedData = processChartDateData({
       mainData: dataToProcess,
       isCumulative: false,
-      valueField: 'total' // Will fallback to count/jobs/value if total doesn't exist
+      valueField: 'total' // fallback handled inside processChartDateData
     });
+
+    // Find last index with jobs > 0
+    let lastNonZeroIndex = processedData.length - 1;
+    while (lastNonZeroIndex >= 0 && (processedData[lastNonZeroIndex].jobs || 0) === 0) {
+      lastNonZeroIndex--;
+    }
+
+    // Slice up to last period with data
+    return processedData.slice(0, lastNonZeroIndex + 1);
   }, [jobsData, processChartDateData]);
   const maxYValue = React.useMemo(() => {
     if (!jobsTimelineData || jobsTimelineData.length === 0) {
@@ -61316,6 +61334,22 @@ const usePrepareForm$1 = ({
   };
 };
 
+const evaluateRule = (rule, data) => {
+  if (typeof rule === "boolean") return rule;
+  if (typeof rule === "function") return rule();
+  if (typeof rule === "string") {
+    const parts = rule.split(" ");
+
+    // Expecting: "<field> <is|not> <value>"
+    if (parts.length === 3) {
+      const [field, condition, value] = parts;
+      if (condition === "is") return data?.[field] === value;
+      if (condition === "not") return data?.[field] !== value;
+    }
+  }
+  console.warn("Invalid rule:", rule);
+  return false;
+};
 const useViewPermissions = ({
   data,
   id,
@@ -61333,9 +61367,6 @@ const useViewPermissions = ({
   viewConfig
 }) => {
   const baseNamespaceKeys = Object.keys(namespaceConfig || {});
-  console.log({
-    namespaceConfig
-  });
   const baseSupportedNamespaces = baseNamespaceKeys?.reduce((acc, key) => {
     acc[key] = () => true;
     return acc;
@@ -61357,7 +61388,8 @@ const useViewPermissions = ({
       ...baseCanEditAction,
       ...namespaceOverrides.canEdit
     };
-    return canEditAction[namespace] ? canEditAction[namespace]() : false;
+    const rule = canEditAction[namespace] ? canEditAction[namespace]() : false;
+    return evaluateRule(rule, data);
   }, [namespace, data, user]);
   const canDelete = React.useMemo(() => {
     baseNamespaceKeys.reduce((acc, key) => {
@@ -61367,7 +61399,8 @@ const useViewPermissions = ({
     const canDeleteAction = {
       ...namespaceOverrides.canDelete
     };
-    return canDeleteAction[namespace] ? canDeleteAction[namespace]() : false;
+    const rule = canDeleteAction[namespace] ? canDeleteAction[namespace]() : false;
+    return evaluateRule(rule, data);
   }, [namespace, data, user, namespaceOverrides]);
   React.useEffect(() => {
     if (data) {
@@ -61621,7 +61654,12 @@ const namespaceMap = {
   "production-sites": "location",
   operators: "stakeholder",
   workers: "stakeholder",
-  activities: "event"
+  activities: "event",
+  "conflict-areas": "location",
+  "armed-groups": "stakeholder",
+  scl: "location",
+  testimonials: 'event',
+  'corrective-actions': 'event'
 };
 
 const getColumns = ({
@@ -62008,15 +62046,9 @@ const View = ({
   options,
   getSubjectsDetails,
   namespaceOverrides
-  // ADD CALLBACK TO GET THE CURRENT NAMESPACE CONFIG
 }) => {
   const getNamespaceConfig = namespace => namespaceConfiguration?.[namespace] || {};
   const [openRecordsModal, setOpenRecordsModal] = React.useState(false);
-  console.log({
-    partners
-  });
-
-  // HANDLES THE URL PARAMS FOR THE VIEW PAGE
   const {
     namespace,
     id,
@@ -62041,8 +62073,6 @@ const View = ({
     getRedirectLink
   });
   const namespaceConfig = React.useMemo(() => getNamespaceConfig(namespace), [namespace]);
-
-  // PREPARES THE FORM FOR THE VIEW PAGE
   const {
     form,
     data,
@@ -62099,7 +62129,9 @@ const View = ({
   });
   const subjects = {
     "management-location": "location",
-    "management-stakeholder": "stakeholder"
+    "management-stakeholder": "stakeholder",
+    "management-event": "event",
+    "management-incident": "incident"
   };
   const handleDeleteSubject = React.useCallback(async () => {
     try {
@@ -62108,7 +62140,7 @@ const View = ({
         id: id
       });
       antd.message.success(t("Subject deleted successfully"));
-      push(getRedirectLink(`/app/management/subject/${subjects[namespace]}`));
+      //   push(getRedirectLink(`/app/management/subject/${subjects[namespace]}`));
     } catch (error) {
       handleError(error);
       antd.message.error(t("Failed to delete subject"));

package/dist/services/index.js

@@ -1016,9 +1016,8 @@ class AdminService extends BaseService {
     subject,
     id
   }) {
-    const type = subject === 'location' ? 'location' : 'stakeholder';
     return this.apiDelete({
-      url: `/management/subject/${type}/${id}`
+      url: `/management/subject/${subject}/${id}`
     });
   }
   async getUserGrowth(activeFilter) {

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

@@ -0,0 +1,330 @@
+/* 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;
+}