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

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.js

@@ -37,7 +37,7 @@ const HighlightedElement = ({ style, targetStyle, watchMotion, className, size }
     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 }))));
 };
@@ -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,+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,UAAU,EAAE,YAAY,EAAE;QACxG,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,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.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/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/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/element-highlighter/element-highlighter.compositions.tsx

@@ -28,7 +28,7 @@ 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>
@@ -56,9 +56,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/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/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/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/react.ui.component-highlighter",
-  "version": "0.0.494",
+  "version": "0.0.495",
   "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.495"
   },
   "dependencies": {
     "get-xpath": "3.0.1",

package/tsconfig.json

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