tenjin-ui-kit 0.3.73 → 0.3.76

package/README.md

@@ -1,13 +1,13 @@
-# Tenjin UI Kit
-
-The Tenjin UI kit ships a set of pre-built components that can be used while building user interfaces for Tenjin.
-
-## Installation
-
-In the project directory, you can run:
-
-    npm install tenjin-ui-kit
-
-## Usage
-
-The [Tenjin UI Kit](https://tenjin-ui-kit.netlify.app) storybook gives clear documentation on how to use the Tenjin UI Kit.
+# Tenjin UI Kit
+
+The Tenjin UI kit ships a set of pre-built components that can be used while building user interfaces for Tenjin.
+
+## Installation
+
+In the project directory, you can run:
+
+    npm install tenjin-ui-kit
+
+## Usage
+
+The [Tenjin UI Kit](https://tenjin-ui-kit.netlify.app) storybook gives clear documentation on how to use the Tenjin UI Kit.

package/components/RightContext/index.css

@@ -1,20 +1,20 @@
-.contextContainer {
-  z-index: 1;
-  width: 100%;
-  height: 500px;
-  background: #673ab7;
-}
-.rightClick {
-  z-index: 12;
-  position: fixed;
-  background: rgb(240, 200, 1);
-}
-.menuElement {
-  color: #222222;
-  cursor: pointer;
-  padding: 17px 36px;
-}
-.menuElement:hover {
-  color: #fff;
-  background: #009688;
-}
+.contextContainer {
+  z-index: 1;
+  width: 100%;
+  height: 500px;
+  background: #673ab7;
+}
+.rightClick {
+  z-index: 12;
+  position: fixed;
+  background: rgb(240, 200, 1);
+}
+.menuElement {
+  color: #222222;
+  cursor: pointer;
+  padding: 17px 36px;
+}
+.menuElement:hover {
+  color: #fff;
+  background: #009688;
+}

package/components/browsingTestCaseLayout/style.css

@@ -1,82 +1,82 @@
-:root {
-  --box-width: 200px;
-}
-
-body {
-  margin: 40px;
-}
-
-.wrapper {
-  background-color: #fff;
-  color: #444;
-  display: flex;
-}
-
-.box {
-  background-color: #444;
-  color: #fff;
-  border-radius: 5px;
-  padding: 20px;
-  font-size: 12px;
-
-  box-sizing: border-box;
-
-  flex: 1 1 auto;
-}
-
-.handler {
-  width: 20px;
-  padding: 0;
-  cursor: ew-resize;
-  flex: 0 0 auto;
-}
-
-.handler::before {
-  content: "";
-  display: block;
-  width: 2px;
-  height: calc(100vh - 34px);
-  background: #c0c0c0;
-  margin: 0 auto;
-}
-
-.arrowButton {
-  display: flex;
-  justify-content: flex-end;
-  /* transition: 0.4s; */
-  width: 100%;
-}
-
-.verticalText {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  writing-mode: vertical-lr;
-  text-orientation: mixed;
-  transform: rotate(180deg);
-  font-size: 1.3rem;
-}
-
-.leftWrapper {
-  background-color: #fff;
-  color: black;
-  border-radius: 5px;
-  padding: 0rem 0.5rem;
-  font-size: 12px;
-  box-sizing: border-box;
-  flex: 1 1 auto;
-  min-width: var(--box-width);
-  flex-grow: 0;
-}
-
-.rightWrapper {
-  background-color: #fff;
-  color: black;
-  border-radius: 5px;
-  padding: 0rem 0.5rem;
-  font-size: 12px;
-  box-sizing: border-box;
-  flex: 1 1 auto;
-  min-width: var(--box-width);
-  flex-grow: 1;
-}
+:root {
+  --box-width: 200px;
+}
+
+body {
+  margin: 40px;
+}
+
+.wrapper {
+  background-color: #fff;
+  color: #444;
+  display: flex;
+}
+
+.box {
+  background-color: #444;
+  color: #fff;
+  border-radius: 5px;
+  padding: 20px;
+  font-size: 12px;
+
+  box-sizing: border-box;
+
+  flex: 1 1 auto;
+}
+
+.handler {
+  width: 20px;
+  padding: 0;
+  cursor: ew-resize;
+  flex: 0 0 auto;
+}
+
+.handler::before {
+  content: "";
+  display: block;
+  width: 2px;
+  height: calc(100vh - 34px);
+  background: #c0c0c0;
+  margin: 0 auto;
+}
+
+.arrowButton {
+  display: flex;
+  justify-content: flex-end;
+  /* transition: 0.4s; */
+  width: 100%;
+}
+
+.verticalText {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  writing-mode: vertical-lr;
+  text-orientation: mixed;
+  transform: rotate(180deg);
+  font-size: 1.3rem;
+}
+
+.leftWrapper {
+  background-color: #fff;
+  color: black;
+  border-radius: 5px;
+  padding: 0rem 0.5rem;
+  font-size: 12px;
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  min-width: var(--box-width);
+  flex-grow: 0;
+}
+
+.rightWrapper {
+  background-color: #fff;
+  color: black;
+  border-radius: 5px;
+  padding: 0rem 0.5rem;
+  font-size: 12px;
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  min-width: var(--box-width);
+  flex-grow: 1;
+}

package/components/combobox/index.js

@@ -219,144 +219,144 @@ const Combobox = _ref5 => {
   }, helperText));
 };
 Combobox.propTypes = {
-  /**
-   * Array of option objects to display in the dropdown.
-   * Each option should be an object containing at minimum the key specified by `by` prop
-   * and the key specified by `labelKey` prop.
-   *
-   * @example
-   * options={[
-   *   { id: 1, label: "Option 1", value: "opt1" },
-   *   { id: 2, label: "Option 2", value: "opt2" }
-   * ]}
+  /**
+   * Array of option objects to display in the dropdown.
+   * Each option should be an object containing at minimum the key specified by `by` prop
+   * and the key specified by `labelKey` prop.
+   *
+   * @example
+   * options={[
+   *   { id: 1, label: "Option 1", value: "opt1" },
+   *   { id: 2, label: "Option 2", value: "opt2" }
+   * ]}
    */
   options: _propTypes.default.arrayOf(_propTypes.default.object),
-  /**
-   * Controlled selected value. When provided, the component operates in controlled mode.
-   * Should be one of the objects from the `options` array.
-   * The component will match this object to options using the `by` prop.
-   *
-   * @example
-   * selected={{ id: 1, label: "Option 1" }}
+  /**
+   * Controlled selected value. When provided, the component operates in controlled mode.
+   * Should be one of the objects from the `options` array.
+   * The component will match this object to options using the `by` prop.
+   *
+   * @example
+   * selected={{ id: 1, label: "Option 1" }}
    */
   selected: _propTypes.default.object,
-  /**
-   * Default value for uncontrolled mode. Can be either:
-   * - A complete option object from the options array
-   * - A primitive value (string/number) matching the `by` key of an option
-   *
-   * The component will automatically find and select the matching option from the options array.
-   * This prop is only used for initial render and is ignored if `selected` prop is provided.
-   *
-   * @example
-   * // Using a primitive ID
-   * defaultValue={1}
-   *
-   * // Using a complete object
-   * defaultValue={{ id: 1, label: "Option 1" }}
+  /**
+   * Default value for uncontrolled mode. Can be either:
+   * - A complete option object from the options array
+   * - A primitive value (string/number) matching the `by` key of an option
+   *
+   * The component will automatically find and select the matching option from the options array.
+   * This prop is only used for initial render and is ignored if `selected` prop is provided.
+   *
+   * @example
+   * // Using a primitive ID
+   * defaultValue={1}
+   *
+   * // Using a complete object
+   * defaultValue={{ id: 1, label: "Option 1" }}
    */
   defaultValue: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string, _propTypes.default.number]),
-  /**
-   * Label text to display above the combobox input field.
-   * If not provided, no label will be rendered.
-   *
-   * @example
-   * label="Select a category"
+  /**
+   * Label text to display above the combobox input field.
+   * If not provided, no label will be rendered.
+   *
+   * @example
+   * label="Select a category"
    */
   label: _propTypes.default.string,
-  /**
-   * HTML id attribute for the input element.
-   * Useful for accessibility (connecting labels) and form handling.
-   *
-   * @example
-   * id="category-select"
+  /**
+   * HTML id attribute for the input element.
+   * Useful for accessibility (connecting labels) and form handling.
+   *
+   * @example
+   * id="category-select"
    */
   id: _propTypes.default.string,
-  /**
-   * Indicates if the field is required.
-   * When true, displays a red asterisk (*) next to the label.
-   * Note: This is only visual - you must handle validation separately.
-   *
-   * @example
-   * isRequired={true}
+  /**
+   * Indicates if the field is required.
+   * When true, displays a red asterisk (*) next to the label.
+   * Note: This is only visual - you must handle validation separately.
+   *
+   * @example
+   * isRequired={true}
    */
   isRequired: _propTypes.default.bool,
-  /**
-   * Callback function invoked when the selected value changes.
-   * Receives the complete selected option object as its argument (not just the ID).
-   * Called with `null` when selection is cleared.
-   *
-   * @param {Object|null} selectedOption - The complete selected option object or null
-   *
-   * @example
-   * onChange={(option) => {
-   *   console.log("Selected:", option);
-   *   // option will be like: { id: 1, label: "Option 1", value: "opt1" }
-   * }}
+  /**
+   * Callback function invoked when the selected value changes.
+   * Receives the complete selected option object as its argument (not just the ID).
+   * Called with `null` when selection is cleared.
+   *
+   * @param {Object|null} selectedOption - The complete selected option object or null
+   *
+   * @example
+   * onChange={(option) => {
+   *   console.log("Selected:", option);
+   *   // option will be like: { id: 1, label: "Option 1", value: "opt1" }
+   * }}
    */
   onChange: _propTypes.default.func,
-  /**
-   * Error state flag. When true:
-   * - Input border becomes red
-   * - Helper text (if provided) becomes red
-   * - Dropdown icon becomes red
-   * Use this to indicate validation errors.
-   *
-   * @example
-   * error={formErrors.category !== undefined}
+  /**
+   * Error state flag. When true:
+   * - Input border becomes red
+   * - Helper text (if provided) becomes red
+   * - Dropdown icon becomes red
+   * Use this to indicate validation errors.
+   *
+   * @example
+   * error={formErrors.category !== undefined}
    */
   error: _propTypes.default.bool,
-  /**
-   * Helper text displayed below the input field.
-   * Can be used for:
-   * - Field descriptions/instructions (when error is false)
-   * - Error messages (when error is true)
-   * Color automatically adjusts based on error state.
-   *
-   * @example
-   * helperText={error ? "Please select a category" : "Choose your preferred category"}
+  /**
+   * Helper text displayed below the input field.
+   * Can be used for:
+   * - Field descriptions/instructions (when error is false)
+   * - Error messages (when error is true)
+   * Color automatically adjusts based on error state.
+   *
+   * @example
+   * helperText={error ? "Please select a category" : "Choose your preferred category"}
    */
   helperText: _propTypes.default.string,
-  /**
-   * Loading state flag. When true:
-   * - Displays a loading spinner instead of dropdown arrow
-   * - Shows "Loading..." placeholder text
-   * - Disables the input (prevents user interaction)
-   * - Prevents dropdown from opening
-   * - Input background becomes gray
-   *
-   * Use this when fetching options from an API or performing async operations.
-   *
-   * @example
-   * loading={isLoadingOptions}
+  /**
+   * Loading state flag. When true:
+   * - Displays a loading spinner instead of dropdown arrow
+   * - Shows "Loading..." placeholder text
+   * - Disables the input (prevents user interaction)
+   * - Prevents dropdown from opening
+   * - Input background becomes gray
+   *
+   * Use this when fetching options from an API or performing async operations.
+   *
+   * @example
+   * loading={isLoadingOptions}
    */
   loading: _propTypes.default.bool,
-  /**
-   * Property name to use as the unique identifier for options.
-   * Used for:
-   * - Comparing options for equality (isOptionEqualToValue)
-   * - Matching defaultValue when it's a primitive
-   * - React keys in the options list
-   *
-   * Each option object must have this property and it should be unique.
-   *
-   * @default "id"
-   * @example
-   * by="userId"
-   * // Then options would be: [{ userId: 1, name: "John" }, ...]
+  /**
+   * Property name to use as the unique identifier for options.
+   * Used for:
+   * - Comparing options for equality (isOptionEqualToValue)
+   * - Matching defaultValue when it's a primitive
+   * - React keys in the options list
+   *
+   * Each option object must have this property and it should be unique.
+   *
+   * @default "id"
+   * @example
+   * by="userId"
+   * // Then options would be: [{ userId: 1, name: "John" }, ...]
    */
   by: _propTypes.default.string,
-  /**
-   * Property name to use for displaying option text.
-   * This value is shown in:
-   * - The dropdown options list
-   * - The input field when an option is selected
-   * - The filtered search results
-   *
-   * @default "label"
-   * @example
-   * labelKey="name"
-   * // Then options would be: [{ id: 1, name: "Option 1" }, ...]
+  /**
+   * Property name to use for displaying option text.
+   * This value is shown in:
+   * - The dropdown options list
+   * - The input field when an option is selected
+   * - The filtered search results
+   *
+   * @default "label"
+   * @example
+   * labelKey="name"
+   * // Then options would be: [{ id: 1, name: "Option 1" }, ...]
    */
   labelKey: _propTypes.default.string
 };

package/components/input/index.js

@@ -34,7 +34,7 @@ const Input = _ref => {
     autoFocus,
     onBlurDelay,
     onChange,
-    restrictSpecialChars = false,
+    validationRegex = null,
     ...rest
   } = _ref;
   const inputRef = (0, _react.useRef)(null);
@@ -44,43 +44,36 @@ const Input = _ref => {
   const showError = message => setLocalErrorMessage(message);
   const clearError = () => setLocalErrorMessage("");
   const validateRestrictiveCharacters = e => {
-    // e.preventDefault();
-    let {
+    const {
       value
-    } = e.target;
-    if (!restrictSpecialChars) {
-      onChange(e);
+    } = e.target; //similar to e.target.value but destructured for clarity
+
+    // If no validationRegex is provided, just call onChange and return
+    if (!validationRegex) {
+      onChange?.(e);
       return;
     }
-    const filteredValue = value.replace(/[^a-zA-Z0-9.,@_\-() ]/g, "");
+    const validationPattern = new RegExp(
+    // Create a new RegExp to ensure the global flag is present
+    validationRegex.source, validationRegex.flags.includes("g") ? validationRegex.flags : `${validationRegex.flags}g`);
+    const filteredValue = value.replace(validationPattern, ""); // Remove invalid characters from the input value
     if (filteredValue !== value) {
-      showError("Only letters, numbers, and . , _ - @ ( ) are allowed.");
-      e.target.value = filteredValue;
-      value = filteredValue;
-      if (inputRef.current) {
-        inputRef.current.value = filteredValue;
-      }
-      if (onChange) {
-        onChange({
-          ...e,
-          target: {
-            ...e.target,
-            value: filteredValue
-          }
-        });
-      }
+      // If the filtered value is different from the original value, it means there are invalid characters
+      const invalidCharacters = [...new Set(value.match(validationPattern) || []) // Get unique invalid characters and store them in an array using spread operator and Set to ensure uniqueness
+      ];
+      showError(
+      // Show an error message based on the number of invalid characters found
+      invalidCharacters.length === 1 ? `The character ${invalidCharacters[0]} is not allowed.` : `The characters ${invalidCharacters.join(" ")} are not allowed.`);
     } else {
-      clearError();
-      if (onChange) {
-        onChange({
-          ...e,
-          target: {
-            ...e.target,
-            value
-          }
-        });
-      }
+      clearError(); // Clear the error message if there are no invalid characters
     }
+    onChange?.({
+      ...e,
+      target: {
+        ...e.target,
+        value: filteredValue
+      } // Call onChange with the filtered value to ensure that the input value is updated correctly
+    });
   };
   return /*#__PURE__*/_react.default.createElement(_FormControl.default, {
     variant: "standard",
@@ -155,6 +148,7 @@ Input.propTypes = {
   isDisabled: _propTypes.default.bool,
   readOnly: _propTypes.default.bool,
   // Added readOnly prop type
-  autoFocus: _propTypes.default.bool
+  autoFocus: _propTypes.default.bool,
+  validationRegex: _propTypes.default.instanceOf(RegExp)
 };
 var _default = exports.default = Input;

package/components/optionMenu/index.js

@@ -12,31 +12,31 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ITEM_HEIGHT = 500;
 
-/**
- *
- * @param {{
- *  options: Array<{
- *    name: String | Number,
- *    displayName: String,
- *    onClick: (name: String | Number, optionId: String | Number) => void,
- *    visibility?: boolean,
- *    divider?: boolean
- *  }>,
- *  optionId?: String | Number,
- * }} props
- * @description
- *  options: provide this object in an array for options
- *  {
- *      name, displayName , onClick, visibility, divider
- *  }
- * name: name for Menuoption it will act like ID
- * displayname: To display name
- * onClick: Accepts a callbac function, this function will provide name in parameter
- * visibility: (optional) if set to false, the option will be disabled
- * divider: (optional) if set to true, a divider line will be displayed after the MenuItem
- *
- * optionId: Provide an option ID to get it as 2nd parameter of callback function
- * @returns An option component
+/**
+ *
+ * @param {{
+ *  options: Array<{
+ *    name: String | Number,
+ *    displayName: String,
+ *    onClick: (name: String | Number, optionId: String | Number) => void,
+ *    visibility?: boolean,
+ *    divider?: boolean
+ *  }>,
+ *  optionId?: String | Number,
+ * }} props
+ * @description
+ *  options: provide this object in an array for options
+ *  {
+ *      name, displayName , onClick, visibility, divider
+ *  }
+ * name: name for Menuoption it will act like ID
+ * displayname: To display name
+ * onClick: Accepts a callbac function, this function will provide name in parameter
+ * visibility: (optional) if set to false, the option will be disabled
+ * divider: (optional) if set to true, a divider line will be displayed after the MenuItem
+ *
+ * optionId: Provide an option ID to get it as 2nd parameter of callback function
+ * @returns An option component
  */
 
 const OptionMenu = _ref => {

package/http/index.js

@@ -122,7 +122,7 @@ const parseAxiosError = error => {
       ...parsedError,
       status: error.response.status,
       statusText: error.response.statusText,
-      message: error.response.status === 503 ? error.response.data.message ?? "A network error occurred. Please try again" : error.response.status === 401 ? "Authentication Failed" : error.response.data ? error.response.data.message ? error.response.data.message : "An unexpected error occurred while processing your request. Please try again. If problem persists, please contact Tenjin support" : "An unexpected error occurred while processing your request. Please try again. If problem persists, please contact Tenjin support"
+      message: error.response.status === 503 ? error.response.data.message ?? "A network error occurred. Please try again" : error.response.status === 401 ? "Authentication Failed" : error.response.data ? error.response.data.message || error.response.data.detail || "An unexpected error occurred while processing your request. Please try again. If problem persists, please contact Tenjin support" : "An unexpected error occurred while processing your request. Please try again. If problem persists, please contact Tenjin support"
     };
   }
   return parsedError;

package/package.json

@@ -1,125 +1,127 @@
-{
-  "name": "tenjin-ui-kit",
-  "version": "0.3.73",
-  "repository": {
-    "url": "git+https://gitlab.com/yethi/react/tenjin-ui-kit.git"
-  },
-  "dependencies": {
-    "@floating-ui/dom": "^1.2.1",
-    "@mantine/core": "^5.10.1",
-    "@mantine/hooks": "^5.10.1",
-    "@mantine/rte": "^5.10.1",
-    "@mui/icons-material": "^5.11.0",
-    "@mui/styles": "^5.11.2",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "aria-hidden": "^1.2.2",
-    "axios": "^0.26.0",
-    "clsx": "^1.2.1",
-    "d3-hierarchy": "^3.1.2",
-    "feather-icons": "^4.29.0",
-    "final-form": "^4.20.9",
-    "material-ui-popup-state": "^5.0.8",
-    "moment": "^2.29.4",
-    "npm-run-all": "^4.1.5",
-    "react-beautiful-dnd": "^13.1.1",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
-    "react-dropzone": "^14.2.3",
-    "react-feather": "^2.0.10",
-    "react-final-form": "^6.5.9",
-    "react-flow-renderer": "^10.3.17",
-    "react-icons": "^4.10.1",
-    "react-moment": "^1.1.3",
-    "react-scripts": "5.0.1",
-    "react-select": "^5.7.4",
-    "react-sortable-hoc": "^2.0.0",
-    "reactflow": "^11.6.1",
-    "storybook-react-context": "^0.6.0",
-    "styled-components": "^5.3.9",
-    "uuid": "^9.0.0",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public",
-    "clean": "rimraf dist",
-    "compile": "npm run clean && cross-env NODE_ENV=production babel src/package --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,stories.js,__snapshots__",
-    "copy-and-publish-dev": "copy package.json dist && copy README.md dist && cd dist && npm publish --tag dev",
-    "copy-and-publish": "copy package.json dist && copy README.md dist && cd dist && npm publish",
-    "publish-dev": "npm-run-all compile copy-and-publish-dev",
-    "publish-prod": "npm-run-all compile copy-and-publish"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ],
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.20.7",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@mui/material": "^5.11.3",
-    "@storybook/addon-actions": "^6.5.15",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/addon-interactions": "^6.5.15",
-    "@storybook/addon-links": "^6.5.15",
-    "@storybook/builder-webpack5": "^6.5.15",
-    "@storybook/manager-webpack5": "^6.5.15",
-    "@storybook/node-logger": "^6.5.15",
-    "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/react": "^6.5.15",
-    "@storybook/testing-library": "^0.0.13",
-    "ajv": "^8.20.0",
-    "babel-plugin-named-exports-order": "^0.0.2",
-    "cross-env": "^7.0.3",
-    "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.6.1",
-    "rimraf": "^3.0.2",
-    "webpack": "^5.75.0"
-  },
-  "peerDependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@mui/lab": "5.0.0-alpha.116",
-    "@mui/material": "^5.11.3",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.6.1"
-  }
-}
+{
+  "name": "tenjin-ui-kit",
+  "version": "0.3.76",
+  "repository": {
+    "url": "git+https://gitlab.com/yethi/react/tenjin-ui-kit.git"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.2.1",
+    "@mantine/core": "^5.10.1",
+    "@mantine/hooks": "^5.10.1",
+    "@mantine/rte": "^5.10.1",
+    "@mui/icons-material": "^5.11.0",
+    "@mui/styles": "^5.11.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "aria-hidden": "^1.2.2",
+    "axios": "^0.26.0",
+    "clsx": "^1.2.1",
+    "d3-hierarchy": "^3.1.2",
+    "feather-icons": "^4.29.0",
+    "final-form": "^4.20.9",
+    "material-ui-popup-state": "^5.0.8",
+    "moment": "^2.29.4",
+    "npm-run-all": "^4.1.5",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dropzone": "^14.2.3",
+    "react-feather": "^2.0.10",
+    "react-final-form": "^6.5.9",
+    "react-flow-renderer": "^10.3.17",
+    "react-icons": "^4.10.1",
+    "react-moment": "^1.1.3",
+    "react-scripts": "5.0.1",
+    "react-select": "^5.7.4",
+    "react-sortable-hoc": "^2.0.0",
+    "reactflow": "^11.6.1",
+    "storybook-react-context": "^0.6.0",
+    "styled-components": "^5.3.9",
+    "uuid": "^9.0.0",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public",
+    "clean": "rimraf dist",
+    "compile": "npm run clean && cross-env NODE_ENV=production babel src/package --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,stories.js,__snapshots__",
+    "copy-and-publish-dev": "copy package.json dist && copy README.md dist && cd dist && npm publish --tag dev",
+    "copy-and-publish": "cp package.json dist && cp README.md dist && cd dist && npm publish",
+    "publish-dev": "npm-run-all compile copy-and-publish-dev",
+    "publish-prod": "npm-run-all compile copy-and-publish"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.20.7",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.11.3",
+    "@storybook/addon-actions": "^6.5.15",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-interactions": "^6.5.15",
+    "@storybook/addon-links": "^6.5.15",
+    "@storybook/builder-webpack5": "^6.5.15",
+    "@storybook/manager-webpack5": "^6.5.15",
+    "@storybook/node-logger": "^6.5.15",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.15",
+    "@storybook/testing-library": "^0.0.13",
+    "ajv": "^8.20.0",
+    "postcss": "^8.5.28",
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "cross-env": "^7.0.3",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.6.1",
+    "rimraf": "^3.0.2",
+    "webpack": "^5.75.0",
+    "@mui/lab": "5.0.0-alpha.116"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/lab": "5.0.0-alpha.116",
+    "@mui/material": "^5.11.3",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.6.1"
+  }
+}