pcm-shared-components 0.0.11 → 0.0.14

package/README.md

@@ -1,3 +1,3 @@
 # Shared Components between client and admin portal
 
-
+The Library is published to NPM on the github build.

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

@@ -0,0 +1,120 @@
+import React, { memo } from 'react';
+import { makeStyles } from '@mui/styles';
+import Fab from '@mui/material/Fab';
+import PropTypes from 'prop-types';
+import Tooltip from '@mui/material/Tooltip';
+import clsx from 'clsx';
+const useStyles = makeStyles(() => ({
+  rootFabElement: {
+    margin: 2,
+    backgroundColor: ({
+      backgroundColor
+    }) => backgroundColor,
+    '&:hover': {
+      background: ({
+        hoverBackgroundColor
+      }) => hoverBackgroundColor,
+      color: ({
+        hoverTextColor
+      }) => hoverTextColor
+    },
+    boxShadow: ({
+      boxShadow
+    }) => boxShadow,
+    color: ({
+      textColor
+    }) => textColor
+  }
+}));
+
+const CustomFab = props => {
+  const {
+    onClick,
+    variant,
+    tooltipText,
+    size,
+    className,
+    backgroundColor,
+    color,
+    Icon,
+    buttonText,
+    iconLocation
+  } = props;
+  const classes = useStyles(props);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: tooltipText,
+    disableHoverListener: tooltipText && tooltipText.length === 0 ? true : false
+  }, /*#__PURE__*/React.createElement(Fab, {
+    size: size,
+    color: backgroundColor ? backgroundColor : color,
+    "aria-label": "add",
+    className: clsx(classes.rootFabElement, className),
+    variant: buttonText && buttonText.length > 0 ? 'extended' : variant,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `flex ${iconLocation === 'left' ? 'flex-row' : 'flex-row-reverse'}`
+  }, Icon && /*#__PURE__*/React.createElement(Icon, null), buttonText && buttonText.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "mx-6"
+  }, " ", buttonText))));
+};
+
+export default /*#__PURE__*/memo(CustomFab);
+CustomFab.defaultProps = {
+  onClick: () => {},
+  Icon: undefined,
+  iconLocation: 'left',
+  buttonText: '',
+  variant: 'circular',
+  boxShadow: PropTypes.oneOf(['none', undefined]),
+  size: 'small',
+  tooltipText: '',
+  backgroundColor: undefined,
+  hoverBackgroundColor: undefined,
+  textColor: 'textPrimary',
+  hoverTextColor: 'textPrimary',
+  className: '',
+  color: 'primary'
+};
+CustomFab.propTypes = {
+  /** onClick function passed to the button */
+  onClick: PropTypes.object,
+
+  /** Icon to be used in the button */
+  Icon: PropTypes.element,
+
+  /** Text inside of the button */
+  buttonText: PropTypes.string,
+
+  /** Either [circular or extended] if including text */
+  variant: PropTypes.oneOf(['extended', 'circular']),
+
+  /** Either [left or right] controls the location of the icon*/
+  iconLocation: PropTypes.oneOf(['left', 'right']),
+
+  /** The text to display in the tooltip */
+  tooltipText: PropTypes.string,
+
+  /** Display the drop shadow or not [none or undefined] */
+  boxShadow: PropTypes.string,
+
+  /** Background color */
+  backgroundColor: PropTypes.string,
+
+  /** On hover background color. */
+  hoverBackgroundColor: PropTypes.string,
+
+  /** Font color */
+  textColor: PropTypes.string,
+
+  /** The color of the text and icon on hover */
+  hoverTextColor: PropTypes.string,
+
+  /** Size of the FAB icon ['small','medium','large'] */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+
+  /** Classes to override */
+  className: PropTypes.string,
+
+  /** Theme colors if not using backgroundColor ['primary','secondary'] */
+  color: PropTypes.oneOf(['primary', 'secondary'])
+};

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

@@ -0,0 +1,47 @@
+import CustomFab from '../CustomFab/CustomFab';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import PropTypes from 'prop-types';
+export const HelpButton = props => {
+  const {
+    onClickLink,
+    className,
+    color,
+    tooltipText,
+    size
+  } = props;
+  return /*#__PURE__*/React.createElement(CustomFab, {
+    className: className,
+    Icon: HelpOutlineIcon,
+    tooltipText: tooltipText,
+    color: color,
+    size: size,
+    variant: 'round',
+    onClick: () => {
+      window.open(onClickLink, "_blank");
+    }
+  });
+};
+export default HelpButton;
+HelpButton.defaultProps = {
+  onClickLink: '',
+  className: '',
+  color: 'primary',
+  tooltipText: '',
+  size: 'large'
+};
+HelpButton.propTypes = {
+  /** On click link, it's the URL to navigate too */
+  onClickLink: PropTypes.string.isRequired,
+
+  /** className override */
+  className: PropTypes.string,
+
+  /** Theme color primary or secondary */
+  color: PropTypes.oneOf(['primary', 'secondary']),
+
+  /** Just a tooltip text */
+  tooltipText: PropTypes.string,
+
+  /** The size of the Icon ['small','medium','large'] */
+  size: PropTypes.oneOf(['small', 'medium', 'large'])
+};

package/dist/components/{Button → Buttons/TestButton}/index.js

@@ -1,8 +1,19 @@
 import React from "react";
-export const Button = () => {
+import PropTypes from 'prop-types';
+export const TestButton = props => {
+  const {
+    text = 'hey'
+  } = props;
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
-  }, "Button");
+  }, text);
 };
-export default Button;
+export default TestButton;
+TestButton.defaultProps = {
+  text: 'ballon'
+};
+TestButton.propTypes = {
+  /** onClick function passed to the button */
+  text: PropTypes.string
+};

package/dist/components/Tools/CodeHighlight/CodeHighlight.js

@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import * as Prism from 'prismjs';
+import { memo, useEffect, useRef } from 'react';
+import './prism-languages';
+import PropTypes from 'prop-types';
+export const CodeHighlight = props => {
+  const domNode = useRef(null);
+  const source = useRef(trimCode());
+  const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    function highlight() {
+      Prism.highlightElement(domNode.current, props.async);
+    }
+
+    highlight();
+  }, [props]);
+
+  function trimCode() {
+    let sourceString = props.children;
+
+    if (typeof sourceString === 'object' && sourceString.default) {
+      sourceString = sourceString.default;
+    } // Split the source into lines
+
+
+    const sourceLines = sourceString.split('\n'); // Remove the first and the last line of the source
+    // code if they are blank lines. This way, the html component
+
+    if (!sourceLines[0].trim()) {
+      sourceLines.shift();
+    }
+
+    if (!sourceLines[sourceLines.length - 1].trim()) {
+      sourceLines.pop();
+    } // Find the first non-whitespace char index in
+    // the first line of the source code
+
+
+    const indexOfFirstChar = sourceLines[0].search(/\S|$/); // Generate the trimmed source
+
+    let sourceRaw = ''; // Iterate through all the lines
+
+    sourceLines.forEach((line, index) => {
+      // Trim the beginning white space depending on the index
+      // and concat the source code
+      sourceRaw += line.substr(indexOfFirstChar, line.length); // If it's not the last line...
+
+      if (index !== sourceLines.length - 1) {
+        // Add a line break at the end
+        sourceRaw = `${sourceRaw}\n`;
+      }
+    });
+    return sourceRaw;
+  }
+
+  const ShowCopyTextButton = () => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-row justify-end w-full "
+    }, /*#__PURE__*/React.createElement("button", {
+      className: "hover:bg-gray-100/75 rounded-md px-2",
+      onClick: () => {
+        copyToClipboard(source.current);
+        setCopied(true);
+        setTimeout(() => {
+          setCopied(false);
+        }, 1500);
+      }
+    }, !copied ? 'Copy' : 'Copied'));
+  };
+
+  const copyToClipboard = text => {
+    navigator.clipboard.writeText(text);
+  };
+
+  const {
+    className,
+    component: Wrapper,
+    showCopyButton
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Wrapper, {
+    ref: domNode,
+    className: className
+  }, source.current), showCopyButton && /*#__PURE__*/React.createElement(ShowCopyTextButton, null));
+};
+export default /*#__PURE__*/memo(CodeHighlight); // Specifies the default values for the props:
+
+CodeHighlight.defaultProps = {
+  component: 'pre',
+  className: 'language-js',
+  showCopyButton: false
+}; // Type of
+
+CodeHighlight.propTypes = {
+  /**
+   * Specifies the wrapping element tag to use for the code wrapper
+   * 
+   *  pre = provides a nice wrapper for the code.
+   *  
+   *  code = only renders the code without the pre wrapper
+   */
+  component: PropTypes.oneOf(['pre', 'code']),
+
+  /**
+   * Specifies the class to use in order to properly highlight the languages
+   */
+  className: PropTypes.oneOf(['language-js', 'language-jsx', 'language-typescript', 'language-php', 'language-sass', 'language-scss', 'language-css', 'language-python', 'language-perl', 'language-json', 'language-csharp', 'language-cpp', 'language-c', 'language-diff']),
+
+  /**
+   * Any literal string inside the CodeHighlight component
+   * 
+   * Example: {`import React from 'react'`}
+   * 
+   */
+  children: PropTypes.string.isRequired,
+
+  /** 
+   * Displays a Copy button in the right bottom corner of the code to allow users to copy the displayed code.
+   */
+  showCopyButton: PropTypes.bool
+};

package/dist/components/Tools/CodeHighlight/prism-languages.js

@@ -0,0 +1,18 @@
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-cpp';
+import 'prismjs/components/prism-csharp';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-diff';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-markup-templating';
+import 'prismjs/components/prism-perl';
+import 'prismjs/components/prism-php';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-sass';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/prism';

package/dist/index.js

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

package/dist/styles/prism.css

@@ -0,0 +1,221 @@
+code[class*="language-"],
+pre[class*="language-"] {
+    text-align: left !important;
+    white-space: pre-wrap !important;
+    word-break: break-all !important;
+    word-wrap: break-word !important;
+    color: #c3cee3 !important;
+    background: #263238 !important;
+    font-family: Roboto Mono,"Liberation Mono",Menlo,Courier,monospace !important;
+    font-size: 1em !important;
+    line-height: 1.5 !important;
+    -moz-tab-size: 4 !important;
+    -o-tab-size: 4 !important;
+    tab-size: 4 !important;
+    -webkit-hyphens: none !important;
+    -moz-hyphens: none !important;
+    -ms-hyphens: none !important;
+    hyphens: none !important;
+    padding: 12px;
+    border-radius: 5px;
+}
+
+
+code[class*="language-"]::-moz-selection,
+pre[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection,
+pre[class*="language-"] ::-moz-selection {
+    background: #363636 !important;
+}
+
+code[class*="language-"]::selection,
+pre[class*="language-"]::selection,
+code[class*="language-"] ::selection,
+pre[class*="language-"] ::selection {
+    background: #363636 !important;
+}
+
+:not(pre) > code[class*="language-"] {
+    white-space: normal !important;
+    border-radius: 0.2em !important;
+    padding: 0.1em !important;
+}
+
+pre[class*="language-"] {
+    overflow: auto !important;
+    position: relative !important;
+    padding: 10px !important;
+    border-radius: 16px !important;
+}
+
+.language-css > code,
+.language-sass > code,
+.language-scss > code {
+    color: #fd9170 !important;
+}
+
+[class*="language-"] .namespace {
+    opacity: 0.7 !important;
+}
+
+.token.plain-text {
+    color: #c3cee3 !important;
+}
+
+.token.atrule {
+    color: #c792ea !important;
+}
+
+.token.attr-name {
+    color: #ffcb6b !important;
+}
+
+.token.attr-value {
+    color: #c3e88d !important;
+}
+
+.token.attribute {
+    color: #c3e88d !important;
+}
+
+.token.boolean {
+    color: #c792ea !important;
+}
+
+.token.builtin {
+    color: #ffcb6b !important;
+}
+
+.token.cdata {
+    color: #80cbc4 !important;
+}
+
+.token.char {
+    color: #80cbc4 !important;
+}
+
+.token.class {
+    color: #ffcb6b !important;
+}
+
+.token.class-name {
+    color: #82aaff !important;
+}
+
+.token.color {
+    color: #f2ff00 !important;
+}
+
+.token.comment {
+    color: #5cd15c !important;
+}
+
+.token.constant {
+    color: #c792ea !important;
+}
+
+.token.deleted {
+    color: #f07178 !important;
+}
+
+.token.doctype {
+    color: #546e7a !important;
+}
+
+.token.entity {
+    color: #f07178 !important;
+}
+
+.token.function {
+    color: #c792ea !important;
+}
+
+.token.hexcode {
+    color: #f2ff00 !important;
+}
+
+.token.id {
+    color: #c792ea !important;
+    font-weight: bold !important;
+}
+
+.token.important {
+    color: #c792ea !important;
+    font-weight: bold !important;
+}
+
+.token.inserted {
+    color: #80cbc4 !important;
+}
+
+.token.keyword {
+    color: #c792ea !important;
+    font-style: italic !important;
+}
+
+.token.number {
+    color: #fd9170 !important;
+}
+
+.token.operator {
+    color: #89ddff !important;
+}
+
+.token.prolog {
+    color: #546e7a !important;
+}
+
+.token.property {
+    color: #80cbc4 !important;
+}
+
+.token.pseudo-class {
+    color: #c3e88d !important;
+}
+
+.token.pseudo-element {
+    color: #c3e88d !important;
+}
+
+.token.punctuation {
+    color: #89ddff !important;
+}
+
+.token.regex {
+    color: #f2ff00 !important;
+}
+
+.token.selector {
+    color: #f07178 !important;
+}
+
+.token.string {
+    color: #c3e88d !important;
+}
+
+.token.symbol {
+    color: #c792ea !important;
+}
+
+.token.tag {
+    color: #f07178 !important;
+}
+
+.token.unit {
+    color: #f07178 !important;
+}
+
+.token.url {
+    color: #fd9170 !important;
+}
+
+.token.variable {
+    color: #f07178 !important;
+}
+
+
+
+/* Markdown code highlight override */
+pre span, code span{
+    color:#929292 !important;
+}

package/dist/styles/tailwind.css

@@ -1 +1 @@
-/*! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #eee}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Muli,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#bdbdbd}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#bdbdbd}input::placeholder,textarea::placeholder{opacity:1;color:#bdbdbd}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,: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}.inline-flex{display:inline-flex}.items-center{align-items:center}.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}.text-sm{font-size:1.4rem;line-height:2rem}.font-medium{font-weight:500}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(56 142 60/var(--tw-bg-opacity))}.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}
+/*! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #eee}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Muli,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#bdbdbd}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#bdbdbd}input::placeholder,textarea::placeholder{opacity:1;color:#bdbdbd}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,: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}.mx-6{margin-left:.6rem;margin-right:.6rem}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.mb-6{margin-bottom:.6rem}.ml-6{margin-left:.6rem}.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}.items-center{align-items:center}.justify-end{justify-content:flex-end}.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)}.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,15 +1,11 @@
 {
   "name": "pcm-shared-components",
-  "version": "0.0.11",
+  "version": "0.0.14",
   "private": false,
   "main": "dist/index.js",
   "babel": {
     "presets": [
       "@babel/preset-react"
-    ],
-    "ignore": [
-      "**/*.stories.js",
-      "**/*.stories.mdx"
     ]
   },
   "files": [
@@ -21,7 +17,7 @@
     "build-storybook": "build-storybook",
     "clean": "rm -rf dist",
     "build-tailwind": "NODE_ENV=production npx tailwindcss -o ./dist/styles/tailwind.css --minify",
-    "build": "npm run clean && NODE_ENV=production babel src/ --out-dir dist && npm run build-tailwind"
+    "build": "npm run clean && NODE_ENV=production babel src/ --out-dir dist --ignore '**/*.stories.js' --ignore '**/*.stories.mdx' --ignore '**/*.docs.js' && npm run build-tailwind && cp ./src/styles/prism.css ./dist/styles/"
   },
   "peerDependencies": {
     "react": "^17.0.2",
@@ -52,12 +48,15 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
     "@mdi/js": "^6.5.95",
     "@mdi/react": "^1.5.0",
     "@mdx-js/loader": "^2.0.0",
     "@mui/icons-material": "^5.3.1",
     "@mui/material": "^5.3.1",
     "@mui/styles": "^5.3.0",
+    "clsx": "^1.1.1",
     "moment": "^2.29.1"
   }
 }