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

package/{multi-highlighter/multi-highlighter.composition.tsx → children-highlighter/children-highlighter.composition.tsx}

@@ -3,24 +3,25 @@ import React from 'react';
 import { MockedComponentWithMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 import { IconButton } from '@teambit/design.ui.icon-button';
 import { ExcludeHighlighter } from '../ignore-highlighter';
-import { MultiHighlighter } from './multi-highlighter';
+import { ChildrenHighlighter } from './children-highlighter';
 
-export const MultiHighlighterPreview = () => {
+export const ChildrenHighlighterPreview = () => {
   return (
-    <MultiHighlighter 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 />
       <br />
       <IconButton>this will be highlighted with dropdown</IconButton>
-    </MultiHighlighter>
+    </ChildrenHighlighter>
   );
 };
 
-export const MultiHighlighterWithCustomColors = () => {
+export const ChildrenHighlighterWithCustomColors = () => {
   return (
-    <MultiHighlighter
-      style={{ padding: 40, minWidth: 200, color: 'yellow' }}
+    <ChildrenHighlighter
+      style={{ padding: 40, minWidth: 200, color: 'yellow', fontFamily: 'sans-serif' }}
       bgColor="cornflowerblue"
       bgColorHover="blue"
       bgColorActive="DarkSlateBlue"
@@ -30,14 +31,14 @@ export const MultiHighlighterWithCustomColors = () => {
       <br />
       <br />
       <MockedComponentWithMeta>also here</MockedComponentWithMeta>
-    </MultiHighlighter>
+    </ChildrenHighlighter>
   );
 };
 
-export const MultiHighlighterInsideIgnore = () => {
+export const ChildrenHighlighterInsideIgnore = () => {
   return (
     <ExcludeHighlighter>
-      <MultiHighlighter>
+      <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.
@@ -49,14 +50,14 @@ export const MultiHighlighterInsideIgnore = () => {
         <br />
         <br />
         <MockedComponentWithMeta>also here</MockedComponentWithMeta>
-      </MultiHighlighter>
+      </ChildrenHighlighter>
     </ExcludeHighlighter>
   );
 };
 
-export const MultiHighlighterWithRule = () => {
+export const ChildrenHighlighterWithRule = () => {
   return (
-    <MultiHighlighter rule="#someSubTree *" style={{ minWidth: 300 }}>
+    <ChildrenHighlighter rule="#someSubTree *" style={{ minWidth: 300, fontFamily: 'sans-serif' }}>
       <div>
         element filter: <code>"#someSubTree *"</code>
       </div>
@@ -68,13 +69,16 @@ export const MultiHighlighterWithRule = () => {
       <div id="someSubTree">
         <MockedComponentWithMeta>this will be highlighted</MockedComponentWithMeta>
       </div>
-    </MultiHighlighter>
+    </ChildrenHighlighter>
   );
 };
 
-export const MultiHighlighterWithComponentRule = () => {
+export const ChildrenHighlighterWithComponentRule = () => {
   return (
-    <MultiHighlighter 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>
@@ -84,14 +88,14 @@ export const MultiHighlighterWithComponentRule = () => {
       <br />
       <br />
       <IconButton>this will be highlighted</IconButton>
-    </MultiHighlighter>
+    </ChildrenHighlighter>
   );
 };
 
 // export const HighlightingAllElementsInTheEnterprisePage = () => {
 //   return (
-//     <MultiHighlighter>
+//     <ChildrenHighlighter>
 //       <EnterpriseOffering style={{ height: 300 }} />
-//     </MultiHighlighter>
+//     </ChildrenHighlighter>
 //   );
 // };

package/{multi-highlighter/multi-highlighter.spec.tsx → children-highlighter/children-highlighter.spec.tsx}

@@ -1,9 +1,9 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { MultiHighlighterPreview } from './multi-highlighter.composition';
+import { ChildrenHighlighterPreview } from './children-highlighter.composition';
 
-it('should not throw when rendering the multi-highlighter', () => {
-  const { getByText } = render(<MultiHighlighterPreview />);
+it('should not throw when rendering the children-highlighter', () => {
+  const { getByText } = render(<ChildrenHighlighterPreview />);
 
   const rendered = getByText('hover here');
 

package/children-highlighter/children-highlighter.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { HybridHighlighter, HybridHighlighterProps } from '../hybrid-highlighter';
+
+export type ChildrenHighlighterProps = Omit<HybridHighlighterProps, 'mode'>;
+
+export function ChildrenHighlighter({ watchMotion = false, ...props }: ChildrenHighlighterProps) {
+  return <HybridHighlighter {...props} mode={'allChildren'} watchMotion={watchMotion} />;
+}

package/children-highlighter/index.ts

@@ -0,0 +1,5 @@
+export { useChildrenHighlighter } from './use-children-highlighter';
+export type { ChildrenHighlighterOptions } from './use-children-highlighter';
+
+export { ChildrenHighlighter } from './children-highlighter';
+export type { ChildrenHighlighterProps } from './children-highlighter';

package/{multi-highlighter/use-multi-highlighter.tsx → children-highlighter/use-children-highlighter.tsx}

@@ -10,7 +10,7 @@ import { HighlightTarget } from '../element-highlighter';
 import { excludeHighlighterSelector } from '../ignore-highlighter';
 import { ruleMatcher, MatchRule, ComponentMatchRule, componentRuleMatcher } from '../rule-matcher';
 
-type useMultiHighlighterProps = {
+export type ChildrenHighlighterOptions = {
   onChange: (highlighterTargets: Record<string, HighlightTarget>) => void;
   disabled?: boolean;
   scopeRef: RefObject<HTMLElement>;
@@ -23,14 +23,14 @@ type useMultiHighlighterProps = {
   // watchDom?: boolean;
 };
 
-export function useMultiHighlighter({
+export function useChildrenHighlighter({
   onChange,
   disabled,
   scopeRef,
   scopeClass: scopeSelector = '',
   rule,
   componentRule,
-}: useMultiHighlighterProps) {
+}: ChildrenHighlighterOptions) {
   useEffect(() => {
     const nextTargets: Record<string, HighlightTarget> = {};
     const scopeElement = scopeRef.current;

package/component-highlighter.docs.md

@@ -94,7 +94,7 @@ The Component Highlighter comes in a few different modes:
 In addition to changing the `mode` prop, you can also use convenience exports from the same package:
 
 ```tsx
-import { MultiHighlighter, HoverHighlighter } from '@teambit/react.ui.component-highlighter';
+import { ChildrenHighlighter, HoverHighlighter } from '@teambit/react.ui.component-highlighter';
 
 function example() {
   return (
@@ -103,9 +103,9 @@ function example() {
         <App />
       </HoverHighlighter>
 
-      <MultiHighlighter>
+      <ChildrenHighlighter>
         <App />
-      </MultiHighlighter>
+      </ChildrenHighlighter>
     </div>
   );
 }
@@ -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.d.ts

@@ -0,0 +1,5 @@
+export declare const ChildrenHighlighterPreview: () => JSX.Element;
+export declare const ChildrenHighlighterWithCustomColors: () => JSX.Element;
+export declare const ChildrenHighlighterInsideIgnore: () => JSX.Element;
+export declare const ChildrenHighlighterWithRule: () => JSX.Element;
+export declare const ChildrenHighlighterWithComponentRule: () => JSX.Element;

package/dist/{multi-highlighter/multi-highlighter.composition.js → children-highlighter/children-highlighter.composition.js}

@@ -3,34 +3,36 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultiHighlighterWithComponentRule = exports.MultiHighlighterWithRule = exports.MultiHighlighterInsideIgnore = exports.MultiHighlighterWithCustomColors = exports.MultiHighlighterPreview = void 0;
+exports.ChildrenHighlighterWithComponentRule = exports.ChildrenHighlighterWithRule = exports.ChildrenHighlighterInsideIgnore = exports.ChildrenHighlighterWithCustomColors = exports.ChildrenHighlighterPreview = void 0;
 const react_1 = __importDefault(require("react"));
 // import { EnterpriseOffering } from '@teambit/evangelist.pages.enterprise-offering';
 const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@teambit/react.ui.highlighter.component-metadata.bit-component-meta");
 const design_ui_icon_button_1 = require("@teambit/design.ui.icon-button");
 const ignore_highlighter_1 = require("../ignore-highlighter");
-const multi_highlighter_1 = require("./multi-highlighter");
-const MultiHighlighterPreview = () => {
-    return (react_1.default.createElement(multi_highlighter_1.MultiHighlighter, { style: { padding: 40, minWidth: 200 } },
+const children_highlighter_1 = require("./children-highlighter");
+const ChildrenHighlighterPreview = () => {
+    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),
         react_1.default.createElement("br", null),
         react_1.default.createElement(design_ui_icon_button_1.IconButton, null, "this will be highlighted with dropdown")));
 };
-exports.MultiHighlighterPreview = MultiHighlighterPreview;
-const MultiHighlighterWithCustomColors = () => {
-    return (react_1.default.createElement(multi_highlighter_1.MultiHighlighter, { style: { padding: 40, minWidth: 200, color: 'yellow' }, bgColor: "cornflowerblue", bgColorHover: "blue", bgColorActive: "DarkSlateBlue" },
+exports.ChildrenHighlighterPreview = ChildrenHighlighterPreview;
+const ChildrenHighlighterWithCustomColors = () => {
+    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),
         react_1.default.createElement("br", null),
         react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "also here")));
 };
-exports.MultiHighlighterWithCustomColors = MultiHighlighterWithCustomColors;
-const MultiHighlighterInsideIgnore = () => {
+exports.ChildrenHighlighterWithCustomColors = ChildrenHighlighterWithCustomColors;
+const ChildrenHighlighterInsideIgnore = () => {
     return (react_1.default.createElement(ignore_highlighter_1.ExcludeHighlighter, null,
-        react_1.default.createElement(multi_highlighter_1.MultiHighlighter, 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),
@@ -44,9 +46,9 @@ const MultiHighlighterInsideIgnore = () => {
             react_1.default.createElement("br", null),
             react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "also here"))));
 };
-exports.MultiHighlighterInsideIgnore = MultiHighlighterInsideIgnore;
-const MultiHighlighterWithRule = () => {
-    return (react_1.default.createElement(multi_highlighter_1.MultiHighlighter, { rule: "#someSubTree *", style: { minWidth: 300 } },
+exports.ChildrenHighlighterInsideIgnore = ChildrenHighlighterInsideIgnore;
+const ChildrenHighlighterWithRule = () => {
+    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 *\"")),
@@ -58,9 +60,9 @@ const MultiHighlighterWithRule = () => {
         react_1.default.createElement("div", { id: "someSubTree" },
             react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "this will be highlighted"))));
 };
-exports.MultiHighlighterWithRule = MultiHighlighterWithRule;
-const MultiHighlighterWithComponentRule = () => {
-    return (react_1.default.createElement(multi_highlighter_1.MultiHighlighter, { componentRule: "teambit.design/ui/icon-button", style: { minWidth: 300 } },
+exports.ChildrenHighlighterWithRule = ChildrenHighlighterWithRule;
+const ChildrenHighlighterWithComponentRule = () => {
+    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\"")),
@@ -71,12 +73,12 @@ const MultiHighlighterWithComponentRule = () => {
         react_1.default.createElement("br", null),
         react_1.default.createElement(design_ui_icon_button_1.IconButton, null, "this will be highlighted")));
 };
-exports.MultiHighlighterWithComponentRule = MultiHighlighterWithComponentRule;
+exports.ChildrenHighlighterWithComponentRule = ChildrenHighlighterWithComponentRule;
 // export const HighlightingAllElementsInTheEnterprisePage = () => {
 //   return (
-//     <MultiHighlighter>
+//     <ChildrenHighlighter>
 //       <EnterpriseOffering style={{ height: 300 }} />
-//     </MultiHighlighter>
+//     </ChildrenHighlighter>
 //   );
 // };
-//# sourceMappingURL=multi-highlighter.composition.js.map
+//# sourceMappingURL=children-highlighter.composition.js.map

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

@@ -0,0 +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;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/children-highlighter/children-highlighter.d.ts

@@ -0,0 +1,3 @@
+import { HybridHighlighterProps } from '../hybrid-highlighter';
+export declare type ChildrenHighlighterProps = Omit<HybridHighlighterProps, 'mode'>;
+export declare function ChildrenHighlighter({ watchMotion, ...props }: ChildrenHighlighterProps): JSX.Element;

package/dist/{multi-highlighter/multi-highlighter.js → children-highlighter/children-highlighter.js}

@@ -14,12 +14,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultiHighlighter = void 0;
+exports.ChildrenHighlighter = void 0;
 const react_1 = __importDefault(require("react"));
-const hybrid_highligher_1 = require("../hybrid-highligher");
-function MultiHighlighter(_a) {
+const hybrid_highlighter_1 = require("../hybrid-highlighter");
+function ChildrenHighlighter(_a) {
     var { watchMotion = false } = _a, props = __rest(_a, ["watchMotion"]);
-    return react_1.default.createElement(hybrid_highligher_1.HybridHighlighter, Object.assign({}, props, { mode: 'allChildren', watchMotion: watchMotion }));
+    return react_1.default.createElement(hybrid_highlighter_1.HybridHighlighter, Object.assign({}, props, { mode: 'allChildren', watchMotion: watchMotion }));
 }
-exports.MultiHighlighter = MultiHighlighter;
-//# sourceMappingURL=multi-highlighter.js.map
+exports.ChildrenHighlighter = ChildrenHighlighter;
+//# sourceMappingURL=children-highlighter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"children-highlighter.js","sourceRoot":"","sources":["../../children-highlighter/children-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAE1B,8DAAkF;AAIlF,SAAgB,mBAAmB,CAAC,EAA2D;QAA3D,EAAE,WAAW,GAAG,KAAK,OAAsC,EAAjC,KAAK,cAA/B,eAAiC,CAAF;IACjE,OAAO,8BAAC,sCAAiB,oBAAK,KAAK,IAAE,IAAI,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,IAAI,CAAC;AACzF,CAAC;AAFD,kDAEC"}

package/dist/{multi-highlighter/multi-highlighter.spec.js → children-highlighter/children-highlighter.spec.js}

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@testing-library/react");
-const multi_highlighter_composition_1 = require("./multi-highlighter.composition");
-it('should not throw when rendering the multi-highlighter', () => {
-    const { getByText } = (0, react_2.render)(react_1.default.createElement(multi_highlighter_composition_1.MultiHighlighterPreview, null));
+const children_highlighter_composition_1 = require("./children-highlighter.composition");
+it('should not throw when rendering the children-highlighter', () => {
+    const { getByText } = (0, react_2.render)(react_1.default.createElement(children_highlighter_composition_1.ChildrenHighlighterPreview, null));
     const rendered = getByText('hover here');
     expect(rendered).toBeInstanceOf(HTMLElement);
 });
@@ -19,4 +19,4 @@ it('should not throw when rendering the multi-highlighter', () => {
 //   const rendered = queryAllByText('input/button');
 //   expect(rendered).toHaveLength(2);
 // });
-//# sourceMappingURL=multi-highlighter.spec.js.map
+//# sourceMappingURL=children-highlighter.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"children-highlighter.spec.js","sourceRoot":"","sources":["../../children-highlighter/children-highlighter.spec.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kDAAgD;AAChD,yFAAgF;AAEhF,EAAE,CAAC,0DAA0D,EAAE,GAAG,EAAE;IAClE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,8BAAC,6DAA0B,OAAG,CAAC,CAAC;IAE7D,MAAM,QAAQ,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;IAEzC,MAAM,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;AAC/C,CAAC,CAAC,CAAC;AAEH,sFAAsF;AACtF,4EAA4E;AAC5E,oDAAoD;AAEpD,8BAA8B;AAC9B,sDAAsD;AAEtD,qDAAqD;AACrD,sCAAsC;AACtC,MAAM"}

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

@@ -0,0 +1,4 @@
+export { useChildrenHighlighter } from './use-children-highlighter';
+export type { ChildrenHighlighterOptions } from './use-children-highlighter';
+export { ChildrenHighlighter } from './children-highlighter';
+export type { ChildrenHighlighterProps } from './children-highlighter';

package/dist/children-highlighter/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChildrenHighlighter = exports.useChildrenHighlighter = void 0;
+var use_children_highlighter_1 = require("./use-children-highlighter");
+Object.defineProperty(exports, "useChildrenHighlighter", { enumerable: true, get: function () { return use_children_highlighter_1.useChildrenHighlighter; } });
+var children_highlighter_1 = require("./children-highlighter");
+Object.defineProperty(exports, "ChildrenHighlighter", { enumerable: true, get: function () { return children_highlighter_1.ChildrenHighlighter; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../children-highlighter/index.ts"],"names":[],"mappings":";;;AAAA,uEAAoE;AAA3D,kIAAA,sBAAsB,OAAA;AAG/B,+DAA6D;AAApD,2HAAA,mBAAmB,OAAA"}

package/dist/{multi-highlighter/use-multi-highlighter.d.ts → children-highlighter/use-children-highlighter.d.ts}

@@ -1,7 +1,7 @@
 import { RefObject } from 'react';
 import { HighlightTarget } from '../element-highlighter';
 import { MatchRule, ComponentMatchRule } from '../rule-matcher';
-declare type useMultiHighlighterProps = {
+export declare type ChildrenHighlighterOptions = {
     onChange: (highlighterTargets: Record<string, HighlightTarget>) => void;
     disabled?: boolean;
     scopeRef: RefObject<HTMLElement>;
@@ -10,5 +10,4 @@ declare type useMultiHighlighterProps = {
     rule?: MatchRule;
     componentRule?: ComponentMatchRule;
 };
-export declare function useMultiHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSelector, rule, componentRule, }: useMultiHighlighterProps): void;
-export {};
+export declare function useChildrenHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSelector, rule, componentRule, }: ChildrenHighlighterOptions): void;

package/dist/{multi-highlighter/use-multi-highlighter.js → children-highlighter/use-children-highlighter.js}

@@ -3,14 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMultiHighlighter = void 0;
+exports.useChildrenHighlighter = void 0;
 const react_1 = require("react");
 const get_xpath_1 = __importDefault(require("get-xpath"));
 const react_modules_dom_to_react_1 = require("@teambit/react.modules.dom-to-react");
 const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@teambit/react.ui.highlighter.component-metadata.bit-component-meta");
 const ignore_highlighter_1 = require("../ignore-highlighter");
 const rule_matcher_1 = require("../rule-matcher");
-function useMultiHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSelector = '', rule, componentRule, }) {
+function useChildrenHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSelector = '', rule, componentRule, }) {
     (0, react_1.useEffect)(() => {
         const nextTargets = {};
         const scopeElement = scopeRef.current;
@@ -38,7 +38,7 @@ function useMultiHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSe
         onChange(nextTargets);
     }, [disabled, scopeSelector]);
 }
-exports.useMultiHighlighter = useMultiHighlighter;
+exports.useChildrenHighlighter = useChildrenHighlighter;
 function targetsSelector(
 /**
  * the scope in which to consider the exclude selector.
@@ -47,4 +47,4 @@ function targetsSelector(
 scopeSelector = ':scope') {
     return `:not(${scopeSelector} ${ignore_highlighter_1.excludeHighlighterSelector}, ${scopeSelector} ${ignore_highlighter_1.excludeHighlighterSelector} *)`;
 }
-//# sourceMappingURL=use-multi-highlighter.js.map
+//# sourceMappingURL=use-children-highlighter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-children-highlighter.js","sourceRoot":"","sources":["../../children-highlighter/use-children-highlighter.tsx"],"names":[],"mappings":";;;;;;AAAA,iCAA6C;AAC7C,0DAAiC;AACjC,oFAAiF;AACjF,oJAI6E;AAE7E,8DAAmE;AACnE,kDAAmG;AAenG,SAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,UAAU,EAAE,aAAa,GAAG,EAAE,EAC9B,IAAI,EACJ,aAAa,GACc;IAC3B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAoC,EAAE,CAAC;QACxD,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,YAAY,IAAI,QAAQ;YAAE,OAAO;QAEtC,wCAAwC;QACxC,IAAI,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAc,eAAe,CAAC,IAAI,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC;QAC/G,uBAAuB;QACvB,IAAI,IAAI;YAAE,WAAW,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAA,0BAAW,EAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;QAC9E,yBAAyB;QACzB,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,CAAC,0CAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACvE,cAAc;QACd,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC,CAAC;QAE1C,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC9B,IAAI,CAAC,OAAO;gBAAE,OAAO;YACrB,MAAM,KAAK,GAAG,IAAA,wCAAW,EAAC,OAAO,CAAC,CAAC;YACnC,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,CACrC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAA,6EAAgB,EAAC,CAAC,CAAC,IAAI,IAAA,mCAAoB,EAAC,EAAE,IAAI,EAAE,CAAC,CAAC,+EAAkB,CAAC,EAAE,EAAE,aAAa,CAAC,CACrE,CAAC;YAEhC,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC;gBAAE,OAAO;YAE1C,MAAM,GAAG,GAAG,IAAA,mBAAQ,EAAC,OAAO,CAAC,CAAC;YAE9B,WAAW,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAC;QACjE,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,WAAW,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;AAChC,CAAC;AAtCD,wDAsCC;AAED,SAAS,eAAe;AACtB;;;GAGG;AACH,aAAa,GAAG,QAAQ;IAExB,OAAO,QAAQ,aAAa,IAAI,+CAA0B,KAAK,aAAa,IAAI,+CAA0B,KAAK,CAAC;AAClH,CAAC"}

package/dist/component-highlighter.docs.md

@@ -94,7 +94,7 @@ The Component Highlighter comes in a few different modes:
 In addition to changing the `mode` prop, you can also use convenience exports from the same package:
 
 ```tsx
-import { MultiHighlighter, HoverHighlighter } from '@teambit/react.ui.component-highlighter';
+import { ChildrenHighlighter, HoverHighlighter } from '@teambit/react.ui.component-highlighter';
 
 function example() {
   return (
@@ -103,9 +103,9 @@ function example() {
         <App />
       </HoverHighlighter>
 
-      <MultiHighlighter>
+      <ChildrenHighlighter>
         <App />
-      </MultiHighlighter>
+      </ChildrenHighlighter>
     </div>
   );
 }
@@ -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/hover-highlighter/hover-highlighter.d.ts

@@ -1,3 +1,3 @@
-import { HybridHighlighterProps } from '../hybrid-highligher';
+import { HybridHighlighterProps } from '../hybrid-highlighter';
 export declare type HoverHighlighterProps = Omit<HybridHighlighterProps, 'mode'>;
 export declare function HoverHighlighter({ ...props }: HoverHighlighterProps): JSX.Element;