pcm-shared-components 0.0.90 → 0.0.93

package/dist/components/Dialogs/GenericAppBar/index.js

@@ -222,7 +222,7 @@ export const GenericAppBar = props => {
   }, /*#__PURE__*/React.createElement("div", {
     className: "flex flex-row",
     key: `main_sub_items_${new Date()}`
-  }, "                            ", /*#__PURE__*/React.createElement(Tooltip, {
+  }, /*#__PURE__*/React.createElement(Tooltip, {
     title: menu.name
   }, menu.isButton ? /*#__PURE__*/React.createElement(Button // className={classes.menuButton}
   , {
@@ -280,18 +280,19 @@ export const GenericAppBar = props => {
   //? ------------------------------------------------
 
   const MainItems = () => {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, (appBarMenu.mainMenu || []).filter(mn => !(mn.hideMenu && mn.hideMenu === true)).map((menu, idx) => /*#__PURE__*/React.createElement(DesktopItemMenu, {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-row"
+    }, (appBarMenu.mainMenu || []).filter(mn => !(mn.hideMenu && mn.hideMenu === true)).map((menu, idx) => /*#__PURE__*/React.createElement(DesktopItemMenu, {
       key: `desktop_item_menu_${idx}`,
       menu: menu,
       idx: idx
     })));
-  };
+  }; // const MainItemMenu = () => (
+  //     <div className='flex flex-row'>
+  //         <MainItems key='main_item_id' />
+  //     </div>
+  // );
 
-  const MainItemMenu = () => /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-row"
-  }, /*#__PURE__*/React.createElement(MainItems, {
-    key: "main_item_id"
-  }));
 
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: defaultTheme
@@ -305,7 +306,7 @@ export const GenericAppBar = props => {
     className: classes.grow
   }), /*#__PURE__*/React.createElement("div", {
     className: classes.sectionDesktop
-  }, /*#__PURE__*/React.createElement(MainItemMenu, null)), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(MainItems, null)), /*#__PURE__*/React.createElement("div", {
     className: classes.sectionMobile
   }, /*#__PURE__*/React.createElement(IconButton, {
     "aria-haspopup": "true",

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

@@ -81,31 +81,22 @@ export const GenericDialogWindow = props => {
     return obj;
   };
 
-  const setMenuOnClickCallback = useCallback((id, onClick) => {
+  const setMenuOnClickCallback = (id, onClick) => {
     //Used to set the onClick callback on a specific menu matching the id provided.
     //Example: Used by the children component to set the onClick of a menu.
     // A menu must have a unique id object matching the id on which we are searching for and a callback function must be provided
-    if (!onClickOverride.find(oco => oco.id.toLowerCase() === id.toLowerCase())) {
-      //Nice this override doesn't exist. Add it
-      setOnClickOverride(previousState => {
-        return [...previousState, {
-          id: id,
-          onClick: onClick
-        }];
-      });
-    }
-  }, [appBarMenu]);
+    //Need to filter out previous ids and add the new ones
+    setOnClickOverride(previousState => {
+      return [...previousState.filter(ps => ps.id !== id), {
+        id: id,
+        onClick: onClick
+      }];
+    });
+  };
 
   const setOverrides = () => {
     try {
       //Loop over all our on click overrides and apply the onClick callback for each id found in the onClickOverride state
-      onClickOverride.forEach(item => {
-        setManagedAppBarMenu(previousState => {
-          return { ...previousState,
-            mainMenu: updateObjectByID(previousState.mainMenu, item.id, undefined)
-          };
-        });
-      });
       onClickOverride.forEach(item => {
         setManagedAppBarMenu(previousState => {
           return { ...previousState,
@@ -138,8 +129,7 @@ export const GenericDialogWindow = props => {
         })]
       }); // If we have a mainMenu item with the id='save' then override the onClick event to use the onSave function which reaches into the child ref
       //Need to re-apply any onClick override to ensure they are still properly set by what was overridden from the child component.
-
-      setOverrides();
+      // setOverrides();
     }
   }, [appBarMenu, can_save, showSaveButton, save_button_label]); // -----------------------------------------
   // Note make sure to include disableEnforceFocus or else I'll have infinite error/warnings on Uncaught RangeError.

package/dist/components/Menus/ReusablePopupMenu/components/GenericSubMenu.js

@@ -0,0 +1,128 @@
+import React, { useState, useEffect } from 'react';
+import { Tooltip, IconButton, MenuItem, Menu } from "@mui/material";
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { makeStyles } from '@mui/styles';
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Switch from "@mui/material/Switch";
+
+const GenericSubMenu = ({
+  menu,
+  full_menu = true,
+  handleParentMenuClose = undefined
+}) => {
+  const [anchorSubMenu, setAnchorSubMenu] = useState(false);
+  const [isSubMenuOpen, setSubMenuOpen] = useState(false);
+  const useStyles = makeStyles(theme => ({
+    root: {
+      flexGrow: 1
+    },
+    menuButton: {
+      marginLeft: -18,
+      fontSize: 20
+    },
+    appContextMenu: {
+      background: "#58524c"
+    },
+    grow: {
+      flexGrow: 1
+    },
+    divider: {
+      borderLeft: "0.1em solid #aeaeae",
+      padding: "0.5em",
+      margin: "10px 10px 10px 10px",
+      height: 5
+    },
+    mobile_divider: {
+      borderBottom: "0.1em solid #aeaeae",
+      width: "100%"
+    },
+    sectionDesktop: {
+      display: "none",
+      [theme.breakpoints.up("md")]: {
+        display: "flex"
+      }
+    },
+    sectionMobile: {
+      display: "flex",
+      [theme.breakpoints.up("md")]: {
+        display: "none"
+      }
+    }
+  }));
+  const classes = useStyles();
+
+  const openSubMenu = event => {
+    setAnchorSubMenu(event.currentTarget);
+  };
+
+  const handleSubMenuClose = () => {
+    setAnchorSubMenu(false); //Closes the previous parent menu too..
+
+    if (handleParentMenuClose) {
+      handleParentMenuClose();
+    } // handleMobileMenuClose();
+
+  };
+
+  useEffect(() => {
+    setSubMenuOpen(Boolean(anchorSubMenu));
+  }, [anchorSubMenu]);
+  return /*#__PURE__*/React.createElement("div", {
+    key: `main_sub_menu_items_${menu.icon}`,
+    className: !full_menu ? "flex flex-row" : 'flex flex-col w-full'
+  }, full_menu ? /*#__PURE__*/React.createElement(MenuItem, {
+    onClick: openSubMenu
+  }, menu.icon && /*#__PURE__*/React.createElement(ListItemIcon, null, menu.icon), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-row justify-between w-full"
+  }, /*#__PURE__*/React.createElement(ListItemText, {
+    primary: menu.name
+  }), menu.subMenu && menu.subMenu.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col mx-2 my-auto"
+  }, /*#__PURE__*/React.createElement(ChevronRightIcon, {
+    className: "text-gray-500 hover:text-gray-700"
+  })))) : /*#__PURE__*/React.createElement(Tooltip, {
+    title: menu.name
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    className: classes.menuButton,
+    color: "inherit",
+    "aria-owns": "menu-appbar",
+    onClick: openSubMenu
+  }, menu.icon)), /*#__PURE__*/React.createElement(Menu, {
+    className: "",
+    style: {
+      display: anchorSubMenu ? 'block' : 'none'
+    } //Makes the disappearing menu smoother so I don't see it being jarred in a corner.
+    ,
+    anchorEl: anchorSubMenu,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'center'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'left'
+    },
+    open: isSubMenuOpen,
+    onClose: handleSubMenuClose,
+    onClick: menu.onClick
+  }, (menu.subMenu || []).filter(mn => !(mn.hideMenu && mn.hideMenu === true)).map((sub_menu, idx) => /*#__PURE__*/React.createElement(React.Fragment, null, sub_menu.subMenu ? /*#__PURE__*/React.createElement(GenericSubMenu, {
+    key: `common_grid_app_bar_sub_desktop_sub_${idx}`,
+    menu: sub_menu,
+    classes: classes,
+    full_menu: true,
+    handleParentMenuClose: handleSubMenuClose
+  }) : /*#__PURE__*/React.createElement(MenuItem, {
+    key: `sub_menu_items__${idx}}`,
+    onClick: () => {
+      handleSubMenuClose();
+      sub_menu.onClick();
+    }
+  }, sub_menu.icon && /*#__PURE__*/React.createElement(ListItemIcon, null, sub_menu.icon), /*#__PURE__*/React.createElement(ListItemText, {
+    primary: sub_menu.name
+  }), typeof sub_menu.isChecked === "boolean" && /*#__PURE__*/React.createElement(Switch, {
+    checked: sub_menu.isChecked
+  }))))));
+};
+
+export default GenericSubMenu;

package/dist/components/Menus/ReusablePopupMenu/components/ReusableMenu.js

@@ -0,0 +1,91 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import withStyles from "@mui/styles/withStyles";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Switch from "@mui/material/Switch";
+import PropTypes from "prop-types";
+import GenericSubMenu from './GenericSubMenu';
+const StyledMenu = withStyles({
+  paper: {
+    border: "1px solid #d3d4d5"
+  }
+})(props => /*#__PURE__*/React.createElement(Menu, _extends({
+  elevation: 0,
+  anchorOrigin: {
+    vertical: "bottom",
+    horizontal: "center"
+  },
+  transformOrigin: {
+    vertical: "top",
+    horizontal: "center"
+  }
+}, props)));
+const StyledMenuItem = withStyles(() => ({
+  root: {
+    "&:focus": {
+      backgroundColor: "primary",
+      "& .MuiListItemIcon-root, & .MuiListItemText-primary": {
+        color: "primary"
+      }
+    }
+  }
+}))(MenuItem);
+
+const ReusableMenu = props => {
+  const {
+    menuAnchor,
+    handleClose,
+    menuData,
+    keepMounted,
+    classes = undefined
+  } = props;
+  return /*#__PURE__*/React.createElement(StyledMenu, {
+    id: "customized-menu",
+    anchorEl: menuAnchor,
+    keepMounted: keepMounted,
+    open: Boolean(menuAnchor),
+    onClose: handleClose
+  }, menuData.map((menu, idx) => /*#__PURE__*/React.createElement("div", {
+    key: `ReusableMenu_${idx}`
+  }, menu.name && /*#__PURE__*/React.createElement(React.Fragment, null, menu.subMenu ? /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-row",
+    key: `main_sub_items_${new Date()}`
+  }, /*#__PURE__*/React.createElement(GenericSubMenu, {
+    key: `common_grid_app_bar_sub_desktop_${idx}`,
+    menu: menu,
+    full_menu: true,
+    classes: classes
+  })) : /*#__PURE__*/React.createElement(StyledMenuItem, {
+    onClick: menu.onClick,
+    key: `reusable_menu_item_${idx}`
+  }, /*#__PURE__*/React.createElement(ListItemIcon, null, menu.icon), /*#__PURE__*/React.createElement(ListItemText, {
+    primary: menu.name
+  }), typeof menu.isChecked === "boolean" && /*#__PURE__*/React.createElement(Switch, {
+    checked: menu.isChecked
+  }))))));
+};
+
+export default ReusableMenu; // required props for component to work...
+
+ReusableMenu.propTypes = {
+  menuAnchor: PropTypes.element.isRequired,
+  handleClose: PropTypes.element.isRequired,
+  menuData: PropTypes.element.isRequired
+}; // Specifies the default values for the props:
+
+ReusableMenu.defaultProps = {
+  menuAnchor: undefined,
+  handleClose: undefined,
+  menuData: [],
+  keepMounted: false
+}; // Type of
+
+ReusableMenu.propTypes = {
+  menuAnchor: PropTypes.object,
+  handleClose: PropTypes.func,
+  menuData: PropTypes.array,
+  keepMounted: PropTypes.bool
+};

package/dist/components/Menus/ReusablePopupMenu/index.js

@@ -0,0 +1,94 @@
+import React, { useState, Children, isValidElement, cloneElement } from 'react';
+import ReusableMenu from './components/ReusableMenu';
+import Tooltip from '@mui/material/Tooltip';
+import PropTypes from 'prop-types';
+import { useTheme } from '@mui/material/styles';
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+/**
+ * Wraps any simple component and generates a simple dropdown menu on the wrapped component.
+ * 
+ *
+ * ### Importing the component
+
+```//PitchCamp shared component
+import {ReusablePopupMenu} from 'pcm-shared-components';
+```
+
+ * 
+ */
+
+export const ReusablePopupMenu = props => {
+  const {
+    children,
+    menuData,
+    tooltipTitle,
+    keepMounted,
+    theme
+  } = props;
+  const [menuAnchor, setMenuAnchor] = useState(null);
+  const componentTheme = createTheme(theme ? theme : useTheme());
+
+  const onClick = event => {
+    setMenuAnchor(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setMenuAnchor(null);
+  };
+
+  const hocProps = {
+    menuAnchor,
+    handleClose,
+    menuData,
+    keepMounted
+  };
+  const childrenWithProps = Children.map(children, child => {
+    // Checking isValidElement is the safe way and avoids a typescript
+    if ( /*#__PURE__*/isValidElement(child)) {
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        title: tooltipTitle.length > 0 ? tooltipTitle : ''
+      }, /*#__PURE__*/cloneElement(child, {
+        onClick
+      }));
+    }
+
+    return child;
+  });
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: componentTheme
+  }, childrenWithProps, /*#__PURE__*/React.createElement(ReusableMenu, hocProps));
+};
+export default ReusablePopupMenu;
+export const createReusablePopupMenuObject = (onClick = undefined, icon = undefined, name = undefined, isChecked = undefined) => {
+  return {
+    onClick: onClick,
+    icon: icon,
+    name: name,
+    isChecked: isChecked
+  };
+}; // required props for component to work...
+
+ReusableMenu.propTypes = {
+  children: PropTypes.element.isRequired,
+  menuData: PropTypes.element.isRequired
+}; // Specifies the default values for the props:
+
+ReusableMenu.defaultProps = {
+  children: undefined,
+  tooltipTitle: '',
+  menuData: [],
+  keepMounted: false,
+  theme: undefined
+}; // Type of
+
+ReusableMenu.propTypes = {
+  children: PropTypes.object,
+  tooltipTitle: PropTypes.string,
+  menuData: PropTypes.array,
+  keepMounted: PropTypes.bool,
+
+  /**
+   * The theme object to apply to this object, if no theme provided then the component will used the default theme passed down by the ThemeProvider
+   */
+  theme: PropTypes.object
+};

package/dist/index.js

@@ -11,4 +11,5 @@ import TwoColumnDisplay from './components/Layout/TwoColumnDisplay';
 import SimpleTab from './components/Layout/SimpleTab';
 import HrefLink from './components/Links/HrefLink';
 import GenericAppBar from './components/Dialogs/GenericAppBar';
-export { TestButton, CodeHighlight, CustomFab, HelpButton, GenericDialogWindow, PcSharedComponentThemeInheritor, ImageCanvasDraw, PCMScrollbar, TwoColumnDisplay, SimpleTab, HrefLink, GenericAppBar };
+import ReusablePopupMenu from './components/Menus/ReusablePopupMenu';
+export { TestButton, CodeHighlight, CustomFab, HelpButton, GenericDialogWindow, PcSharedComponentThemeInheritor, ImageCanvasDraw, PCMScrollbar, TwoColumnDisplay, SimpleTab, HrefLink, GenericAppBar, ReusablePopupMenu };

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: }.static{position:static}.absolute{position:absolute}.relative{position:relative}.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.m-auto{margin:auto}.m-12{margin:1.2rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.mx-2{margin-left:.2rem;margin-right:.2rem}.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}.mr-12{margin-right:1.2rem}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.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}.contents{display:contents}.hidden{display:none}.h-full{height:100%}.h-screen{height:100vh}.w-full{width:100%}.w-1\/2{width:50%}.grow{flex-grow:1}.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-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overscroll-none{-ms-scroll-chaining:none;overscroll-behavior:none}.rounded-md{border-radius:.6rem}.border{border-width:1px}.border-2{border-width:2px}.border-transparent{border-color:#0000}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(67 160 71/var(--tw-bg-opacity))}.p-6{padding:.6rem}.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))}.text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity))}.no-underline{-webkit-text-decoration-line:none;text-decoration-line:none}.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}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity))}.hover\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.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: }.static{position:static}.absolute{position:absolute}.relative{position:relative}.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.m-auto{margin:auto}.m-12{margin:1.2rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.mx-2{margin-left:.2rem;margin-right:.2rem}.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}.mr-12{margin-right:1.2rem}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.mt-12{margin-top:1.2rem}.ml-6{margin-left:.6rem}.mb-6{margin-bottom:.6rem}.ml-12{margin-left:1.2rem}.mb-24{margin-bottom:2.4rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.contents{display:contents}.hidden{display:none}.h-full{height:100%}.h-screen{height:100vh}.w-full{width:100%}.w-1\/2{width:50%}.grow{flex-grow:1}.cursor-pointer{cursor:pointer}.list-disc{list-style-type:disc}.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-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overscroll-none{-ms-scroll-chaining:none;overscroll-behavior:none}.rounded-md{border-radius:.6rem}.border{border-width:1px}.border-2{border-width:2px}.border-transparent{border-color:#0000}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(67 160 71/var(--tw-bg-opacity))}.p-6{padding:.6rem}.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{line-height:3.2rem}.text-24,.text-2xl{font-size:2.4rem}.font-medium{font-weight:500}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity))}.no-underline{-webkit-text-decoration-line:none;text-decoration-line:none}.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}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity))}.hover\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.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.90",
+  "version": "0.0.93",
   "private": false,
   "main": "dist/index.js",
   "babel": {