@teambit/component.ui.component-compare.compare-aspects.compare-aspect-view 0.0.14 → 0.0.16

package/compare-aspect-view.module.scss

@@ -48,3 +48,29 @@ $editor-padding: 56px;
     background-image: linear-gradient(to right, currentColor 0%, #2b2b2b 30%, #2b2b2b 50%, currentColor 100%);
   }
 }
+
+
+:global(.side-by-side) {
+  // display the copy button only in side by side view & on hover
+  &:hover {
+    .copyButton {
+      display: unset;
+    }
+  }
+}
+
+.copyButton {
+  cursor: pointer;
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  &.isLabelVisible {
+    display: unset;
+  }
+}
+
+.message {
+  left: 0;
+}

package/compare-aspect-view.tsx

@@ -3,9 +3,8 @@ import classNames from 'classnames';
 import { H4 } from '@teambit/documenter.ui.heading';
 import { BlockSkeleton } from '@teambit/base-ui.loaders.skeleton';
 import { DiffEditor } from '@monaco-editor/react';
-import { darkMode } from '@teambit/base-ui.theme.dark-theme';
 import { ComponentAspectData } from '@teambit/component.ui.component-compare.compare-aspects.models.component-compare-aspects-model';
-
+import { ConfigDiffEditor } from './config-editor'
 import styles from './compare-aspect-view.module.scss';
 
 export type CompareAspectViewProps = {
@@ -24,20 +23,8 @@ export function CompareAspectView({
 }: CompareAspectViewProps) {
   const title = useMemo(() => name?.split('/').pop(), [name]);
 
-  const configDiffEditor = (
-    <DiffEditor
-      key={`aspect-config-diff-editor-${title}`}
-      modified={JSON.stringify(compareAspectData?.config, null, 2)}
-      original={JSON.stringify(baseAspectData?.config, null, 2)}
-      language={'json'}
-      className={darkMode}
-      theme={'vs-dark'}
-      options={{
-        readOnly: true,
-      }}
-      loading={<AspectsCompareViewLoader />}
-    />
-  );
+    const original = JSON.stringify(baseAspectData?.config, null, 2)
+    const modified = JSON.stringify(compareAspectData?.config, null, 2)
 
   const calculatedDataDiffEditor = (
     <DiffEditor
@@ -69,7 +56,7 @@ export function CompareAspectView({
           <H4 size="xxs" className={styles.name}>
             <span>Config</span>
           </H4>
-          {loading ? <AspectsCompareViewLoader /> : configDiffEditor}
+          {loading ? <AspectsCompareViewLoader /> : <ConfigDiffEditor original={original} modified={modified} />}
         </div>
         <div className={styles.componentCompareAspectCalculatedDiff}>
           <H4 size="xxs" className={styles.name}>

package/config-editor.tsx

@@ -0,0 +1,111 @@
+import React, { HTMLAttributes, useMemo, useState, useRef, useEffect, ForwardedRef } from 'react';
+import copy from 'copy-to-clipboard';
+import classNames from 'classnames';
+import { CopiedMessage } from '@teambit/documenter.ui.copied-message';
+import { BlockSkeleton } from '@teambit/base-ui.loaders.skeleton';
+import { DiffEditor } from '@monaco-editor/react';
+import { darkMode } from '@teambit/base-ui.theme.dark-theme';
+import { Icon } from '@teambit/design.elements.icon';
+
+import styles from './compare-aspect-view.module.scss';
+
+export type CompareAspectViewProps = {
+  original?: string;
+  modified?: string;
+  loading?: boolean;
+  name?: string;
+} & HTMLAttributes<HTMLDivElement>;
+
+export function ConfigDiffEditor({
+    original,
+    modified,
+    name,
+}: CompareAspectViewProps) {
+  const diffEditorRef = useRef(null);
+  const title = useMemo(() => name?.split('/').pop(), [name]);
+  
+  const originalPanelRef = useRef(null);
+  const modifiedPanelRef = useRef(null);
+
+  const handleEditorMount = (editor) => {
+    diffEditorRef.current = editor;
+
+    // Access the original and modified editors
+    const originalEditor = editor.getOriginalEditor();
+    const modifiedEditor = editor.getModifiedEditor();
+
+    // Append copy button directly to the original and modified panels
+    appendComponentToPanel(originalEditor, originalPanelRef.current);
+    appendComponentToPanel(modifiedEditor, modifiedPanelRef.current);
+  };
+
+  const appendComponentToPanel = (editorInstance, element) => {
+    const editorDomNode = editorInstance.getDomNode();
+    if (editorDomNode && element) {
+      // Append the React component's DOM node directly to the editor
+      editorDomNode.appendChild(element);
+    }
+  };
+    return (
+      <>
+        <DiffEditor
+          key={`aspect-config-diff-editor-${title}`}
+          original={original}
+          modified={modified}
+          language={'json'}
+          className={darkMode}
+          theme={'vs-dark'}
+          options={{
+            readOnly: true,
+          }}
+          loading={<AspectsCompareViewLoader />}
+        
+        onMount={handleEditorMount}
+
+        />
+        {original && <PanelContent text={original} ref={originalPanelRef} />}
+        {modified && <PanelContent text={modified} ref={modifiedPanelRef} />}
+      </>
+    );
+  };
+
+
+function AspectsCompareViewLoader() {
+  return <BlockSkeleton className={styles.loader} lines={16} />;
+}
+
+function CopyButton({text}: {text: string}) {
+  const [isCopied, setCopy] = useState(false);
+  
+  const handleCopy = () => {
+    setCopy(true);
+    setTimeout(() => setCopy(false), 2000);
+    copy(text);
+  };
+
+  return (
+    
+      <div className={classNames(styles.copyButton, isCopied && styles.isLabelVisible)} onClick={handleCopy}>
+        <Icon className={styles.copyIcon} of="copy-cmp" />
+        <CopiedMessage className={styles.message} show={isCopied} />
+      </div>
+              
+  )
+}
+
+
+const PanelContent = React.forwardRef(({ text }: { text: string }, ref: ForwardedRef<HTMLDivElement>) => {
+    return (
+      <div
+        ref={ref}
+        style={{
+          position: 'absolute',
+          top: '8px',
+          right: '18px',
+        }}
+      >
+        <CopyButton text={text} />
+      </div>
+    );
+  });
+  

package/dist/compare-aspect-view.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from 'react';
 import { ComponentAspectData } from '@teambit/component.ui.component-compare.compare-aspects.models.component-compare-aspects-model';
-export declare type CompareAspectViewProps = {
+export type CompareAspectViewProps = {
     baseAspectData?: ComponentAspectData;
     compareAspectData?: ComponentAspectData;
     loading?: boolean;

package/dist/compare-aspect-view.js

@@ -26,19 +26,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompareAspectView = void 0;
+exports.CompareAspectView = CompareAspectView;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const documenter_ui_heading_1 = require("@teambit/documenter.ui.heading");
 const base_ui_loaders_skeleton_1 = require("@teambit/base-ui.loaders.skeleton");
 const react_2 = require("@monaco-editor/react");
-const base_ui_theme_dark_theme_1 = require("@teambit/base-ui.theme.dark-theme");
+const config_editor_1 = require("./config-editor");
 const compare_aspect_view_module_scss_1 = __importDefault(require("./compare-aspect-view.module.scss"));
 function CompareAspectView({ baseAspectData, compareAspectData, name, loading, className, }) {
     const title = (0, react_1.useMemo)(() => name === null || name === void 0 ? void 0 : name.split('/').pop(), [name]);
-    const configDiffEditor = (react_1.default.createElement(react_2.DiffEditor, { key: `aspect-config-diff-editor-${title}`, modified: JSON.stringify(compareAspectData === null || compareAspectData === void 0 ? void 0 : compareAspectData.config, null, 2), original: JSON.stringify(baseAspectData === null || baseAspectData === void 0 ? void 0 : baseAspectData.config, null, 2), language: 'json', className: base_ui_theme_dark_theme_1.darkMode, theme: 'vs-dark', options: {
-            readOnly: true,
-        }, loading: react_1.default.createElement(AspectsCompareViewLoader, null) }));
+    const original = JSON.stringify(baseAspectData === null || baseAspectData === void 0 ? void 0 : baseAspectData.config, null, 2);
+    const modified = JSON.stringify(compareAspectData === null || compareAspectData === void 0 ? void 0 : compareAspectData.config, null, 2);
     const calculatedDataDiffEditor = (react_1.default.createElement(react_2.DiffEditor, { key: `aspect-data-diff-editor-${title}`, modified: JSON.stringify(compareAspectData === null || compareAspectData === void 0 ? void 0 : compareAspectData.data, null, 2), original: JSON.stringify(baseAspectData === null || baseAspectData === void 0 ? void 0 : baseAspectData.data, null, 2), language: 'json', className: compare_aspect_view_module_scss_1.default.diffEditor, theme: 'vs-dark', options: {
             readOnly: true,
         }, loading: react_1.default.createElement(AspectsCompareViewLoader, null) }));
@@ -50,13 +49,12 @@ function CompareAspectView({ baseAspectData, compareAspectData, name, loading, c
             react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.componentCompareAspectConfigDiff },
                 react_1.default.createElement(documenter_ui_heading_1.H4, { size: "xxs", className: compare_aspect_view_module_scss_1.default.name },
                     react_1.default.createElement("span", null, "Config")),
-                loading ? react_1.default.createElement(AspectsCompareViewLoader, null) : configDiffEditor),
+                loading ? react_1.default.createElement(AspectsCompareViewLoader, null) : react_1.default.createElement(config_editor_1.ConfigDiffEditor, { original: original, modified: modified })),
             react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.componentCompareAspectCalculatedDiff },
                 react_1.default.createElement(documenter_ui_heading_1.H4, { size: "xxs", className: compare_aspect_view_module_scss_1.default.name },
                     react_1.default.createElement("span", null, "Calculated Data")),
                 loading ? react_1.default.createElement(AspectsCompareViewLoader, null) : calculatedDataDiffEditor))));
 }
-exports.CompareAspectView = CompareAspectView;
 function AspectsCompareViewLoader() {
     return react_1.default.createElement(base_ui_loaders_skeleton_1.BlockSkeleton, { className: compare_aspect_view_module_scss_1.default.loader, lines: 16 });
 }

package/dist/compare-aspect-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"compare-aspect-view.js","sourceRoot":"","sources":["../compare-aspect-view.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"compare-aspect-view.js","sourceRoot":"","sources":["../compare-aspect-view.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,8CAqDC;AArED,+CAAuD;AACvD,4DAAoC;AACpC,0EAAoD;AACpD,gFAAkE;AAClE,gDAAkD;AAElD,mDAAkD;AAClD,wGAAuD;AASvD,SAAgB,iBAAiB,CAAC,EAChC,cAAc,EACd,iBAAiB,EACjB,IAAI,EACJ,OAAO,EACP,SAAS,GACc;IACvB,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAE1D,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAChE,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAErE,MAAM,wBAAwB,GAAG,CAC/B,8BAAC,kBAAU,IACT,GAAG,EAAE,2BAA2B,KAAK,EAAE,EACvC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,EAC1D,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,EACvD,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,yCAAM,CAAC,UAAU,EAC5B,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE;YACP,QAAQ,EAAE,IAAI;SACf,EACD,OAAO,EAAE,8BAAC,wBAAwB,OAAG,GACrC,CACH,CAAC;IAEF,OAAO,CACL,uCACE,GAAG,EAAE,sBAAsB,KAAK,EAAE,EAClC,SAAS,EAAE,IAAA,oBAAU,EAAC,yCAAM,CAAC,mCAAmC,EAAE,SAAS,CAAC;QAE5E,uCAAK,SAAS,EAAE,yCAAM,CAAC,IAAI;YACzB,8BAAC,0BAAE,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAE,yCAAM,CAAC,IAAI;gBAClC,4CAAO,KAAK,CAAQ,CACjB,CACD;QACN,uCAAK,SAAS,EAAE,yCAAM,CAAC,yCAAyC;YAC9D,uCAAK,SAAS,EAAE,yCAAM,CAAC,gCAAgC;gBACrD,8BAAC,0BAAE,IAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAE,yCAAM,CAAC,IAAI;oBACnC,qDAAmB,CAChB;gBACJ,OAAO,CAAC,CAAC,CAAC,8BAAC,wBAAwB,OAAG,CAAC,CAAC,CAAC,8BAAC,gCAAgB,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAClG;YACN,uCAAK,SAAS,EAAE,yCAAM,CAAC,oCAAoC;gBACzD,8BAAC,0BAAE,IAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAE,yCAAM,CAAC,IAAI;oBACnC,8DAA4B,CACzB;gBACJ,OAAO,CAAC,CAAC,CAAC,8BAAC,wBAAwB,OAAG,CAAC,CAAC,CAAC,wBAAwB,CAC9D,CACF,CACF,CACP,CAAC;AACJ,CAAC;AAED,SAAS,wBAAwB;IAC/B,OAAO,8BAAC,wCAAa,IAAC,SAAS,EAAE,yCAAM,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,GAAI,CAAC;AAChE,CAAC"}

package/dist/compare-aspect-view.module.scss

@@ -48,3 +48,29 @@ $editor-padding: 56px;
     background-image: linear-gradient(to right, currentColor 0%, #2b2b2b 30%, #2b2b2b 50%, currentColor 100%);
   }
 }
+
+
+:global(.side-by-side) {
+  // display the copy button only in side by side view & on hover
+  &:hover {
+    .copyButton {
+      display: unset;
+    }
+  }
+}
+
+.copyButton {
+  cursor: pointer;
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  &.isLabelVisible {
+    display: unset;
+  }
+}
+
+.message {
+  left: 0;
+}

package/dist/config-editor.d.ts

@@ -0,0 +1,8 @@
+import React, { HTMLAttributes } from 'react';
+export type CompareAspectViewProps = {
+    original?: string;
+    modified?: string;
+    loading?: boolean;
+    name?: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare function ConfigDiffEditor({ original, modified, name, }: CompareAspectViewProps): React.JSX.Element;

package/dist/config-editor.js

@@ -0,0 +1,90 @@
+"use strict";
+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.ConfigDiffEditor = ConfigDiffEditor;
+const react_1 = __importStar(require("react"));
+const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
+const classnames_1 = __importDefault(require("classnames"));
+const documenter_ui_copied_message_1 = require("@teambit/documenter.ui.copied-message");
+const base_ui_loaders_skeleton_1 = require("@teambit/base-ui.loaders.skeleton");
+const react_2 = require("@monaco-editor/react");
+const base_ui_theme_dark_theme_1 = require("@teambit/base-ui.theme.dark-theme");
+const design_elements_icon_1 = require("@teambit/design.elements.icon");
+const compare_aspect_view_module_scss_1 = __importDefault(require("./compare-aspect-view.module.scss"));
+function ConfigDiffEditor({ original, modified, name, }) {
+    const diffEditorRef = (0, react_1.useRef)(null);
+    const title = (0, react_1.useMemo)(() => name === null || name === void 0 ? void 0 : name.split('/').pop(), [name]);
+    const originalPanelRef = (0, react_1.useRef)(null);
+    const modifiedPanelRef = (0, react_1.useRef)(null);
+    const handleEditorMount = (editor) => {
+        diffEditorRef.current = editor;
+        // Access the original and modified editors
+        const originalEditor = editor.getOriginalEditor();
+        const modifiedEditor = editor.getModifiedEditor();
+        // Append copy button directly to the original and modified panels
+        appendComponentToPanel(originalEditor, originalPanelRef.current);
+        appendComponentToPanel(modifiedEditor, modifiedPanelRef.current);
+    };
+    const appendComponentToPanel = (editorInstance, element) => {
+        const editorDomNode = editorInstance.getDomNode();
+        if (editorDomNode && element) {
+            // Append the React component's DOM node directly to the editor
+            editorDomNode.appendChild(element);
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_2.DiffEditor, { key: `aspect-config-diff-editor-${title}`, original: original, modified: modified, language: 'json', className: base_ui_theme_dark_theme_1.darkMode, theme: 'vs-dark', options: {
+                readOnly: true,
+            }, loading: react_1.default.createElement(AspectsCompareViewLoader, null), onMount: handleEditorMount }),
+        original && react_1.default.createElement(PanelContent, { text: original, ref: originalPanelRef }),
+        modified && react_1.default.createElement(PanelContent, { text: modified, ref: modifiedPanelRef })));
+}
+;
+function AspectsCompareViewLoader() {
+    return react_1.default.createElement(base_ui_loaders_skeleton_1.BlockSkeleton, { className: compare_aspect_view_module_scss_1.default.loader, lines: 16 });
+}
+function CopyButton({ text }) {
+    const [isCopied, setCopy] = (0, react_1.useState)(false);
+    const handleCopy = () => {
+        setCopy(true);
+        setTimeout(() => setCopy(false), 2000);
+        (0, copy_to_clipboard_1.default)(text);
+    };
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(compare_aspect_view_module_scss_1.default.copyButton, isCopied && compare_aspect_view_module_scss_1.default.isLabelVisible), onClick: handleCopy },
+        react_1.default.createElement(design_elements_icon_1.Icon, { className: compare_aspect_view_module_scss_1.default.copyIcon, of: "copy-cmp" }),
+        react_1.default.createElement(documenter_ui_copied_message_1.CopiedMessage, { className: compare_aspect_view_module_scss_1.default.message, show: isCopied })));
+}
+const PanelContent = react_1.default.forwardRef(({ text }, ref) => {
+    return (react_1.default.createElement("div", { ref: ref, style: {
+            position: 'absolute',
+            top: '8px',
+            right: '18px',
+        } },
+        react_1.default.createElement(CopyButton, { text: text })));
+});
+//# sourceMappingURL=config-editor.js.map

package/dist/config-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-editor.js","sourceRoot":"","sources":["../config-editor.tsx"],"names":[],"mappings":"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"}

package/dist/preview-1738855733607.js

@@ -0,0 +1,7 @@
+;
+;
+
+export const compositions = [];
+export const overview = [];
+
+export const compositions_metadata = {"compositions":[]};

package/package.json

@@ -1,30 +1,33 @@
 {
   "name": "@teambit/component.ui.component-compare.compare-aspects.compare-aspect-view",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "homepage": "https://bit.cloud/teambit/component/ui/component-compare/compare-aspects/compare-aspect-view",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "ui/component-compare/compare-aspects/compare-aspect-view",
-    "version": "0.0.14"
+    "version": "0.0.16"
   },
   "dependencies": {
     "@monaco-editor/react": "4.4.6",
     "classnames": "2.2.6",
+    "copy-to-clipboard": "^3.3.3",
     "core-js": "^3.0.0",
     "@teambit/base-ui.loaders.skeleton": "1.0.1",
+    "@teambit/documenter.ui.heading": "4.1.1",
     "@teambit/base-ui.theme.dark-theme": "1.0.2",
-    "@teambit/component.ui.component-compare.compare-aspects.models.component-compare-aspects-model": "0.0.11",
-    "@teambit/documenter.ui.heading": "4.1.1"
+    "@teambit/design.elements.icon": "1.0.24",
+    "@teambit/documenter.ui.copied-message": "4.1.8",
+    "@teambit/component.ui.component-compare.compare-aspects.models.component-compare-aspects-model": "0.0.12"
   },
   "devDependencies": {
-    "@babel/runtime": "7.20.0",
     "@types/classnames": "2.2.11",
-    "@types/jest": "^26.0.0",
+    "@types/react": "^17.0.8",
     "@types/mocha": "9.1.0",
     "@types/node": "12.20.4",
-    "@types/react": "^17.0.8",
     "@types/react-dom": "^17.0.5",
+    "@types/jest": "^26.0.0",
+    "@babel/runtime": "7.20.0",
     "@types/testing-library__jest-dom": "5.9.5"
   },
   "peerDependencies": {
@@ -32,6 +35,8 @@
     "react-dom": "^16.8.0 || ^17.0.0"
   },
   "license": "Apache-2.0",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
   "private": false,
   "engines": {
     "node": ">=12.22.0"
@@ -50,4 +55,4 @@
     "angular",
     "angular-components"
   ]
-}
+}

package/types/asset.d.ts

@@ -0,0 +1,29 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}

package/dist/tsconfig.json

@@ -1,32 +0,0 @@
-{
-    "compilerOptions": {
-        "lib": [
-            "es2019",
-            "DOM",
-            "ES6",
-            "DOM.Iterable"
-        ],
-        "target": "es2015",
-        "module": "CommonJS",
-        "jsx": "react",
-        "allowJs": true,
-        "composite": true,
-        "declaration": true,
-        "sourceMap": true,
-        "skipLibCheck": true,
-        "experimentalDecorators": true,
-        "outDir": "dist",
-        "moduleResolution": "node",
-        "esModuleInterop": true,
-        "rootDir": ".",
-        "resolveJsonModule": true
-    },
-    "exclude": [
-        "dist",
-        "package.json"
-    ],
-    "include": [
-        "**/*",
-        "**/*.json"
-    ]
-}

package/schema.json

@@ -1,542 +0,0 @@
-{
-  "__schema": "APISchema",
-  "location": {
-    "filePath": "index.ts",
-    "line": 1,
-    "character": 1
-  },
-  "module": {
-    "__schema": "ModuleSchema",
-    "location": {
-      "filePath": "index.ts",
-      "line": 1,
-      "character": 1
-    },
-    "exports": [
-      {
-        "__schema": "ReactSchema",
-        "location": {
-          "filePath": "compare-aspect-view.tsx",
-          "line": 18,
-          "character": 1
-        },
-        "signature": "function CompareAspectView({ baseAspectData, compareAspectData, name, loading, className, }: CompareAspectViewProps): React.JSX.Element",
-        "name": "CompareAspectView",
-        "props": {
-          "__schema": "ParameterSchema",
-          "location": {
-            "filePath": "compare-aspect-view.tsx",
-            "line": 18,
-            "character": 35
-          },
-          "name": "{ baseAspectData, compareAspectData, name, loading, className }",
-          "type": {
-            "__schema": "TypeRefSchema",
-            "location": {
-              "filePath": "compare-aspect-view.tsx",
-              "line": 24,
-              "character": 4
-            },
-            "name": "CompareAspectViewProps"
-          },
-          "isOptional": false,
-          "objectBindingNodes": [
-            {
-              "__schema": "InferenceTypeSchema",
-              "location": {
-                "filePath": "compare-aspect-view.tsx",
-                "line": 19,
-                "character": 3
-              },
-              "name": "baseAspectData",
-              "type": "ComponentAspectData",
-              "isSpread": false
-            },
-            {
-              "__schema": "InferenceTypeSchema",
-              "location": {
-                "filePath": "compare-aspect-view.tsx",
-                "line": 20,
-                "character": 3
-              },
-              "name": "compareAspectData",
-              "type": "ComponentAspectData",
-              "isSpread": false
-            },
-            {
-              "__schema": "InferenceTypeSchema",
-              "location": {
-                "filePath": "compare-aspect-view.tsx",
-                "line": 21,
-                "character": 3
-              },
-              "name": "name",
-              "type": "string",
-              "isSpread": false
-            },
-            {
-              "__schema": "InferenceTypeSchema",
-              "location": {
-                "filePath": "compare-aspect-view.tsx",
-                "line": 22,
-                "character": 3
-              },
-              "name": "loading",
-              "type": "boolean",
-              "isSpread": false
-            },
-            {
-              "__schema": "InferenceTypeSchema",
-              "location": {
-                "filePath": "compare-aspect-view.tsx",
-                "line": 23,
-                "character": 3
-              },
-              "name": "className",
-              "type": "string",
-              "isSpread": false
-            }
-          ],
-          "isSpread": false
-        },
-        "returnType": {
-          "__schema": "TypeRefSchema",
-          "location": {
-            "filePath": "compare-aspect-view.tsx",
-            "line": 18,
-            "character": 1
-          },
-          "name": "React.JSX.Element",
-          "packageName": "react"
-        },
-        "modifiers": [
-          "export"
-        ]
-      },
-      {
-        "__schema": "TypeSchema",
-        "location": {
-          "filePath": "compare-aspect-view.tsx",
-          "line": 11,
-          "character": 1
-        },
-        "signature": "type CompareAspectViewProps = {\n    baseAspectData?: ComponentAspectData;\n    compareAspectData?: ComponentAspectData;\n    loading?: boolean;\n    name?: string;\n} & React.HTMLAttributes<HTMLDivElement>",
-        "name": "CompareAspectViewProps",
-        "type": {
-          "__schema": "TypeIntersectionSchema",
-          "location": {
-            "filePath": "compare-aspect-view.tsx",
-            "line": 11,
-            "character": 38
-          },
-          "types": [
-            {
-              "__schema": "TypeLiteralSchema",
-              "location": {
-                "filePath": "compare-aspect-view.tsx",
-                "line": 11,
-                "character": 38
-              },
-              "members": [
-                {
-                  "__schema": "VariableLikeSchema",
-                  "location": {
-                    "filePath": "compare-aspect-view.tsx",
-                    "line": 12,
-                    "character": 3
-                  },
-                  "signature": "(property) baseAspectData?: ComponentAspectData",
-                  "name": "baseAspectData",
-                  "type": {
-                    "__schema": "TypeRefSchema",
-                    "location": {
-                      "filePath": "compare-aspect-view.tsx",
-                      "line": 12,
-                      "character": 3
-                    },
-                    "name": "ComponentAspectData",
-                    "componentId": {
-                      "scope": "teambit.component",
-                      "name": "ui/component-compare/compare-aspects/models/component-compare-aspects-model",
-                      "version": "c0dc51d8f9ee990e89180950aa38789fb8e5bb3f"
-                    }
-                  },
-                  "isOptional": true
-                },
-                {
-                  "__schema": "VariableLikeSchema",
-                  "location": {
-                    "filePath": "compare-aspect-view.tsx",
-                    "line": 13,
-                    "character": 3
-                  },
-                  "signature": "(property) compareAspectData?: ComponentAspectData",
-                  "name": "compareAspectData",
-                  "type": {
-                    "__schema": "TypeRefSchema",
-                    "location": {
-                      "filePath": "compare-aspect-view.tsx",
-                      "line": 13,
-                      "character": 3
-                    },
-                    "name": "ComponentAspectData",
-                    "componentId": {
-                      "scope": "teambit.component",
-                      "name": "ui/component-compare/compare-aspects/models/component-compare-aspects-model",
-                      "version": "c0dc51d8f9ee990e89180950aa38789fb8e5bb3f"
-                    }
-                  },
-                  "isOptional": true
-                },
-                {
-                  "__schema": "VariableLikeSchema",
-                  "location": {
-                    "filePath": "compare-aspect-view.tsx",
-                    "line": 14,
-                    "character": 3
-                  },
-                  "signature": "(property) loading?: boolean",
-                  "name": "loading",
-                  "type": {
-                    "__schema": "KeywordTypeSchema",
-                    "location": {
-                      "filePath": "compare-aspect-view.tsx",
-                      "line": 14,
-                      "character": 13
-                    },
-                    "name": "boolean"
-                  },
-                  "isOptional": true
-                },
-                {
-                  "__schema": "VariableLikeSchema",
-                  "location": {
-                    "filePath": "compare-aspect-view.tsx",
-                    "line": 15,
-                    "character": 3
-                  },
-                  "signature": "(property) name?: string",
-                  "name": "name",
-                  "type": {
-                    "__schema": "KeywordTypeSchema",
-                    "location": {
-                      "filePath": "compare-aspect-view.tsx",
-                      "line": 15,
-                      "character": 10
-                    },
-                    "name": "string"
-                  },
-                  "isOptional": true
-                }
-              ]
-            },
-            {
-              "__schema": "TypeRefSchema",
-              "location": {
-                "filePath": "compare-aspect-view.tsx",
-                "line": 16,
-                "character": 5
-              },
-              "name": "HTMLAttributes",
-              "packageName": "react",
-              "typeArgs": [
-                {
-                  "__schema": "TypeRefSchema",
-                  "location": {
-                    "filePath": "compare-aspect-view.tsx",
-                    "line": 16,
-                    "character": 20
-                  },
-                  "name": "HTMLDivElement"
-                }
-              ]
-            }
-          ]
-        }
-      }
-    ],
-    "internals": []
-  },
-  "internals": [
-    {
-      "__schema": "ModuleSchema",
-      "location": {
-        "filePath": "compare-aspect-view.tsx",
-        "line": 1,
-        "character": 1
-      },
-      "exports": [
-        {
-          "__schema": "TypeSchema",
-          "location": {
-            "filePath": "compare-aspect-view.tsx",
-            "line": 11,
-            "character": 1
-          },
-          "signature": "type CompareAspectViewProps = {\n    baseAspectData?: ComponentAspectData;\n    compareAspectData?: ComponentAspectData;\n    loading?: boolean;\n    name?: string;\n} & React.HTMLAttributes<HTMLDivElement>",
-          "name": "CompareAspectViewProps",
-          "type": {
-            "__schema": "TypeIntersectionSchema",
-            "location": {
-              "filePath": "compare-aspect-view.tsx",
-              "line": 11,
-              "character": 38
-            },
-            "types": [
-              {
-                "__schema": "TypeLiteralSchema",
-                "location": {
-                  "filePath": "compare-aspect-view.tsx",
-                  "line": 11,
-                  "character": 38
-                },
-                "members": [
-                  {
-                    "__schema": "VariableLikeSchema",
-                    "location": {
-                      "filePath": "compare-aspect-view.tsx",
-                      "line": 12,
-                      "character": 3
-                    },
-                    "signature": "(property) baseAspectData?: ComponentAspectData",
-                    "name": "baseAspectData",
-                    "type": {
-                      "__schema": "TypeRefSchema",
-                      "location": {
-                        "filePath": "compare-aspect-view.tsx",
-                        "line": 12,
-                        "character": 3
-                      },
-                      "name": "ComponentAspectData",
-                      "componentId": {
-                        "scope": "teambit.component",
-                        "name": "ui/component-compare/compare-aspects/models/component-compare-aspects-model",
-                        "version": "c0dc51d8f9ee990e89180950aa38789fb8e5bb3f"
-                      }
-                    },
-                    "isOptional": true
-                  },
-                  {
-                    "__schema": "VariableLikeSchema",
-                    "location": {
-                      "filePath": "compare-aspect-view.tsx",
-                      "line": 13,
-                      "character": 3
-                    },
-                    "signature": "(property) compareAspectData?: ComponentAspectData",
-                    "name": "compareAspectData",
-                    "type": {
-                      "__schema": "TypeRefSchema",
-                      "location": {
-                        "filePath": "compare-aspect-view.tsx",
-                        "line": 13,
-                        "character": 3
-                      },
-                      "name": "ComponentAspectData",
-                      "componentId": {
-                        "scope": "teambit.component",
-                        "name": "ui/component-compare/compare-aspects/models/component-compare-aspects-model",
-                        "version": "c0dc51d8f9ee990e89180950aa38789fb8e5bb3f"
-                      }
-                    },
-                    "isOptional": true
-                  },
-                  {
-                    "__schema": "VariableLikeSchema",
-                    "location": {
-                      "filePath": "compare-aspect-view.tsx",
-                      "line": 14,
-                      "character": 3
-                    },
-                    "signature": "(property) loading?: boolean",
-                    "name": "loading",
-                    "type": {
-                      "__schema": "KeywordTypeSchema",
-                      "location": {
-                        "filePath": "compare-aspect-view.tsx",
-                        "line": 14,
-                        "character": 13
-                      },
-                      "name": "boolean"
-                    },
-                    "isOptional": true
-                  },
-                  {
-                    "__schema": "VariableLikeSchema",
-                    "location": {
-                      "filePath": "compare-aspect-view.tsx",
-                      "line": 15,
-                      "character": 3
-                    },
-                    "signature": "(property) name?: string",
-                    "name": "name",
-                    "type": {
-                      "__schema": "KeywordTypeSchema",
-                      "location": {
-                        "filePath": "compare-aspect-view.tsx",
-                        "line": 15,
-                        "character": 10
-                      },
-                      "name": "string"
-                    },
-                    "isOptional": true
-                  }
-                ]
-              },
-              {
-                "__schema": "TypeRefSchema",
-                "location": {
-                  "filePath": "compare-aspect-view.tsx",
-                  "line": 16,
-                  "character": 5
-                },
-                "name": "HTMLAttributes",
-                "packageName": "react",
-                "typeArgs": [
-                  {
-                    "__schema": "TypeRefSchema",
-                    "location": {
-                      "filePath": "compare-aspect-view.tsx",
-                      "line": 16,
-                      "character": 20
-                    },
-                    "name": "HTMLDivElement"
-                  }
-                ]
-              }
-            ]
-          }
-        },
-        {
-          "__schema": "ReactSchema",
-          "location": {
-            "filePath": "compare-aspect-view.tsx",
-            "line": 18,
-            "character": 1
-          },
-          "signature": "function CompareAspectView({ baseAspectData, compareAspectData, name, loading, className, }: CompareAspectViewProps): React.JSX.Element",
-          "name": "CompareAspectView",
-          "props": {
-            "__schema": "ParameterSchema",
-            "location": {
-              "filePath": "compare-aspect-view.tsx",
-              "line": 18,
-              "character": 35
-            },
-            "name": "{ baseAspectData, compareAspectData, name, loading, className }",
-            "type": {
-              "__schema": "TypeRefSchema",
-              "location": {
-                "filePath": "compare-aspect-view.tsx",
-                "line": 24,
-                "character": 4
-              },
-              "name": "CompareAspectViewProps"
-            },
-            "isOptional": false,
-            "objectBindingNodes": [
-              {
-                "__schema": "InferenceTypeSchema",
-                "location": {
-                  "filePath": "compare-aspect-view.tsx",
-                  "line": 19,
-                  "character": 3
-                },
-                "name": "baseAspectData",
-                "type": "ComponentAspectData",
-                "isSpread": false
-              },
-              {
-                "__schema": "InferenceTypeSchema",
-                "location": {
-                  "filePath": "compare-aspect-view.tsx",
-                  "line": 20,
-                  "character": 3
-                },
-                "name": "compareAspectData",
-                "type": "ComponentAspectData",
-                "isSpread": false
-              },
-              {
-                "__schema": "InferenceTypeSchema",
-                "location": {
-                  "filePath": "compare-aspect-view.tsx",
-                  "line": 21,
-                  "character": 3
-                },
-                "name": "name",
-                "type": "string",
-                "isSpread": false
-              },
-              {
-                "__schema": "InferenceTypeSchema",
-                "location": {
-                  "filePath": "compare-aspect-view.tsx",
-                  "line": 22,
-                  "character": 3
-                },
-                "name": "loading",
-                "type": "boolean",
-                "isSpread": false
-              },
-              {
-                "__schema": "InferenceTypeSchema",
-                "location": {
-                  "filePath": "compare-aspect-view.tsx",
-                  "line": 23,
-                  "character": 3
-                },
-                "name": "className",
-                "type": "string",
-                "isSpread": false
-              }
-            ],
-            "isSpread": false
-          },
-          "returnType": {
-            "__schema": "TypeRefSchema",
-            "location": {
-              "filePath": "compare-aspect-view.tsx",
-              "line": 18,
-              "character": 1
-            },
-            "name": "React.JSX.Element",
-            "packageName": "react"
-          },
-          "modifiers": [
-            "export"
-          ]
-        }
-      ],
-      "internals": [
-        {
-          "__schema": "ReactSchema",
-          "location": {
-            "filePath": "compare-aspect-view.tsx",
-            "line": 85,
-            "character": 1
-          },
-          "signature": "function AspectsCompareViewLoader(): React.JSX.Element",
-          "name": "AspectsCompareViewLoader",
-          "returnType": {
-            "__schema": "TypeRefSchema",
-            "location": {
-              "filePath": "compare-aspect-view.tsx",
-              "line": 85,
-              "character": 1
-            },
-            "name": "React.JSX.Element",
-            "packageName": "react"
-          },
-          "modifiers": []
-        }
-      ]
-    }
-  ],
-  "componentId": {
-    "scope": "teambit.component",
-    "name": "ui/component-compare/compare-aspects/compare-aspect-view",
-    "version": "1e9fa46247bee3f8ec92ee0e92b1183d7079cf52"
-  },
-  "taggedModuleExports": []
-}

package/static/css/teambit.component/ui/component-compare/compare-aspects/compare-aspect-view.5f60e9cf.css

@@ -1 +0,0 @@
-.heading-sizes_xxs__Ib17g{font-size:16px;font-size:var(--bit-h-xxs,16px)}.heading-sizes_xs__Q45mG{font-size:18px;font-size:var(--bit-h-xs,18px)}.heading-sizes_sm__2FWqG{font-size:24px;font-size:var(--bit-h-sm,24px)}.heading-sizes_md__32Hll{font-size:26px;font-size:var(--bit-h-md,26px)}.heading-sizes_lg__18thp{font-size:36px;font-size:var(--bit-h-lg,36px)}.heading-sizes_xl__37yco{font-size:40px;font-size:var(--bit-h-xl,40px)}.heading-sizes_xxl__2uMK_{font-size:50px;font-size:var(--bit-h-xxl,50px)}.heading_h1__12Ka_,.heading_h2__14gmH,.heading_h3__30s6y,.heading_h4__3CJzE,.heading_h5__3ZSKR,.heading_h6__3lipg{font-weight:700;margin:0}.heading_h1__12Ka_{margin-bottom:20px}.skeleton_block__Rv_UT,.skeleton_circle__1_rKH,.skeleton_skeleton__2T3R_{background:currentColor}.skeleton_line__1F-ac>*,.skeleton_skeletonContent__nNXpo>*,.skeleton_word__15wCR>*{background:currentColor;display:inline-block;line-height:1}.skeleton_word__15wCR{display:inline-block;font-family:monospace;-webkit-user-select:none;-moz-user-select:none;user-select:none}.skeleton_line__1F-ac>*{width:100%}.skeleton_circle__1_rKH{border-radius:50%!important;display:inline-block;height:1em;width:1em}.skeleton-design_line__3Sk3K>*,.skeleton-design_skeletonContent__1iAen>*,.skeleton-design_word__1QDql>*{border-radius:4px}.skeleton-design_block__2HCr_,.skeleton-design_circle__LkvdA,.skeleton-design_line__3Sk3K>*,.skeleton-design_shimmer__3DP1f,.skeleton-design_skeletonContent__1iAen>*,.skeleton-design_skeleton__1udVi,.skeleton-design_word__1QDql>*{animation:skeleton-design_placeHolderShimmer__RG56N 1.5s linear infinite forwards;background-image:linear-gradient(90deg,currentColor 0,hsla(0,0%,100%,.38) 30%,hsla(0,0%,100%,.38) 70%,currentColor);background-repeat:no-repeat;background-size:10vw}@keyframes skeleton-design_skeleton-effect-fade__IlHIN{0%{opacity:1}50%{opacity:.6}to{opacity:1}}@keyframes skeleton-design_placeHolderShimmer__RG56N{0%{background-position:-10vw 0}to{background-position:100vw 0}}.skeleton-design_block__2HCr_{border-radius:4px}.dark-theme_darkMod__1puqW{--bit-text-color:#ededed;--bit-text-color-heavy:#f6f6f6;--bit-text-color-light:#878c9a;--bit-text-inactive:#6c707c;--bit-text-inactive-heavy:#878c9a;--bit-border-color:#6c707c;--bit-border-color-heavy:#878c9a;--bit-border-color-light:#414141;--bit-border-color-lightest:#414141;--bit-accent-color:#5d4aec;--bit-accent-heavy:#6c5ce7;--bit-accent-light:#3e29df;--bit-accent-text:#c9c3f6;--bit-accent-text-heavy:#eceaff;--bit-text-on-accent:var(--bit-text-color,#ededed);--bit-accent-bg:#1a1452;--bit-accent-bg-heavy:#221967;--bit-bg-color:#2b2b2b;--bit-bg-heavy:#414141;--bit-bg-heaviest:#6c707c;--bit-bg-bedrock:#0c0c0c;--bit-navigation:#2b2b2b;--bit-bg-overlay:#2b2b2b;--bit-bg-modal:#2b2b2b;--bit-bg-tooltip:#2b2b2b;--bit-bg-tooltip-heavy:#414141;--bit-bg-dent:#2b2b2b;--bit-error-color:#f7bac9;--bit-error-heavy:#fdeff2;--bit-error-light:#f086a0;--bit-error-bg:#8d1130;--bit-error-bg-heavy:#d31948;color:#ededed}.compare-aspect-view_componentCompareAspectViewContainer__1mEW8{height:100%;width:100%}.compare-aspect-view_componentCompareAspectDiffEditorContainer__2HvSr{display:flex;flex-direction:column;height:calc(100% - 56px);padding:0 8px}.compare-aspect-view_name__1SDX0{align-items:baseline;display:flex;padding:8px}.compare-aspect-view_componentCompareAspectCalculatedDiff__2e8aa,.compare-aspect-view_componentCompareAspectConfigDiff__100Mt{display:flex;flex:1 1;flex-direction:column;height:100%;padding:0 8px}.compare-aspect-view_componentCompareAspectCalculatedDiff__2e8aa>section,.compare-aspect-view_componentCompareAspectConfigDiff__100Mt>section{border-radius:8px;overflow:hidden}.compare-aspect-view_loader__2Mvxw{align-items:center;color:#282828;color:var(--on-surface-neutral-low-color,#282828);display:flex;height:100%;justify-items:center;width:100%}.compare-aspect-view_loader__2Mvxw,.compare-aspect-view_loader__2Mvxw>div{background-image:linear-gradient(90deg,currentColor 0,#2b2b2b 30%,#2b2b2b 50%,currentColor)}

package/teambit_component_ui_component_compare_compare_aspects_compare_aspect_view-component.js

@@ -1,15 +0,0 @@
-(function(root,factory){typeof exports=="object"&&typeof module=="object"?module.exports=factory():typeof define=="function"&&define.amd?define([],factory):typeof exports=="object"?exports["teambit.component/ui/component-compare/compare-aspects/compare-aspect-view"]=factory():root["teambit.component/ui/component-compare/compare-aspects/compare-aspect-view"]=factory()})(self,()=>(()=>{var __webpack_modules__={19033:(__unused_webpack_module,__webpack_exports__2,__webpack_require__2)=>{"use strict";__webpack_require__2.r(__webpack_exports__2),__webpack_require__2.d(__webpack_exports__2,{DiffEditor:()=>es_DiffEditor,default:()=>es_Editor,loader:()=>es_loader,useMonaco:()=>hooks_useMonaco});function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})),keys.push.apply(keys,symbols)}return keys}function _objectSpread2(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach(function(key){_defineProperty(target,key,source[key])}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.keys(source),key,i;for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],!(excluded.indexOf(key)>=0)&&(target[key]=source[key]);return target}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&(!Object.prototype.propertyIsEnumerable.call(source,key)||(target[key]=source[key]))}return target}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest()}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}function _iterableToArrayLimit(arr,i){if(!(typeof Symbol>"u"||!(Symbol.iterator in Object(arr)))){var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!(i&&_arr.length===i));_n=!0);}catch(err){_d=!0,_e=err}finally{try{!_n&&_i.return!=null&&_i.return()}finally{if(_d)throw _e}}return _arr}}function _unsupportedIterableToArray(o,minLen){if(!!o){if(typeof o=="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor&&(n=o.constructor.name),n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}}function _arrayLikeToArray(arr,len){(len==null||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _nonIterableRest(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
-In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function state_local_defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function state_local_ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})),keys.push.apply(keys,symbols)}return keys}function state_local_objectSpread2(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};i%2?state_local_ownKeys(Object(source),!0).forEach(function(key){state_local_defineProperty(target,key,source[key])}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):state_local_ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function compose(){for(var _len=arguments.length,fns=new Array(_len),_key=0;_key<_len;_key++)fns[_key]=arguments[_key];return function(x){return fns.reduceRight(function(y,f){return f(y)},x)}}function curry(fn){return function curried(){for(var _this=this,_len2=arguments.length,args=new Array(_len2),_key2=0;_key2<_len2;_key2++)args[_key2]=arguments[_key2];return args.length>=fn.length?fn.apply(this,args):function(){for(var _len3=arguments.length,nextArgs=new Array(_len3),_key3=0;_key3<_len3;_key3++)nextArgs[_key3]=arguments[_key3];return curried.apply(_this,[].concat(args,nextArgs))}}}function isObject(value){return{}.toString.call(value).includes("Object")}function isEmpty(obj){return!Object.keys(obj).length}function isFunction(value){return typeof value=="function"}function state_local_hasOwnProperty(object,property){return Object.prototype.hasOwnProperty.call(object,property)}function validateChanges(initial,changes){return isObject(changes)||errorHandler("changeType"),Object.keys(changes).some(function(field){return!state_local_hasOwnProperty(initial,field)})&&errorHandler("changeField"),changes}function validateSelector(selector){isFunction(selector)||errorHandler("selectorType")}function validateHandler(handler){isFunction(handler)||isObject(handler)||errorHandler("handlerType"),isObject(handler)&&Object.values(handler).some(function(_handler){return!isFunction(_handler)})&&errorHandler("handlersType")}function validateInitial(initial){initial||errorHandler("initialIsRequired"),isObject(initial)||errorHandler("initialType"),isEmpty(initial)&&errorHandler("initialContent")}function throwError(errorMessages2,type){throw new Error(errorMessages2[type]||errorMessages2.default)}var errorMessages={initialIsRequired:"initial state is required",initialType:"initial state should be an object",initialContent:"initial state shouldn't be an empty object",handlerType:"handler should be an object or a function",handlersType:"all handlers should be a functions",selectorType:"selector should be a function",changeType:"provided value of changes should be an object",changeField:'it seams you want to change a field in the state which is not specified in the "initial" state',default:"an unknown error accured in `state-local` package"},errorHandler=curry(throwError)(errorMessages),validators={changes:validateChanges,selector:validateSelector,handler:validateHandler,initial:validateInitial};function create(initial){var handler=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};validators.initial(initial),validators.handler(handler);var state={current:initial},didUpdate=curry(didStateUpdate)(state,handler),update=curry(updateState)(state),validate=curry(validators.changes)(initial),getChanges=curry(extractChanges)(state);function getState2(){var selector=arguments.length>0&&arguments[0]!==void 0?arguments[0]:function(state2){return state2};return validators.selector(selector),selector(state.current)}function setState2(causedChanges){compose(didUpdate,update,validate,getChanges)(causedChanges)}return[getState2,setState2]}function extractChanges(state,causedChanges){return isFunction(causedChanges)?causedChanges(state.current):causedChanges}function updateState(state,changes){return state.current=state_local_objectSpread2(state_local_objectSpread2({},state.current),changes),changes}function didStateUpdate(state,handler,changes){return isFunction(handler)?handler(state.current):Object.keys(changes).forEach(function(field){var _handler$field;return(_handler$field=handler[field])===null||_handler$field===void 0?void 0:_handler$field.call(handler,state.current[field])}),changes}var index={create};const state_local=index;var config={paths:{vs:"https://cdn.jsdelivr.net/npm/monaco-editor@0.43.0/min/vs"}};const es_config=config;function curry_curry(fn){return function curried(){for(var _this=this,_len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return args.length>=fn.length?fn.apply(this,args):function(){for(var _len2=arguments.length,nextArgs=new Array(_len2),_key2=0;_key2<_len2;_key2++)nextArgs[_key2]=arguments[_key2];return curried.apply(_this,[].concat(args,nextArgs))}}}const utils_curry=curry_curry;function isObject_isObject(value){return{}.toString.call(value).includes("Object")}const utils_isObject=isObject_isObject;function validateConfig(config2){return config2||validators_errorHandler("configIsRequired"),utils_isObject(config2)||validators_errorHandler("configType"),config2.urls?(informAboutDeprecation(),{paths:{vs:config2.urls.monacoBase}}):config2}function informAboutDeprecation(){console.warn(validators_errorMessages.deprecation)}function validators_throwError(errorMessages2,type){throw new Error(errorMessages2[type]||errorMessages2.default)}var validators_errorMessages={configIsRequired:"the configuration object is required",configType:"the configuration object should be an object",default:"an unknown error accured in `@monaco-editor/loader` package",deprecation:`Deprecation warning!
-    You are using deprecated way of configuration.
-
-    Instead of using
-      monaco.config({ urls: { monacoBase: '...' } })
-    use
-      monaco.config({ paths: { vs: '...' } })
-
-    For more please check the link https://github.com/suren-atoyan/monaco-loader#config
-  `},validators_errorHandler=utils_curry(validators_throwError)(validators_errorMessages),validators_validators={config:validateConfig};const es_validators=validators_validators;var compose_compose=function(){for(var _len=arguments.length,fns=new Array(_len),_key=0;_key<_len;_key++)fns[_key]=arguments[_key];return function(x){return fns.reduceRight(function(y,f){return f(y)},x)}};const utils_compose=compose_compose;function merge(target,source){return Object.keys(source).forEach(function(key){source[key]instanceof Object&&target[key]&&Object.assign(source[key],merge(target[key],source[key]))}),_objectSpread2(_objectSpread2({},target),source)}const deepMerge=merge;var CANCELATION_MESSAGE={type:"cancelation",msg:"operation is manually canceled"};function makeCancelable(promise){var hasCanceled_=!1,wrappedPromise=new Promise(function(resolve,reject){promise.then(function(val){return hasCanceled_?reject(CANCELATION_MESSAGE):resolve(val)}),promise.catch(reject)});return wrappedPromise.cancel=function(){return hasCanceled_=!0},wrappedPromise}const utils_makeCancelable=makeCancelable;var _state$create=state_local.create({config:es_config,isInitialized:!1,resolve:null,reject:null,monaco:null}),_state$create2=_slicedToArray(_state$create,2),getState=_state$create2[0],setState=_state$create2[1];function loader_config(globalConfig){var _validators$config=es_validators.config(globalConfig),monaco=_validators$config.monaco,config2=_objectWithoutProperties(_validators$config,["monaco"]);setState(function(state){return{config:deepMerge(state.config,config2),monaco}})}function init(){var state=getState(function(_ref){var monaco=_ref.monaco,isInitialized=_ref.isInitialized,resolve=_ref.resolve;return{monaco,isInitialized,resolve}});if(!state.isInitialized){if(setState({isInitialized:!0}),state.monaco)return state.resolve(state.monaco),utils_makeCancelable(wrapperPromise);if(window.monaco&&window.monaco.editor)return storeMonacoInstance(window.monaco),state.resolve(window.monaco),utils_makeCancelable(wrapperPromise);utils_compose(injectScripts,getMonacoLoaderScript)(configureLoader)}return utils_makeCancelable(wrapperPromise)}function injectScripts(script){return document.body.appendChild(script)}function createScript(src){var script=document.createElement("script");return src&&(script.src=src),script}function getMonacoLoaderScript(configureLoader2){var state=getState(function(_ref2){var config2=_ref2.config,reject=_ref2.reject;return{config:config2,reject}}),loaderScript=createScript("".concat(state.config.paths.vs,"/loader.js"));return loaderScript.onload=function(){return configureLoader2()},loaderScript.onerror=state.reject,loaderScript}function configureLoader(){var state=getState(function(_ref3){var config2=_ref3.config,resolve=_ref3.resolve,reject=_ref3.reject;return{config:config2,resolve,reject}}),require=window.require;require.config(state.config),require(["vs/editor/editor.main"],function(monaco){storeMonacoInstance(monaco),state.resolve(monaco)},function(error){state.reject(error)})}function storeMonacoInstance(monaco){getState().monaco||setState({monaco})}function __getMonacoInstance(){return getState(function(_ref4){var monaco=_ref4.monaco;return monaco})}var wrapperPromise=new Promise(function(resolve,reject){return setState({resolve,reject})}),loader={config:loader_config,init,__getMonacoInstance};const es_loader=loader;var external_React_=__webpack_require__2(87363),external_React_default=__webpack_require__2.n(external_React_),prop_types=__webpack_require__2(33089),prop_types_default=__webpack_require__2.n(prop_types);function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}const loadingStyles={display:"flex",height:"100%",width:"100%",justifyContent:"center",alignItems:"center"};function Loading({content}){return external_React_default().createElement("div",{style:loadingStyles},content)}const Loading_Loading=Loading,MonacoContainer_styles={wrapper:{display:"flex",position:"relative",textAlign:"initial"},fullWidth:{width:"100%"},hide:{display:"none"}};function MonacoContainer({width,height,isEditorReady,loading,_ref,className,wrapperProps}){return external_React_default().createElement("section",_extends({style:{...MonacoContainer_styles.wrapper,width,height}},wrapperProps),!isEditorReady&&external_React_default().createElement(Loading_Loading,{content:loading}),external_React_default().createElement("div",{ref:_ref,style:{...MonacoContainer_styles.fullWidth,...!isEditorReady&&MonacoContainer_styles.hide},className}))}MonacoContainer.propTypes={width:prop_types_default().oneOfType([prop_types_default().number,prop_types_default().string]).isRequired,height:prop_types_default().oneOfType([prop_types_default().number,prop_types_default().string]).isRequired,loading:prop_types_default().oneOfType([prop_types_default().element,prop_types_default().string]).isRequired,isEditorReady:prop_types_default().bool.isRequired,className:prop_types_default().string,wrapperProps:prop_types_default().object};const MonacoContainer_MonacoContainer=MonacoContainer;var es_MonacoContainer_MonacoContainer=(0,external_React_.memo)(MonacoContainer_MonacoContainer);const es_MonacoContainer=es_MonacoContainer_MonacoContainer;function useMount(effect){(0,external_React_.useEffect)(effect,[])}const hooks_useMount=useMount;function useUpdate(effect,deps,applyChanges=!0){const isInitialMount=(0,external_React_.useRef)(!0);(0,external_React_.useEffect)(isInitialMount.current||!applyChanges?()=>{isInitialMount.current=!1}:effect,deps)}const hooks_useUpdate=useUpdate;function noop(){}function getOrCreateModel(monaco,value,language,path){return getModel(monaco,path)||createModel(monaco,value,language,path)}function getModel(monaco,path){return monaco.editor.getModel(createModelUri(monaco,path))}function createModel(monaco,value,language,path){return monaco.editor.createModel(value,language,path&&createModelUri(monaco,path))}function createModelUri(monaco,path){return monaco.Uri.parse(path)}function isUndefined(input){return input===void 0}function DiffEditor({original,modified,language,originalLanguage,modifiedLanguage,originalModelPath,modifiedModelPath,keepCurrentOriginalModel,keepCurrentModifiedModel,theme,loading,options,height,width,className,wrapperProps,beforeMount,onMount}){const[isEditorReady,setIsEditorReady]=(0,external_React_.useState)(!1),[isMonacoMounting,setIsMonacoMounting]=(0,external_React_.useState)(!0),editorRef=(0,external_React_.useRef)(null),monacoRef=(0,external_React_.useRef)(null),containerRef=(0,external_React_.useRef)(null),onMountRef=(0,external_React_.useRef)(onMount),beforeMountRef=(0,external_React_.useRef)(beforeMount);hooks_useMount(()=>{const cancelable=es_loader.init();return cancelable.then(monaco=>(monacoRef.current=monaco)&&setIsMonacoMounting(!1)).catch(error=>error?.type!=="cancelation"&&console.error("Monaco initialization: error:",error)),()=>editorRef.current?disposeEditor():cancelable.cancel()}),hooks_useUpdate(()=>{const modifiedEditor=editorRef.current.getModifiedEditor();modifiedEditor.getOption(monacoRef.current.editor.EditorOption.readOnly)?modifiedEditor.setValue(modified):modified!==modifiedEditor.getValue()&&(modifiedEditor.executeEdits("",[{range:modifiedEditor.getModel().getFullModelRange(),text:modified,forceMoveMarkers:!0}]),modifiedEditor.pushUndoStop())},[modified],isEditorReady),hooks_useUpdate(()=>{editorRef.current.getModel().original.setValue(original)},[original],isEditorReady),hooks_useUpdate(()=>{const{original:original2,modified:modified2}=editorRef.current.getModel();monacoRef.current.editor.setModelLanguage(original2,originalLanguage||language),monacoRef.current.editor.setModelLanguage(modified2,modifiedLanguage||language)},[language,originalLanguage,modifiedLanguage],isEditorReady),hooks_useUpdate(()=>{monacoRef.current.editor.setTheme(theme)},[theme],isEditorReady),hooks_useUpdate(()=>{editorRef.current.updateOptions(options)},[options],isEditorReady);const setModels=(0,external_React_.useCallback)(()=>{beforeMountRef.current(monacoRef.current);const originalModel=getOrCreateModel(monacoRef.current,original,originalLanguage||language,originalModelPath),modifiedModel=getOrCreateModel(monacoRef.current,modified,modifiedLanguage||language,modifiedModelPath);editorRef.current.setModel({original:originalModel,modified:modifiedModel})},[language,modified,modifiedLanguage,original,originalLanguage,originalModelPath,modifiedModelPath]),createEditor=(0,external_React_.useCallback)(()=>{editorRef.current=monacoRef.current.editor.createDiffEditor(containerRef.current,{automaticLayout:!0,...options}),setModels(),monacoRef.current.editor.setTheme(theme),setIsEditorReady(!0)},[options,theme,setModels]);(0,external_React_.useEffect)(()=>{isEditorReady&&onMountRef.current(editorRef.current,monacoRef.current)},[isEditorReady]),(0,external_React_.useEffect)(()=>{!isMonacoMounting&&!isEditorReady&&createEditor()},[isMonacoMounting,isEditorReady,createEditor]);function disposeEditor(){const models=editorRef.current.getModel();if(!keepCurrentOriginalModel){var _models$original;(_models$original=models.original)===null||_models$original===void 0||_models$original.dispose()}if(!keepCurrentModifiedModel){var _models$modified;(_models$modified=models.modified)===null||_models$modified===void 0||_models$modified.dispose()}editorRef.current.dispose()}return external_React_default().createElement(es_MonacoContainer,{width,height,isEditorReady,loading,_ref:containerRef,className,wrapperProps})}DiffEditor.propTypes={original:prop_types_default().string,modified:prop_types_default().string,language:prop_types_default().string,originalLanguage:prop_types_default().string,modifiedLanguage:prop_types_default().string,originalModelPath:prop_types_default().string,modifiedModelPath:prop_types_default().string,keepCurrentOriginalModel:prop_types_default().bool,keepCurrentModifiedModel:prop_types_default().bool,theme:prop_types_default().string,loading:prop_types_default().oneOfType([prop_types_default().element,prop_types_default().string]),options:prop_types_default().object,width:prop_types_default().oneOfType([prop_types_default().number,prop_types_default().string]),height:prop_types_default().oneOfType([prop_types_default().number,prop_types_default().string]),className:prop_types_default().string,wrapperProps:prop_types_default().object,beforeMount:prop_types_default().func,onMount:prop_types_default().func},DiffEditor.defaultProps={theme:"light",loading:"Loading...",options:{},keepCurrentOriginalModel:!1,keepCurrentModifiedModel:!1,width:"100%",height:"100%",wrapperProps:{},beforeMount:noop,onMount:noop};const DiffEditor_DiffEditor=DiffEditor;var DiffEditor_index=(0,external_React_.memo)(DiffEditor_DiffEditor);const es_DiffEditor=DiffEditor_index;function useMonaco(){const[monaco,setMonaco]=(0,external_React_.useState)(es_loader.__getMonacoInstance());return hooks_useMount(()=>{let cancelable;return monaco||(cancelable=es_loader.init(),cancelable.then(monaco2=>{setMonaco(monaco2)})),()=>{var _cancelable;return(_cancelable=cancelable)===null||_cancelable===void 0?void 0:_cancelable.cancel()}}),monaco}const hooks_useMonaco=useMonaco;function usePrevious(value){const ref=(0,external_React_.useRef)();return(0,external_React_.useEffect)(()=>{ref.current=value},[value]),ref.current}const hooks_usePrevious=usePrevious,viewStates=new Map;function Editor({defaultValue,defaultLanguage,defaultPath,value,language,path,theme,line,loading,options,overrideServices,saveViewState,keepCurrentModel,width,height,className,wrapperProps,beforeMount,onMount,onChange,onValidate}){const[isEditorReady,setIsEditorReady]=(0,external_React_.useState)(!1),[isMonacoMounting,setIsMonacoMounting]=(0,external_React_.useState)(!0),monacoRef=(0,external_React_.useRef)(null),editorRef=(0,external_React_.useRef)(null),containerRef=(0,external_React_.useRef)(null),onMountRef=(0,external_React_.useRef)(onMount),beforeMountRef=(0,external_React_.useRef)(beforeMount),subscriptionRef=(0,external_React_.useRef)(null),valueRef=(0,external_React_.useRef)(value),previousPath=hooks_usePrevious(path),preventCreation=(0,external_React_.useRef)(!1);hooks_useMount(()=>{const cancelable=es_loader.init();return cancelable.then(monaco=>(monacoRef.current=monaco)&&setIsMonacoMounting(!1)).catch(error=>error?.type!=="cancelation"&&console.error("Monaco initialization: error:",error)),()=>editorRef.current?disposeEditor():cancelable.cancel()}),hooks_useUpdate(()=>{const model=getOrCreateModel(monacoRef.current,defaultValue||value,defaultLanguage||language,path);model!==editorRef.current.getModel()&&(saveViewState&&viewStates.set(previousPath,editorRef.current.saveViewState()),editorRef.current.setModel(model),saveViewState&&editorRef.current.restoreViewState(viewStates.get(path)))},[path],isEditorReady),hooks_useUpdate(()=>{editorRef.current.updateOptions(options)},[options],isEditorReady),hooks_useUpdate(()=>{editorRef.current.getOption(monacoRef.current.editor.EditorOption.readOnly)?editorRef.current.setValue(value):value!==editorRef.current.getValue()&&(editorRef.current.executeEdits("",[{range:editorRef.current.getModel().getFullModelRange(),text:value,forceMoveMarkers:!0}]),editorRef.current.pushUndoStop())},[value],isEditorReady),hooks_useUpdate(()=>{monacoRef.current.editor.setModelLanguage(editorRef.current.getModel(),language)},[language],isEditorReady),hooks_useUpdate(()=>{isUndefined(line)||editorRef.current.revealLine(line)},[line],isEditorReady),hooks_useUpdate(()=>{monacoRef.current.editor.setTheme(theme)},[theme],isEditorReady);const createEditor=(0,external_React_.useCallback)(()=>{if(!preventCreation.current){beforeMountRef.current(monacoRef.current);const autoCreatedModelPath=path||defaultPath,defaultModel=getOrCreateModel(monacoRef.current,value||defaultValue,defaultLanguage||language,autoCreatedModelPath);editorRef.current=monacoRef.current.editor.create(containerRef.current,{model:defaultModel,automaticLayout:!0,...options},overrideServices),saveViewState&&editorRef.current.restoreViewState(viewStates.get(autoCreatedModelPath)),monacoRef.current.editor.setTheme(theme),setIsEditorReady(!0),preventCreation.current=!0}},[defaultValue,defaultLanguage,defaultPath,value,language,path,options,overrideServices,saveViewState,theme]);(0,external_React_.useEffect)(()=>{isEditorReady&&onMountRef.current(editorRef.current,monacoRef.current)},[isEditorReady]),(0,external_React_.useEffect)(()=>{!isMonacoMounting&&!isEditorReady&&createEditor()},[isMonacoMounting,isEditorReady,createEditor]),valueRef.current=value,(0,external_React_.useEffect)(()=>{if(isEditorReady&&onChange){var _subscriptionRef$curr,_editorRef$current;(_subscriptionRef$curr=subscriptionRef.current)===null||_subscriptionRef$curr===void 0||_subscriptionRef$curr.dispose(),subscriptionRef.current=(_editorRef$current=editorRef.current)===null||_editorRef$current===void 0?void 0:_editorRef$current.onDidChangeModelContent(event=>{onChange(editorRef.current.getValue(),event)})}},[isEditorReady,onChange]),(0,external_React_.useEffect)(()=>{if(isEditorReady){const changeMarkersListener=monacoRef.current.editor.onDidChangeMarkers(uris=>{var _editorRef$current$ge;const editorUri=(_editorRef$current$ge=editorRef.current.getModel())===null||_editorRef$current$ge===void 0?void 0:_editorRef$current$ge.uri;if(editorUri&&uris.find(uri=>uri.path===editorUri.path)){const markers=monacoRef.current.editor.getModelMarkers({resource:editorUri});onValidate?.(markers)}});return()=>{changeMarkersListener?.dispose()}}},[isEditorReady,onValidate]);function disposeEditor(){var _subscriptionRef$curr2;if((_subscriptionRef$curr2=subscriptionRef.current)===null||_subscriptionRef$curr2===void 0||_subscriptionRef$curr2.dispose(),keepCurrentModel)saveViewState&&viewStates.set(path,editorRef.current.saveViewState());else{var _editorRef$current$ge2;(_editorRef$current$ge2=editorRef.current.getModel())===null||_editorRef$current$ge2===void 0||_editorRef$current$ge2.dispose()}editorRef.current.dispose()}return external_React_default().createElement(es_MonacoContainer,{width,height,isEditorReady,loading,_ref:containerRef,className,wrapperProps})}Editor.propTypes={defaultValue:prop_types_default().string,defaultPath:prop_types_default().string,defaultLanguage:prop_types_default().string,value:prop_types_default().string,language:prop_types_default().string,path:prop_types_default().string,theme:prop_types_default().string,line:prop_types_default().number,loading:prop_types_default().oneOfType([prop_types_default().element,prop_types_default().string]),options:prop_types_default().object,overrideServices:prop_types_default().object,saveViewState:prop_types_default().bool,keepCurrentModel:prop_types_default().bool,width:prop_types_default().oneOfType([prop_types_default().number,prop_types_default().string]),height:prop_types_default().oneOfType([prop_types_default().number,prop_types_default().string]),className:prop_types_default().string,wrapperProps:prop_types_default().object,beforeMount:prop_types_default().func,onMount:prop_types_default().func,onChange:prop_types_default().func,onValidate:prop_types_default().func},Editor.defaultProps={theme:"light",loading:"Loading...",options:{},overrideServices:{},saveViewState:!0,keepCurrentModel:!1,width:"100%",height:"100%",wrapperProps:{},beforeMount:noop,onMount:noop,onValidate:noop};const Editor_Editor=Editor;var Editor_index=(0,external_React_.memo)(Editor_Editor);const es_Editor=Editor_index},99186:(module2,exports2)=>{var __WEBPACK_AMD_DEFINE_ARRAY__,__WEBPACK_AMD_DEFINE_RESULT__;/*!
-  Copyright (c) 2017 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/(function(){"use strict";var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(!!arg){var argType=typeof arg;if(argType==="string"||argType==="number")classes.push(arg);else if(Array.isArray(arg)&&arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}else if(argType==="object")for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}module2.exports?(classNames.default=classNames,module2.exports=classNames):(__WEBPACK_AMD_DEFINE_ARRAY__=[],__WEBPACK_AMD_DEFINE_RESULT__=function(){return classNames}.apply(exports2,__WEBPACK_AMD_DEFINE_ARRAY__),__WEBPACK_AMD_DEFINE_RESULT__!==void 0&&(module2.exports=__WEBPACK_AMD_DEFINE_RESULT__))})()},23591:(module2,__unused_webpack_exports,__webpack_require__2)=>{"use strict";var ReactPropTypesSecret=__webpack_require__2(56596);function emptyFunction(){}function emptyFunctionWithReset(){}emptyFunctionWithReset.resetWarningCache=emptyFunction,module2.exports=function(){function shim(props,propName,componentName,location,propFullName,secret){if(secret!==ReactPropTypesSecret){var err=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw err.name="Invariant Violation",err}}shim.isRequired=shim;function getShim(){return shim}var ReactPropTypes={array:shim,bigint:shim,bool:shim,func:shim,number:shim,object:shim,string:shim,symbol:shim,any:shim,arrayOf:getShim,element:shim,elementType:shim,instanceOf:getShim,node:shim,objectOf:getShim,oneOf:getShim,oneOfType:getShim,shape:getShim,exact:getShim,checkPropTypes:emptyFunctionWithReset,resetWarningCache:emptyFunction};return ReactPropTypes.PropTypes=ReactPropTypes,ReactPropTypes}},33089:(module2,__unused_webpack_exports,__webpack_require__2)=>{if(!1)var throwOnDirectAccess,ReactIs;else module2.exports=__webpack_require__2(23591)()},56596:module2=>{"use strict";var ReactPropTypesSecret="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";module2.exports=ReactPropTypesSecret},67604:(__unused_webpack_module,exports2,__webpack_require__2)=>{"use strict";var __bit_component={id:"teambit.base-ui/loaders/skeleton@1.0.1",homepage:"https://bit.dev/teambit/base-ui/loaders/skeleton",exported:!0};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.WordSkeleton=exports2.LineSkeleton=exports2.CircleSkeleton=exports2.BlockSkeleton=exports2.Skeleton=void 0;var skeleton_1=__webpack_require__2(87872);Object.defineProperty(exports2,"Skeleton",{enumerable:!0,get:function(){return skeleton_1.Skeleton}}),Object.defineProperty(exports2,"BlockSkeleton",{enumerable:!0,get:function(){return skeleton_1.BlockSkeleton}}),Object.defineProperty(exports2,"CircleSkeleton",{enumerable:!0,get:function(){return skeleton_1.CircleSkeleton}}),Object.defineProperty(exports2,"LineSkeleton",{enumerable:!0,get:function(){return skeleton_1.LineSkeleton}}),Object.defineProperty(exports2,"WordSkeleton",{enumerable:!0,get:function(){return skeleton_1.WordSkeleton}})},87872:function(__unused_webpack_module,exports2,__webpack_require__2){"use strict";var __bit_component={id:"teambit.base-ui/loaders/skeleton@1.0.1",homepage:"https://bit.dev/teambit/base-ui/loaders/skeleton",exported:!0},__rest=this&&this.__rest||function(s,e){var t={};for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0&&(t[p]=s[p]);if(s!=null&&typeof Object.getOwnPropertySymbols=="function")for(var i=0,p=Object.getOwnPropertySymbols(s);i<p.length;i++)e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i])&&(t[p[i]]=s[p[i]]);return t},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.title=exports2.BlockSkeleton=exports2.CircleSkeleton=exports2.LineSkeleton=exports2.WordSkeleton=exports2.Skeleton=void 0;const react_1=__importDefault(__webpack_require__2(87363)),classnames_1=__importDefault(__webpack_require__2(99186)),skeleton_module_scss_1=__importDefault(__webpack_require__2(17058)),skeleton_design_module_scss_1=__importDefault(__webpack_require__2(91136)),NBSP="\xA0";function Skeleton(_a){var{designClass=skeleton_design_module_scss_1.default.skeleton,className}=_a,rest=__rest(_a,["designClass","className"]);return react_1.default.createElement("div",Object.assign({},rest,{className:(0,classnames_1.default)(skeleton_module_scss_1.default.skeleton,designClass,className)}))}Skeleton.__bit_component=__bit_component,exports2.Skeleton=Skeleton;function WordSkeleton(_a){var{length=5,designClass=skeleton_design_module_scss_1.default.word,className,style}=_a,rest=__rest(_a,["length","designClass","className","style"]);return react_1.default.createElement("span",Object.assign({},rest,{className:(0,classnames_1.default)(skeleton_module_scss_1.default.word,className,designClass),style:Object.assign({},style)}),react_1.default.createElement("span",null,Array.from({length}).map(()=>NBSP)))}WordSkeleton.__bit_component=__bit_component,exports2.WordSkeleton=WordSkeleton;function LineSkeleton(_a){var{width,count=1,designClass=skeleton_design_module_scss_1.default.line,className,style}=_a,rest=__rest(_a,["width","count","designClass","className","style"]);return react_1.default.createElement("div",Object.assign({},rest,{className:(0,classnames_1.default)(skeleton_module_scss_1.default.line,designClass,className),style:Object.assign({width},style)}),Array.from({length:count}).map((x,index)=>react_1.default.createElement("div",{key:index},NBSP)))}LineSkeleton.__bit_component=__bit_component,exports2.LineSkeleton=LineSkeleton;function CircleSkeleton(_a){var{size=2,designClass=skeleton_design_module_scss_1.default.circle,className,style}=_a,rest=__rest(_a,["size","designClass","className","style"]);return react_1.default.createElement("span",Object.assign({},rest,{className:(0,classnames_1.default)(skeleton_module_scss_1.default.circle,className,designClass),style:Object.assign({height:`${size}em`,width:`${size}em`,lineHeight:size},style)}),NBSP)}CircleSkeleton.__bit_component=__bit_component,exports2.CircleSkeleton=CircleSkeleton;function BlockSkeleton(_a){var{lines=5,designClass=skeleton_design_module_scss_1.default.block,className,style}=_a,rest=__rest(_a,["lines","designClass","className","style"]);return react_1.default.createElement("div",Object.assign({},rest,{className:(0,classnames_1.default)(skeleton_module_scss_1.default.block,designClass,className),style:Object.assign({height:`${lines}em`},style)}))}BlockSkeleton.__bit_component=__bit_component,exports2.BlockSkeleton=BlockSkeleton;function title(){return react_1.default.createElement("div",{style:{marginBottom:"1em"}},react_1.default.createElement(WordSkeleton,{style:{fontSize:18}}))}title.__bit_component=__bit_component,exports2.title=title},64045:function(__unused_webpack_module,exports2,__webpack_require__2){"use strict";var __bit_component={id:"teambit.base-ui/text/heading@1.0.1",homepage:"https://bit.dev/teambit/base-ui/text/heading",exported:!0},__rest=this&&this.__rest||function(s,e){var t={};for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0&&(t[p]=s[p]);if(s!=null&&typeof Object.getOwnPropertySymbols=="function")for(var i=0,p=Object.getOwnPropertySymbols(s);i<p.length;i++)e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i])&&(t[p[i]]=s[p[i]]);return t},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.Heading=void 0;const react_1=__importDefault(__webpack_require__2(87363));function Heading(props){const{element}=props,rest=__rest(props,["element"]),Element=element||"h1";return react_1.default.createElement(Element,Object.assign({"data-bit-id":"teambit.base-ui/text/heading"},rest))}Heading.__bit_component=__bit_component,exports2.Heading=Heading,Heading.defaultProps={element:"h1"}},37406:function(__unused_webpack_module,exports2,__webpack_require__2){"use strict";var __bit_component={id:"teambit.base-ui/text/heading@1.0.1",homepage:"https://bit.dev/teambit/base-ui/text/heading",exported:!0},__createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){k2===void 0&&(k2=k),Object.defineProperty(o,k2,{enumerable:!0,get:function(){return m[k]}})}:function(o,m,k,k2){k2===void 0&&(k2=k),o[k2]=m[k]}),__exportStar=this&&this.__exportStar||function(m,exports3){for(var p in m)p!=="default"&&!Object.prototype.hasOwnProperty.call(exports3,p)&&__createBinding(exports3,m,p)};Object.defineProperty(exports2,"__esModule",{value:!0}),__exportStar(__webpack_require__2(64045),exports2)},41444:function(__unused_webpack_module,exports2,__webpack_require__2){"use strict";var __bit_component={id:"teambit.base-ui/theme/dark-theme@1.0.2",homepage:"https://bit.dev/teambit/base-ui/theme/dark-theme",exported:!0},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.darkMode=void 0;const dark_theme_module_scss_1=__importDefault(__webpack_require__2(11879));exports2.darkMode=dark_theme_module_scss_1.default.darkMod},96172:function(__unused_webpack_module,exports2,__webpack_require__2){"use strict";var __bit_component={id:"teambit.documenter/ui/heading@4.1.1",homepage:"https://bit.dev/teambit/documenter/ui/heading",exported:!0},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.H6=exports2.H5=exports2.H4=exports2.H3=exports2.H2=exports2.H1=void 0;const react_1=__importDefault(__webpack_require__2(87363)),classnames_1=__importDefault(__webpack_require__2(99186)),base_ui_text_heading_1=__webpack_require__2(37406),heading_sizes_module_scss_1=__importDefault(__webpack_require__2(54210)),heading_module_scss_1=__importDefault(__webpack_require__2(22982));function H1(props){return react_1.default.createElement(base_ui_text_heading_1.Heading,Object.assign({element:"h1"},props,{className:classnames_1.default(heading_module_scss_1.default.h1,heading_sizes_module_scss_1.default[props.size||"lg"],props.className)}))}H1.__bit_component=__bit_component,exports2.H1=H1;function H2(props){return react_1.default.createElement(base_ui_text_heading_1.Heading,Object.assign({element:"h2"},props,{className:classnames_1.default(heading_module_scss_1.default.h2,heading_sizes_module_scss_1.default[props.size||"lg"],props.className)}))}H2.__bit_component=__bit_component,exports2.H2=H2;function H3(props){return react_1.default.createElement(base_ui_text_heading_1.Heading,Object.assign({element:"h3"},props,{className:classnames_1.default(heading_module_scss_1.default.h3,heading_sizes_module_scss_1.default[props.size||"md"],props.className)}))}H3.__bit_component=__bit_component,exports2.H3=H3;function H4(props){return react_1.default.createElement(base_ui_text_heading_1.Heading,Object.assign({element:"h4"},props,{className:classnames_1.default(heading_module_scss_1.default.h4,heading_sizes_module_scss_1.default[props.size||"sm"],props.className)}))}H4.__bit_component=__bit_component,exports2.H4=H4;function H5(props){return react_1.default.createElement(base_ui_text_heading_1.Heading,Object.assign({element:"h5"},props,{className:classnames_1.default(heading_module_scss_1.default.h5,heading_sizes_module_scss_1.default[props.size||"xs"],props.className)}))}H5.__bit_component=__bit_component,exports2.H5=H5;function H6(props){return react_1.default.createElement(base_ui_text_heading_1.Heading,Object.assign({element:"h6"},props,{className:classnames_1.default(heading_module_scss_1.default.h6,heading_sizes_module_scss_1.default[props.size||"xxs"],props.className)}))}H6.__bit_component=__bit_component,exports2.H6=H6},90304:function(__unused_webpack_module,exports2,__webpack_require__2){"use strict";var __bit_component={id:"teambit.documenter/ui/heading@4.1.1",homepage:"https://bit.dev/teambit/documenter/ui/heading",exported:!0},__createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){k2===void 0&&(k2=k),Object.defineProperty(o,k2,{enumerable:!0,get:function(){return m[k]}})}:function(o,m,k,k2){k2===void 0&&(k2=k),o[k2]=m[k]}),__exportStar=this&&this.__exportStar||function(m,exports3){for(var p in m)p!=="default"&&!Object.prototype.hasOwnProperty.call(exports3,p)&&__createBinding(exports3,m,p)};Object.defineProperty(exports2,"__esModule",{value:!0}),__exportStar(__webpack_require__2(96172),exports2)},84322:function(__unused_webpack_module,exports2,__webpack_require__2){"use strict";var __bit_component={id:"teambit.component/ui/component-compare/compare-aspects/compare-aspect-view@1e9fa46247bee3f8ec92ee0e92b1183d7079cf52",homepage:"https://bit.cloud/teambit/component/ui/component-compare/compare-aspects/compare-aspect-view",exported:!0},__createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){k2===void 0&&(k2=k);var desc=Object.getOwnPropertyDescriptor(m,k);(!desc||("get"in desc?!m.__esModule:desc.writable||desc.configurable))&&(desc={enumerable:!0,get:function(){return m[k]}}),Object.defineProperty(o,k2,desc)}:function(o,m,k,k2){k2===void 0&&(k2=k),o[k2]=m[k]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(o,v){Object.defineProperty(o,"default",{enumerable:!0,value:v})}:function(o,v){o.default=v}),__importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(mod!=null)for(var k in mod)k!=="default"&&Object.prototype.hasOwnProperty.call(mod,k)&&__createBinding(result,mod,k);return __setModuleDefault(result,mod),result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.CompareAspectView=void 0;const react_1=__importStar(__webpack_require__2(87363)),classnames_1=__importDefault(__webpack_require__2(99186)),documenter_ui_heading_1=__webpack_require__2(90304),base_ui_loaders_skeleton_1=__webpack_require__2(67604),react_2=__webpack_require__2(19033),base_ui_theme_dark_theme_1=__webpack_require__2(41444),compare_aspect_view_module_scss_1=__importDefault(__webpack_require__2(21848));function CompareAspectView({baseAspectData,compareAspectData,name,loading,className}){const title=(0,react_1.useMemo)(()=>name?.split("/").pop(),[name]),configDiffEditor=react_1.default.createElement(react_2.DiffEditor,{key:`aspect-config-diff-editor-${title}`,modified:JSON.stringify(compareAspectData?.config,null,2),original:JSON.stringify(baseAspectData?.config,null,2),language:"json",className:base_ui_theme_dark_theme_1.darkMode,theme:"vs-dark",options:{readOnly:!0},loading:react_1.default.createElement(AspectsCompareViewLoader,null)}),calculatedDataDiffEditor=react_1.default.createElement(react_2.DiffEditor,{key:`aspect-data-diff-editor-${title}`,modified:JSON.stringify(compareAspectData?.data,null,2),original:JSON.stringify(baseAspectData?.data,null,2),language:"json",className:compare_aspect_view_module_scss_1.default.diffEditor,theme:"vs-dark",options:{readOnly:!0},loading:react_1.default.createElement(AspectsCompareViewLoader,null)});return react_1.default.createElement("div",{key:`aspect-diff-editor-${title}`,className:(0,classnames_1.default)(compare_aspect_view_module_scss_1.default.componentCompareAspectViewContainer,className)},react_1.default.createElement("div",{className:compare_aspect_view_module_scss_1.default.name},react_1.default.createElement(documenter_ui_heading_1.H4,{size:"xs",className:compare_aspect_view_module_scss_1.default.name},react_1.default.createElement("span",null,title))),react_1.default.createElement("div",{className:compare_aspect_view_module_scss_1.default.componentCompareAspectDiffEditorContainer},react_1.default.createElement("div",{className:compare_aspect_view_module_scss_1.default.componentCompareAspectConfigDiff},react_1.default.createElement(documenter_ui_heading_1.H4,{size:"xxs",className:compare_aspect_view_module_scss_1.default.name},react_1.default.createElement("span",null,"Config")),loading?react_1.default.createElement(AspectsCompareViewLoader,null):configDiffEditor),react_1.default.createElement("div",{className:compare_aspect_view_module_scss_1.default.componentCompareAspectCalculatedDiff},react_1.default.createElement(documenter_ui_heading_1.H4,{size:"xxs",className:compare_aspect_view_module_scss_1.default.name},react_1.default.createElement("span",null,"Calculated Data")),loading?react_1.default.createElement(AspectsCompareViewLoader,null):calculatedDataDiffEditor)))}CompareAspectView.__bit_component=__bit_component,exports2.CompareAspectView=CompareAspectView;function AspectsCompareViewLoader(){return react_1.default.createElement(base_ui_loaders_skeleton_1.BlockSkeleton,{className:compare_aspect_view_module_scss_1.default.loader,lines:16})}AspectsCompareViewLoader.__bit_component=__bit_component},91136:(__unused_webpack_module,__webpack_exports__2,__webpack_require__2)=>{"use strict";__webpack_require__2.r(__webpack_exports__2),__webpack_require__2.d(__webpack_exports__2,{default:()=>__WEBPACK_DEFAULT_EXPORT__});const __WEBPACK_DEFAULT_EXPORT__={skeletonContent:"skeleton-design_skeletonContent__1iAen",line:"skeleton-design_line__3Sk3K",word:"skeleton-design_word__1QDql",shimmer:"skeleton-design_shimmer__3DP1f",skeleton:"skeleton-design_skeleton__1udVi",block:"skeleton-design_block__2HCr_",circle:"skeleton-design_circle__LkvdA",placeHolderShimmer:"skeleton-design_placeHolderShimmer__RG56N","skeleton-effect-fade":"skeleton-design_skeleton-effect-fade__IlHIN"}},17058:(__unused_webpack_module,__webpack_exports__2,__webpack_require__2)=>{"use strict";__webpack_require__2.r(__webpack_exports__2),__webpack_require__2.d(__webpack_exports__2,{default:()=>__WEBPACK_DEFAULT_EXPORT__});const __WEBPACK_DEFAULT_EXPORT__={skeleton:"skeleton_skeleton__2T3R_",block:"skeleton_block__Rv_UT",circle:"skeleton_circle__1_rKH",skeletonContent:"skeleton_skeletonContent__nNXpo",line:"skeleton_line__1F-ac",word:"skeleton_word__15wCR"}},11879:(__unused_webpack_module,__webpack_exports__2,__webpack_require__2)=>{"use strict";__webpack_require__2.r(__webpack_exports__2),__webpack_require__2.d(__webpack_exports__2,{default:()=>__WEBPACK_DEFAULT_EXPORT__});const __WEBPACK_DEFAULT_EXPORT__={darkMod:"dark-theme_darkMod__1puqW"}},54210:(__unused_webpack_module,__webpack_exports__2,__webpack_require__2)=>{"use strict";__webpack_require__2.r(__webpack_exports__2),__webpack_require__2.d(__webpack_exports__2,{default:()=>__WEBPACK_DEFAULT_EXPORT__});const __WEBPACK_DEFAULT_EXPORT__={xxs:"heading-sizes_xxs__Ib17g",xs:"heading-sizes_xs__Q45mG",sm:"heading-sizes_sm__2FWqG",md:"heading-sizes_md__32Hll",lg:"heading-sizes_lg__18thp",xl:"heading-sizes_xl__37yco",xxl:"heading-sizes_xxl__2uMK_"}},22982:(__unused_webpack_module,__webpack_exports__2,__webpack_require__2)=>{"use strict";__webpack_require__2.r(__webpack_exports__2),__webpack_require__2.d(__webpack_exports__2,{default:()=>__WEBPACK_DEFAULT_EXPORT__});const __WEBPACK_DEFAULT_EXPORT__={h1:"heading_h1__12Ka_",h2:"heading_h2__14gmH",h3:"heading_h3__30s6y",h4:"heading_h4__3CJzE",h5:"heading_h5__3ZSKR",h6:"heading_h6__3lipg"}},21848:(__unused_webpack_module,__webpack_exports__2,__webpack_require__2)=>{"use strict";__webpack_require__2.r(__webpack_exports__2),__webpack_require__2.d(__webpack_exports__2,{default:()=>__WEBPACK_DEFAULT_EXPORT__});const __WEBPACK_DEFAULT_EXPORT__={componentCompareAspectViewContainer:"compare-aspect-view_componentCompareAspectViewContainer__1mEW8",componentCompareAspectDiffEditorContainer:"compare-aspect-view_componentCompareAspectDiffEditorContainer__2HvSr",name:"compare-aspect-view_name__1SDX0",componentCompareAspectConfigDiff:"compare-aspect-view_componentCompareAspectConfigDiff__100Mt",componentCompareAspectCalculatedDiff:"compare-aspect-view_componentCompareAspectCalculatedDiff__2e8aa",loader:"compare-aspect-view_loader__2Mvxw"}},87363:module2=>{"use strict";module2.exports=React}},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(cachedModule!==void 0)return cachedModule.exports;var module2=__webpack_module_cache__[moduleId]={exports:{}};return __webpack_modules__[moduleId].call(module2.exports,module2,module2.exports,__webpack_require__),module2.exports}__webpack_require__.m=__webpack_modules__,(()=>{var deferred=[];__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(chunkIds){priority=priority||0;for(var i=deferred.length;i>0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority];return}for(var notFulfilled=1/0,i=0;i<deferred.length;i++){for(var[chunkIds,fn,priority]=deferred[i],fulfilled=!0,j=0;j<chunkIds.length;j++)(priority&!1||notFulfilled>=priority)&&Object.keys(__webpack_require__.O).every(key=>__webpack_require__.O[key](chunkIds[j]))?chunkIds.splice(j--,1):(fulfilled=!1,priority<notFulfilled&&(notFulfilled=priority));if(fulfilled){deferred.splice(i--,1);var r=fn();r!==void 0&&(result=r)}}return result}})(),__webpack_require__.n=module2=>{var getter=module2&&module2.__esModule?()=>module2.default:()=>module2;return __webpack_require__.d(getter,{a:getter}),getter},__webpack_require__.d=(exports2,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports2,key)&&Object.defineProperty(exports2,key,{enumerable:!0,get:definition[key]})},__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),__webpack_require__.r=exports2=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(exports2,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports2,"__esModule",{value:!0})},(()=>{var installedChunks={624:0};__webpack_require__.O.j=chunkId=>installedChunks[chunkId]===0;var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var[chunkIds,moreModules,runtime]=data,moduleId,chunkId,i=0;if(chunkIds.some(id=>installedChunks[id]!==0)){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i<chunkIds.length;i++)chunkId=chunkIds[i],__webpack_require__.o(installedChunks,chunkId)&&installedChunks[chunkId]&&installedChunks[chunkId][0](),installedChunks[chunkId]=0;return __webpack_require__.O(result)},chunkLoadingGlobal=self.webpackChunk=self.webpackChunk||[];chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null,0)),chunkLoadingGlobal.push=webpackJsonpCallback.bind(null,chunkLoadingGlobal.push.bind(chunkLoadingGlobal))})();var __webpack_exports__={};return(()=>{"use strict";var exports2=__webpack_exports__,__bit_component={id:"teambit.component/ui/component-compare/compare-aspects/compare-aspect-view@1e9fa46247bee3f8ec92ee0e92b1183d7079cf52",homepage:"https://bit.cloud/teambit/component/ui/component-compare/compare-aspects/compare-aspect-view",exported:!0};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.CompareAspectView=void 0;var compare_aspect_view_1=__webpack_require__(84322);Object.defineProperty(exports2,"CompareAspectView",{enumerable:!0,get:function(){return compare_aspect_view_1.CompareAspectView}})})(),__webpack_exports__=__webpack_require__.O(__webpack_exports__),__webpack_exports__})());

package/teambit_component_ui_component_compare_compare_aspects_compare_aspect_view-preview.js

@@ -1 +0,0 @@
-"use strict";(function(root,factory){typeof exports=="object"&&typeof module=="object"?module.exports=factory():typeof define=="function"&&define.amd?define([],factory):typeof exports=="object"?exports["teambit.component/ui/component-compare/compare-aspects/compare-aspect-view-preview"]=factory():root["teambit.component/ui/component-compare/compare-aspects/compare-aspect-view-preview"]=factory()})(self,()=>(self.webpackChunk=self.webpackChunk||[]).push([[990],{96462:(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{compositions:()=>compositions,compositions_metadata:()=>compositions_metadata,overview:()=>overview});var __bit_component={id:"teambit.component/ui/component-compare/compare-aspects/compare-aspect-view@1e9fa46247bee3f8ec92ee0e92b1183d7079cf52",homepage:"https://bit.cloud/teambit/component/ui/component-compare/compare-aspects/compare-aspect-view",exported:!0};const compositions=[],overview=[],compositions_metadata={compositions:[]}}},__webpack_require__=>{var __webpack_exec__=moduleId=>__webpack_require__(__webpack_require__.s=moduleId),__webpack_exports__=__webpack_exec__(96462);return __webpack_exports__}]));