@teambit/react.ui.component-highlighter 0.0.492 → 0.0.493

package/component-highlighter.docs.md

@@ -153,6 +153,15 @@ For example:
 </ComponentHighlighter>
 ```
 
+You can also filter by component id, using the `componentRule` prop:
+
+```tsx
+<ComponentHighlighter componentRule="teambit.design/ui/icon-button">
+  <Paragraph>will not be highlighted</Paragraph>
+  <Button>this will be highlighted</Button>
+</ComponentHighlighter>
+```
+
 ## Customization
 
 Use these CSS variables to edit the highlighter color

package/dist/component-highlighter.docs.md

@@ -153,6 +153,15 @@ For example:
 </ComponentHighlighter>
 ```
 
+You can also filter by component id, using the `componentRule` prop:
+
+```tsx
+<ComponentHighlighter componentRule="teambit.design/ui/icon-button">
+  <Paragraph>will not be highlighted</Paragraph>
+  <Button>this will be highlighted</Button>
+</ComponentHighlighter>
+```
+
 ## Customization
 
 Use these CSS variables to edit the highlighter color

package/dist/element-highlighter/element-highlighter.compositions.d.ts

@@ -1,11 +1,13 @@
 import { CSSProperties } from 'react';
+import { HighlighterSize } from './element-highlighter';
 declare type HighlightedElementProps = {
     style?: CSSProperties;
     targetStyle?: CSSProperties;
     className?: string;
     watchMotion?: boolean;
+    size?: HighlighterSize;
 };
-export declare const HighlightedElement: ({ style, targetStyle, watchMotion, className }: HighlightedElementProps) => JSX.Element;
+export declare const HighlightedElement: ({ style, targetStyle, watchMotion, className, size }: HighlightedElementProps) => JSX.Element;
 export declare const Customized: () => JSX.Element;
 export declare const Sizes: () => JSX.Element;
 export declare const MovingElement: () => JSX.Element;

package/dist/element-highlighter/element-highlighter.compositions.js

@@ -20,21 +20,26 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MovingElement = exports.Sizes = exports.Customized = exports.HighlightedElement = void 0;
+const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@teambit/react.ui.highlighter.component-metadata.bit-component-meta");
 const react_1 = __importStar(require("react"));
 const element_highlighter_1 = require("./element-highlighter");
 const mockTarget = {
-    id: 'teambit.design/ui/icon-button',
-    link: 'https://bit.dev/teambit/design/ui/icon-button',
-    scopeLink: 'https://bit.dev/teambit/design',
+    components: [
+        {
+            [react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField]: {
+                id: 'teambit.design/ui/icon-button@1.6.2',
+            },
+        },
+    ],
 };
-const HighlightedElement = ({ style, targetStyle, watchMotion, className }) => {
+const HighlightedElement = ({ style, targetStyle, watchMotion, className, size }) => {
     const [targetElement, setTargetElement] = (0, react_1.useState)(undefined);
     const targetRef = (0, react_1.createRef)();
     (0, react_1.useEffect)(() => setTargetElement(targetRef.current || undefined), [targetRef.current]);
     const target = targetElement && Object.assign(Object.assign({}, mockTarget), { element: targetElement });
-    return (react_1.default.createElement("div", { className: className, style: { padding: '16px 16px 50px 16px', width: 300 } },
+    return (react_1.default.createElement("div", { className: className, style: { padding: '16px 16px 40px 16px', width: 300 } },
         react_1.default.createElement("div", { ref: targetRef, style: Object.assign({ width: 100 }, targetStyle) }, "highlight target"),
-        target && react_1.default.createElement(element_highlighter_1.ElementHighlighter, { target: target, style: style, watchMotion: watchMotion, placement: "bottom" })));
+        target && (react_1.default.createElement(element_highlighter_1.ElementHighlighter, { target: target, style: style, watchMotion: watchMotion, placement: "bottom", size: size }))));
 };
 exports.HighlightedElement = HighlightedElement;
 const Customized = () => {
@@ -46,7 +51,10 @@ const Customized = () => {
 };
 exports.Customized = Customized;
 const Sizes = () => {
-    return react_1.default.createElement(exports.HighlightedElement, { style: { fontSize: '16px' } });
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(exports.HighlightedElement, { size: "s" }),
+        react_1.default.createElement(exports.HighlightedElement, { size: "m" }),
+        react_1.default.createElement(exports.HighlightedElement, { size: "l" })));
 };
 exports.Sizes = Sizes;
 const MovingElement = () => {

package/dist/element-highlighter/element-highlighter.compositions.js.map

@@ -1 +1 @@
-{"version":3,"file":"element-highlighter.compositions.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.compositions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA6E;AAC7E,+DAA4E;AAE5E,MAAM,UAAU,GAA6B;IAC3C,EAAE,EAAE,+BAA+B;IACnC,IAAI,EAAE,+CAA+C;IACrD,SAAS,EAAE,gCAAgC;CAC5C,CAAC;AASK,MAAM,kBAAkB,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAA2B,EAAE,EAAE;IAC5G,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAA0B,SAAS,CAAC,CAAC;IACvF,MAAM,SAAS,GAAG,IAAA,iBAAS,GAAkB,CAAC;IAE9C,IAAA,iBAAS,EAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,OAAO,IAAI,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IACvF,MAAM,MAAM,GAAG,aAAa,oCAAS,UAAU,KAAE,OAAO,EAAE,aAAa,GAAE,CAAC;IAE1E,OAAO,CACL,uCAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE,KAAK,EAAE,GAAG,EAAE;QAC9E,uCAAK,GAAG,EAAE,SAAS,EAAE,KAAK,kBAAI,KAAK,EAAE,GAAG,IAAK,WAAW,wBAElD;QACL,MAAM,IAAI,8BAAC,wCAAkB,IAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAC,QAAQ,GAAG,CACxG,CACP,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,kBAAkB,sBAe7B;AAEK,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,OAAO,CACL,8BAAC,0BAAkB,IACjB,KAAK,EACH;YACE,yBAAyB,EAAE,SAAS;YACpC,+BAA+B,EAAE,SAAS;YAC1C,gCAAgC,EAAE,SAAS;SAC3B,GAEpB,CACH,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,UAAU,cAYrB;AAEK,MAAM,KAAK,GAAG,GAAG,EAAE;IACxB,OAAO,8BAAC,0BAAkB,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAI,CAAC;AAC7D,CAAC,CAAC;AAFW,QAAA,KAAK,SAEhB;AAEK,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAExC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC;QAC1E,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,8BAAC,0BAAkB,IAAC,WAAW,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,GAAI,CAAC;AACrE,CAAC,CAAC;AATW,QAAA,aAAa,iBASxB"}
+{"version":3,"file":"element-highlighter.compositions.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.compositions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,oJAAyG;AACzG,+CAA6E;AAC7E,+DAA6F;AAE7F,MAAM,UAAU,GAA6B;IAC3C,UAAU,EAAE;QACV;YACE,CAAC,+EAAkB,CAAC,EAAE;gBACpB,EAAE,EAAE,qCAAqC;aAC1C;SACF;KACF;CACF,CAAC;AAUK,MAAM,kBAAkB,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAA2B,EAAE,EAAE;IAClH,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAA0B,SAAS,CAAC,CAAC;IACvF,MAAM,SAAS,GAAG,IAAA,iBAAS,GAAkB,CAAC;IAE9C,IAAA,iBAAS,EAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,OAAO,IAAI,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IACvF,MAAM,MAAM,GAAG,aAAa,oCAAS,UAAU,KAAE,OAAO,EAAE,aAAa,GAAE,CAAC;IAE1E,OAAO,CACL,uCAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE,KAAK,EAAE,GAAG,EAAE;QAC9E,uCAAK,GAAG,EAAE,SAAS,EAAE,KAAK,kBAAI,KAAK,EAAE,GAAG,IAAK,WAAW,wBAElD;QACL,MAAM,IAAI,CACT,8BAAC,wCAAkB,IAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,GAAI,CAC9G,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,kBAAkB,sBAiB7B;AAEK,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,OAAO,CACL,8BAAC,0BAAkB,IACjB,KAAK,EACH;YACE,yBAAyB,EAAE,SAAS;YACpC,+BAA+B,EAAE,SAAS;YAC1C,gCAAgC,EAAE,SAAS;SAC3B,GAEpB,CACH,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,UAAU,cAYrB;AAEK,MAAM,KAAK,GAAG,GAAG,EAAE;IACxB,OAAO,CACL;QACE,8BAAC,0BAAkB,IAAC,IAAI,EAAC,GAAG,GAAG;QAC/B,8BAAC,0BAAkB,IAAC,IAAI,EAAC,GAAG,GAAG;QAC/B,8BAAC,0BAAkB,IAAC,IAAI,EAAC,GAAG,GAAG,CAC3B,CACP,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,KAAK,SAQhB;AAEK,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAExC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC;QAC1E,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,8BAAC,0BAAkB,IAAC,WAAW,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,GAAI,CAAC;AACrE,CAAC,CAAC;AATW,QAAA,aAAa,iBASxB"}

package/dist/element-highlighter/element-highlighter.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
-import { Placement } from '../label';
+import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import { Placement, LabelSize } from '../label';
+export declare type HighlighterSize = LabelSize;
 export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
     /** target element to highlight */
     target: HighlightTarget;
@@ -9,21 +11,18 @@ export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivEle
     classes?: HighlightClasses;
     /** continually update highlighter to match moving elements */
     watchMotion?: boolean;
+    size?: HighlighterSize;
 }
 export { Placement };
 export declare type HighlightTarget = {
-    id?: string;
+    /** element to show the highlight at */
     element: HTMLElement;
-    /** e.g. 'https://bit.dev/teambit/base-ui/elements/dots-loader', */
-    link?: string;
-    /** e.g. 'https://bit.dev/teambit/base-ui' */
-    scopeLink?: string;
-    /** use full production url, or local workspace url */
-    local?: boolean;
+    /** components with metadata to show in the label */
+    components?: ComponentMetaHolder[];
 };
 export declare type HighlightClasses = {
     container?: string;
     frame?: string;
     label?: string;
 };
-export declare function ElementHighlighter({ target, placement, watchMotion, className, classes, ...props }: ElementHighlighterProps): JSX.Element;
+export declare function ElementHighlighter({ target, placement, watchMotion, className, classes, size, ...props }: ElementHighlighterProps): JSX.Element;

package/dist/element-highlighter/element-highlighter.js

@@ -22,11 +22,11 @@ const label_1 = require("../label");
 const ignore_highlighter_1 = require("../ignore-highlighter");
 const element_highlighter_module_scss_1 = __importDefault(require("./element-highlighter.module.scss"));
 function ElementHighlighter(_a) {
-    var { target, placement = 'top', watchMotion = true, className, classes } = _a, props = __rest(_a, ["target", "placement", "watchMotion", "className", "classes"]);
+    var { target, placement = 'top', watchMotion = true, className, classes, size } = _a, props = __rest(_a, ["target", "placement", "watchMotion", "className", "classes", "size"]);
     return (react_1.default.createElement("div", Object.assign({}, props, ignore_highlighter_1.excludeHighlighterAtt, { className: (0, classnames_1.default)(classes === null || classes === void 0 ? void 0 : classes.container, element_highlighter_module_scss_1.default.container, className) }),
         react_1.default.createElement(frame_1.Frame, { targetRef: target.element, className: (0, classnames_1.default)(element_highlighter_module_scss_1.default.frame, classes === null || classes === void 0 ? void 0 : classes.frame), watchMotion: watchMotion }),
-        target.id && (react_1.default.createElement(label_1.LabelContainer, { className: element_highlighter_module_scss_1.default.label, targetRef: target.element, placement: placement, watchMotion: watchMotion },
-            react_1.default.createElement(label_1.Label, { componentId: target.id, link: target.link, scopeLink: target.scopeLink, local: target.local, className: classes === null || classes === void 0 ? void 0 : classes.label })))));
+        target.components && (react_1.default.createElement(label_1.LabelContainer, { className: element_highlighter_module_scss_1.default.label, targetRef: target.element, placement: placement, watchMotion: watchMotion },
+            react_1.default.createElement(label_1.Label, { components: target.components, className: classes === null || classes === void 0 ? void 0 : classes.label, size: size })))));
 }
 exports.ElementHighlighter = ElementHighlighter;
 //# sourceMappingURL=element-highlighter.js.map

package/dist/element-highlighter/element-highlighter.js.map

@@ -1 +1 @@
-{"version":3,"file":"element-highlighter.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AACpC,oCAAiC;AACjC,oCAA4D;AAC5D,8DAA8D;AAC9D,wGAAuD;AAgCvD,SAAgB,kBAAkB,CAAC,EAOT;QAPS,EACjC,MAAM,EACN,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,IAAI,EAClB,SAAS,EACT,OAAO,OAEiB,EADrB,KAAK,cANyB,8DAOlC,CADS;IAER,OAAO,CACL,uDAAS,KAAK,EAAM,0CAAqB,IAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAAE,yCAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAC/G,8BAAC,aAAK,IACJ,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,SAAS,EAAE,IAAA,oBAAU,EAAC,yCAAM,CAAC,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC,EACnD,WAAW,EAAE,WAAW,GACxB;QAED,MAAM,CAAC,EAAE,IAAI,CACZ,8BAAC,sBAAc,IACb,SAAS,EAAE,yCAAM,CAAC,KAAK,EACvB,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW;YAExB,8BAAC,aAAK,IACJ,WAAW,EAAE,MAAM,CAAC,EAAE,EACtB,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,GACzB,CACa,CAClB,CACG,CACP,CAAC;AACJ,CAAC;AAlCD,gDAkCC"}
+{"version":3,"file":"element-highlighter.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,oCAAiC;AACjC,oCAAuE;AACvE,8DAA8D;AAC9D,wGAAuD;AA+BvD,SAAgB,kBAAkB,CAAC,EAQT;QARS,EACjC,MAAM,EACN,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,IAAI,EAClB,SAAS,EACT,OAAO,EACP,IAAI,OAEoB,EADrB,KAAK,cAPyB,sEAQlC,CADS;IAER,OAAO,CACL,uDAAS,KAAK,EAAM,0CAAqB,IAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAAE,yCAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAC/G,8BAAC,aAAK,IACJ,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,SAAS,EAAE,IAAA,oBAAU,EAAC,yCAAM,CAAC,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC,EACnD,WAAW,EAAE,WAAW,GACxB;QAED,MAAM,CAAC,UAAU,IAAI,CACpB,8BAAC,sBAAc,IACb,SAAS,EAAE,yCAAM,CAAC,KAAK,EACvB,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW;YAExB,8BAAC,aAAK,IAAC,UAAU,EAAE,MAAM,CAAC,UAAU,EAAE,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,EAAE,IAAI,EAAE,IAAI,GAAI,CAChE,CAClB,CACG,CACP,CAAC;AACJ,CAAC;AA7BD,gDA6BC"}

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

@@ -1,2 +1,2 @@
 export { ElementHighlighter } from './element-highlighter';
-export type { ElementHighlighterProps, HighlightTarget, Placement, HighlightClasses } from './element-highlighter';
+export type { ElementHighlighterProps, HighlightTarget, Placement, HighlightClasses, HighlighterSize, } from './element-highlighter';

package/dist/hover-highlighter/use-hover-highlighter.d.ts

@@ -1,14 +1,17 @@
 import React from 'react';
 import { HighlightTarget } from '../element-highlighter';
-import { MatchRule } from '../rule-matcher';
+import { MatchRule, ComponentMatchRule } from '../rule-matcher';
 export declare type useHoverHighlighterOptions = {
     debounceDuration: number;
     scopeClass: string;
     disabled?: boolean;
+    /** filter highlighter targets by this query selector. (May be a more complex object in the future) */
     rule?: MatchRule;
+    /** filter targets by this component match rule */
+    componentRule?: ComponentMatchRule;
 };
 /** fires onChange when targeting a new component */
-export declare function useHoverHighlighter<T extends HTMLElement = HTMLElement>(onChange: (target?: HighlightTarget) => void, props: React.HTMLAttributes<T>, { debounceDuration, scopeClass, disabled, rule }: useHoverHighlighterOptions): {
+export declare function useHoverHighlighter<T extends HTMLElement = HTMLElement>(onChange: (target?: HighlightTarget) => void, props: React.HTMLAttributes<T>, { debounceDuration, scopeClass, disabled, rule, componentRule }: useHoverHighlighterOptions): {
     onMouseOver: (event: React.MouseEvent<T, MouseEvent>) => void;
     onMouseLeave: (event: React.MouseEvent<T, MouseEvent>) => void;
 } | {

package/dist/hover-highlighter/use-hover-highlighter.js

@@ -9,13 +9,13 @@ const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@t
 const ignore_highlighter_1 = require("../ignore-highlighter");
 const rule_matcher_1 = require("../rule-matcher");
 /** fires onChange when targeting a new component */
-function useHoverHighlighter(onChange, props = {}, { debounceDuration, scopeClass, disabled, rule }) {
-    const { handleElement } = useHoverHandler({ onChange, scopeClass, debounceDuration, disabled, rule });
+function useHoverHighlighter(onChange, props = {}, { debounceDuration, scopeClass, disabled, rule, componentRule }) {
+    const { handleElement } = useHoverHandler({ onChange, scopeClass, debounceDuration, disabled, rule, componentRule });
     const handlers = (0, react_ui_hover_selector_1.useHoverSelection)(disabled ? undefined : handleElement, props);
     return handlers;
 }
 exports.useHoverHighlighter = useHoverHighlighter;
-function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled, rule }) {
+function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled, rule, componentRule, }) {
     // debounced method is ref'ed, so no need for useCallback
     const _handleElement = (element) => {
         // clear highlighter at the edges:
@@ -26,15 +26,12 @@ function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled
         // skip DOM trees having 'data-ignore-component-highlight'
         if (element.closest(`.${scopeClass} ${ignore_highlighter_1.excludeHighlighterSelector}`))
             return;
-        const result = bubbleToBitComponent(element, rule ? (current) => (0, rule_matcher_1.ruleMatcher)(current, rule) : undefined);
+        const result = bubbleToBitComponent(element, rule, componentRule);
         if (!result)
             return;
         onChange({
             element: result.element,
-            id: result.meta.id,
-            scopeLink: undefined,
-            link: result.meta.homepage,
-            local: result.meta.exported === false,
+            components: result.components,
         });
     };
     const handleElement = (0, use_debounce_1.useDebouncedCallback)(_handleElement, debounceDuration);
@@ -46,18 +43,19 @@ function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled
     return { handleElement };
 }
 /** go up the dom tree until reaching a react bit component */
-function bubbleToBitComponent(element, filter) {
+function bubbleToBitComponent(element, elementRule, componentRule) {
     for (let current = element; current; current = current.parentElement) {
         current = (0, react_modules_dom_to_react_1.toRootElement)(current);
-        if (!current || (filter === null || filter === void 0 ? void 0 : filter(current)) === false)
+        if (!current)
             return undefined;
-        const component = (0, react_modules_dom_to_react_1.domToReact)(current);
-        if ((0, react_ui_highlighter_component_metadata_bit_component_meta_1.hasComponentMeta)(component)) {
-            const meta = component.__bit_component;
+        if ((0, rule_matcher_1.ruleMatcher)(current, elementRule)) {
+            const components = (0, react_modules_dom_to_react_1.domToReacts)(current);
+            const relevantComponents = components.filter((x) => (0, react_ui_highlighter_component_metadata_bit_component_meta_1.hasComponentMeta)(x) && (0, rule_matcher_1.componentRuleMatcher)({ meta: x[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField] }, componentRule));
+            if (relevantComponents.length < 1)
+                return undefined;
             return {
                 element: current,
-                component,
-                meta,
+                components: relevantComponents,
             };
         }
     }

package/dist/hover-highlighter/use-hover-highlighter.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-hover-highlighter.js","sourceRoot":"","sources":["../../hover-highlighter/use-hover-highlighter.tsx"],"names":[],"mappings":";;;AAAA,iCAAyC;AACzC,+CAAoD;AACpD,oFAAgF;AAChF,8EAAqE;AACrE,oJAAuG;AAEvG,8DAAmE;AAEnE,kDAAyD;AASzD,oDAAoD;AACpD,SAAgB,mBAAmB,CACjC,QAA4C,EAC5C,QAAiC,EAAE,EACnC,EAAE,gBAAgB,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAA8B;IAE5E,MAAM,EAAE,aAAa,EAAE,GAAG,eAAe,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAAgB,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAEtG,MAAM,QAAQ,GAAG,IAAA,2CAAiB,EAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IAEhF,OAAO,QAAQ,CAAC;AAClB,CAAC;AAVD,kDAUC;AAUD,SAAS,eAAe,CAAC,EAAE,QAAQ,EAAE,UAAU,GAAG,EAAE,EAAE,gBAAgB,EAAE,QAAQ,EAAE,IAAI,EAA4B;IAChH,yDAAyD;IACzD,MAAM,cAAc,GAAG,CAAC,OAA2B,EAAE,EAAE;QACrD,kCAAkC;QAClC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,YAAY,CAAC,kCAAkC,CAAC,EAAE;YACxE,QAAQ,CAAC,SAAS,CAAC,CAAC;YACpB,OAAO;SACR;QAED,0DAA0D;QAC1D,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,UAAU,IAAI,+CAA0B,EAAE,CAAC;YAAE,OAAO;QAE5E,MAAM,MAAM,GAAG,oBAAoB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,IAAA,0BAAW,EAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QACzG,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,QAAQ,CAAC;YACP,OAAO,EAAE,MAAM,CAAC,OAAO;YACvB,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE;YAClB,SAAS,EAAE,SAAS;YACpB,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ;YAC1B,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,KAAK,KAAK;SACtC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,IAAA,mCAAoB,EAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;IAE7E,uBAAuB;IACvB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,QAAQ;YAAE,aAAa,CAAC,MAAM,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAE9B,OAAO,EAAE,aAAa,EAAE,CAAC;AAC3B,CAAC;AAED,8DAA8D;AAC9D,SAAS,oBAAoB,CAAC,OAA2B,EAAE,MAAuC;IAChG,KAAK,IAAI,OAAO,GAAG,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,aAAa,EAAE;QACpE,OAAO,GAAG,IAAA,0CAAa,EAAC,OAAO,CAAC,CAAC;QACjC,IAAI,CAAC,OAAO,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,OAAO,CAAC,MAAK,KAAK;YAAE,OAAO,SAAS,CAAC;QAE9D,MAAM,SAAS,GAAG,IAAA,uCAAU,EAAC,OAAO,CAAC,CAAC;QAEtC,IAAI,IAAA,6EAAgB,EAAC,SAAS,CAAC,EAAE;YAC/B,MAAM,IAAI,GAAG,SAAS,CAAC,eAAe,CAAC;YAEvC,OAAO;gBACL,OAAO,EAAE,OAAO;gBAChB,SAAS;gBACT,IAAI;aACL,CAAC;SACH;KACF;IAED,OAAO,SAAS,CAAC;AACnB,CAAC"}
+{"version":3,"file":"use-hover-highlighter.js","sourceRoot":"","sources":["../../hover-highlighter/use-hover-highlighter.tsx"],"names":[],"mappings":";;;AAAA,iCAAyC;AACzC,+CAAoD;AACpD,oFAAiF;AACjF,8EAAqE;AACrE,oJAI6E;AAE7E,8DAAmE;AAEnE,kDAAmG;AAYnG,oDAAoD;AACpD,SAAgB,mBAAmB,CACjC,QAA4C,EAC5C,QAAiC,EAAE,EACnC,EAAE,gBAAgB,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAA8B;IAE3F,MAAM,EAAE,aAAa,EAAE,GAAG,eAAe,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAAgB,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC;IAErH,MAAM,QAAQ,GAAG,IAAA,2CAAiB,EAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IAEhF,OAAO,QAAQ,CAAC;AAClB,CAAC;AAVD,kDAUC;AAWD,SAAS,eAAe,CAAC,EACvB,QAAQ,EACR,UAAU,GAAG,EAAE,EACf,gBAAgB,EAChB,QAAQ,EACR,IAAI,EACJ,aAAa,GACY;IACzB,yDAAyD;IACzD,MAAM,cAAc,GAAG,CAAC,OAA2B,EAAE,EAAE;QACrD,kCAAkC;QAClC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,YAAY,CAAC,kCAAkC,CAAC,EAAE;YACxE,QAAQ,CAAC,SAAS,CAAC,CAAC;YACpB,OAAO;SACR;QAED,0DAA0D;QAC1D,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,UAAU,IAAI,+CAA0B,EAAE,CAAC;YAAE,OAAO;QAE5E,MAAM,MAAM,GAAG,oBAAoB,CAAC,OAAO,EAAE,IAAI,EAAE,aAAa,CAAC,CAAC;QAClE,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,QAAQ,CAAC;YACP,OAAO,EAAE,MAAM,CAAC,OAAO;YACvB,UAAU,EAAE,MAAM,CAAC,UAAU;SAC9B,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,IAAA,mCAAoB,EAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;IAE7E,uBAAuB;IACvB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,QAAQ;YAAE,aAAa,CAAC,MAAM,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAE9B,OAAO,EAAE,aAAa,EAAE,CAAC;AAC3B,CAAC;AAED,8DAA8D;AAC9D,SAAS,oBAAoB,CAC3B,OAA2B,EAC3B,WAAuB,EACvB,aAAkC;IAElC,KAAK,IAAI,OAAO,GAAG,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,aAAa,EAAE;QACpE,OAAO,GAAG,IAAA,0CAAa,EAAC,OAAO,CAAC,CAAC;QACjC,IAAI,CAAC,OAAO;YAAE,OAAO,SAAS,CAAC;QAC/B,IAAI,IAAA,0BAAW,EAAC,OAAO,EAAE,WAAW,CAAC,EAAE;YACrC,MAAM,UAAU,GAAG,IAAA,wCAAW,EAAC,OAAO,CAAC,CAAC;YAExC,MAAM,kBAAkB,GAAG,UAAU,CAAC,MAAM,CAC1C,CAAC,CAAC,EAAE,EAAE,CAAC,IAAA,6EAAgB,EAAC,CAAC,CAAC,IAAI,IAAA,mCAAoB,EAAC,EAAE,IAAI,EAAE,CAAC,CAAC,+EAAkB,CAAC,EAAE,EAAE,aAAa,CAAC,CACrE,CAAC;YAEhC,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC;gBAAE,OAAO,SAAS,CAAC;YACpD,OAAO;gBACL,OAAO,EAAE,OAAO;gBAChB,UAAU,EAAE,kBAAkB;aAC/B,CAAC;SACH;KACF;IAED,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/dist/hybrid-highligher/hybrid-highlighter.d.ts

@@ -1,6 +1,6 @@
 import React, { CSSProperties } from 'react';
-import { Placement, HighlightClasses } from '../element-highlighter';
-import type { MatchRule } from '../rule-matcher';
+import { Placement, HighlightClasses, HighlighterSize } from '../element-highlighter';
+import type { MatchRule, ComponentMatchRule } from '../rule-matcher';
 export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
     /** stop all highlighting and drop listeners */
     disabled?: boolean;
@@ -20,6 +20,8 @@ export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElem
     watchMotion?: boolean;
     /** filter highlighter targets by this query selector. (May be a more complex object in the future) */
     rule?: MatchRule;
+    /** filter components to match this rule. Can be id, array of ids, or a function */
+    componentRule?: ComponentMatchRule;
     /** set the behavior of the highlighter.
      * `disabled` - stops highlighting.
      * `allChildren` - highlights all components rendered under children
@@ -29,6 +31,7 @@ export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElem
     bgColor?: string;
     bgColorHover?: string;
     bgColorActive?: string;
+    size?: HighlighterSize;
 }
 /** automatically highlight components on hover */
-export declare function HybridHighlighter({ disabled, mode, debounceSelection, watchMotion, placement, rule, classes, highlightStyle, className, style, bgColor, bgColorHover, bgColorActive, children, ...rest }: HybridHighlighterProps): JSX.Element;
+export declare function HybridHighlighter({ disabled, mode, debounceSelection, watchMotion, placement, rule, componentRule, classes, highlightStyle, className, style, bgColor, bgColorHover, bgColorActive, size, children, ...rest }: HybridHighlighterProps): JSX.Element;

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

@@ -42,7 +42,7 @@ const element_highlighter_1 = require("../element-highlighter");
 const use_multi_highlighter_1 = require("../multi-highlighter/use-multi-highlighter");
 /** automatically highlight components on hover */
 function HybridHighlighter(_a) {
-    var { disabled, mode = 'hover', debounceSelection = 80, watchMotion = true, placement, rule, classes, highlightStyle, className, style, bgColor, bgColorHover, bgColorActive, children } = _a, rest = __rest(_a, ["disabled", "mode", "debounceSelection", "watchMotion", "placement", "rule", "classes", "highlightStyle", "className", "style", "bgColor", "bgColorHover", "bgColorActive", "children"]);
+    var { disabled, mode = 'hover', debounceSelection = 80, watchMotion = true, placement, rule, componentRule, classes, highlightStyle, className, style, bgColor, bgColorHover, bgColorActive, size, children } = _a, rest = __rest(_a, ["disabled", "mode", "debounceSelection", "watchMotion", "placement", "rule", "componentRule", "classes", "highlightStyle", "className", "style", "bgColor", "bgColorHover", "bgColorActive", "size", "children"]);
     const ref = (0, react_1.createRef)();
     const [targets, setTarget] = (0, react_1.useState)({});
     const scopeClass = (0, react_1.useRef)(`hl-scope-${(0, uuid_1.v4)()}`).current;
@@ -57,6 +57,7 @@ function HybridHighlighter(_a) {
         scopeClass,
         disabled: disabled || mode !== 'hover',
         rule,
+        componentRule,
     });
     (0, use_multi_highlighter_1.useMultiHighlighter)({
         onChange: setTarget,
@@ -64,11 +65,12 @@ function HybridHighlighter(_a) {
         scopeClass,
         disabled: disabled || mode !== 'allChildren',
         rule,
+        componentRule,
     });
     const _styles = (0, react_1.useMemo)(() => (Object.assign({ '--bit-highlighter-color': bgColor, '--bit-highlighter-color-hover': bgColorHover, '--bit-highlighter-color-active': bgColorActive }, style)), [bgColor, bgColorHover, bgColorActive, style]);
     return (react_1.default.createElement("div", Object.assign({ ref: ref }, rest, handlers, { style: _styles, className: (0, classnames_1.default)(className, scopeClass), "data-nullify-component-highlight": true }),
         children,
-        Object.entries(targets).map(([key, target]) => (react_1.default.createElement(element_highlighter_1.ElementHighlighter, { key: key, target: target, classes: classes, style: highlightStyle, placement: placement, watchMotion: watchMotion })))));
+        Object.entries(targets).map(([key, target]) => (react_1.default.createElement(element_highlighter_1.ElementHighlighter, { key: key, target: target, classes: classes, style: highlightStyle, placement: placement, watchMotion: watchMotion, size: size })))));
 }
 exports.HybridHighlighter = HybridHighlighter;
 //# sourceMappingURL=hybrid-highlighter.js.map

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

@@ -1 +1 @@
-{"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;AAmCjF,kDAAkD;AAClD,SAAgB,iBAAiB,CAAC,EAiBT;QAjBS,EAChC,QAAQ,EACR,IAAI,GAAG,OAAO,EACd,iBAAiB,GAAG,EAAE,EACtB,WAAW,GAAG,IAAI,EAClB,SAAS,EACT,IAAI,EAEJ,OAAO,EACP,cAAc,EACd,SAAS,EACT,KAAK,EACL,OAAO,EACP,YAAY,EACZ,aAAa,EACb,QAAQ,OAEe,EADpB,IAAI,cAhByB,wLAiBjC,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;KACL,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;KACL,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;AAnFD,8CAmFC"}
+{"version":3,"file":"hybrid-highlighter.js","sourceRoot":"","sources":["../../hybrid-highligher/hybrid-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8F;AAC9F,4DAAoC;AACpC,+BAA0B;AAE1B,4DAA2D;AAC3D,gEAMgC;AAChC,sFAAiF;AAsCjF,kDAAkD;AAClD,SAAgB,iBAAiB,CAAC,EAmBT;QAnBS,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,IAAI,EACJ,QAAQ,OAEe,EADpB,IAAI,cAlByB,iNAmBjC,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,EACxB,IAAI,EAAE,IAAI,GACV,CACH,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AAxFD,8CAwFC"}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+export declare type ComponentStripSize = 's' | 'm' | 'l';
+interface ComponentStripProps extends React.HTMLAttributes<HTMLDivElement> {
+    component: ComponentMetaHolder;
+    size?: ComponentStripSize;
+}
+export declare const ComponentStrip: React.ForwardRefExoticComponent<ComponentStripProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/label/component-strip.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.ComponentStrip = void 0;
+const react_1 = __importStar(require("react"));
+const base_ui_routing_native_link_1 = require("@teambit/base-ui.routing.native-link");
+const component_id_1 = require("@teambit/component-id");
+const component_modules_component_url_1 = require("@teambit/component.modules.component-url");
+const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@teambit/react.ui.highlighter.component-metadata.bit-component-meta");
+const component_strip_module_scss_1 = __importDefault(require("./component-strip.module.scss"));
+const links_1 = require("./links");
+exports.ComponentStrip = (0, react_1.forwardRef)(function ComponentStrip({ component, size = 'm', children }, ref) {
+    const { id, homepage, exported } = component[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField];
+    const parsedId = (0, react_1.useMemo)(() => component_id_1.ComponentID.tryFromString(id), [id]);
+    const componentLink = homepage || (0, links_1.calcComponentLink)(parsedId, exported);
+    return (react_1.default.createElement("div", { className: component_strip_module_scss_1.default.componentStrip, ref: ref, "data-size": size },
+        !parsedId && react_1.default.createElement(LabelBlock, { link: homepage }, id),
+        parsedId && react_1.default.createElement(LabelBlock, { link: component_modules_component_url_1.ScopeUrl.toUrl(parsedId.scope) }, parsedId.scope),
+        parsedId && (react_1.default.createElement(LabelBlock, { link: componentLink },
+            parsedId.fullName,
+            parsedId.version && parsedId.version !== 'latest' && `@${parsedId.version}`)),
+        children));
+});
+function LabelBlock({ link, children }) {
+    const Comp = link ? base_ui_routing_native_link_1.NativeLink : 'span';
+    return (react_1.default.createElement(Comp, { href: link, external: !!link }, children));
+}
+//# sourceMappingURL=component-strip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component-strip.js","sourceRoot":"","sources":["../../label/component-strip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA4E;AAC5E,sFAAkE;AAClE,wDAAoD;AACpD,8FAAoE;AACpE,oJAG6E;AAC7E,gGAAmD;AACnD,mCAA4C;AAQ/B,QAAA,cAAc,GAAG,IAAA,kBAAU,EAAC,SAAS,cAAc,CAC9D,EAAE,SAAS,EAAE,IAAI,GAAG,GAAG,EAAE,QAAQ,EAAuB,EACxD,GAAiC;IAEjC,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC,+EAAkB,CAAC,CAAC;IAEjE,MAAM,QAAQ,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,0BAAW,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACpE,MAAM,aAAa,GAAG,QAAQ,IAAI,IAAA,yBAAiB,EAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAExE,OAAO,CACL,uCAAK,SAAS,EAAE,qCAAM,CAAC,cAAc,EAAE,GAAG,EAAE,GAAG,eAAa,IAAI;QAC7D,CAAC,QAAQ,IAAI,8BAAC,UAAU,IAAC,IAAI,EAAE,QAAQ,IAAG,EAAE,CAAc;QAC1D,QAAQ,IAAI,8BAAC,UAAU,IAAC,IAAI,EAAE,0CAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAG,QAAQ,CAAC,KAAK,CAAc;QAC3F,QAAQ,IAAI,CACX,8BAAC,UAAU,IAAC,IAAI,EAAE,aAAa;YAC5B,QAAQ,CAAC,QAAQ;YACjB,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,QAAQ,CAAC,OAAO,EAAE,CACjE,CACd;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,UAAU,CAAC,EAAE,IAAI,EAAE,QAAQ,EAA0C;IAC5E,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,wCAAU,CAAC,CAAC,CAAC,MAAM,CAAC;IACxC,OAAO,CACL,8BAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,IAAI,IAC/B,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC"}

package/dist/label/component-strip.module.scss

@@ -0,0 +1,64 @@
+$borderRadius: 8px;
+$gap: 2px;
+
+.componentStrip {
+  display: flex;
+
+  font-size: 14px;
+  line-height: 16px;
+  border-radius: $borderRadius;
+  box-shadow: 0px 11px 29px 0px rgba(0, 0, 0, 0.23);
+
+  &[data-size='s'] {
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  &[data-size='m'] {
+    font-size: 14px;
+    line-height: 16px;
+  }
+
+  &[data-size='l'] {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  > * {
+    padding: 4px 8px;
+
+    transition: filter 300ms, background-color 300ms;
+    transform: translateZ(0); //fix blurriness in Safari
+
+    background: var(--bit-highlighter-color, #eebcc9);
+
+    &:link,
+    &:visited {
+      text-decoration: inherit; // reset browser defaults
+      color: inherit; // reset browser defaults
+
+      &:hover {
+        background: var(--bit-highlighter-color-hover, #f6dae2);
+      }
+
+      &:active {
+        background: var(--bit-highlighter-color-active, #e79db1);
+        color: inherit;
+      }
+    }
+
+    &:first-child {
+      border-top-left-radius: $borderRadius;
+      border-bottom-left-radius: $borderRadius;
+    }
+
+    margin-right: $gap;
+
+    &:last-child {
+      border-top-right-radius: $borderRadius;
+      border-bottom-right-radius: $borderRadius;
+
+      margin-right: unset;
+    }
+  }
+}

package/dist/label/index.d.ts

@@ -1,2 +1,4 @@
-export { LabelContainer, Label } from './label';
-export type { LabelContainerProps, LabelProps, Placement } from './label';
+export { Label } from './label';
+export type { LabelProps, LabelSize } from './label';
+export { LabelContainer } from './label-container';
+export type { LabelContainerProps, Placement } from './label-container';

package/dist/label/index.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Label = exports.LabelContainer = void 0;
+exports.LabelContainer = exports.Label = void 0;
 var label_1 = require("./label");
-Object.defineProperty(exports, "LabelContainer", { enumerable: true, get: function () { return label_1.LabelContainer; } });
 Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return label_1.Label; } });
+var label_container_1 = require("./label-container");
+Object.defineProperty(exports, "LabelContainer", { enumerable: true, get: function () { return label_container_1.LabelContainer; } });
 //# sourceMappingURL=index.js.map

package/dist/label/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../label/index.ts"],"names":[],"mappings":";;;AAAA,iCAAgD;AAAvC,uGAAA,cAAc,OAAA;AAAE,8FAAA,KAAK,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../label/index.ts"],"names":[],"mappings":";;;AAAA,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AAGd,qDAAmD;AAA1C,iHAAA,cAAc,OAAA"}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Placement } from '@popperjs/core';
+import '@popperjs/core';
+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;
+}
+export type { Placement };
+export declare function LabelContainer({ targetRef, offset, placement, flip, watchMotion, className, ...rest }: LabelContainerProps): JSX.Element;

package/dist/label/label-container.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabelContainer = void 0;
+const react_1 = __importStar(require("react"));
+const react_popper_1 = require("react-popper");
+require("@popperjs/core");
+const use_animation_frame_1 = require("../use-animation-frame");
+// TODO - replace this with TippyJS, when it supports a `targetElement={targetRef.current}` prop
+function LabelContainer(_a) {
+    var { targetRef, offset, placement, flip = true, watchMotion, className } = _a, rest = __rest(_a, ["targetRef", "offset", "placement", "flip", "watchMotion", "className"]);
+    const [sourceRef, setSourceRef] = (0, react_1.useState)(null);
+    const modifiers = (0, react_1.useMemo)(() => [{ name: 'offset', options: { offset } }], [flip, offset]);
+    const { styles, attributes, update } = (0, react_popper_1.usePopper)(targetRef, sourceRef, {
+        modifiers,
+        placement,
+    });
+    (0, use_animation_frame_1.useAnimationFrame)(!!watchMotion && update);
+    if (!targetRef)
+        return null;
+    return react_1.default.createElement("div", Object.assign({}, rest, { ref: setSourceRef, className: className, style: styles.popper }, attributes.popper));
+}
+exports.LabelContainer = LabelContainer;
+//# sourceMappingURL=label-container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label-container.js","sourceRoot":"","sources":["../../label/label-container.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiD;AACjD,+CAAyC;AAEzC,0BAAwB;AAExB,gEAA2D;AAa3D,gGAAgG;AAChG,SAAgB,cAAc,CAAC,EAQT;QARS,EAC7B,SAAS,EACT,MAAM,EACN,SAAS,EACT,IAAI,GAAG,IAAI,EACX,WAAW,EACX,SAAS,OAEW,EADjB,IAAI,cAPsB,wEAQ9B,CADQ;IAEP,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAwB,IAAI,CAAC,CAAC;IAExE,MAAM,SAAS,GAAG,IAAA,eAAO,EACvB,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,EAAE,CAAC,EAC/C,CAAC,IAAI,EAAE,MAAM,CAAC,CACf,CAAC;IAEF,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,IAAA,wBAAS,EAAC,SAAS,EAAE,SAAS,EAAE;QACrE,SAAS;QACT,SAAS;KACV,CAAC,CAAC;IAEH,IAAA,uCAAiB,EAAC,CAAC,CAAC,WAAW,IAAI,MAAM,CAAC,CAAC;IAE3C,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IAE5B,OAAO,uDAAS,IAAI,IAAE,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,IAAM,UAAU,CAAC,MAAM,EAAI,CAAC;AACjH,CAAC;AA1BD,wCA0BC"}

package/dist/label/label.d.ts

@@ -1,21 +1,9 @@
 import React from 'react';
-import type { CardProps } from '@teambit/base-ui.surfaces.card';
-import type { Placement } from '@popperjs/core';
-import '@popperjs/core';
-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 { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import { ComponentStripSize } from './component-strip';
+export declare type LabelSize = ComponentStripSize;
+export interface LabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    components: ComponentMetaHolder[];
+    size?: LabelSize;
 }
-export type { Placement };
-export declare function LabelContainer({ targetRef, offset, placement, flip, watchMotion, className, ...rest }: LabelContainerProps): JSX.Element;
-export interface LabelProps extends CardProps {
-    componentId: string;
-    link?: string;
-    scopeLink?: string;
-    local?: boolean;
-}
-export declare function Label({ componentId, link, scopeLink, local, ...rest }: LabelProps): JSX.Element;
+export declare function Label({ components, size, ...props }: LabelProps): JSX.Element;