pcm-shared-components 0.0.55 → 0.0.56

package/dist/components/Buttons/CustomFab/index.js

@@ -6,7 +6,7 @@ import Tooltip from '@mui/material/Tooltip';
 import clsx from 'clsx';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { ThemeProvider } from '@mui/system';
-import { createTheme } from '@mui/material/styles';
+import { createTheme, useTheme } from '@mui/material/styles';
 const useStyles = makeStyles(() => ({
   rootFabElement: {
     margin: 2,
@@ -62,7 +62,8 @@ const CustomFab = props => {
     iconLocation,
     theme
   } = props;
-  const defaultTheme = createTheme(theme);
+  const compTheme = theme ? theme : useTheme();
+  const defaultTheme = createTheme(compTheme);
   const classes = useStyles(props);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: defaultTheme
@@ -158,6 +159,6 @@ CustomFab.propTypes = {
   /** Theme colors if not using backgroundColor ['primary','secondary'] */
   color: PropTypes.oneOf(['primary', 'secondary']),
 
-  /** Theme object to use on this component*/
+  /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
   theme: PropTypes.object
 };

package/dist/components/Buttons/HelpButton/index.js

@@ -4,7 +4,6 @@ import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import PropTypes from 'prop-types';
 import { ThemeProvider } from '@mui/system';
 import { createTheme, useTheme } from '@mui/material/styles';
-import { setStorage } from './service/local_storage';
 export const HelpButton = props => {
   const {
     onClickLink,
@@ -16,8 +15,6 @@ export const HelpButton = props => {
     theme
   } = props;
   const compTheme = theme ? theme : useTheme();
-  setStorage(compTheme);
-  console.log('debug theme,', compTheme);
   const defaultTheme = createTheme(compTheme);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: defaultTheme
@@ -64,6 +61,6 @@ HelpButton.propTypes = {
   /** The size of the button ['small','medium','large'] */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
 
-  /** Theme object to use on this component*/
+  /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
   theme: PropTypes.object
 };

package/dist/components/{Buttons → Dialogs}/GenericDialogWindow/components/InnerDialogComponent.js

@@ -1,6 +1,6 @@
 import React, { useState, forwardRef, useImperativeHandle } from 'react';
-import ImageCanvasDraw from '../../ImageCanvasDraw';
-import { cedarShade } from '../../ImageCanvasDraw/storybook/testMap.test'; //!forwardRef needed to allow the parent component to access the child functions
+import ImageCanvasDraw from '../../../Drawing/ImageCanvasDraw';
+import { cedarShade } from '../../../Drawing/ImageCanvasDraw/storybook/testMap.test'; //!forwardRef needed to allow the parent component to access the child functions
 
 const InnerDialogComponent = /*#__PURE__*/forwardRef((props, ref) => {
   // Filter out the parentProps object from the props,
@@ -26,7 +26,8 @@ const InnerDialogComponent = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 
   const childRefSave = () => {
-    setIsLoading(true); //Simulate a save
+    setIsLoading(true);
+    setCanSave(false); //Simulate a save
 
     setTimeout(() => {
       setIsLoading(false);
@@ -34,11 +35,15 @@ const InnerDialogComponent = /*#__PURE__*/forwardRef((props, ref) => {
     }, 2000);
   };
 
-  return /*#__PURE__*/React.createElement("div", null, "something here to show...", /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "m-12"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "mr-12"
+  }, "This is to simulate a ready to save state..."), /*#__PURE__*/React.createElement("button", {
     onClick: () => {
       setCanSave(true);
     }
-  }, "Click here to signal to the dialog that we are ready to save."), /*#__PURE__*/React.createElement(ImageCanvasDraw, {
+  }, "Click here to signal to the dialog that we are ready to save.")), /*#__PURE__*/React.createElement(ImageCanvasDraw, {
     outputFormat: 'blob',
     showDownloadButton: true,
     onSave: data => {

package/dist/components/{Buttons → Dialogs}/GenericDialogWindow/components/OpenDialog.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import CustomFab from '../../CustomFab';
+import CustomFab from '../../../Buttons/CustomFab';
 import InnerDialogComponent from './InnerDialogComponent';
 import GenericDialogWindow from '../index';
 export const OpenDialog = () => {

package/dist/components/{Buttons → Dialogs}/GenericDialogWindow/index.js

@@ -1,7 +1,11 @@
 import React, { useState, useRef } from 'react';
 import { Button, Dialog, DialogActions, DialogContent, IconButton, Typography, Toolbar, AppBar } from '@mui/material';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack'; // import GridLoading from 'app/main/components/loading/loading';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { ThemeProvider } from '@mui/system';
+import { createTheme, useTheme } from '@mui/material/styles';
+import LoadingBackdrop from '../../Loaders/LoadingBackdrop'; // import GridLoading from 'app/main/components/loading/loading';
 
+import PropTypes from 'prop-types';
 let debounce;
 export const GenericDialogWindow = props => {
   const {
@@ -13,8 +17,11 @@ export const GenericDialogWindow = props => {
     i18nextStrings = {
       saveButtonLabel: 'save',
       backButtonLabel: 'back'
-    }
-  } = props; //---------------------------------------------------
+    },
+    theme
+  } = props;
+  const compTheme = theme ? theme : useTheme();
+  const defaultTheme = createTheme(compTheme); //---------------------------------------------------
   // Hooks 
   //---------------------------------------------------
 
@@ -35,11 +42,13 @@ export const GenericDialogWindow = props => {
     onClose();
   };
 
-  return /*#__PURE__*/React.createElement(Dialog, {
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: defaultTheme
+  }, /*#__PURE__*/React.createElement(Dialog, {
     open: open,
     onClose: closeDialog,
     fullScreen: true,
-    className: "print:hide-me"
+    className: ""
   }, /*#__PURE__*/React.createElement(AppBar, {
     position: 'relative'
   }, /*#__PURE__*/React.createElement(Toolbar, {
@@ -64,9 +73,9 @@ export const GenericDialogWindow = props => {
     color: "inherit",
     onClick: onSave
   }, save_button_label)))), /*#__PURE__*/React.createElement(DialogContent, {
-    className: "pt-4 pl-0 pr-0"
+    className: "pt-4 pl-0 pr-0 "
   }, /*#__PURE__*/React.createElement("div", {
-    className: "w-full h-full"
+    className: "w-full h-full "
   }, component ? /*#__PURE__*/React.cloneElement(component, {
     parentProps: {
       setCanSave,
@@ -83,6 +92,42 @@ export const GenericDialogWindow = props => {
     color: "primary",
     onClick: onSave,
     disabled: !can_save
-  }, save_button_label)), is_loading && /*#__PURE__*/React.createElement(React.Fragment, null, "Loading..."));
+  }, save_button_label)), /*#__PURE__*/React.createElement(LoadingBackdrop, {
+    isLoading: is_loading
+  })));
+};
+export default GenericDialogWindow;
+GenericDialogWindow.defaultProps = {
+  open: false,
+  component: undefined,
+  data: undefined,
+  onClose: () => {},
+  showSaveButton: true,
+  i18nextStrings: {
+    saveButtonLabel: 'save',
+    backButtonLabel: 'back'
+  },
+  theme: undefined
 };
-export default GenericDialogWindow;
+GenericDialogWindow.propTypes = {
+  /** Controls weather to open or close the dialog */
+  open: PropTypes.bool,
+
+  /** Any React component to be displayed inside of the dialog body */
+  component: PropTypes.element,
+
+  /** Any data needing to be passed down to the child component */
+  data: PropTypes.any,
+
+  /** the onClose function allows us to have full control over the close process  */
+  onClose: PropTypes.func,
+
+  /** To display or hide the save button on the dialog  */
+  showSaveButton: PropTypes.bool,
+
+  /** i18next string object */
+  i18nextStrings: PropTypes.object,
+
+  /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
+  theme: PropTypes.object
+};

package/dist/components/{Buttons → Drawing}/ImageCanvasDraw/components/Controls.js

@@ -5,7 +5,7 @@ import { combineDrawing } from '../service/image_tools';
 import imageCompression from 'browser-image-compression';
 import { ChromePicker } from 'react-color';
 import Button from '@mui/material/Button';
-import { OUTPUT_TYPES } from '.././constants';
+import { OUTPUT_TYPES } from '../constants';
 const imageScaleMarks = [{
   value: 1.5,
   label: 'Full'

package/dist/components/{Buttons → Drawing}/ImageCanvasDraw/index.js

@@ -7,7 +7,7 @@ import Button from '@mui/material/Button';
 import { getStorage, setStorage } from './service/local_storage';
 import PropTypes from 'prop-types';
 import { ThemeProvider } from '@mui/system';
-import { createTheme } from '@mui/material/styles';
+import { createTheme, useTheme } from '@mui/material/styles';
 /**
  * Displays an image that can is used to draw on to generate maps with highlighted routes.
  * 
@@ -31,7 +31,8 @@ const ImageCanvasDraw = props => {
     b64DataUrl,
     theme
   } = props;
-  const defaultTheme = createTheme(theme);
+  const compTheme = theme ? theme : useTheme();
+  const defaultTheme = createTheme(compTheme);
   const [state, setState] = useState({
     drawerOpen: true,
     color: "darkorange",
@@ -159,7 +160,8 @@ ImageCanvasDraw.defaultProps = {
   onSave: undefined,
   outputFormat: 'blob',
   showDownloadButton: undefined,
-  b64DataUrl: undefined
+  b64DataUrl: undefined,
+  theme: undefined
 };
 ImageCanvasDraw.propTypes = {
   /** On save function to execute returns either base64 or blob format based on the output format specified 
@@ -181,5 +183,8 @@ ImageCanvasDraw.propTypes = {
   showDownloadButton: PropTypes.bool,
 
   /** This is the image in a base 64 url format to use as the base image to draw on */
-  b64DataUrl: PropTypes.string.isRequired
+  b64DataUrl: PropTypes.string.isRequired,
+
+  /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
+  theme: PropTypes.object
 };

package/dist/components/Loaders/LoadingBackdrop/index.js

@@ -0,0 +1,55 @@
+import React from "react";
+import "./styles.css";
+import PropTypes from 'prop-types';
+/**
+ * A backdrop loading panel that covers the entire screen and displays a loading spinner with the logo of your choice
+ *
+ */
+
+export const LoadingBackdrop = ({
+  isLoading = false
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      zIndex: 1000000
+    }
+  }, isLoading ? /*#__PURE__*/React.createElement("div", {
+    id: "loading-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "fuse-splash-screen"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "logo"
+  }, /*#__PURE__*/React.createElement("img", {
+    width: "120",
+    src: '/assets/images/logos/logo2.svg',
+    alt: "logo"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "spinner-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "spinner"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "inner"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "gap"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "left"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "half-circle"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "right"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "half-circle"
+  })))))))) : /*#__PURE__*/React.createElement("div", null));
+};
+export default LoadingBackdrop; // Specifies the default values for the props:
+
+LoadingBackdrop.defaultProps = {
+  isLoading: false
+}; // Type of
+
+LoadingBackdrop.propTypes = {
+  /** Controls if the backdrop is to be displayed */
+  isLoading: PropTypes.bool
+};

package/dist/components/PcSharedComponentThemeInheritor/index.js

@@ -1,5 +1,11 @@
 import React from "react";
 import { createTheme, useTheme, ThemeProvider } from "@mui/material/styles";
+/**
+ * Used to bridge the gab between MUI4 currently used in the app and MUI5 used in this library.
+ * By wrapping the app with this function allows the  MUI5 theme provider to properly receive the theme eliminating the need to pass in the theme manually as a props to each component.
+ *
+ */
+
 export const PcSharedComponentThemeInheritor = props => {
   const {
     theme,

package/dist/index.js

@@ -1,6 +1,6 @@
 import './styles/tailwind.css';
-import TestButton from './components/Buttons/TestButton';
-import CodeHighlight from './components/Tools/CodeHighlight/CodeHighlight';
+import TestButton from './components/Buttons/TestTailwinButton';
+import CodeHighlight from './components/Tools/CodeHighlight';
 import CustomFab from './components/Buttons/CustomFab';
 import HelpButton from './components/Buttons/HelpButton';
 import PcSharedComponentThemeInheritor from './components/PcSharedComponentThemeInheritor';

package/dist/styles/tailwind.css

@@ -1 +1 @@
-*,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.relative{position:relative}.m-auto{margin:auto}.mx-6{margin-left:.6rem;margin-right:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.mt-6{margin-top:.6rem}.mb-6{margin-bottom:.6rem}.mb-2{margin-bottom:.2rem}.ml-6{margin-left:.6rem}.mt-12{margin-top:1.2rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.h-full{height:100%}.w-full{width:100%}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.rounded-md{border-radius:.6rem}.border{border-width:1px}.border-transparent{border-color:#0000}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(67 160 71/var(--tw-bg-opacity))}.px-4{padding-left:.4rem;padding-right:.4rem}.py-2{padding-top:.2rem;padding-bottom:.2rem}.px-2{padding-left:.2rem;padding-right:.2rem}.pt-4{padding-top:.4rem}.pl-0{padding-left:0}.pr-0{padding-right:0}.pl-16{padding-left:1.6rem}.text-sm{font-size:1.4rem;line-height:2rem}.text-2xl{font-size:2.4rem;line-height:3.2rem}.text-xl{font-size:2rem;line-height:2.8rem}.font-medium{font-weight:500}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px 0 var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.drop-shadow-none{--tw-drop-shadow:drop-shadow(0 0 #0000)}.drop-shadow-none,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(56 142 60/var(--tw-bg-opacity))}.hover\:bg-gray-100\/75:hover{background-color:#f5f5f5bf}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(76 175 80/var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}
+*,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.relative{position:relative}.m-12{margin:1.2rem}.m-auto{margin:auto}.mx-6{margin-left:.6rem;margin-right:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.mr-12{margin-right:1.2rem}.mt-12{margin-top:1.2rem}.mb-6{margin-bottom:.6rem}.ml-6{margin-left:.6rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.h-full{height:100%}.w-full{width:100%}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.rounded-md{border-radius:.6rem}.border{border-width:1px}.border-transparent{border-color:#0000}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(67 160 71/var(--tw-bg-opacity))}.px-4{padding-left:.4rem;padding-right:.4rem}.py-2{padding-top:.2rem;padding-bottom:.2rem}.px-2{padding-left:.2rem;padding-right:.2rem}.pt-4{padding-top:.4rem}.pl-0{padding-left:0}.pr-0{padding-right:0}.pl-16{padding-left:1.6rem}.text-sm{font-size:1.4rem;line-height:2rem}.text-xl{font-size:2rem;line-height:2.8rem}.text-2xl{font-size:2.4rem;line-height:3.2rem}.font-medium{font-weight:500}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px 0 var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.drop-shadow-none{--tw-drop-shadow:drop-shadow(0 0 #0000)}.drop-shadow-none,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(56 142 60/var(--tw-bg-opacity))}.hover\:bg-gray-100\/75:hover{background-color:#f5f5f5bf}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(76 175 80/var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pcm-shared-components",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "private": false,
   "main": "dist/index.js",
   "babel": {
@@ -64,6 +64,7 @@
     "prismjs": "^1.27.0",
     "react-canvas-draw": "^1.2.1",
     "react-color": "^2.19.3",
+    "react-markdown": "^8.0.0",
     "tinycolor2": "^1.4.2"
   }
 }

package/dist/components/Buttons/HelpButton/service/local_storage.js

@@ -1,11 +0,0 @@
-const STORAGE_NAME = 'PC_TEST_THEME';
-export const setStorage = value => {
-  try {
-    //Need to filter out the b64DataUrl object from the state or else it might slow down the browser...
-    let new_value = Object.fromEntries(Object.entries(value).filter(([key, value]) => key !== 'b64DataUrl'));
-    localStorage.setItem(STORAGE_NAME, JSON.stringify(new_value));
-  } catch (error) {
-    console.error('Error in setting storage for IMAGE Draw:', error);
-    setStorage('');
-  }
-};