pcm-shared-components 0.0.107 → 0.0.108

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

@@ -7,9 +7,68 @@ import clsx from 'clsx';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { ThemeProvider } from '@mui/system';
 import { createTheme, useTheme } from '@mui/material/styles';
+
+const getSize = size => {
+  switch (size) {
+    case 'x-small':
+      return 28;
+
+    case 'small':
+      return 40;
+
+    case 'medium':
+      return 48;
+
+    case 'large':
+      return 56;
+
+    default:
+      return 56;
+  }
+};
+
+const getPadding = size => {
+  switch (size) {
+    case 'x-small':
+      return '0px 8px 0px 8px';
+
+    case 'small':
+      return '0px 16px 0px 16px';
+
+    case 'medium':
+      return '0px 16px 0px 16px';
+
+    case 'large':
+      return '0px 16px 0px 16px';
+
+    default:
+      return '0px 16px 0px 16px';
+  }
+};
+
 const useStyles = makeStyles(() => ({
   rootFabElement: {
     margin: 2,
+    borderRadius: ({
+      borderRadius
+    }) => borderRadius,
+    height: ({
+      size
+    }) => getSize(size),
+    minHeight: ({
+      size
+    }) => getSize(size),
+    width: ({
+      size,
+      buttonText
+    }) => buttonText.length === 0 ? getSize(size) : 'auto',
+    minWidth: ({
+      size,
+      buttonText
+    }) => buttonText.length === 0 ? getSize(size) : 'auto',
+    padding: ({
+      size
+    }) => getPadding(size),
     backgroundColor: ({
       backgroundColor
     }) => backgroundColor,
@@ -46,8 +105,7 @@ const useStyles = makeStyles(() => ({
     }) => buttonFontSize
   }
 }));
-
-const CustomFab = props => {
+export const CustomFab = props => {
   const {
     onClick,
     variant,
@@ -59,6 +117,7 @@ const CustomFab = props => {
     Icon,
     buttonText,
     boxShadow,
+    borderRadius,
     iconLocation,
     theme
   } = props;
@@ -90,12 +149,12 @@ const CustomFab = props => {
     className: clsx('mx-6 my-auto', classes.buttonText)
   }, " ", buttonText)))));
 };
-
 export default /*#__PURE__*/memo(CustomFab);
 CustomFab.defaultProps = {
   onClick: () => {},
   Icon: MoreVertIcon,
   iconSize: 24,
+  borderRadius: 50,
   iconLocation: 'left',
   buttonText: '',
   buttonFontSize: 14,
@@ -121,6 +180,9 @@ CustomFab.propTypes = {
   /** Controls the size of the icon in pixels */
   iconSize: PropTypes.number,
 
+  /** Controls the border radius of the button's rounded ends */
+  borderRadius: PropTypes.number,
+
   /** Text inside of the button */
   buttonText: PropTypes.string,
   //** Font size of the button text */
@@ -151,7 +213,7 @@ CustomFab.propTypes = {
   hoverTextColor: PropTypes.string,
 
   /** Size of the FAB icon ['small','medium','large'] */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
 
   /** Classes to override */
   className: PropTypes.string,

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

@@ -0,0 +1,79 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import { ThemeProvider } from '@mui/system';
+import { createTheme, useTheme } from '@mui/material/styles';
+import { CustomFab } from '../CustomFab';
+import { ReusablePopupMenu } from '../../Menus/ReusablePopupMenu';
+/**
+ * Creates a generic button with a drop down.
+ * Uses:
+ *  - ReusablePopupMenu
+ *  - CustomFab
+ *
+ * ## Importing the component in your project
+ * 
+ ```js
+
+ import {DropdownButton} from 'pcm-shared-components';
+ 
+ ```
+ * 
+ */
+
+export const DropdownButton = props => {
+  const {
+    name,
+    defaultText,
+    color,
+    menuData,
+    size,
+    borderRadius,
+    theme
+  } = props;
+  const compTheme = theme ? theme : useTheme();
+  const defaultTheme = createTheme(compTheme);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: defaultTheme
+  }, /*#__PURE__*/React.createElement(ReusablePopupMenu, menuData, /*#__PURE__*/React.createElement(CustomFab, {
+    Icon: KeyboardArrowDownIcon,
+    color: color,
+    size: size,
+    boxShadow: false,
+    buttonText: `${defaultText} ${name ? ':' : ''} ${name}`,
+    iconLocation: 'right',
+    borderRadius: borderRadius
+  })));
+};
+export default /*#__PURE__*/memo(DropdownButton);
+DropdownButton.defaultProps = {
+  name: '',
+  defaultText: 'Any Text',
+  menuData: [],
+  size: 'x-small',
+  color: 'primary',
+  borderRadius: 8,
+  theme: {}
+};
+DropdownButton.propTypes = {
+  /** Name of the till being used. Note: if till name exist then inUse is true */
+  name: PropTypes.string,
+
+  /** Color of the button*/
+  color: PropTypes.oneOf(['primary', 'secondary']),
+
+  /** Text used to identify the string in front of the till name. example: Till : Some name */
+  defaultText: PropTypes.string,
+
+  /** Menu items for the dropdown, see the ReusablePopupMenu component for a better understanding of the props parameters */
+  menuData: PropTypes.array,
+
+  /** Controls the border radius of the button's rounded ends */
+  borderRadius: PropTypes.number,
+
+  /** Supported size of the button ['x-small', 'small','medium'] */
+  size: PropTypes.oneOf(['x-small', 'small', 'medium']),
+
+  /** 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

@@ -59,7 +59,7 @@ HelpButton.propTypes = {
   iconSize: PropTypes.number,
 
   /** The size of the button ['small','medium','large'] */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
 
   /** 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/TillButton/index.js

@@ -0,0 +1,82 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import { ThemeProvider } from '@mui/system';
+import { createTheme, useTheme } from '@mui/material/styles';
+import { CustomFab } from '../CustomFab';
+import { ReusablePopupMenu } from '../../Menus/ReusablePopupMenu';
+/**
+ * Creates a till button from other PCM components to simplify the component.
+ * Uses:
+ *  - ReusablePopupMenu
+ *  - CustomFab
+ * This is the default till button used to control if the till is being used or not.
+ * The dropdown menu is provided as a prop by the consuming component see: ReusablePopupMenu
+ *
+ * ## Importing the component in your project
+ * 
+ ```js
+
+ import {TillButton} from 'pcm-shared-components';
+ 
+ ```
+ * 
+ */
+
+export const TillButton = props => {
+  const {
+    inUse,
+    name,
+    defaultText,
+    menuData,
+    size,
+    borderRadius,
+    theme
+  } = props;
+  const compTheme = theme ? theme : useTheme();
+  const defaultTheme = createTheme(compTheme);
+  const isTillInuse = name ? true : inUse ? true : false;
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: defaultTheme
+  }, /*#__PURE__*/React.createElement(ReusablePopupMenu, menuData, /*#__PURE__*/React.createElement(CustomFab, {
+    Icon: KeyboardArrowDownIcon,
+    color: isTillInuse ? 'primary' : 'secondary',
+    size: size,
+    boxShadow: false,
+    buttonText: `${defaultText} ${name ? ':' : ''} ${name}`,
+    iconLocation: 'right',
+    borderRadius: borderRadius
+  })));
+};
+export default /*#__PURE__*/memo(TillButton);
+TillButton.defaultProps = {
+  inUse: false,
+  name: '',
+  defaultText: 'Till',
+  menuData: [],
+  size: 'x-small',
+  borderRadius: 8,
+  theme: {}
+};
+TillButton.propTypes = {
+  /** Determines if a till is currently being used */
+  inUse: PropTypes.bool,
+
+  /** Name of the till being used. Note: if till name exist then inUse is true */
+  name: PropTypes.string,
+
+  /** Text used to identify the string in front of the till name. example: Till : Some name */
+  defaultText: PropTypes.string,
+
+  /** Menu items for the dropdown, see the ReusablePopupMenu component for a better understanding of the props parameters */
+  menuData: PropTypes.array,
+
+  /** Controls the border radius of the button's rounded ends */
+  borderRadius: PropTypes.number,
+
+  /** Supported size of the button ['x-small', 'small','medium'] */
+  size: PropTypes.oneOf(['x-small', 'small', 'medium']),
+
+  /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
+  theme: PropTypes.object
+};

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

@@ -63,7 +63,7 @@ const ReusableMenu = props => {
   })) : /*#__PURE__*/React.createElement(StyledMenuItem, {
     onClick: menu.onClick,
     key: `reusable_menu_item_${idx}`
-  }, /*#__PURE__*/React.createElement(ListItemIcon, null, menu.icon), /*#__PURE__*/React.createElement(ListItemText, {
+  }, menu.icon && /*#__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

package/dist/components/TextBoxes/SearchBar/index.js

@@ -0,0 +1,140 @@
+import { useState, useEffect } from "react";
+import { createTheme, ThemeProvider, useTheme } from "@mui/material/styles";
+import PropTypes from "prop-types";
+import Paper from "@mui/material/Paper";
+import InputBase from "@mui/material/InputBase";
+import IconButton from "@mui/material/IconButton";
+import SearchIcon from "@mui/icons-material/Search";
+import CloseIcon from "@mui/icons-material/Close";
+import clsx from "clsx";
+let searchDebounce;
+/**
+ * This will allow to add a quick search tool bar to filter out any ui object.
+ *
+ * ## Importing the component in your project
+ * 
+ ```js
+
+ import {SearchBar} from 'pcm-shared-components';
+ 
+ ```
+ * 
+ */
+
+export const SearchBar = props => {
+  // Extract the passed down props
+  const {
+    onCancelSearch,
+    onChange,
+    onChangeDebounce,
+    placeholder,
+    value,
+    disabled,
+    showDropdown,
+    className,
+    theme
+  } = props; //Hooks
+
+  const [localValue, setLocalValue] = useState(value); // Use the user specified theme passed via the props
+  // OR use the HOC theme passed downed by the parent component if the theme is undefined
+
+  const componentTheme = createTheme(theme ? theme : useTheme());
+  useEffect(() => {
+    if (value !== localValue) {
+      setLocalValue(value);
+    }
+  }, [value]);
+  useEffect(() => {
+    clearTimeout(searchDebounce);
+    searchDebounce = setTimeout(() => {
+      onChangeDebounce(localValue);
+    }, 700);
+  }, [localValue]);
+  return (
+    /*#__PURE__*/
+    // Wrap the component with the ThemeProvider so the specified theme is used
+    React.createElement(ThemeProvider, {
+      theme: componentTheme
+    }, /*#__PURE__*/React.createElement(Paper, {
+      elevation: showDropdown ? 1 : 0,
+      className: clsx(`${disabled ? "cursor-not-allowed" : "cursor-default"}`, "flex flex-row justify-between", className)
+    }, /*#__PURE__*/React.createElement(InputBase, {
+      sx: {
+        ml: 1,
+        flex: 1
+      },
+      placeholder: placeholder,
+      inputProps: {
+        "aria-label": "search google maps"
+      },
+      disabled: disabled,
+      value: localValue,
+      onChange: event => {
+        setLocalValue(event.target.value);
+        onChange(event.target.value);
+      },
+      onKeyDown: event => {
+        //Needed when used in a menu to prevent the menu items from being filtered by the key down strokes or else we loose focus when use in this type of component
+        event.stopPropagation();
+      }
+    }), localValue.length === 0 ? /*#__PURE__*/React.createElement(IconButton, {
+      sx: {
+        p: "10px"
+      },
+      "aria-label": "search",
+      disabled: disabled
+    }, /*#__PURE__*/React.createElement(SearchIcon, null)) : /*#__PURE__*/React.createElement(IconButton, {
+      sx: {
+        p: "10px"
+      },
+      "aria-label": "search",
+      disabled: disabled,
+      onClick: () => {
+        setLocalValue("");
+        onCancelSearch();
+      }
+    }, /*#__PURE__*/React.createElement(CloseIcon, null))))
+  );
+};
+export default SearchBar; // Specifies the default values for the props:
+
+SearchBar.defaultProps = {
+  onCancelSearch: () => {},
+  onChange: () => {},
+  onChangeDebounce: () => {},
+  placeholder: "Enter your search string",
+  value: "",
+  disabled: false,
+  showDropdown: true,
+  className: "",
+  theme: undefined
+}; // Specifies the types to use for each props:
+
+SearchBar.propTypes = {
+  /** Fired when the search is cancelled.  */
+  onCancelSearch: PropTypes.object,
+
+  /** Fired when the text value changes. Returns the new value */
+  onChange: PropTypes.object,
+
+  /** Same as onChange except only fires 700ms after the users has completed typing to prevent performance issues. Returns the new value */
+  onChangeDebounce: PropTypes.object,
+
+  /** Sets placeholder text for the embedded text field. */
+  placeholder: PropTypes.string,
+
+  /** The value of the text field. */
+  value: PropTypes.string,
+
+  /** Disables text field.  */
+  disabled: PropTypes.bool,
+
+  /** Show the dropdown around the text field component  */
+  showDropdown: PropTypes.bool,
+
+  /** Override or extend the styles applied to the component.  */
+  className: PropTypes.string,
+
+  /** The manual theme to apply to the component */
+  theme: PropTypes.object
+};

package/dist/index.js

@@ -12,4 +12,7 @@ import SimpleTab from './components/Layout/SimpleTab';
 import HrefLink from './components/Links/HrefLink';
 import GenericAppBar from './components/Dialogs/GenericAppBar';
 import ReusablePopupMenu from './components/Menus/ReusablePopupMenu';
-export { TestButton, CodeHighlight, CustomFab, HelpButton, GenericDialogWindow, PcSharedComponentThemeInheritor, ImageCanvasDraw, PCMScrollbar, TwoColumnDisplay, SimpleTab, HrefLink, GenericAppBar, ReusablePopupMenu };
+import SearchBar from './components/TextBoxes/SearchBar';
+import TillButton from './components/Buttons/TillButton';
+import DropdownButton from './components/Buttons/DropdownButton';
+export { TestButton, CodeHighlight, CustomFab, HelpButton, GenericDialogWindow, PcSharedComponentThemeInheritor, ImageCanvasDraw, PCMScrollbar, TwoColumnDisplay, SimpleTab, HrefLink, GenericAppBar, ReusablePopupMenu, SearchBar, TillButton, DropdownButton };

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}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.mt-12{margin-top:1.2rem}.mr-12{margin-right: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-auto{width:auto}.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}
+*,: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}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.mt-12{margin-top:1.2rem}.mr-12{margin-right: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-auto{width:auto}.w-1\/2{width:50%}.w-2\/5{width:40%}.grow{flex-grow:1}.cursor-not-allowed{cursor:not-allowed}.cursor-default{cursor:default}.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{border-radius:.4rem}.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.107",
+  "version": "0.0.108",
   "private": false,
   "main": "dist/index.js",
   "babel": {
@@ -13,7 +13,7 @@
   ],
   "scripts": {
     "publishme": "npm publish",
-    "storybook": "start-storybook -p 6006",
+    "start": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "clean": "rm -rf dist",
     "clean-storybook": "rm -rf dist/**/**/*/storybook",