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

package/children-highlighter/children-highlighter.composition.tsx

@@ -7,7 +7,8 @@ import { ChildrenHighlighter } from './children-highlighter';
 
 export const ChildrenHighlighterPreview = () => {
   return (
-    <ChildrenHighlighter style={{ padding: 40, minWidth: 200 }}>
+    // highlighter runs in compositions, therefor should not have our font
+    <ChildrenHighlighter style={{ padding: 40, minWidth: 200, fontFamily: 'sans-serif' }}>
       <MockedComponentWithMeta>hover here</MockedComponentWithMeta>
       <br />
       <br />
@@ -20,7 +21,7 @@ export const ChildrenHighlighterPreview = () => {
 export const ChildrenHighlighterWithCustomColors = () => {
   return (
     <ChildrenHighlighter
-      style={{ padding: 40, minWidth: 200, color: 'yellow' }}
+      style={{ padding: 40, minWidth: 200, color: 'yellow', fontFamily: 'sans-serif' }}
       bgColor="cornflowerblue"
       bgColorHover="blue"
       bgColorActive="DarkSlateBlue"
@@ -37,7 +38,7 @@ export const ChildrenHighlighterWithCustomColors = () => {
 export const ChildrenHighlighterInsideIgnore = () => {
   return (
     <ExcludeHighlighter>
-      <ChildrenHighlighter>
+      <ChildrenHighlighter style={{ fontFamily: 'sans-serif' }}>
         Multi Highlighter should still work when inside <code>{'<ExcludeHighlighter>'}</code>
         <br />
         It should only skip exclusion zones inside of it.
@@ -56,7 +57,7 @@ export const ChildrenHighlighterInsideIgnore = () => {
 
 export const ChildrenHighlighterWithRule = () => {
   return (
-    <ChildrenHighlighter rule="#someSubTree *" style={{ minWidth: 300 }}>
+    <ChildrenHighlighter rule="#someSubTree *" style={{ minWidth: 300, fontFamily: 'sans-serif' }}>
       <div>
         element filter: <code>"#someSubTree *"</code>
       </div>
@@ -74,7 +75,10 @@ export const ChildrenHighlighterWithRule = () => {
 
 export const ChildrenHighlighterWithComponentRule = () => {
   return (
-    <ChildrenHighlighter componentRule="teambit.design/ui/icon-button" style={{ minWidth: 300 }}>
+    <ChildrenHighlighter
+      componentRule="teambit.design/ui/icon-button"
+      style={{ minWidth: 300, fontFamily: 'sans-serif' }}
+    >
       <div>
         component filter: <code>"teambit.design/ui/icon-button"</code>
       </div>

package/component-highlighter.docs.md

@@ -170,6 +170,7 @@ Use these CSS variables to edit the highlighter color
 --bit-highlighter-color: #eebcc9;
 --bit-highlighter-color-hover: #f6dae2;
 --bit-highlighter-color-active: #e79db1;
+--bit-highlighter-shadow: 0px 11px 29px 0px rgba(0, 0, 0, 0.23));
 ```
 
 While it is preferred to use the css variables, you can also set them using react props:

package/dist/children-highlighter/children-highlighter.composition.js

@@ -11,7 +11,9 @@ const design_ui_icon_button_1 = require("@teambit/design.ui.icon-button");
 const ignore_highlighter_1 = require("../ignore-highlighter");
 const children_highlighter_1 = require("./children-highlighter");
 const ChildrenHighlighterPreview = () => {
-    return (react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { style: { padding: 40, minWidth: 200 } },
+    return (
+    // highlighter runs in compositions, therefor should not have our font
+    react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { style: { padding: 40, minWidth: 200, fontFamily: 'sans-serif' } },
         react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "hover here"),
         react_1.default.createElement("br", null),
         react_1.default.createElement("br", null),
@@ -20,7 +22,7 @@ const ChildrenHighlighterPreview = () => {
 };
 exports.ChildrenHighlighterPreview = ChildrenHighlighterPreview;
 const ChildrenHighlighterWithCustomColors = () => {
-    return (react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { style: { padding: 40, minWidth: 200, color: 'yellow' }, bgColor: "cornflowerblue", bgColorHover: "blue", bgColorActive: "DarkSlateBlue" },
+    return (react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { style: { padding: 40, minWidth: 200, color: 'yellow', fontFamily: 'sans-serif' }, bgColor: "cornflowerblue", bgColorHover: "blue", bgColorActive: "DarkSlateBlue" },
         react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "hover here"),
         react_1.default.createElement("br", null),
         react_1.default.createElement("br", null),
@@ -30,7 +32,7 @@ const ChildrenHighlighterWithCustomColors = () => {
 exports.ChildrenHighlighterWithCustomColors = ChildrenHighlighterWithCustomColors;
 const ChildrenHighlighterInsideIgnore = () => {
     return (react_1.default.createElement(ignore_highlighter_1.ExcludeHighlighter, null,
-        react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, null,
+        react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { style: { fontFamily: 'sans-serif' } },
             "Multi Highlighter should still work when inside ",
             react_1.default.createElement("code", null, '<ExcludeHighlighter>'),
             react_1.default.createElement("br", null),
@@ -46,7 +48,7 @@ const ChildrenHighlighterInsideIgnore = () => {
 };
 exports.ChildrenHighlighterInsideIgnore = ChildrenHighlighterInsideIgnore;
 const ChildrenHighlighterWithRule = () => {
-    return (react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { rule: "#someSubTree *", style: { minWidth: 300 } },
+    return (react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { rule: "#someSubTree *", style: { minWidth: 300, fontFamily: 'sans-serif' } },
         react_1.default.createElement("div", null,
             "element filter: ",
             react_1.default.createElement("code", null, "\"#someSubTree *\"")),
@@ -60,7 +62,7 @@ const ChildrenHighlighterWithRule = () => {
 };
 exports.ChildrenHighlighterWithRule = ChildrenHighlighterWithRule;
 const ChildrenHighlighterWithComponentRule = () => {
-    return (react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { componentRule: "teambit.design/ui/icon-button", style: { minWidth: 300 } },
+    return (react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { componentRule: "teambit.design/ui/icon-button", style: { minWidth: 300, fontFamily: 'sans-serif' } },
         react_1.default.createElement("div", null,
             "component filter: ",
             react_1.default.createElement("code", null, "\"teambit.design/ui/icon-button\"")),

package/dist/children-highlighter/children-highlighter.composition.js.map

@@ -1 +1 @@
-{"version":3,"file":"children-highlighter.composition.js","sourceRoot":"","sources":["../../children-highlighter/children-highlighter.composition.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,sFAAsF;AACtF,oJAA8G;AAC9G,0EAA4D;AAC5D,8DAA2D;AAC3D,iEAA6D;AAEtD,MAAM,0BAA0B,GAAG,GAAG,EAAE;IAC7C,OAAO,CACL,8BAAC,0CAAmB,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;QACxD,8BAAC,oFAAuB,qBAAqC;QAC7D,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,kCAAU,iDAAoD,CAC3C,CACvB,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,0BAA0B,8BAUrC;AAEK,MAAM,mCAAmC,GAAG,GAAG,EAAE;IACtD,OAAO,CACL,8BAAC,0CAAmB,IAClB,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,EACtD,OAAO,EAAC,gBAAgB,EACxB,YAAY,EAAC,MAAM,EACnB,aAAa,EAAC,eAAe;QAE7B,8BAAC,oFAAuB,qBAAqC;QAC7D,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,oFAAuB,oBAAoC,CACxC,CACvB,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,mCAAmC,uCAe9C;AAEK,MAAM,+BAA+B,GAAG,GAAG,EAAE;IAClD,OAAO,CACL,8BAAC,uCAAkB;QACjB,8BAAC,0CAAmB;;YAC8B,4CAAO,sBAAsB,CAAQ;YACrF,yCAAM;;YAEN,yCAAM;YACN,yCAAM;YACN,yCAAM;YACN,8BAAC,oFAAuB,qBAAqC;YAC7D,yCAAM;YACN,yCAAM;YACN,yCAAM;YACN,8BAAC,oFAAuB,oBAAoC,CACxC,CACH,CACtB,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,+BAA+B,mCAkB1C;AAEK,MAAM,2BAA2B,GAAG,GAAG,EAAE;IAC9C,OAAO,CACL,8BAAC,0CAAmB,IAAC,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;QACjE;;YACkB,iEAA6B,CACzC;QACN,yCAAM;QACN,8BAAC,oFAAuB,yBAAyC;QACjE,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,uCAAK,EAAE,EAAC,aAAa;YACnB,8BAAC,oFAAuB,mCAAmD,CACvE,CACc,CACvB,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,2BAA2B,+BAgBtC;AAEK,MAAM,oCAAoC,GAAG,GAAG,EAAE;IACvD,OAAO,CACL,8BAAC,0CAAmB,IAAC,aAAa,EAAC,+BAA+B,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;QACzF;;YACoB,gFAA4C,CAC1D;QACN,yCAAM;QACN,8BAAC,oFAAuB,yBAAyC;QACjE,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,kCAAU,mCAAsC,CAC7B,CACvB,CAAC;AACJ,CAAC,CAAC;AAdW,QAAA,oCAAoC,wCAc/C;AAEF,oEAAoE;AACpE,aAAa;AACb,4BAA4B;AAC5B,uDAAuD;AACvD,6BAA6B;AAC7B,OAAO;AACP,KAAK"}
+{"version":3,"file":"children-highlighter.composition.js","sourceRoot":"","sources":["../../children-highlighter/children-highlighter.composition.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,sFAAsF;AACtF,oJAA8G;AAC9G,0EAA4D;AAC5D,8DAA2D;AAC3D,iEAA6D;AAEtD,MAAM,0BAA0B,GAAG,GAAG,EAAE;IAC7C,OAAO;IACL,sEAAsE;IACtE,8BAAC,0CAAmB,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QAClF,8BAAC,oFAAuB,qBAAqC;QAC7D,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,kCAAU,iDAAoD,CAC3C,CACvB,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,0BAA0B,8BAWrC;AAEK,MAAM,mCAAmC,GAAG,GAAG,EAAE;IACtD,OAAO,CACL,8BAAC,0CAAmB,IAClB,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,EAChF,OAAO,EAAC,gBAAgB,EACxB,YAAY,EAAC,MAAM,EACnB,aAAa,EAAC,eAAe;QAE7B,8BAAC,oFAAuB,qBAAqC;QAC7D,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,oFAAuB,oBAAoC,CACxC,CACvB,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,mCAAmC,uCAe9C;AAEK,MAAM,+BAA+B,GAAG,GAAG,EAAE;IAClD,OAAO,CACL,8BAAC,uCAAkB;QACjB,8BAAC,0CAAmB,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE;;YACN,4CAAO,sBAAsB,CAAQ;YACrF,yCAAM;;YAEN,yCAAM;YACN,yCAAM;YACN,yCAAM;YACN,8BAAC,oFAAuB,qBAAqC;YAC7D,yCAAM;YACN,yCAAM;YACN,yCAAM;YACN,8BAAC,oFAAuB,oBAAoC,CACxC,CACH,CACtB,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,+BAA+B,mCAkB1C;AAEK,MAAM,2BAA2B,GAAG,GAAG,EAAE;IAC9C,OAAO,CACL,8BAAC,0CAAmB,IAAC,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QAC3F;;YACkB,iEAA6B,CACzC;QACN,yCAAM;QACN,8BAAC,oFAAuB,yBAAyC;QACjE,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,uCAAK,EAAE,EAAC,aAAa;YACnB,8BAAC,oFAAuB,mCAAmD,CACvE,CACc,CACvB,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,2BAA2B,+BAgBtC;AAEK,MAAM,oCAAoC,GAAG,GAAG,EAAE;IACvD,OAAO,CACL,8BAAC,0CAAmB,IAClB,aAAa,EAAC,+BAA+B,EAC7C,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QAElD;;YACoB,gFAA4C,CAC1D;QACN,yCAAM;QACN,8BAAC,oFAAuB,yBAAyC;QACjE,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,kCAAU,mCAAsC,CAC7B,CACvB,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,oCAAoC,wCAiB/C;AAEF,oEAAoE;AACpE,aAAa;AACb,4BAA4B;AAC5B,uDAAuD;AACvD,6BAA6B;AAC7B,OAAO;AACP,KAAK"}

package/dist/component-highlighter.docs.md

@@ -170,6 +170,7 @@ Use these CSS variables to edit the highlighter color
 --bit-highlighter-color: #eebcc9;
 --bit-highlighter-color-hover: #f6dae2;
 --bit-highlighter-color-active: #e79db1;
+--bit-highlighter-shadow: 0px 11px 29px 0px rgba(0, 0, 0, 0.23));
 ```
 
 While it is preferred to use the css variables, you can also set them using react props:

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

@@ -1,13 +1,11 @@
 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, size }: HighlightedElementProps) => JSX.Element;
+export declare const HighlightedElement: ({ style, targetStyle, watchMotion, className }: 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

@@ -32,14 +32,14 @@ const mockTarget = {
         },
     ],
 };
-const HighlightedElement = ({ style, targetStyle, watchMotion, className, size }) => {
+const HighlightedElement = ({ style, targetStyle, watchMotion, className }) => {
     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 40px 16px', width: 300 } },
+    return (react_1.default.createElement("div", { className: className, style: { padding: '16px 16px 40px 16px', width: 300, fontFamily: 'sans-serif' } },
         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", size: size }))));
+        target && react_1.default.createElement(element_highlighter_1.ElementHighlighter, { target: target, style: style, watchMotion: watchMotion, placement: "bottom" })));
 };
 exports.HighlightedElement = HighlightedElement;
 const Customized = () => {
@@ -52,9 +52,9 @@ const Customized = () => {
 exports.Customized = Customized;
 const Sizes = () => {
     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" })));
+        react_1.default.createElement(exports.HighlightedElement, { style: { fontSize: 10 } }),
+        react_1.default.createElement(exports.HighlightedElement, { style: { fontSize: 14 } }),
+        react_1.default.createElement(exports.HighlightedElement, { style: { fontSize: 18 } })));
 };
 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,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"}
+{"version":3,"file":"element-highlighter.compositions.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.compositions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,oJAAyG;AACzG,+CAA6E;AAC7E,+DAA4E;AAE5E,MAAM,UAAU,GAA6B;IAC3C,UAAU,EAAE;QACV;YACE,CAAC,+EAAkB,CAAC,EAAE;gBACpB,EAAE,EAAE,qCAAqC;aAC1C;SACF;KACF;CACF,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,UAAU,EAAE,YAAY,EAAE;QACxG,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,CACL;QACE,8BAAC,0BAAkB,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAI;QAC/C,8BAAC,0BAAkB,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAI;QAC/C,8BAAC,0BAAkB,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAI,CAC3C,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,7 +1,6 @@
 import React from 'react';
 import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
-import { Placement, LabelSize } from '../label';
-export declare type HighlighterSize = LabelSize;
+import { Placement } from '../label';
 export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
     /** target element to highlight */
     target: HighlightTarget;
@@ -11,7 +10,6 @@ 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 = {
@@ -25,4 +23,4 @@ export declare type HighlightClasses = {
     frame?: string;
     label?: string;
 };
-export declare function ElementHighlighter({ target, placement, watchMotion, className, classes, size, ...props }: ElementHighlighterProps): JSX.Element;
+export declare function ElementHighlighter({ target, placement, watchMotion, className, classes, ...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, size } = _a, props = __rest(_a, ["target", "placement", "watchMotion", "className", "classes", "size"]);
+    var { target, placement = 'top', watchMotion = true, className, classes } = _a, props = __rest(_a, ["target", "placement", "watchMotion", "className", "classes"]);
     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.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 })))));
+            react_1.default.createElement(label_1.Label, { components: target.components, className: classes === null || classes === void 0 ? void 0 : classes.label })))));
 }
 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;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"}
+{"version":3,"file":"element-highlighter.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,oCAAiC;AACjC,oCAA4D;AAC5D,8DAA8D;AAC9D,wGAAuD;AA4BvD,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,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,GAAI,CACpD,CAClB,CACG,CACP,CAAC;AACJ,CAAC;AA5BD,gDA4BC"}

package/dist/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/dist/element-highlighter/index.d.ts

@@ -1,2 +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/dist/hover-highlighter/hover-highlighter.compositions.js

@@ -25,7 +25,7 @@ const design_ui_icon_button_1 = require("@teambit/design.ui.icon-button");
 const hover_highlighter_1 = require("./hover-highlighter");
 const ShowWhenHovering = () => {
     const [disabled, setDisabled] = (0, react_1.useState)(false);
-    return (react_1.default.createElement("div", { style: { padding: '16px 50px 32px 16px', minWidth: 300 } },
+    return (react_1.default.createElement("div", { style: { padding: '16px 50px 32px 16px', minWidth: 300, fontFamily: 'sans-serif' } },
         react_1.default.createElement(hover_highlighter_1.HoverHighlighter, { style: { padding: 16 }, disabled: disabled },
             react_1.default.createElement("div", null,
                 react_1.default.createElement("br", null),

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

@@ -1 +1 @@
-{"version":3,"file":"hover-highlighter.compositions.js","sourceRoot":"","sources":["../../hover-highlighter/hover-highlighter.compositions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AACxC,0EAA4D;AAC5D,2DAAuD;AAEhD,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEzD,OAAO,CACL,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,GAAG,EAAE;QAC3D,8BAAC,oCAAgB,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ;YAC1D;gBACE,yCAAM;gBACN;oBACE,8BAAC,kCAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,iBAAyB,CACtE;gBACN;oBACG,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;;oBAAkB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CACpE,CACF,CACW,CACf,CACP,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,gBAAgB,oBAkB3B"}
+{"version":3,"file":"hover-highlighter.compositions.js","sourceRoot":"","sources":["../../hover-highlighter/hover-highlighter.compositions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AACxC,0EAA4D;AAC5D,2DAAuD;AAEhD,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEzD,OAAO,CACL,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QACrF,8BAAC,oCAAgB,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ;YAC1D;gBACE,yCAAM;gBACN;oBACE,8BAAC,kCAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,iBAAyB,CACtE;gBACN;oBACG,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;;oBAAkB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CACpE,CACF,CACW,CACf,CACP,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,gBAAgB,oBAkB3B"}

package/dist/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-highlighter/hybrid-highlighter.js

@@ -42,7 +42,7 @@ const element_highlighter_1 = require("../element-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;
@@ -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

@@ -1 +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,gEAMgC;AAChC,kEAAiE;AAsCjE,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,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,EACxB,IAAI,EAAE,IAAI,GACV,CACH,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AAxFD,8CAwFC"}
+{"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/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/hybrid-highlighter/hybrid-highlighter.tsx

@@ -3,13 +3,7 @@ import classnames from 'classnames';
 import { v4 } from 'uuid';
 
 import { useHoverHighlighter } from '../hover-highlighter';
-import {
-  ElementHighlighter,
-  HighlightTarget,
-  Placement,
-  HighlightClasses,
-  HighlighterSize,
-} from '../element-highlighter';
+import { ElementHighlighter, HighlightTarget, Placement, HighlightClasses } from '../element-highlighter';
 import { useChildrenHighlighter } from '../children-highlighter';
 import type { MatchRule, ComponentMatchRule } from '../rule-matcher';
 
@@ -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) {
@@ -132,7 +124,6 @@ export function HybridHighlighter({
           style={highlightStyle}
           placement={placement}
           watchMotion={watchMotion}
-          size={size}
         />
       ))}
     </div>

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} />
         ))}
     </>
   );

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/react.ui.component-highlighter",
-  "version": "0.0.494",
+  "version": "0.0.498",
   "homepage": "https://bit.dev/teambit/react/ui/component-highlighter",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "ui/component-highlighter",
-    "version": "0.0.494"
+    "version": "0.0.498"
   },
   "dependencies": {
     "get-xpath": "3.0.1",
@@ -21,12 +21,12 @@
     "@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/base-ui.routing.native-link": "1.0.0",
-    "@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"
+    "@teambit/component-id": "0.0.392",
+    "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.14",
+    "@teambit/react.modules.dom-to-react": "0.0.480",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.480",
+    "@teambit/react.ui.hover-selector": "0.0.158",
+    "@teambit/component.modules.component-url": "0.0.113"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -43,7 +43,7 @@
     "@teambit/design.ui.icon-button": "1.0.10"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.186",
+    "@teambit/legacy": "1.0.188",
     "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.186",
+        "@teambit/legacy": "1.0.188",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/tsconfig.json

@@ -17,7 +17,8 @@
     "outDir": "dist",
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "rootDir": "."
+    "rootDir": ".",
+    "resolveJsonModule": true
   },
   "exclude": [
     "dist"