@manuscripts/style-guide 1.7.1 → 1.7.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -18,53 +18,39 @@
     "build": "npm-run-all --parallel 'build:* --project tsconfig.build.json'",
     "build:cjs": "tsc --outDir dist/cjs --module commonjs",
     "build:es": "tsc --outDir dist/es --declarationDir dist/types --declaration",
-    "build-storybook": "build-storybook",
+    "build-storybook": "storybook build",
     "dev": "npm-run-all --parallel 'build:* --project tsconfig.build.json --watch'",
     "lint": "eslint src stories --ext .ts,.tsx --max-warnings=0",
     "lint:fix": "eslint src stories --fix --ext .ts,.tsx --max-warnings=0",
     "prebuild": "rimraf dist",
     "prettier": "prettier --write \"{src,stories}/**/*.{ts,tsx}\"",
     "preversion": "npm-run-all --parallel lint typecheck test",
-    "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006",
+    "storybook": "storybook dev -p 6006",
     "test": "jest",
     "typecheck": "tsc --noEmit",
     "version": "yarn build",
     "prepare": "husky install"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.3",
-    "@formatjs/intl-relativetimeformat": "^4.5.9",
-    "@formatjs/intl-utils": "^2.2.0",
-    "@manuscripts/assets": "^0.6.2",
-    "@manuscripts/transform": "2.0.4",
+    "@manuscripts/assets": "^0.6.4",
     "@manuscripts/json-schema": "^2.2.2",
-    "@reach/tabs": "^0.11.2",
+    "@manuscripts/transform": "2.0.4",
+    "@reach/tabs": "^0.18.0",
+    "date-fns": "^2.29.3",
     "formik": "^2.2.9",
     "fuzzysort": "^2.0.4",
-    "date-fns": "^2.29.3",
-    "lodash-es": "^4.17.21",
-    "tooltip.js": "^1.3.3",
-    "typeface-lato": "^1.1.13",
-    "prosemirror-commands": "^1.5.0",
-    "prosemirror-history": "^1.3.0",
-    "prosemirror-inputrules": "^1.2.0",
-    "prosemirror-keymap": "^1.2.0",
-    "prosemirror-model": "^1.18.3",
-    "prosemirror-state": "^1.4.2",
-    "prosemirror-transform": "^1.7.0",
+    "lodash": "^4.17.21",
     "react": "^17.0.2",
-    "react-color": "^2.19.3",
     "react-dnd": "^11.1.3",
     "react-dnd-html5-backend": "^11.1.3",
     "react-dom": "^17.0.2",
-    "react-intl": "^3.12.0",
-    "react-modal": "^3.11.2",
-    "react-modern-calendar-datepicker": "^3.1.3",
-    "react-popper": "^1.3.11",
-    "react-router-dom": "^5.2.0",
+    "react-is": "^17.0.2",
+    "react-modal": "^3.16.1",
+    "react-modern-calendar-datepicker": "^3.1.6",
+    "react-router-dom": "^5.3.4",
     "react-select": "^5.7.3",
-    "react-sizeme": "^2.6.12",
-    "react-tooltip": "^4.2.11",
+    "react-sizeme": "^3.0.2",
+    "react-tooltip": "^5.26.0",
     "styled-components": "^5.2.0"
   },
   "devDependencies": {
@@ -72,21 +58,20 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@inline-svg-unique-id/react": "^1.2.3",
     "@manuscripts/eslint-config": "^0.5.1",
-    "@storybook/addon-actions": "^6.5.15",
-    "@storybook/addons": "^6.5.15",
-    "@storybook/core": "^6.5.15",
-    "@storybook/react": "^6.5.15",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/blocks": "^7.6.10",
+    "@storybook/react": "^7.6.10",
+    "@storybook/react-webpack5": "^7.6.10",
+    "@storybook/test": "^7.6.10",
     "@types/jest": "^29.2.4",
-    "@types/lodash-es": "^4.17.6",
-    "@types/react": "^16.9.52",
-    "@types/react-color": "^3.0.6",
-    "@types/react-dom": "^16.9.8",
-    "@types/react-modal": "^3.10.6",
-    "@types/react-router-dom": "^5.1.6",
+    "@types/lodash": "^4.14.202",
     "@types/styled-components": "^5.1.4",
-    "@types/uuid": "^9.0.0",
+    "@types/react-dom": "^17.0.2",
+    "@types/react-modal": "^3.16.3",
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^5.47.0",
     "@typescript-eslint/parser": "^5.47.0",
     "babel-jest": "^29.3.1",
@@ -103,15 +88,19 @@
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "husky": "^8.0.2",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.1",
     "rimraf": "^3.0.0",
+    "storybook": "^7.6.10",
+    "typeface-lato": "^1.1.13",
     "typescript": "^4.4.4"
   },
   "resolutions": {
-    "@types/react": "^17.0.2"
+    "@types/react": "^17.0.2",
+    "jackspeak": "2.1.1"
   }
 }

package/dist/cjs/components/ColorField/ColorField.js

@@ -1,49 +0,0 @@
-"use strict";
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorField = void 0;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const ColorSelector_1 = require("./ColorSelector");
-const ColorField = ({ options, value, handleChange, }) => (react_1.default.createElement(Container, null,
-    options.map((color) => (react_1.default.createElement(ItemButton, { key: color.value, type: "button", color: color.value, isActive: value === color.value, onClick: () => handleChange(color.value) }))),
-    react_1.default.createElement(ColorSelector_1.ColorSelector, { handleChange: handleChange })));
-exports.ColorField = ColorField;
-const Container = styled_components_1.default.div `
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-`;
-const ItemButton = styled_components_1.default.button `
-  background: ${(props) => props.color};
-  box-shadow: ${(props) => (props.isActive ? '0 0 1px 1px #000' : 'none')};
-  height: ${(props) => props.theme.grid.unit * 3}px;
-  width: ${(props) => props.theme.grid.unit * 3}px;
-  border-radius: 50%;
-  margin: 2px;
-  padding: 0;
-  border: 1px solid ${(props) => props.theme.colors.border.tertiary};
-  cursor: pointer;
-  flex-shrink: 0;
-
-  /*  &:focus {
-    outline: none;
-  }*/
-`;

package/dist/cjs/components/ColorField/ColorSelector.js

@@ -1,115 +0,0 @@
-"use strict";
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorSelector = void 0;
-const react_1 = __importStar(require("react"));
-const react_color_1 = require("react-color");
-const react_popper_1 = require("react-popper");
-const styled_components_1 = __importDefault(require("styled-components"));
-const Button_1 = require("../Button");
-const ColorSelector = ({ handleChange }) => {
-    const [open, setOpen] = (0, react_1.useState)(false);
-    const [color, setColor] = (0, react_1.useState)('#ffffff');
-    const toggleOpen = (0, react_1.useCallback)(() => {
-        setOpen((open) => !open);
-    }, [setOpen]);
-    const handleSave = (0, react_1.useCallback)(() => {
-        if (color) {
-            handleChange(color);
-        }
-        setOpen(false);
-    }, [color, handleChange, setOpen]);
-    const handleColorChange = (0, react_1.useCallback)((color) => {
-        setColor(color.hex);
-    }, [setColor]);
-    const handleCancel = (0, react_1.useCallback)(() => {
-        setOpen(false);
-    }, [setOpen]);
-    return (react_1.default.createElement(react_popper_1.Manager, null,
-        react_1.default.createElement(react_popper_1.Reference, null, ({ ref }) => (react_1.default.createElement(AddButton, { ref: ref, type: 'button', onClick: toggleOpen }, "+"))),
-        open && (react_1.default.createElement(react_popper_1.Popper, { placement: 'left' }, ({ ref, style, placement }) => (react_1.default.createElement("div", { ref: ref, style: Object.assign(Object.assign({}, style), { zIndex: 10 }), "data-placement": placement },
-            react_1.default.createElement(PopperContent, null,
-                react_1.default.createElement(react_color_1.ChromePicker, { onChangeComplete: handleColorChange, color: color }),
-                react_1.default.createElement(Actions, null,
-                    react_1.default.createElement(Button_1.PrimaryButton, { mini: true, onClick: handleSave }, "Add color"),
-                    react_1.default.createElement(Button_1.SecondaryButton, { mini: true, onClick: handleCancel }, "Cancel")))))))));
-};
-exports.ColorSelector = ColorSelector;
-const Actions = styled_components_1.default.div `
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-const PopperContent = styled_components_1.default.div `
-  border: 1px solid ${(props) => props.theme.colors.text.muted};
-  border-radius: ${(props) => props.theme.grid.radius.small};
-  box-shadow: ${(props) => props.theme.shadow.dropShadow};
-  background: ${(props) => props.theme.colors.background.primary};
-  padding: ${(props) => props.theme.grid.unit * 2}px;
-
-  .chrome-picker {
-    box-shadow: none !important;
-  }
-`;
-const AddButton = styled_components_1.default.button `
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 50%;
-  width: ${(props) => props.theme.grid.unit * 4}px;
-  height: ${(props) => props.theme.grid.unit * 4}px;
-  margin: 2px;
-  cursor: pointer;
-  line-height: 0;
-  font-size: ${(props) => props.theme.font.size.medium};
-
-  :hover {
-    border-color: ${(props) => props.theme.colors.border.secondary};
-  }
-
-  :focus {
-    outline: none;
-  }
-`;

package/dist/cjs/components/ColorField/index.js

@@ -1,32 +0,0 @@
-"use strict";
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ColorField"), exports);

package/dist/cjs/components/Tip.js

@@ -1,83 +0,0 @@
-"use strict";
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tip = void 0;
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const tooltip_js_1 = __importDefault(require("tooltip.js"));
-const TipContainer = styled_components_1.default.div `
-  align-items: center;
-  display: flex;
-  font-family: ${(props) => props.theme.font.family.sans};
-  justify-content: center;
-`;
-const Tip = ({ children, placement, title, }) => {
-    const [tooltip, setTooltip] = (0, react_1.useState)();
-    (0, react_1.useEffect)(() => () => {
-        if (tooltip) {
-            tooltip.dispose();
-        }
-    }, [tooltip]);
-    const createTooltip = (0, react_1.useCallback)((node) => {
-        if (node) {
-            setTooltip(new tooltip_js_1.default(node, {
-                placement,
-                title,
-                container: document.body,
-                boundariesElement: 'window',
-            }));
-        }
-    }, [setTooltip, placement, title]);
-    const show = (0, react_1.useCallback)(() => {
-        if (tooltip) {
-            tooltip.show();
-        }
-    }, [tooltip]);
-    const hide = (0, react_1.useCallback)(() => {
-        if (tooltip) {
-            tooltip.hide();
-        }
-    }, [tooltip]);
-    return (react_1.default.createElement(TipContainer, { ref: createTooltip, onMouseEnter: show, onMouseLeave: hide }, children));
-};
-exports.Tip = Tip;

package/dist/es/components/ColorField/ColorField.js

@@ -1,42 +0,0 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-import styled from 'styled-components';
-import { ColorSelector } from './ColorSelector';
-export const ColorField = ({ options, value, handleChange, }) => (React.createElement(Container, null,
-    options.map((color) => (React.createElement(ItemButton, { key: color.value, type: "button", color: color.value, isActive: value === color.value, onClick: () => handleChange(color.value) }))),
-    React.createElement(ColorSelector, { handleChange: handleChange })));
-const Container = styled.div `
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-`;
-const ItemButton = styled.button `
-  background: ${(props) => props.color};
-  box-shadow: ${(props) => (props.isActive ? '0 0 1px 1px #000' : 'none')};
-  height: ${(props) => props.theme.grid.unit * 3}px;
-  width: ${(props) => props.theme.grid.unit * 3}px;
-  border-radius: 50%;
-  margin: 2px;
-  padding: 0;
-  border: 1px solid ${(props) => props.theme.colors.border.tertiary};
-  cursor: pointer;
-  flex-shrink: 0;
-
-  /*  &:focus {
-    outline: none;
-  }*/
-`;

package/dist/es/components/ColorField/ColorSelector.js

@@ -1,85 +0,0 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React, { useCallback, useState } from 'react';
-import { ChromePicker } from 'react-color';
-import { Manager, Popper, Reference } from 'react-popper';
-import styled from 'styled-components';
-import { PrimaryButton, SecondaryButton } from '../Button';
-export const ColorSelector = ({ handleChange }) => {
-    const [open, setOpen] = useState(false);
-    const [color, setColor] = useState('#ffffff');
-    const toggleOpen = useCallback(() => {
-        setOpen((open) => !open);
-    }, [setOpen]);
-    const handleSave = useCallback(() => {
-        if (color) {
-            handleChange(color);
-        }
-        setOpen(false);
-    }, [color, handleChange, setOpen]);
-    const handleColorChange = useCallback((color) => {
-        setColor(color.hex);
-    }, [setColor]);
-    const handleCancel = useCallback(() => {
-        setOpen(false);
-    }, [setOpen]);
-    return (React.createElement(Manager, null,
-        React.createElement(Reference, null, ({ ref }) => (React.createElement(AddButton, { ref: ref, type: 'button', onClick: toggleOpen }, "+"))),
-        open && (React.createElement(Popper, { placement: 'left' }, ({ ref, style, placement }) => (React.createElement("div", { ref: ref, style: Object.assign(Object.assign({}, style), { zIndex: 10 }), "data-placement": placement },
-            React.createElement(PopperContent, null,
-                React.createElement(ChromePicker, { onChangeComplete: handleColorChange, color: color }),
-                React.createElement(Actions, null,
-                    React.createElement(PrimaryButton, { mini: true, onClick: handleSave }, "Add color"),
-                    React.createElement(SecondaryButton, { mini: true, onClick: handleCancel }, "Cancel")))))))));
-};
-const Actions = styled.div `
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-const PopperContent = styled.div `
-  border: 1px solid ${(props) => props.theme.colors.text.muted};
-  border-radius: ${(props) => props.theme.grid.radius.small};
-  box-shadow: ${(props) => props.theme.shadow.dropShadow};
-  background: ${(props) => props.theme.colors.background.primary};
-  padding: ${(props) => props.theme.grid.unit * 2}px;
-
-  .chrome-picker {
-    box-shadow: none !important;
-  }
-`;
-const AddButton = styled.button `
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 50%;
-  width: ${(props) => props.theme.grid.unit * 4}px;
-  height: ${(props) => props.theme.grid.unit * 4}px;
-  margin: 2px;
-  cursor: pointer;
-  line-height: 0;
-  font-size: ${(props) => props.theme.font.size.medium};
-
-  :hover {
-    border-color: ${(props) => props.theme.colors.border.secondary};
-  }
-
-  :focus {
-    outline: none;
-  }
-`;

package/dist/es/components/ColorField/index.js

@@ -1,16 +0,0 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export * from './ColorField';

package/dist/es/components/FileManager/Tooltip.js

@@ -1,20 +0,0 @@
-import ReactTooltip from 'react-tooltip';
-import styled from 'styled-components';
-export const Tooltip = styled(ReactTooltip) `
-  &.tooltip {
-    font-size: 12px;
-    line-height: 16px;
-    font-family: ${(props) => props.theme.font.family.Lato};
-    padding: 8px;
-    border-radius: 6px;
-    background: #353535;
-    color: ${(props) => props.theme.colors.text.onDark};
-    text-align: center;
-    white-space: nowrap;
-    pointer-events: none;
-
-    &.place-bottom::after {
-      background: #353535;
-    }
-  }
-`;

package/dist/es/components/Tip.js

@@ -1,53 +0,0 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React, { useCallback, useEffect, useState } from 'react';
-import styled from 'styled-components';
-import Tooltip from 'tooltip.js';
-const TipContainer = styled.div `
-  align-items: center;
-  display: flex;
-  font-family: ${(props) => props.theme.font.family.sans};
-  justify-content: center;
-`;
-export const Tip = ({ children, placement, title, }) => {
-    const [tooltip, setTooltip] = useState();
-    useEffect(() => () => {
-        if (tooltip) {
-            tooltip.dispose();
-        }
-    }, [tooltip]);
-    const createTooltip = useCallback((node) => {
-        if (node) {
-            setTooltip(new Tooltip(node, {
-                placement,
-                title,
-                container: document.body,
-                boundariesElement: 'window',
-            }));
-        }
-    }, [setTooltip, placement, title]);
-    const show = useCallback(() => {
-        if (tooltip) {
-            tooltip.show();
-        }
-    }, [tooltip]);
-    const hide = useCallback(() => {
-        if (tooltip) {
-            tooltip.hide();
-        }
-    }, [tooltip]);
-    return (React.createElement(TipContainer, { ref: createTooltip, onMouseEnter: show, onMouseLeave: hide }, children));
-};

package/dist/types/components/ColorField/ColorField.d.ts

@@ -1,27 +0,0 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { Color } from '@manuscripts/json-schema';
-import React from 'react';
-type ColorReq = Partial<Color> & {
-    value: string;
-};
-interface Props {
-    options: ColorReq[];
-    value: string;
-    handleChange: (color?: string) => void;
-}
-export declare const ColorField: React.FC<Props>;
-export {};