pcm-shared-components 0.0.47 → 0.0.50

package/dist/components/Buttons/CustomFab/{CustomFab.js → index.js}

@@ -7,8 +7,6 @@ import clsx from 'clsx';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { ThemeProvider } from '@mui/system';
 import { createTheme } from '@mui/material/styles';
-import { theme } from '../../Theme/theme';
-const defaultTheme = createTheme(theme.pitchCamp);
 const useStyles = makeStyles(() => ({
   rootFabElement: {
     margin: 2,
@@ -33,10 +31,12 @@ const useStyles = makeStyles(() => ({
   Icon: {
     width: ({
       iconSize
-    }) => `${iconSize}px !important`,
+    }) => iconSize,
     height: ({
       iconSize
-    }) => `${iconSize}px !important`,
+    }) => iconSize,
+    // width: ({iconSize}) => `${iconSize}px !important`,
+    // height: ({iconSize}) => `${iconSize}px !important`,
     marginTop: 'auto',
     marginBottom: 'auto'
   },
@@ -59,10 +59,11 @@ const CustomFab = props => {
     Icon,
     buttonText,
     boxShadow,
-    iconLocation
+    iconLocation,
+    theme
   } = props;
+  const defaultTheme = createTheme(theme);
   const classes = useStyles(props);
-  console.log('debug boxShadow', boxShadow);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: defaultTheme
   }, /*#__PURE__*/React.createElement(Tooltip, {
@@ -106,7 +107,8 @@ CustomFab.defaultProps = {
   textColor: 'textPrimary',
   hoverTextColor: 'textPrimary',
   className: '',
-  color: 'primary'
+  color: 'primary',
+  theme: {}
 };
 CustomFab.propTypes = {
   /** onClick function passed to the button */
@@ -154,5 +156,8 @@ CustomFab.propTypes = {
   className: PropTypes.string,
 
   /** Theme colors if not using backgroundColor ['primary','secondary'] */
-  color: PropTypes.oneOf(['primary', 'secondary'])
+  color: PropTypes.oneOf(['primary', 'secondary']),
+
+  /** Theme object to use on this component*/
+  theme: PropTypes.object
 };

package/dist/components/Buttons/GenericDialogWindow/components/InnerDialogComponent.js

@@ -0,0 +1,51 @@
+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
+
+const InnerDialogComponent = /*#__PURE__*/forwardRef((props, ref) => {
+  // Filter out the parentProps object from the props,
+  // There are the props passed down to the actual components
+  const [state, setState] = useState(Object.fromEntries(Object.entries(props).filter(([key, value]) => key !== 'parentProps'))); //Passed by the Parent props
+
+  const {
+    setCanSave,
+    setIsLoading,
+    setSaveButtonLabel,
+    //Allows us to set the label on the save button
+    closeDialog,
+    // 
+    data //Any data this component needs to function..
+
+  } = props.parentProps;
+  console.log('debug data: ', data); //-----------------------------------
+  //! Used to alow the parent component to call the functions inside this child
+  //-----------------------------------
+
+  useImperativeHandle(ref, () => ({
+    childRefSave
+  }));
+
+  const childRefSave = () => {
+    setIsLoading(true); //Simulate a save
+
+    setTimeout(() => {
+      setIsLoading(false);
+      closeDialog();
+    }, 2000);
+  };
+
+  return /*#__PURE__*/React.createElement("div", null, "something here to show...", /*#__PURE__*/React.createElement("button", {
+    onClick: () => {
+      setCanSave(true);
+    }
+  }, "Click here to signal to the dialog that we are ready to save."), /*#__PURE__*/React.createElement(ImageCanvasDraw, {
+    outputFormat: 'blob',
+    showDownloadButton: true,
+    onSave: data => {
+      console.log('Data received by th onSave of the ImageCanvasDraw: ', data);
+      closeDialog();
+    },
+    b64DataUrl: cedarShade
+  }));
+});
+export default InnerDialogComponent;

package/dist/components/Buttons/GenericDialogWindow/components/OpenDialog.js

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import CustomFab from '../../CustomFab';
+import InnerDialogComponent from './InnerDialogComponent';
+import GenericDialogWindow from '../index';
+export const OpenDialog = () => {
+  const [open, setOpen] = useState(false);
+
+  const onClose = () => {
+    setOpen(false);
+  };
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col"
+  }, "Once the button is clicked the dialog will open which is actually what we are trying to display in this Story"), /*#__PURE__*/React.createElement(CustomFab, {
+    onClick: () => {
+      setOpen(!open);
+    },
+    buttonText: "Click to open Generic Dialog",
+    iconSize: 0
+  }), /*#__PURE__*/React.createElement(GenericDialogWindow, {
+    open: open,
+    onClose: onClose,
+    component: /*#__PURE__*/React.createElement(InnerDialogComponent, null),
+    data: 'this is anything I need to pass down to the InnerDialogComponent',
+    i18nextStrings: {
+      saveButtonLabel: 'save me',
+      backButtonLabel: 'backup!'
+    }
+  }));
+};
+export default OpenDialog;

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

@@ -0,0 +1,88 @@
+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';
+
+let debounce;
+export const GenericDialogWindow = props => {
+  const {
+    open,
+    component,
+    data,
+    onClose,
+    showSaveButton = false,
+    i18nextStrings = {
+      saveButtonLabel: 'save',
+      backButtonLabel: 'back'
+    }
+  } = props; //---------------------------------------------------
+  // Hooks 
+  //---------------------------------------------------
+
+  const [can_save, setCanSave] = useState(false);
+  const [is_loading, setIsLoading] = useState(false);
+  const [save_button_label, setSaveButtonLabel] = useState(i18nextStrings.saveButtonLabel);
+  const childRef = useRef();
+
+  const onSave = () => {
+    clearTimeout(debounce);
+    debounce = setTimeout(() => {
+      //! Allows this parent component to call a sub function inside of the child component
+      childRef.current ? childRef.current.childRefSave() : undefined;
+    }, 300);
+  };
+
+  const closeDialog = () => {
+    onClose();
+  };
+
+  return /*#__PURE__*/React.createElement(Dialog, {
+    open: open,
+    onClose: closeDialog,
+    fullScreen: true,
+    className: "print:hide-me"
+  }, /*#__PURE__*/React.createElement(AppBar, {
+    position: 'relative'
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    variant: "dense",
+    style: {
+      display: 'grid'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex  flex-row justify-between "
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-row justify-start"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    edge: "start",
+    color: "inherit",
+    onClick: closeDialog,
+    "aria-label": "close"
+  }, /*#__PURE__*/React.createElement(ArrowBackIcon, null)), /*#__PURE__*/React.createElement(Typography, {
+    className: "my-auto",
+    variant: "h5",
+    color: "inherit"
+  }, i18nextStrings.backButton)), can_save && showSaveButton && /*#__PURE__*/React.createElement(Button, {
+    color: "inherit",
+    onClick: onSave
+  }, save_button_label)))), /*#__PURE__*/React.createElement(DialogContent, {
+    className: "pt-4 pl-0 pr-0"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "w-full h-full"
+  }, component ? /*#__PURE__*/React.cloneElement(component, {
+    parentProps: {
+      setCanSave,
+      setIsLoading,
+      setSaveButtonLabel,
+      closeDialog,
+      data: data
+    },
+    ref: childRef
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null))), /*#__PURE__*/React.createElement(DialogActions, {
+    className: "justify-between pl-16"
+  }, showSaveButton && /*#__PURE__*/React.createElement(Button, {
+    variant: "contained",
+    color: "primary",
+    onClick: onSave,
+    disabled: !can_save
+  }, save_button_label)), is_loading && /*#__PURE__*/React.createElement(React.Fragment, null, "Loading..."));
+};
+export default GenericDialogWindow;

package/dist/components/Buttons/HelpButton/{HelpButton.js → index.js}

@@ -1,7 +1,10 @@
 import React from 'react';
-import CustomFab from '../CustomFab/CustomFab';
+import CustomFab from '../CustomFab';
 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,
@@ -9,20 +12,28 @@ export const HelpButton = props => {
     color,
     tooltipText,
     size,
-    iconSize
+    iconSize,
+    theme
   } = props;
-  return /*#__PURE__*/React.createElement(CustomFab, {
+  const compTheme = theme ? theme : useTheme();
+  setStorage(compTheme);
+  console.log('debug theme,', compTheme);
+  const defaultTheme = createTheme(compTheme);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: defaultTheme
+  }, /*#__PURE__*/React.createElement(CustomFab, {
     className: className,
     Icon: HelpOutlineIcon,
     tooltipText: tooltipText,
     color: color,
     size: size,
     iconSize: iconSize,
-    variant: 'round',
+    variant: 'circular',
+    theme: compTheme,
     onClick: () => {
       window.open(onClickLink, "_blank");
     }
-  });
+  }));
 };
 export default HelpButton;
 HelpButton.defaultProps = {
@@ -31,7 +42,8 @@ HelpButton.defaultProps = {
   color: 'primary',
   tooltipText: '',
   size: 'large',
-  iconSize: 24
+  iconSize: 24,
+  theme: undefined
 };
 HelpButton.propTypes = {
   /** On click link, it's the URL to navigate too */
@@ -50,5 +62,8 @@ HelpButton.propTypes = {
   iconSize: PropTypes.number,
 
   /** The size of the button ['small','medium','large'] */
-  size: PropTypes.oneOf(['small', 'medium', 'large'])
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+
+  /** Theme object to use on this component*/
+  theme: PropTypes.object
 };

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

@@ -0,0 +1,11 @@
+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('');
+  }
+};

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

@@ -6,6 +6,8 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 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';
 /**
  * Displays an image that can is used to draw on to generate maps with highlighted routes.
  * 
@@ -26,8 +28,10 @@ const ImageCanvasDraw = props => {
     onSave,
     outputFormat,
     showDownloadButton,
-    b64DataUrl
+    b64DataUrl,
+    theme
   } = props;
+  const defaultTheme = createTheme(theme);
   const [state, setState] = useState({
     drawerOpen: true,
     color: "darkorange",
@@ -109,47 +113,45 @@ const ImageCanvasDraw = props => {
     }
   }, children);
 
-  if (state.width && state.width !== 0) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "flex flex-row overflow-hidden"
-    }, state.drawerOpen ? /*#__PURE__*/React.createElement("div", {
-      className: "flex flex-row",
-      style: {
-        width: 'auto'
-      }
-    }, /*#__PURE__*/React.createElement(Controls, {
-      state: state,
-      setState: setState,
-      saveableCanvas: saveableCanvas,
-      onSave: onSave,
-      outputFormat: outputFormat,
-      showDownloadButton: showDownloadButton
-    }), /*#__PURE__*/React.createElement(DrawerButtonOpenClose, null, /*#__PURE__*/React.createElement(ChevronLeftIcon, null))) : /*#__PURE__*/React.createElement("div", {
-      className: "flex flex-row justify-end"
-    }, /*#__PURE__*/React.createElement(DrawerButtonOpenClose, null, /*#__PURE__*/React.createElement(ChevronRightIcon, null))), state.width !== 0 && /*#__PURE__*/React.createElement("div", {
-      className: "overflow-scroll"
-    }, /*#__PURE__*/React.createElement(CanvasDraw, {
-      className: "",
-      ref: saveableCanvas,
-      onChange: evt => console.log("onChange", evt) // enablePanAndZoom //Don't enable pan and zoom or else it gets too complicated when saving...
-      // zoomExtents={{ min: 0.33, max: 10 }}
-      ,
-      clampLinesToDocument: true,
-      hideInterface: false,
-      hideGrid: false,
-      backgroundColor: 'rgba(34,34,34,0.2)',
-      brushColor: state.color,
-      brushRadius: state.brushRadius,
-      lazyRadius: state.lazyRadius,
-      canvasWidth: Number(state.width) / Number(state.imageScale),
-      canvasHeight: Number(state.height) / Number(state.imageScale),
-      catenaryColor: 'black',
-      gridColor: "#ccc",
-      imgSrc: state.b64DataUrl
-    })));
-  } else {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, "loading...");
-  }
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: defaultTheme
+  }, state.width && state.width !== 0 ? /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-row overflow-hidden"
+  }, state.drawerOpen ? /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-row",
+    style: {
+      width: 'auto'
+    }
+  }, /*#__PURE__*/React.createElement(Controls, {
+    state: state,
+    setState: setState,
+    saveableCanvas: saveableCanvas,
+    onSave: onSave,
+    outputFormat: outputFormat,
+    showDownloadButton: showDownloadButton
+  }), /*#__PURE__*/React.createElement(DrawerButtonOpenClose, null, /*#__PURE__*/React.createElement(ChevronLeftIcon, null))) : /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-row justify-end"
+  }, /*#__PURE__*/React.createElement(DrawerButtonOpenClose, null, /*#__PURE__*/React.createElement(ChevronRightIcon, null))), state.width !== 0 && /*#__PURE__*/React.createElement("div", {
+    className: "overflow-scroll"
+  }, /*#__PURE__*/React.createElement(CanvasDraw, {
+    className: "",
+    ref: saveableCanvas,
+    onChange: evt => console.log("onChange", evt) // enablePanAndZoom //Don't enable pan and zoom or else it gets too complicated when saving...
+    // zoomExtents={{ min: 0.33, max: 10 }}
+    ,
+    clampLinesToDocument: true,
+    hideInterface: false,
+    hideGrid: false,
+    backgroundColor: 'rgba(34,34,34,0.2)',
+    brushColor: state.color,
+    brushRadius: state.brushRadius,
+    lazyRadius: state.lazyRadius,
+    canvasWidth: Number(state.width) / Number(state.imageScale),
+    canvasHeight: Number(state.height) / Number(state.imageScale),
+    catenaryColor: 'black',
+    gridColor: "#ccc",
+    imgSrc: state.b64DataUrl
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, "loading..."));
 };
 
 export default ImageCanvasDraw;

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

@@ -11,7 +11,6 @@ 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'));
-    console.log('debug new_value', new_value);
     localStorage.setItem(STORAGE_NAME, JSON.stringify(new_value));
   } catch (error) {
     console.error('Error in setting storage for IMAGE Draw:', error);

package/dist/index.js

@@ -1,7 +1,7 @@
 import './styles/tailwind.css';
 import TestButton from './components/Buttons/TestButton';
 import CodeHighlight from './components/Tools/CodeHighlight/CodeHighlight';
-import CustomFab from './components/Buttons/CustomFab/CustomFab';
-import HelpButton from './components/Buttons/HelpButton/HelpButton';
+import CustomFab from './components/Buttons/CustomFab';
+import HelpButton from './components/Buttons/HelpButton';
 import theme from './components/Theme/theme';
 export { TestButton, CodeHighlight, CustomFab, HelpButton, theme };

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-2{margin-bottom:.2rem}.mb-6{margin-bottom:.6rem}.ml-6{margin-left:.6rem}.mt-12{margin-top:1.2rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.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-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}.text-xl{font-size:2rem;line-height:2.8rem}.text-sm{font-size:1.4rem;line-height:2rem}.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}
+*,: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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pcm-shared-components",
-  "version": "0.0.47",
+  "version": "0.0.50",
   "private": false,
   "main": "dist/index.js",
   "babel": {