@teambit/react.ui.component-highlighter 0.0.490 → 0.0.494

package/label/label.tsx

@@ -1,70 +1,39 @@
-import React, { useMemo, useState } from 'react';
-import { usePopper } from 'react-popper';
-import { ComponentID } from '@teambit/component-id';
-import type { CardProps } from '@teambit/base-ui.surfaces.card';
-import type { Placement, Modifier } from '@popperjs/core';
-import '@popperjs/core';
-
-import { DefaultLabel } from './default-label';
-import { ComponentLabel } from './component-label';
-import { useAnimationFrame } from '../use-animation-frame';
-
-export interface LabelContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-  targetRef: HTMLElement | null;
-  offset?: [number, number];
-  placement?: Placement;
-  flip?: boolean;
-  /** continually update label position to match moving elements */
-  watchMotion?: boolean;
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+
+import styles from './label.module.scss';
+import { ComponentStrip, ComponentStripSize } from './component-strip';
+import { OtherComponentsPopper } from './other-components';
+
+export type LabelSize = ComponentStripSize;
+export interface LabelProps extends React.HTMLAttributes<HTMLDivElement> {
+  components: ComponentMetaHolder[];
+  size?: LabelSize;
 }
 
-export type { Placement };
-
-// TODO - replace this with TippyJS, when it supports a `targetElement={targetRef.current}` prop
-export function LabelContainer({
-  targetRef,
-  offset,
-  placement,
-  flip = true,
-  watchMotion,
-  className,
-  ...rest
-}: LabelContainerProps) {
-  const [sourceRef, setSourceRef] = useState<HTMLDivElement | null>(null);
-
-  const modifiers = useMemo<Partial<Modifier<any, any>>[]>(
-    () => [{ name: 'offset', options: { offset } }],
-    [flip, offset]
+export function Label({ components, size, ...props }: LabelProps) {
+  const [showMore, setShowMore] = useState(false);
+  const last = components.slice(-1).pop();
+  if (!last) return null;
+
+  const hasMore = components.length > 1;
+
+  // reset when switching targets
+  useEffect(() => {
+    setShowMore(false);
+  }, [components]);
+
+  return (
+    <OtherComponentsPopper components={components} visible={showMore} placement="bottom-start" size={size}>
+      <ComponentStrip {...props} component={last} size={size}>
+        {hasMore && (
+          <span
+            className={classNames(styles.othersTooltip, showMore && styles.active)}
+            onClick={() => setShowMore((x) => !x)}
+          />
+        )}
+      </ComponentStrip>
+    </OtherComponentsPopper>
   );
-
-  const { styles, attributes, update } = usePopper(targetRef, sourceRef, {
-    modifiers,
-    placement,
-  });
-
-  useAnimationFrame(!!watchMotion && update);
-
-  if (!targetRef) return null;
-
-  return <div {...rest} ref={setSourceRef} className={className} style={styles.popper} {...attributes.popper} />;
-}
-
-export interface LabelProps extends CardProps {
-  componentId: string;
-  link?: string;
-  scopeLink?: string;
-  local?: boolean;
-}
-
-export function Label({ componentId, link, scopeLink, local, ...rest }: LabelProps) {
-  const parsedId = useMemo(() => ComponentID.tryFromString(componentId), [componentId]);
-
-  if (!parsedId)
-    return (
-      <DefaultLabel {...rest} href={link}>
-        {componentId}
-      </DefaultLabel>
-    );
-
-  return <ComponentLabel {...rest} local={local} componentId={parsedId} link={link} scopeLink={scopeLink} />;
 }

package/label/links.tsx

@@ -0,0 +1,9 @@
+import urlJoin from 'url-join';
+import type { ComponentID } from '@teambit/component-id';
+import { ComponentUrl } from '@teambit/component.modules.component-url';
+
+export function calcComponentLink(id: ComponentID | undefined, exported: boolean | undefined) {
+  if (!id) return undefined;
+  if (exported) return ComponentUrl.toUrl(id);
+  return urlJoin('/', id.fullName);
+}

package/label/other-components.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import Tippy, { TippyProps } from '@tippyjs/react/headless';
+import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+
+import { ComponentStrip, ComponentStripSize } from './component-strip';
+import styles from './label.module.scss';
+
+export type OtherComponentsProps = {
+  components: ComponentMetaHolder[];
+  size?: ComponentStripSize;
+  start?: number;
+  end?: number;
+} & TippyProps;
+
+// a popper ("tooltip") that shows the additional React Components related to this dom element
+export function OtherComponentsPopper({
+  components,
+  children,
+  start,
+  end = -1,
+  size,
+  placement = 'bottom',
+  interactive = true,
+  ...tippyProps
+}: OtherComponentsProps) {
+  const content = (
+    <>
+      {components
+        .slice(start, end)
+        .reverse()
+        .map((comp, idx) => (
+          <ComponentStrip key={idx} component={comp} size={size} />
+        ))}
+    </>
+  );
+
+  return (
+    <Tippy
+      placement={placement}
+      interactive={interactive}
+      {...tippyProps}
+      // second parameter "content" is always undefined, use content inline
+      // https://github.com/atomiks/tippyjs-react/issues/341
+      render={(attrs) => (
+        <div {...attrs} className={styles.othersContainer}>
+          {content}
+        </div>
+      )}
+    >
+      {children}
+    </Tippy>
+  );
+}

package/package.json

@@ -1,49 +1,49 @@
 {
   "name": "@teambit/react.ui.component-highlighter",
-  "version": "0.0.490",
+  "version": "0.0.494",
   "homepage": "https://bit.dev/teambit/react/ui/component-highlighter",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "ui/component-highlighter",
-    "version": "0.0.490"
+    "version": "0.0.494"
   },
   "dependencies": {
+    "get-xpath": "3.0.1",
     "classnames": "2.2.6",
     "@popperjs/core": "2.6.0",
     "react-popper": "2.2.4",
     "use-debounce": "6.0.1",
     "uuid": "3.4.0",
-    "get-xpath": "3.0.1",
     "url-join": "4.0.1",
+    "@tippyjs/react": "4.2.0",
     "core-js": "^3.0.0",
-    "@teambit/component-id": "0.0.388",
-    "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.9",
-    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.476",
     "@teambit/base-ui.utils.popper-js.ignore-popper-size": "1.0.0",
     "@teambit/base-ui.utils.popper-js.resize-to-match-reference": "1.0.0",
-    "@teambit/react.modules.dom-to-react": "0.0.476",
-    "@teambit/react.ui.hover-selector": "0.0.154",
-    "@teambit/base-ui.surfaces.card": "1.0.1",
     "@teambit/base-ui.routing.native-link": "1.0.0",
-    "@teambit/component.modules.component-url": "0.0.109"
+    "@teambit/component-id": "0.0.390",
+    "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.12",
+    "@teambit/react.modules.dom-to-react": "0.0.478",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.478",
+    "@teambit/react.ui.hover-selector": "0.0.156",
+    "@teambit/component.modules.component-url": "0.0.111"
   },
   "devDependencies": {
-    "@types/classnames": "2.2.11",
+    "@types/react": "^17.0.8",
     "@testing-library/react": "11.2.6",
+    "@types/classnames": "2.2.11",
+    "@types/react-dom": "^17.0.5",
     "@types/uuid": "3.4.9",
     "@types/url-join": "4.0.0",
     "@types/mocha": "5.2.7",
     "@types/testing-library__jest-dom": "5.9.5",
     "@babel/runtime": "7.12.18",
     "@types/jest": "^26.0.0",
-    "@types/react-dom": "^17.0.5",
-    "@types/react": "^17.0.8",
     "@types/node": "12.20.4",
     "@teambit/design.ui.icon-button": "1.0.10"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.184",
+    "@teambit/legacy": "1.0.186",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -71,7 +71,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.184",
+        "@teambit/legacy": "1.0.186",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/rule-matcher.tsx

@@ -1,8 +1,7 @@
+// in the future, we will add more options here, like include / exclude objects.
 import { ComponentID } from '@teambit/component-id';
 import { ComponentMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 
-export type ComponentMatchTarget = { meta: ComponentMeta };
-
 export type MatchRule = undefined | string | ((element: HTMLElement) => boolean);
 export type ComponentMatchRule = undefined | string | string[] | ((target: ComponentMatchTarget) => boolean);
 
@@ -18,6 +17,8 @@ export function ruleMatcher(element: HTMLElement, rule: MatchRule) {
   return true;
 }
 
+export type ComponentMatchTarget = { meta: ComponentMeta };
+
 export function componentRuleMatcher(target: ComponentMatchTarget, rule: ComponentMatchRule): boolean {
   if (typeof rule === 'string') {
     const targetCmpId = ComponentID.tryFromString(target.meta.id);

package/use-animation-frame.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 
 // TODO - extract to its own component
 
-export function useAnimationFrame(cb?: false | null | (() => any), deps: [] = []) {
+export function useAnimationFrame(cb?: false | null | (() => any), deps: any[] = []) {
   useEffect(() => {
     if (!cb) return () => {};
 

package/bubble/bubble.module.scss

@@ -1,24 +0,0 @@
-.bubble {
-  padding: 0.23em 1em;
-
-  transition: filter 300ms, background-color 300ms;
-  transform: translateZ(0); //fix blurriness in Safari
-
-  // override styles from <a>
-  &:link,
-  &:visited {
-    text-decoration: inherit;
-    color: inherit;
-
-    background: var(--bit-highlighter-color, #eebcc9);
-
-    &:hover {
-      background: var(--bit-highlighter-color-hover, #f6dae2);
-    }
-
-    &:active {
-      background: var(--bit-highlighter-color-active, #e79db1);
-      color: inherit;
-    }
-  }
-}

package/bubble/index.ts

@@ -1,3 +0,0 @@
-import styles from './bubble.module.scss';
-
-export const bubble = styles.bubble;

package/dist/bubble/bubble.module.scss

@@ -1,24 +0,0 @@
-.bubble {
-  padding: 0.23em 1em;
-
-  transition: filter 300ms, background-color 300ms;
-  transform: translateZ(0); //fix blurriness in Safari
-
-  // override styles from <a>
-  &:link,
-  &:visited {
-    text-decoration: inherit;
-    color: inherit;
-
-    background: var(--bit-highlighter-color, #eebcc9);
-
-    &:hover {
-      background: var(--bit-highlighter-color-hover, #f6dae2);
-    }
-
-    &:active {
-      background: var(--bit-highlighter-color-active, #e79db1);
-      color: inherit;
-    }
-  }
-}

package/dist/bubble/index.d.ts

@@ -1 +0,0 @@
-export declare const bubble: string;

package/dist/bubble/index.js

@@ -1,9 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.bubble = void 0;
-const bubble_module_scss_1 = __importDefault(require("./bubble.module.scss"));
-exports.bubble = bubble_module_scss_1.default.bubble;
-//# sourceMappingURL=index.js.map

package/dist/bubble/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../bubble/index.ts"],"names":[],"mappings":";;;;;;AAAA,8EAA0C;AAE7B,QAAA,MAAM,GAAG,4BAAM,CAAC,MAAM,CAAC"}

package/dist/hybrid-highligher/hybrid-highlighter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hybrid-highlighter.js","sourceRoot":"","sources":["../../hybrid-highligher/hybrid-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8F;AAC9F,4DAAoC;AACpC,+BAA0B;AAE1B,4DAA2D;AAC3D,gEAA0G;AAC1G,sFAAiF;AAoCjF,kDAAkD;AAClD,SAAgB,iBAAiB,CAAC,EAkBT;QAlBS,EAChC,QAAQ,EACR,IAAI,GAAG,OAAO,EACd,iBAAiB,GAAG,EAAE,EACtB,WAAW,GAAG,IAAI,EAClB,SAAS,EACT,IAAI,EACJ,aAAa,EAEb,OAAO,EACP,cAAc,EACd,SAAS,EACT,KAAK,EACL,OAAO,EACP,YAAY,EACZ,aAAa,EACb,QAAQ,OAEe,EADpB,IAAI,cAjByB,yMAkBjC,CADQ;IAEP,MAAM,GAAG,GAAG,IAAA,iBAAS,GAAkB,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAkC,EAAE,CAAC,CAAC;IAC3E,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,YAAY,IAAA,SAAE,GAAE,EAAE,CAAC,CAAC,OAAO,CAAC;IACtD,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAEtD,8BAA8B;IAC9B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,QAAQ;YAAE,SAAS,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,QAAQ,GAAG,IAAA,uCAAmB,EAClC,CAAC,UAAU,EAAE,EAAE,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC3E,IAAI,EACJ;QACE,gBAAgB,EAAE,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;QACpD,UAAU;QACV,QAAQ,EAAE,QAAQ,IAAI,IAAI,KAAK,OAAO;QACtC,IAAI;QACJ,aAAa;KACd,CACF,CAAC;IAEF,IAAA,2CAAmB,EAAC;QAClB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,GAAG;QACb,UAAU;QACV,QAAQ,EAAE,QAAQ,IAAI,IAAI,KAAK,aAAa;QAC5C,IAAI;QACJ,aAAa;KACd,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,IAAA,eAAO,EACrB,GAAG,EAAE,CAAC,iBACJ,yBAAyB,EAAE,OAAO,EAClC,+BAA+B,EAAE,YAAY,EAC7C,gCAAgC,EAAE,aAAa,IAC5C,KAAK,EACR,EACF,CAAC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,KAAK,CAAC,CAC9C,CAAC;IAEF,OAAO,CACL,qDACE,GAAG,EAAE,GAAG,IACJ,IAAI,EACJ,QAAQ,IACZ,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,UAAU,CAAC;QAG3C,QAAQ;QAKR,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAC9C,8BAAC,wCAAkB,IACjB,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AAtFD,8CAsFC"}

package/dist/hybrid-highligher/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../hybrid-highligher/index.ts"],"names":[],"mappings":";;;AAAA,2DAAyD;AAAhD,uHAAA,iBAAiB,OAAA"}

package/dist/label/component-label/component-bubble.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { ComponentID } from '@teambit/component-id';
-import { LinkProps } from '@teambit/base-ui.routing.native-link';
-export interface ComponentBubbleProps extends LinkProps {
-    componentId: ComponentID;
-    local?: boolean;
-}
-export declare function ComponentBubble({ componentId, className, href, local, ...rest }: ComponentBubbleProps): JSX.Element;

package/dist/label/component-label/component-bubble.js

@@ -1,35 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (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++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentBubble = void 0;
-const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const base_ui_routing_native_link_1 = require("@teambit/base-ui.routing.native-link");
-const component_modules_component_url_1 = require("@teambit/component.modules.component-url");
-const url_join_1 = __importDefault(require("url-join"));
-const duo_component_bubble_module_scss_1 = __importDefault(require("./duo-component-bubble.module.scss"));
-function ComponentBubble(_a) {
-    var { componentId, className, href, local = false } = _a, rest = __rest(_a, ["componentId", "className", "href", "local"]);
-    const { version, fullName } = componentId;
-    const componentHref = href || (local ? (0, url_join_1.default)('/', fullName) : component_modules_component_url_1.ComponentUrl.toUrl(componentId));
-    return (react_1.default.createElement(base_ui_routing_native_link_1.NativeLink, Object.assign({ external: true, href: componentHref, className: (0, classnames_1.default)(duo_component_bubble_module_scss_1.default.componentName, className) }, rest),
-        react_1.default.createElement("div", { className: duo_component_bubble_module_scss_1.default.fullName }, fullName),
-        version && version !== 'latest' && (react_1.default.createElement("div", { className: duo_component_bubble_module_scss_1.default.version },
-            react_1.default.createElement("span", { className: duo_component_bubble_module_scss_1.default.versionPrefix }, "@"),
-            version))));
-}
-exports.ComponentBubble = ComponentBubble;
-//# sourceMappingURL=component-bubble.js.map

package/dist/label/component-label/component-bubble.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"component-bubble.js","sourceRoot":"","sources":["../../../label/component-label/component-bubble.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,sFAA6E;AAC7E,8FAAwE;AACxE,wDAA+B;AAC/B,0GAAwD;AAOxD,SAAgB,eAAe,CAAC,EAA8E;QAA9E,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,GAAG,KAAK,OAAiC,EAA5B,IAAI,cAAtD,6CAAwD,CAAF;IACpF,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAC;IAC1C,MAAM,aAAa,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAA,kBAAO,EAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,8CAAY,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjG,OAAO,CACL,8BAAC,wCAAU,kBAAC,QAAQ,QAAC,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,0CAAM,CAAC,aAAa,EAAE,SAAS,CAAC,IAAM,IAAI;QACxG,uCAAK,SAAS,EAAE,0CAAM,CAAC,QAAQ,IAAG,QAAQ,CAAO;QAEhD,OAAO,IAAI,OAAO,KAAK,QAAQ,IAAI,CAClC,uCAAK,SAAS,EAAE,0CAAM,CAAC,OAAO;YAC5B,wCAAM,SAAS,EAAE,0CAAM,CAAC,aAAa,QAAU;YAC9C,OAAO,CACJ,CACP,CACU,CACd,CAAC;AACJ,CAAC;AAhBD,0CAgBC"}

package/dist/label/component-label/component-label.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { CardProps } from '@teambit/base-ui.surfaces.card';
-import type { ComponentID } from '@teambit/component-id';
-export interface ComponentLabelProps extends CardProps {
-    componentId: ComponentID;
-    link?: string;
-    scopeLink?: string;
-    local?: boolean;
-}
-export declare function ComponentLabel({ componentId, className, link, scopeLink, local, ...rest }: ComponentLabelProps): JSX.Element;

package/dist/label/component-label/component-label.js

@@ -1,32 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (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++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentLabel = void 0;
-const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const base_ui_surfaces_card_1 = require("@teambit/base-ui.surfaces.card");
-const bubble_1 = require("../../bubble");
-const duo_component_bubble_module_scss_1 = __importDefault(require("./duo-component-bubble.module.scss"));
-const component_bubble_1 = require("./component-bubble");
-const scope_bubble_1 = require("./scope-bubble");
-function ComponentLabel(_a) {
-    var { componentId, className, link, scopeLink, local } = _a, rest = __rest(_a, ["componentId", "className", "link", "scopeLink", "local"]);
-    return (react_1.default.createElement(base_ui_surfaces_card_1.Card, Object.assign({}, rest, { className: (0, classnames_1.default)(className, duo_component_bubble_module_scss_1.default.duoComponentBubble) }),
-        react_1.default.createElement(scope_bubble_1.ScopeBubble, { href: scopeLink, componentId: componentId, className: bubble_1.bubble }),
-        react_1.default.createElement(component_bubble_1.ComponentBubble, { href: link, componentId: componentId, className: bubble_1.bubble, local: local })));
-}
-exports.ComponentLabel = ComponentLabel;
-//# sourceMappingURL=component-label.js.map

package/dist/label/component-label/component-label.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"component-label.js","sourceRoot":"","sources":["../../../label/component-label/component-label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AACpC,0EAAiE;AAGjE,yCAAsC;AACtC,0GAAwD;AAExD,yDAAqD;AACrD,iDAA6C;AAS7C,SAAgB,cAAc,CAAC,EAAgF;QAAhF,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,OAAgC,EAA3B,IAAI,cAAzD,0DAA2D,CAAF;IACtF,OAAO,CACL,8BAAC,4BAAI,oBAAK,IAAI,IAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,0CAAM,CAAC,kBAAkB,CAAC;QACzE,8BAAC,0BAAW,IAAC,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,eAAM,GAAI;QAC7E,8BAAC,kCAAe,IACd,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,eAAM,EACjB,KAAK,EAAE,KAAK,GACZ,CACG,CACR,CAAC;AACJ,CAAC;AAZD,wCAYC"}

package/dist/label/component-label/duo-component-bubble.module.scss

@@ -1,24 +0,0 @@
-.duoComponentBubble {
-  display: flex;
-
-  //reset styles from card:
-  padding: 0;
-  border: none;
-  background: none;
-
-  > :first-child {
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-
-    margin-right: 2px;
-  }
-
-  > :last-child {
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-  }
-}
-
-.componentName {
-  display: flex;
-}

package/dist/label/component-label/index.d.ts

@@ -1,2 +0,0 @@
-export { ComponentLabel } from './component-label';
-export type { ComponentLabelProps } from './component-label';

package/dist/label/component-label/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentLabel = void 0;
-var component_label_1 = require("./component-label");
-Object.defineProperty(exports, "ComponentLabel", { enumerable: true, get: function () { return component_label_1.ComponentLabel; } });
-//# sourceMappingURL=index.js.map

package/dist/label/component-label/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../label/component-label/index.ts"],"names":[],"mappings":";;;AAAA,qDAAmD;AAA1C,iHAAA,cAAc,OAAA"}

package/dist/label/component-label/scope-bubble.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { ComponentID } from '@teambit/component-id';
-import { LinkProps } from '@teambit/base-ui.routing.native-link';
-export interface ScopeBubbleProps extends LinkProps {
-    componentId: ComponentID;
-}
-export declare function ScopeBubble({ componentId, className, href, ...rest }: ScopeBubbleProps): JSX.Element;

package/dist/label/component-label/scope-bubble.js

@@ -1,28 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (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++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScopeBubble = void 0;
-const react_1 = __importDefault(require("react"));
-const base_ui_routing_native_link_1 = require("@teambit/base-ui.routing.native-link");
-const component_modules_component_url_1 = require("@teambit/component.modules.component-url");
-function ScopeBubble(_a) {
-    var { componentId, className, href } = _a, rest = __rest(_a, ["componentId", "className", "href"]);
-    const scope = componentId.scope;
-    const scopeUrl = href || component_modules_component_url_1.ScopeUrl.toUrl(componentId.scope);
-    return (react_1.default.createElement(base_ui_routing_native_link_1.NativeLink, Object.assign({ href: scopeUrl, external: true, className: className }, rest), scope));
-}
-exports.ScopeBubble = ScopeBubble;
-//# sourceMappingURL=scope-bubble.js.map

package/dist/label/component-label/scope-bubble.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"scope-bubble.js","sourceRoot":"","sources":["../../../label/component-label/scope-bubble.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAG1B,sFAA6E;AAC7E,8FAAoE;AAMpE,SAAgB,WAAW,CAAC,EAA2D;QAA3D,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,OAA6B,EAAxB,IAAI,cAAvC,oCAAyC,CAAF;IACjE,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC;IAChC,MAAM,QAAQ,GAAG,IAAI,IAAI,0CAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAE3D,OAAO,CACL,8BAAC,wCAAU,kBAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,QAAC,SAAS,EAAE,SAAS,IAAM,IAAI,GAChE,KAAK,CACK,CACd,CAAC;AACJ,CAAC;AATD,kCASC"}

package/dist/label/default-label/default-label.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { CardProps } from '@teambit/base-ui.surfaces.card';
-export interface DefaultLabelProps extends CardProps {
-    href?: string;
-}
-export declare function DefaultLabel({ className, href, children, ...rest }: DefaultLabelProps): JSX.Element;

package/dist/label/default-label/default-label.js

@@ -1,30 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (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++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultLabel = void 0;
-const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const base_ui_surfaces_card_1 = require("@teambit/base-ui.surfaces.card");
-const base_ui_routing_native_link_1 = require("@teambit/base-ui.routing.native-link");
-const bubble_1 = require("../../bubble");
-const default_label_module_scss_1 = __importDefault(require("./default-label.module.scss"));
-function DefaultLabel(_a) {
-    var { className, href, children } = _a, rest = __rest(_a, ["className", "href", "children"]);
-    return (react_1.default.createElement(base_ui_surfaces_card_1.Card, Object.assign({}, rest, { className: (0, classnames_1.default)(default_label_module_scss_1.default.container, className) }),
-        react_1.default.createElement(base_ui_routing_native_link_1.NativeLink, { external: true, href: href, className: bubble_1.bubble }, children)));
-}
-exports.DefaultLabel = DefaultLabel;
-//# sourceMappingURL=default-label.js.map

package/dist/label/default-label/default-label.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"default-label.js","sourceRoot":"","sources":["../../../label/default-label/default-label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,0EAAiE;AACjE,sFAAkE;AAElE,yCAAsC;AACtC,4FAAiD;AAMjD,SAAgB,YAAY,CAAC,EAAyD;QAAzD,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,OAA8B,EAAzB,IAAI,cAApC,iCAAsC,CAAF;IAC/D,OAAO,CACL,8BAAC,4BAAI,oBAAK,IAAI,IAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,mCAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAChE,8BAAC,wCAAU,IAAC,QAAQ,QAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,eAAM,IAC/C,QAAQ,CACE,CACR,CACR,CAAC;AACJ,CAAC;AARD,oCAQC"}

package/dist/label/default-label/default-label.module.scss

@@ -1,12 +0,0 @@
-.container {
-  display: flex;
-
-  //reset styles from card:
-  padding: 0;
-  border: none;
-  background: none;
-
-  > * {
-    border-radius: 4px;
-  }
-}

package/dist/label/default-label/index.d.ts

@@ -1 +0,0 @@
-export { DefaultLabel } from './default-label';

package/dist/label/default-label/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultLabel = void 0;
-var default_label_1 = require("./default-label");
-Object.defineProperty(exports, "DefaultLabel", { enumerable: true, get: function () { return default_label_1.DefaultLabel; } });
-//# sourceMappingURL=index.js.map

package/dist/label/default-label/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../label/default-label/index.ts"],"names":[],"mappings":";;;AAAA,iDAA+C;AAAtC,6GAAA,YAAY,OAAA"}

package/dist/multi-highlighter/index.d.ts

@@ -1,2 +0,0 @@
-export { MultiHighlighter } from './multi-highlighter';
-export type { MultiHighlighterProps } from './multi-highlighter';

package/dist/multi-highlighter/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultiHighlighter = void 0;
-var multi_highlighter_1 = require("./multi-highlighter");
-Object.defineProperty(exports, "MultiHighlighter", { enumerable: true, get: function () { return multi_highlighter_1.MultiHighlighter; } });
-//# sourceMappingURL=index.js.map

package/dist/multi-highlighter/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../multi-highlighter/index.ts"],"names":[],"mappings":";;;AAAA,yDAAuD;AAA9C,qHAAA,gBAAgB,OAAA"}