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

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

@@ -16,10 +16,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HoverHighlighter = void 0;
 const react_1 = __importDefault(require("react"));
-const hybrid_highligher_1 = require("../hybrid-highligher");
+const hybrid_highlighter_1 = require("../hybrid-highlighter");
 function HoverHighlighter(_a) {
     var props = __rest(_a, []);
-    return react_1.default.createElement(hybrid_highligher_1.HybridHighlighter, Object.assign({}, props, { mode: 'hover' }));
+    return react_1.default.createElement(hybrid_highlighter_1.HybridHighlighter, Object.assign({}, props, { mode: 'hover' }));
 }
 exports.HoverHighlighter = HoverHighlighter;
 //# sourceMappingURL=hover-highlighter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"hover-highlighter.js","sourceRoot":"","sources":["../../hover-highlighter/hover-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAiF;AAIjF,SAAgB,gBAAgB,CAAC,EAAmC;QAA9B,KAAK,cAAV,EAAY,CAAF;IACzC,OAAO,8BAAC,qCAAiB,oBAAK,KAAK,IAAE,IAAI,EAAE,OAAO,IAAI,CAAC;AACzD,CAAC;AAFD,4CAEC"}
+{"version":3,"file":"hover-highlighter.js","sourceRoot":"","sources":["../../hover-highlighter/hover-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,8DAAkF;AAIlF,SAAgB,gBAAgB,CAAC,EAAmC;QAA9B,KAAK,cAAV,EAAY,CAAF;IACzC,OAAO,8BAAC,sCAAiB,oBAAK,KAAK,IAAE,IAAI,EAAE,OAAO,IAAI,CAAC;AACzD,CAAC;AAFD,4CAEC"}

package/dist/{hybrid-highligher → hybrid-highlighter}/hybrid-highlighter.d.ts

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-import { Placement, HighlightClasses, HighlighterSize } from '../element-highlighter';
+import { Placement, HighlightClasses } from '../element-highlighter';
 import type { MatchRule, ComponentMatchRule } from '../rule-matcher';
 export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
     /** stop all highlighting and drop listeners */
@@ -31,7 +31,6 @@ 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, componentRule, classes, highlightStyle, className, style, bgColor, bgColorHover, bgColorActive, size, children, ...rest }: HybridHighlighterProps): JSX.Element;
+export declare function HybridHighlighter({ disabled, mode, debounceSelection, watchMotion, placement, rule, componentRule, classes, highlightStyle, className, style, bgColor, bgColorHover, bgColorActive, children, ...rest }: HybridHighlighterProps): JSX.Element;

package/dist/{hybrid-highligher → hybrid-highlighter}/hybrid-highlighter.js

@@ -39,10 +39,10 @@ const classnames_1 = __importDefault(require("classnames"));
 const uuid_1 = require("uuid");
 const hover_highlighter_1 = require("../hover-highlighter");
 const element_highlighter_1 = require("../element-highlighter");
-const use_multi_highlighter_1 = require("../multi-highlighter/use-multi-highlighter");
+const children_highlighter_1 = require("../children-highlighter");
 /** automatically highlight components on hover */
 function HybridHighlighter(_a) {
-    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"]);
+    var { disabled, mode = 'hover', debounceSelection = 80, watchMotion = true, placement, rule, componentRule, classes, highlightStyle, className, style, bgColor, bgColorHover, bgColorActive, children } = _a, rest = __rest(_a, ["disabled", "mode", "debounceSelection", "watchMotion", "placement", "rule", "componentRule", "classes", "highlightStyle", "className", "style", "bgColor", "bgColorHover", "bgColorActive", "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;
@@ -59,7 +59,7 @@ function HybridHighlighter(_a) {
         rule,
         componentRule,
     });
-    (0, use_multi_highlighter_1.useMultiHighlighter)({
+    (0, children_highlighter_1.useChildrenHighlighter)({
         onChange: setTarget,
         scopeRef: ref,
         scopeClass,
@@ -70,7 +70,7 @@ function HybridHighlighter(_a) {
     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, size: size })))));
+        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 })))));
 }
 exports.HybridHighlighter = HybridHighlighter;
 //# sourceMappingURL=hybrid-highlighter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hybrid-highlighter.js","sourceRoot":"","sources":["../../hybrid-highlighter/hybrid-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8F;AAC9F,4DAAoC;AACpC,+BAA0B;AAE1B,4DAA2D;AAC3D,gEAA0G;AAC1G,kEAAiE;AAqCjE,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,6CAAsB,EAAC;QACrB,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-highlighter/index.js.map

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

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-export { HybridHighlighter as ComponentHighlighter } from './hybrid-highligher';
-export type { HybridHighlighterProps as ComponentHighlightProps } from './hybrid-highligher';
+export { HybridHighlighter as ComponentHighlighter } from './hybrid-highlighter';
+export type { HybridHighlighterProps as ComponentHighlightProps } from './hybrid-highlighter';
 export { HoverHighlighter } from './hover-highlighter';
 export type { HoverHighlighterProps } from './hover-highlighter';
-export { MultiHighlighter } from './multi-highlighter';
-export type { MultiHighlighterProps } from './multi-highlighter';
+export { ChildrenHighlighter } from './children-highlighter';
+export type { ChildrenHighlighterProps } from './children-highlighter';
 export { ElementHighlighter } from './element-highlighter';
 export type { ElementHighlighterProps, HighlightTarget, Placement, HighlightClasses } from './element-highlighter';
 export { ExcludeHighlighter, excludeHighlighterAtt, excludeHighlighterSelector, excludeHighlighterAttrName, } from './ignore-highlighter';

package/dist/index.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.excludeHighlighterAttrName = exports.excludeHighlighterSelector = exports.excludeHighlighterAtt = exports.ExcludeHighlighter = exports.ElementHighlighter = exports.MultiHighlighter = exports.HoverHighlighter = exports.ComponentHighlighter = void 0;
-var hybrid_highligher_1 = require("./hybrid-highligher");
-Object.defineProperty(exports, "ComponentHighlighter", { enumerable: true, get: function () { return hybrid_highligher_1.HybridHighlighter; } });
+exports.excludeHighlighterAttrName = exports.excludeHighlighterSelector = exports.excludeHighlighterAtt = exports.ExcludeHighlighter = exports.ElementHighlighter = exports.ChildrenHighlighter = exports.HoverHighlighter = exports.ComponentHighlighter = void 0;
+var hybrid_highlighter_1 = require("./hybrid-highlighter");
+Object.defineProperty(exports, "ComponentHighlighter", { enumerable: true, get: function () { return hybrid_highlighter_1.HybridHighlighter; } });
 var hover_highlighter_1 = require("./hover-highlighter");
 Object.defineProperty(exports, "HoverHighlighter", { enumerable: true, get: function () { return hover_highlighter_1.HoverHighlighter; } });
-var multi_highlighter_1 = require("./multi-highlighter");
-Object.defineProperty(exports, "MultiHighlighter", { enumerable: true, get: function () { return multi_highlighter_1.MultiHighlighter; } });
+var children_highlighter_1 = require("./children-highlighter");
+Object.defineProperty(exports, "ChildrenHighlighter", { enumerable: true, get: function () { return children_highlighter_1.ChildrenHighlighter; } });
 var element_highlighter_1 = require("./element-highlighter");
 Object.defineProperty(exports, "ElementHighlighter", { enumerable: true, get: function () { return element_highlighter_1.ElementHighlighter; } });
 var ignore_highlighter_1 = require("./ignore-highlighter");

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,yDAAgF;AAAvE,yHAAA,iBAAiB,OAAwB;AAGlD,yDAAuD;AAA9C,qHAAA,gBAAgB,OAAA;AAGzB,yDAAuD;AAA9C,qHAAA,gBAAgB,OAAA;AAGzB,6DAA2D;AAAlD,yHAAA,kBAAkB,OAAA;AAG3B,2DAK8B;AAJ5B,wHAAA,kBAAkB,OAAA;AAClB,2HAAA,qBAAqB,OAAA;AACrB,gIAAA,0BAA0B,OAAA;AAC1B,gIAAA,0BAA0B,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,2DAAiF;AAAxE,0HAAA,iBAAiB,OAAwB;AAGlD,yDAAuD;AAA9C,qHAAA,gBAAgB,OAAA;AAGzB,+DAA6D;AAApD,2HAAA,mBAAmB,OAAA;AAG5B,6DAA2D;AAAlD,yHAAA,kBAAkB,OAAA;AAG3B,2DAK8B;AAJ5B,wHAAA,kBAAkB,OAAA;AAClB,2HAAA,qBAAqB,OAAA;AACrB,gIAAA,0BAA0B,OAAA;AAC1B,gIAAA,0BAA0B,OAAA"}

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

@@ -1,9 +1,7 @@
 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

@@ -30,11 +30,11 @@ const component_modules_component_url_1 = require("@teambit/component.modules.co
 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) {
+exports.ComponentStrip = (0, react_1.forwardRef)(function ComponentStrip({ component, 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 },
+    return (react_1.default.createElement("div", { className: component_strip_module_scss_1.default.componentStrip, ref: ref },
         !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 },

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

@@ -1 +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"}
+{"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;AAK/B,QAAA,cAAc,GAAG,IAAA,kBAAU,EAAC,SAAS,cAAc,CAC9D,EAAE,SAAS,EAAE,QAAQ,EAAuB,EAC5C,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;QAC5C,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

@@ -1,31 +1,16 @@
-$borderRadius: 8px;
-$gap: 2px;
+$borderRadius: 0.5em;
+$gap: 0.125em;
 
 .componentStrip {
   display: flex;
+  width: fit-content; // for correct shadow size
 
-  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;
-  }
+  box-shadow: var(--bit-highlighter-shadow);
 
   > * {
-    padding: 4px 8px;
+    padding: 0 0.5em;
+    line-height: 1.5; //use line height to get rounder values than 0.25em padding
 
     transition: filter 300ms, background-color 300ms;
     transform: translateZ(0); //fix blurriness in Safari

package/dist/label/index.d.ts

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

package/dist/label/label.d.ts

@@ -1,9 +1,6 @@
 import React from 'react';
 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 declare function Label({ components, size, ...props }: LabelProps): JSX.Element;
+export declare function Label({ components, ...props }: LabelProps): JSX.Element;

package/dist/label/label.js

@@ -40,7 +40,7 @@ const label_module_scss_1 = __importDefault(require("./label.module.scss"));
 const component_strip_1 = require("./component-strip");
 const other_components_1 = require("./other-components");
 function Label(_a) {
-    var { components, size } = _a, props = __rest(_a, ["components", "size"]);
+    var { components } = _a, props = __rest(_a, ["components"]);
     const [showMore, setShowMore] = (0, react_1.useState)(false);
     const last = components.slice(-1).pop();
     if (!last)
@@ -50,8 +50,8 @@ function Label(_a) {
     (0, react_1.useEffect)(() => {
         setShowMore(false);
     }, [components]);
-    return (react_1.default.createElement(other_components_1.OtherComponentsPopper, { components: components, visible: showMore, placement: "bottom-start", size: size },
-        react_1.default.createElement(component_strip_1.ComponentStrip, Object.assign({}, props, { component: last, size: size }), hasMore && (react_1.default.createElement("span", { className: (0, classnames_1.default)(label_module_scss_1.default.othersTooltip, showMore && label_module_scss_1.default.active), onClick: () => setShowMore((x) => !x) })))));
+    return (react_1.default.createElement(other_components_1.OtherComponentsPopper, { components: components, visible: showMore, placement: "bottom-start" },
+        react_1.default.createElement(component_strip_1.ComponentStrip, Object.assign({}, props, { component: last }), hasMore && (react_1.default.createElement("span", { className: (0, classnames_1.default)(label_module_scss_1.default.othersTooltip, showMore && label_module_scss_1.default.active), onClick: () => setShowMore((x) => !x) })))));
 }
 exports.Label = Label;
 //# sourceMappingURL=label.js.map

package/dist/label/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","sourceRoot":"","sources":["../../label/label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAmD;AACnD,4DAAoC;AAGpC,4EAAyC;AACzC,uDAAuE;AACvE,yDAA2D;AAQ3D,SAAgB,KAAK,CAAC,EAA0C;QAA1C,EAAE,UAAU,EAAE,IAAI,OAAwB,EAAnB,KAAK,cAA5B,sBAA8B,CAAF;IAChD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAChD,MAAM,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;IACxC,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;IAEtC,+BAA+B;IAC/B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,WAAW,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,8BAAC,wCAAqB,IAAC,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAC,cAAc,EAAC,IAAI,EAAE,IAAI;QACnG,8BAAC,gCAAc,oBAAK,KAAK,IAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,KACnD,OAAO,IAAI,CACV,wCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,2BAAM,CAAC,aAAa,EAAE,QAAQ,IAAI,2BAAM,CAAC,MAAM,CAAC,EACtE,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GACrC,CACH,CACc,CACK,CACzB,CAAC;AACJ,CAAC;AAxBD,sBAwBC"}
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../label/label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAmD;AACnD,4DAAoC;AAGpC,4EAAyC;AACzC,uDAAmD;AACnD,yDAA2D;AAM3D,SAAgB,KAAK,CAAC,EAAoC;QAApC,EAAE,UAAU,OAAwB,EAAnB,KAAK,cAAtB,cAAwB,CAAF;IAC1C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAChD,MAAM,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;IACxC,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;IAEtC,+BAA+B;IAC/B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,WAAW,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,8BAAC,wCAAqB,IAAC,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAC,cAAc;QACxF,8BAAC,gCAAc,oBAAK,KAAK,IAAE,SAAS,EAAE,IAAI,KACvC,OAAO,IAAI,CACV,wCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,2BAAM,CAAC,aAAa,EAAE,QAAQ,IAAI,2BAAM,CAAC,MAAM,CAAC,EACtE,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GACrC,CACH,CACc,CACK,CACzB,CAAC;AACJ,CAAC;AAxBD,sBAwBC"}

package/dist/label/other-components.d.ts

@@ -1,10 +1,8 @@
 import { TippyProps } from '@tippyjs/react/headless';
 import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
-import { ComponentStripSize } from './component-strip';
 export declare type OtherComponentsProps = {
     components: ComponentMetaHolder[];
-    size?: ComponentStripSize;
     start?: number;
     end?: number;
 } & TippyProps;
-export declare function OtherComponentsPopper({ components, children, start, end, size, placement, interactive, ...tippyProps }: OtherComponentsProps): JSX.Element;
+export declare function OtherComponentsPopper({ components, children, start, end, placement, interactive, ...tippyProps }: OtherComponentsProps): JSX.Element;

package/dist/label/other-components.js

@@ -21,11 +21,11 @@ const component_strip_1 = require("./component-strip");
 const label_module_scss_1 = __importDefault(require("./label.module.scss"));
 // a popper ("tooltip") that shows the additional React Components related to this dom element
 function OtherComponentsPopper(_a) {
-    var { components, children, start, end = -1, size, placement = 'bottom', interactive = true } = _a, tippyProps = __rest(_a, ["components", "children", "start", "end", "size", "placement", "interactive"]);
+    var { components, children, start, end = -1, placement = 'bottom', interactive = true } = _a, tippyProps = __rest(_a, ["components", "children", "start", "end", "placement", "interactive"]);
     const content = (react_1.default.createElement(react_1.default.Fragment, null, components
         .slice(start, end)
         .reverse()
-        .map((comp, idx) => (react_1.default.createElement(component_strip_1.ComponentStrip, { key: idx, component: comp, size: size })))));
+        .map((comp, idx) => (react_1.default.createElement(component_strip_1.ComponentStrip, { key: idx, component: comp })))));
     return (react_1.default.createElement(headless_1.default, Object.assign({ placement: placement, interactive: interactive }, tippyProps, { 
         // second parameter "content" is always undefined, use content inline
         // https://github.com/atomiks/tippyjs-react/issues/341

package/dist/label/other-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"other-components.js","sourceRoot":"","sources":["../../label/other-components.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,uEAA4D;AAG5D,uDAAuE;AACvE,4EAAyC;AASzC,8FAA8F;AAC9F,SAAgB,qBAAqB,CAAC,EASf;QATe,EACpC,UAAU,EACV,QAAQ,EACR,KAAK,EACL,GAAG,GAAG,CAAC,CAAC,EACR,IAAI,EACJ,SAAS,GAAG,QAAQ,EACpB,WAAW,GAAG,IAAI,OAEG,EADlB,UAAU,cARuB,8EASrC,CADc;IAEb,MAAM,OAAO,GAAG,CACd,8DACG,UAAU;SACR,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC;SACjB,OAAO,EAAE;SACT,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,CAClB,8BAAC,gCAAc,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAC1D,CAAC,CACH,CACJ,CAAC;IAEF,OAAO,CACL,8BAAC,kBAAK,kBACJ,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,IACpB,UAAU;QACd,qEAAqE;QACrE,sDAAsD;QACtD,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CACjB,uDAAS,KAAK,IAAE,SAAS,EAAE,2BAAM,CAAC,eAAe,KAC9C,OAAO,CACJ,CACP,KAEA,QAAQ,CACH,CACT,CAAC;AACJ,CAAC;AArCD,sDAqCC"}
+{"version":3,"file":"other-components.js","sourceRoot":"","sources":["../../label/other-components.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,uEAA4D;AAG5D,uDAAmD;AACnD,4EAAyC;AAQzC,8FAA8F;AAC9F,SAAgB,qBAAqB,CAAC,EAQf;QARe,EACpC,UAAU,EACV,QAAQ,EACR,KAAK,EACL,GAAG,GAAG,CAAC,CAAC,EACR,SAAS,GAAG,QAAQ,EACpB,WAAW,GAAG,IAAI,OAEG,EADlB,UAAU,cAPuB,sEAQrC,CADc;IAEb,MAAM,OAAO,GAAG,CACd,8DACG,UAAU;SACR,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC;SACjB,OAAO,EAAE;SACT,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,CAClB,8BAAC,gCAAc,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,GAAI,CAC9C,CAAC,CACH,CACJ,CAAC;IAEF,OAAO,CACL,8BAAC,kBAAK,kBACJ,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,IACpB,UAAU;QACd,qEAAqE;QACrE,sDAAsD;QACtD,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CACjB,uDAAS,KAAK,IAAE,SAAS,EAAE,2BAAM,CAAC,eAAe,KAC9C,OAAO,CACJ,CACP,KAEA,QAAQ,CACH,CACT,CAAC;AACJ,CAAC;AApCD,sDAoCC"}

package/element-highlighter/element-highlighter.compositions.tsx

@@ -1,6 +1,6 @@
 import { componentMetaField } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 import React, { useState, createRef, useEffect, CSSProperties } from 'react';
-import { ElementHighlighter, HighlighterSize, HighlightTarget } from './element-highlighter';
+import { ElementHighlighter, HighlightTarget } from './element-highlighter';
 
 const mockTarget: Partial<HighlightTarget> = {
   components: [
@@ -17,10 +17,9 @@ type HighlightedElementProps = {
   targetStyle?: CSSProperties;
   className?: string;
   watchMotion?: boolean;
-  size?: HighlighterSize;
 };
 
-export const HighlightedElement = ({ style, targetStyle, watchMotion, className, size }: HighlightedElementProps) => {
+export const HighlightedElement = ({ style, targetStyle, watchMotion, className }: HighlightedElementProps) => {
   const [targetElement, setTargetElement] = useState<HTMLElement | undefined>(undefined);
   const targetRef = createRef<HTMLDivElement>();
 
@@ -28,13 +27,11 @@ export const HighlightedElement = ({ style, targetStyle, watchMotion, className,
   const target = targetElement && { ...mockTarget, element: targetElement };
 
   return (
-    <div className={className} style={{ padding: '16px 16px 40px 16px', width: 300 }}>
+    <div className={className} style={{ padding: '16px 16px 40px 16px', width: 300, fontFamily: 'sans-serif' }}>
       <div ref={targetRef} style={{ width: 100, ...targetStyle }}>
         highlight target
       </div>
-      {target && (
-        <ElementHighlighter target={target} style={style} watchMotion={watchMotion} placement="bottom" size={size} />
-      )}
+      {target && <ElementHighlighter target={target} style={style} watchMotion={watchMotion} placement="bottom" />}
     </div>
   );
 };
@@ -56,9 +53,9 @@ export const Customized = () => {
 export const Sizes = () => {
   return (
     <div>
-      <HighlightedElement size="s" />
-      <HighlightedElement size="m" />
-      <HighlightedElement size="l" />
+      <HighlightedElement style={{ fontSize: 10 }} />
+      <HighlightedElement style={{ fontSize: 14 }} />
+      <HighlightedElement style={{ fontSize: 18 }} />
     </div>
   );
 };

package/element-highlighter/element-highlighter.module.scss

@@ -1,11 +1,8 @@
 @import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
 
-.container {
-  font-size: 12px;
-}
-
 .label {
-  font-family: sans-serif;
+  // space between the label and the target
+  // keep this space so users can move their cursor in this space.
   padding: 8px;
 }
 

package/element-highlighter/element-highlighter.tsx

@@ -2,12 +2,10 @@ import React from 'react';
 import classnames from 'classnames';
 import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 import { Frame } from '../frame';
-import { Label, LabelContainer, Placement, LabelSize } from '../label';
+import { Label, LabelContainer, Placement } from '../label';
 import { excludeHighlighterAtt } from '../ignore-highlighter';
 import styles from './element-highlighter.module.scss';
 
-export type HighlighterSize = LabelSize;
-
 export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
   /** target element to highlight */
   target: HighlightTarget;
@@ -17,7 +15,6 @@ export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivEle
   classes?: HighlightClasses;
   /** continually update highlighter to match moving elements */
   watchMotion?: boolean;
-  size?: HighlighterSize;
 }
 
 export { Placement };
@@ -41,7 +38,6 @@ export function ElementHighlighter({
   watchMotion = true,
   className,
   classes,
-  size,
   ...props
 }: ElementHighlighterProps) {
   return (
@@ -59,7 +55,7 @@ export function ElementHighlighter({
           placement={placement}
           watchMotion={watchMotion}
         >
-          <Label components={target.components} className={classes?.label} size={size} />
+          <Label components={target.components} className={classes?.label} />
         </LabelContainer>
       )}
     </div>

package/element-highlighter/index.ts

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

package/hover-highlighter/hover-highlighter.compositions.tsx

@@ -6,7 +6,7 @@ export const ShowWhenHovering = () => {
   const [disabled, setDisabled] = useState<boolean>(false);
 
   return (
-    <div style={{ padding: '16px 50px 32px 16px', minWidth: 300 }}>
+    <div style={{ padding: '16px 50px 32px 16px', minWidth: 300, fontFamily: 'sans-serif' }}>
       <HoverHighlighter style={{ padding: 16 }} disabled={disabled}>
         <div>
           <br />

package/hover-highlighter/hover-highlighter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HybridHighlighter, HybridHighlighterProps } from '../hybrid-highligher';
+import { HybridHighlighter, HybridHighlighterProps } from '../hybrid-highlighter';
 
 export type HoverHighlighterProps = Omit<HybridHighlighterProps, 'mode'>;
 

package/{hybrid-highligher → hybrid-highlighter}/hybrid-highlighter.tsx

@@ -3,14 +3,8 @@ import classnames from 'classnames';
 import { v4 } from 'uuid';
 
 import { useHoverHighlighter } from '../hover-highlighter';
-import {
-  ElementHighlighter,
-  HighlightTarget,
-  Placement,
-  HighlightClasses,
-  HighlighterSize,
-} from '../element-highlighter';
-import { useMultiHighlighter } from '../multi-highlighter/use-multi-highlighter';
+import { ElementHighlighter, HighlightTarget, Placement, HighlightClasses } from '../element-highlighter';
+import { useChildrenHighlighter } from '../children-highlighter';
 import type { MatchRule, ComponentMatchRule } from '../rule-matcher';
 
 export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -45,7 +39,6 @@ export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElem
   bgColor?: string;
   bgColorHover?: string;
   bgColorActive?: string;
-  size?: HighlighterSize;
 }
 
 /** automatically highlight components on hover */
@@ -65,7 +58,6 @@ export function HybridHighlighter({
   bgColor,
   bgColorHover,
   bgColorActive,
-  size,
   children,
   ...rest
 }: HybridHighlighterProps) {
@@ -91,7 +83,7 @@ export function HybridHighlighter({
     }
   );
 
-  useMultiHighlighter({
+  useChildrenHighlighter({
     onChange: setTarget,
     scopeRef: ref,
     scopeClass,
@@ -132,7 +124,6 @@ export function HybridHighlighter({
           style={highlightStyle}
           placement={placement}
           watchMotion={watchMotion}
-          size={size}
         />
       ))}
     </div>

package/index.ts

@@ -1,11 +1,11 @@
-export { HybridHighlighter as ComponentHighlighter } from './hybrid-highligher';
-export type { HybridHighlighterProps as ComponentHighlightProps } from './hybrid-highligher';
+export { HybridHighlighter as ComponentHighlighter } from './hybrid-highlighter';
+export type { HybridHighlighterProps as ComponentHighlightProps } from './hybrid-highlighter';
 
 export { HoverHighlighter } from './hover-highlighter';
 export type { HoverHighlighterProps } from './hover-highlighter';
 
-export { MultiHighlighter } from './multi-highlighter';
-export type { MultiHighlighterProps } from './multi-highlighter';
+export { ChildrenHighlighter } from './children-highlighter';
+export type { ChildrenHighlighterProps } from './children-highlighter';
 
 export { ElementHighlighter } from './element-highlighter';
 export type { ElementHighlighterProps, HighlightTarget, Placement, HighlightClasses } from './element-highlighter';

package/label/component-strip.module.scss

@@ -1,31 +1,16 @@
-$borderRadius: 8px;
-$gap: 2px;
+$borderRadius: 0.5em;
+$gap: 0.125em;
 
 .componentStrip {
   display: flex;
+  width: fit-content; // for correct shadow size
 
-  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;
-  }
+  box-shadow: var(--bit-highlighter-shadow);
 
   > * {
-    padding: 4px 8px;
+    padding: 0 0.5em;
+    line-height: 1.5; //use line height to get rounder values than 0.25em padding
 
     transition: filter 300ms, background-color 300ms;
     transform: translateZ(0); //fix blurriness in Safari

package/label/component-strip.tsx

@@ -9,14 +9,11 @@ import {
 import styles from './component-strip.module.scss';
 import { calcComponentLink } from './links';
 
-export type ComponentStripSize = 's' | 'm' | 'l';
-
 interface ComponentStripProps extends React.HTMLAttributes<HTMLDivElement> {
   component: ComponentMetaHolder;
-  size?: ComponentStripSize;
 }
 export const ComponentStrip = forwardRef(function ComponentStrip(
-  { component, size = 'm', children }: ComponentStripProps,
+  { component, children }: ComponentStripProps,
   ref: ForwardedRef<HTMLDivElement>
 ) {
   const { id, homepage, exported } = component[componentMetaField];
@@ -25,7 +22,7 @@ export const ComponentStrip = forwardRef(function ComponentStrip(
   const componentLink = homepage || calcComponentLink(parsedId, exported);
 
   return (
-    <div className={styles.componentStrip} ref={ref} data-size={size}>
+    <div className={styles.componentStrip} ref={ref}>
       {!parsedId && <LabelBlock link={homepage}>{id}</LabelBlock>}
       {parsedId && <LabelBlock link={ScopeUrl.toUrl(parsedId.scope)}>{parsedId.scope}</LabelBlock>}
       {parsedId && (

package/label/index.ts

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

package/label/label.tsx

@@ -3,16 +3,14 @@ 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 { ComponentStrip } from './component-strip';
 import { OtherComponentsPopper } from './other-components';
 
-export type LabelSize = ComponentStripSize;
 export interface LabelProps extends React.HTMLAttributes<HTMLDivElement> {
   components: ComponentMetaHolder[];
-  size?: LabelSize;
 }
 
-export function Label({ components, size, ...props }: LabelProps) {
+export function Label({ components, ...props }: LabelProps) {
   const [showMore, setShowMore] = useState(false);
   const last = components.slice(-1).pop();
   if (!last) return null;
@@ -25,8 +23,8 @@ export function Label({ components, size, ...props }: LabelProps) {
   }, [components]);
 
   return (
-    <OtherComponentsPopper components={components} visible={showMore} placement="bottom-start" size={size}>
-      <ComponentStrip {...props} component={last} size={size}>
+    <OtherComponentsPopper components={components} visible={showMore} placement="bottom-start">
+      <ComponentStrip {...props} component={last}>
         {hasMore && (
           <span
             className={classNames(styles.othersTooltip, showMore && styles.active)}

package/label/other-components.tsx

@@ -2,12 +2,11 @@ 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 { ComponentStrip } from './component-strip';
 import styles from './label.module.scss';
 
 export type OtherComponentsProps = {
   components: ComponentMetaHolder[];
-  size?: ComponentStripSize;
   start?: number;
   end?: number;
 } & TippyProps;
@@ -18,7 +17,6 @@ export function OtherComponentsPopper({
   children,
   start,
   end = -1,
-  size,
   placement = 'bottom',
   interactive = true,
   ...tippyProps
@@ -29,7 +27,7 @@ export function OtherComponentsPopper({
         .slice(start, end)
         .reverse()
         .map((comp, idx) => (
-          <ComponentStrip key={idx} component={comp} size={size} />
+          <ComponentStrip key={idx} component={comp} />
         ))}
     </>
   );