@teambit/react.ui.component-highlighter 0.2.2 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/label/component-strip.module.scss +2 -2
- package/label/component-strip.module.scss +2 -2
- package/package.json +9 -9
- package/schema.json +5 -5
- package/static/css/teambit.react/ui/component-highlighter.91ca7826.css +1 -0
- package/teambit_react_ui_component_highlighter-component.js +5 -5
- package/teambit_react_ui_component_highlighter-preview.js +2 -2
- package/static/css/teambit.react/ui/component-highlighter.5d8cd801.css +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";(function(root,factory){typeof exports=="object"&&typeof module=="object"?module.exports=factory():typeof define=="function"&&define.amd?define([],factory):typeof exports=="object"?exports["teambit.react/ui/component-highlighter-preview"]=factory():root["teambit.react/ui/component-highlighter-preview"]=factory()})(self,()=>(self.webpackChunk=self.webpackChunk||[]).push([[215],{295:function(__unused_webpack_module,exports2,__webpack_require__){var __bit_component={id:"teambit.react/ui/component-highlighter@8ff9cdb292ef95ab5647b5b8034ea2519b829c6c",homepage:"https://bit.cloud/teambit/react/ui/component-highlighter",exported:!0},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.ChildrenHighlighterWithComponentRule=exports2.ChildrenHighlighterWithRule=exports2.ChildrenHighlighterInsideIgnore=exports2.ChildrenHighlighterWithCustomColors=exports2.ChildrenHighlighterPreview=void 0;const react_1=__importDefault(__webpack_require__(7363)),react_ui_highlighter_component_metadata_bit_component_meta_1=__webpack_require__(5011),ignore_highlighter_1=__webpack_require__(6072),children_highlighter_1=__webpack_require__(8528),mock_component_1=__webpack_require__(6526),ChildrenHighlighterPreview=()=>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,"target #1"),react_1.default.createElement("br",null),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,"target #2"));ChildrenHighlighterPreview.__bit_component=__bit_component,exports2.ChildrenHighlighterPreview=ChildrenHighlighterPreview;const ChildrenHighlighterWithCustomColors=()=>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"));ChildrenHighlighterWithCustomColors.__bit_component=__bit_component,exports2.ChildrenHighlighterWithCustomColors=ChildrenHighlighterWithCustomColors;const ChildrenHighlighterInsideIgnore=()=>react_1.default.createElement(ignore_highlighter_1.ExcludeHighlighter,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),"It should only skip exclusion zones inside of it.",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,"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")));ChildrenHighlighterInsideIgnore.__bit_component=__bit_component,exports2.ChildrenHighlighterInsideIgnore=ChildrenHighlighterInsideIgnore;const ChildrenHighlighterWithRule=()=>{const rule="#someSubTree *";return react_1.default.createElement(children_highlighter_1.ChildrenHighlighter,{rule,style:{minWidth:300,fontFamily:"sans-serif"}},react_1.default.createElement("div",null,"element filter: ",react_1.default.createElement("code",null,'"',rule,'"')),react_1.default.createElement("br",null),react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta,null,"no highlighter"),react_1.default.createElement("br",null),react_1.default.createElement("br",null),react_1.default.createElement("br",null),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")))};ChildrenHighlighterWithRule.__bit_component=__bit_component,exports2.ChildrenHighlighterWithRule=ChildrenHighlighterWithRule;const ChildrenHighlighterWithComponentRule=()=>{const filterTarget="teambit.design/ui/mock-target";return react_1.default.createElement(children_highlighter_1.ChildrenHighlighter,{componentRule:filterTarget,style:{minWidth:300,fontFamily:"sans-serif"}},react_1.default.createElement("div",null,"component filter: ",react_1.default.createElement("code",null,'"',filterTarget,'"')),react_1.default.createElement("br",null),react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta,null,"no highlighter"),react_1.default.createElement("br",null),react_1.default.createElement("br",null),react_1.default.createElement("br",null),react_1.default.createElement(mock_component_1.MockTarget,{style:{display:"inline-block",margin:"0 8px"}},"this will be highlighted"))};ChildrenHighlighterWithComponentRule.__bit_component=__bit_component,exports2.ChildrenHighlighterWithComponentRule=ChildrenHighlighterWithComponentRule},1811:function(__unused_webpack_module,exports2,__webpack_require__){var __bit_component={id:"teambit.react/ui/component-highlighter@8ff9cdb292ef95ab5647b5b8034ea2519b829c6c",homepage:"https://bit.cloud/teambit/react/ui/component-highlighter",exported:!0},__createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){k2===void 0&&(k2=k);var desc=Object.getOwnPropertyDescriptor(m,k);(!desc||("get"in desc?!m.__esModule:desc.writable||desc.configurable))&&(desc={enumerable:!0,get:function(){return m[k]}}),Object.defineProperty(o,k2,desc)}:function(o,m,k,k2){k2===void 0&&(k2=k),o[k2]=m[k]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(o,v){Object.defineProperty(o,"default",{enumerable:!0,value:v})}:function(o,v){o.default=v}),__importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(mod!=null)for(var k in mod)k!=="default"&&Object.prototype.hasOwnProperty.call(mod,k)&&__createBinding(result,mod,k);return __setModuleDefault(result,mod),result};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.OffscreenElements=exports2.FullscreenElement=exports2.MovingElement=exports2.Sizes=exports2.Customized=exports2.HighlightedElement=void 0;const react_1=__importStar(__webpack_require__(7363)),element_highlighter_1=__webpack_require__(6708),mock_component_1=__webpack_require__(6526),HighlightedElement=({style,targetStyle,watchMotion,className})=>{const targetRef=(0,react_1.createRef)();return react_1.default.createElement("div",{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"),react_1.default.createElement(element_highlighter_1.ElementHighlighter,{targetRef,components:[mock_component_1.MockTarget],style,watchMotion,placement:"bottom"}))};HighlightedElement.__bit_component=__bit_component,exports2.HighlightedElement=HighlightedElement;const Customized=()=>react_1.default.createElement(exports2.HighlightedElement,{style:{"--bit-highlighter-color":"#94deb4","--bit-highlighter-color-hover":"#d0f1de","--bit-highlighter-color-active":"#37b26c"}});Customized.__bit_component=__bit_component,exports2.Customized=Customized;const Sizes=()=>react_1.default.createElement("div",null,react_1.default.createElement(exports2.HighlightedElement,{style:{fontSize:10}}),react_1.default.createElement(exports2.HighlightedElement,{style:{fontSize:14}}),react_1.default.createElement(exports2.HighlightedElement,{style:{fontSize:18}}));Sizes.__bit_component=__bit_component,exports2.Sizes=Sizes;const frameInterval=1e3/30,MovingElement=()=>{const[margin,setMargin]=(0,react_1.useState)(0);return(0,react_1.useEffect)(()=>{const intervalId=setInterval(()=>setMargin(x=>(x+1)%100),frameInterval);return()=>clearInterval(intervalId)},[]),react_1.default.createElement(exports2.HighlightedElement,{targetStyle:{marginLeft:margin},watchMotion:!0})};MovingElement.__bit_component=__bit_component,exports2.MovingElement=MovingElement;const FullscreenElement=()=>{const targetRef=(0,react_1.createRef)();return react_1.default.createElement("div",{style:{fontFamily:"sans-serif"}},react_1.default.createElement("div",{ref:targetRef,style:{height:"100vh",width:"100%",background:"#bceed4"}},"This element will cover the entire document,",react_1.default.createElement("br",null),"pushing the highlighter to the edge of the window.",react_1.default.createElement("br",null),"The highlighter should remain inside and expand no further than the document."),react_1.default.createElement(element_highlighter_1.ElementHighlighter,{targetRef,components:[mock_component_1.MockTarget],watchMotion:!0}))};FullscreenElement.__bit_component=__bit_component,exports2.FullscreenElement=FullscreenElement;const edgeStyles={position:"absolute",background:"cyan",padding:30},centerStyles={top:{top:-30,left:"50%",transform:"translate(-50%,0)"},right:{right:-30,top:"50%",transform:"translate(0, -50%)"},bottom:{bottom:-30,left:"50%",transform:"translate(-50%,0)"},left:{left:-30,top:"50%",transform:"translate(0, -50%)"}};function OffscreenElements(){const target01=(0,react_1.createRef)(),target02=(0,react_1.createRef)(),target03=(0,react_1.createRef)(),target04=(0,react_1.createRef)();return react_1.default.createElement("div",{style:{fontFamily:"sans-serif",height:"100%"}},react_1.default.createElement("div",{style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"}},react_1.default.createElement("div",{ref:target01,style:Object.assign(Object.assign({},edgeStyles),centerStyles.top)},"top"),react_1.default.createElement("div",{ref:target02,style:Object.assign(Object.assign({},edgeStyles),centerStyles.right)},"right"),react_1.default.createElement("div",{ref:target03,style:Object.assign(Object.assign({},edgeStyles),centerStyles.bottom)},"bottom"),react_1.default.createElement("div",{ref:target04,style:Object.assign(Object.assign({},edgeStyles),centerStyles.left)},"left"),react_1.default.createElement(element_highlighter_1.ElementHighlighter,{targetRef:target01,components:[mock_component_1.MockTarget],watchMotion:!0}),react_1.default.createElement(element_highlighter_1.ElementHighlighter,{targetRef:target02,components:[mock_component_1.MockTarget],watchMotion:!0}),react_1.default.createElement(element_highlighter_1.ElementHighlighter,{targetRef:target03,components:[mock_component_1.MockTarget],watchMotion:!0}),react_1.default.createElement(element_highlighter_1.ElementHighlighter,{targetRef:target04,components:[mock_component_1.MockTarget],watchMotion:!0})))}OffscreenElements.__bit_component=__bit_component,exports2.OffscreenElements=OffscreenElements},3688:function(__unused_webpack_module,exports2,__webpack_require__){var __bit_component={id:"teambit.react/ui/component-highlighter@8ff9cdb292ef95ab5647b5b8034ea2519b829c6c",homepage:"https://bit.cloud/teambit/react/ui/component-highlighter",exported:!0},__createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){k2===void 0&&(k2=k);var desc=Object.getOwnPropertyDescriptor(m,k);(!desc||("get"in desc?!m.__esModule:desc.writable||desc.configurable))&&(desc={enumerable:!0,get:function(){return m[k]}}),Object.defineProperty(o,k2,desc)}:function(o,m,k,k2){k2===void 0&&(k2=k),o[k2]=m[k]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(o,v){Object.defineProperty(o,"default",{enumerable:!0,value:v})}:function(o,v){o.default=v}),__importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(mod!=null)for(var k in mod)k!=="default"&&Object.prototype.hasOwnProperty.call(mod,k)&&__createBinding(result,mod,k);return __setModuleDefault(result,mod),result};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.HoverExclusionZones=exports2.UnmountingElement=exports2.ShowWhenHovering=void 0;const react_1=__importStar(__webpack_require__(7363)),hover_highlighter_1=__webpack_require__(6945),mock_component_1=__webpack_require__(6526),ignore_highlighter_1=__webpack_require__(6072),ShowWhenHovering=()=>{const[disabled,setDisabled]=(0,react_1.useState)(!1);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},react_1.default.createElement("div",null,react_1.default.createElement("br",null),react_1.default.createElement("div",null,react_1.default.createElement(mock_component_1.MockButton,{onClick:()=>setDisabled(x=>!x)},"Hover here")),react_1.default.createElement("div",null,disabled?"X":"\u2713"," highlighter is ",disabled?"disabled":"enabled"))))};ShowWhenHovering.__bit_component=__bit_component,exports2.ShowWhenHovering=ShowWhenHovering;const UnmountingElement=()=>{const[shown,setShown]=(0,react_1.useState)(!0);return(0,react_1.useEffect)(()=>{const tid=setInterval(()=>setShown(x=>!x),1500);return()=>clearInterval(tid)},[]),react_1.default.createElement("div",{style:{padding:"16px 50px 32px 16px",minWidth:300,fontFamily:"sans-serif"}},react_1.default.createElement(hover_highlighter_1.HoverHighlighter,null,react_1.default.createElement("div",null,!shown&&"(hidden)"),react_1.default.createElement("div",null,shown&&react_1.default.createElement(mock_component_1.MockButton,null,"Hover here")),react_1.default.createElement("br",null),react_1.default.createElement(mock_component_1.MockTarget,null,react_1.default.createElement("div",null,shown&&react_1.default.createElement(mock_component_1.MockButton,null,"Hover here")),react_1.default.createElement("div",null,"same with a container"))))};UnmountingElement.__bit_component=__bit_component,exports2.UnmountingElement=UnmountingElement;const HoverExclusionZones=()=>react_1.default.createElement("div",{style:{padding:"16px 50px 32px 16px",minWidth:300,fontFamily:"sans-serif"}},react_1.default.createElement(hover_highlighter_1.HoverHighlighter,null,react_1.default.createElement(mock_component_1.MockTarget,null,"container (target-able)",react_1.default.createElement("div",null,react_1.default.createElement(mock_component_1.MockButton,null,"will be highlighted"))),react_1.default.createElement("br",null),react_1.default.createElement(mock_component_1.MockTarget,null,"container (target-able)",react_1.default.createElement("div",Object.assign({},ignore_highlighter_1.excludeHighlighterAtt),react_1.default.createElement(mock_component_1.MockButton,null,"will be ignored")))));HoverExclusionZones.__bit_component=__bit_component,exports2.HoverExclusionZones=HoverExclusionZones},760:function(__unused_webpack_module,exports2,__webpack_require__){var __bit_component={id:"teambit.react/ui/component-highlighter@8ff9cdb292ef95ab5647b5b8034ea2519b829c6c",homepage:"https://bit.cloud/teambit/react/ui/component-highlighter",exported:!0},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.ComponentStripPreview=void 0;const react_1=__importDefault(__webpack_require__(7363)),component_strip_1=__webpack_require__(2958),mock_component_1=__webpack_require__(6526),ComponentStripPreview=()=>react_1.default.createElement("div",{style:{fontFamily:"sans-serif",padding:8}},react_1.default.createElement(component_strip_1.ComponentStrip,{component:mock_component_1.MockSnap}),react_1.default.createElement("br",null),react_1.default.createElement(component_strip_1.ComponentStrip,{component:mock_component_1.MockButton}));ComponentStripPreview.__bit_component=__bit_component,exports2.ComponentStripPreview=ComponentStripPreview},6526:function(__unused_webpack_module,exports2,__webpack_require__){var __bit_component={id:"teambit.react/ui/component-highlighter@8ff9cdb292ef95ab5647b5b8034ea2519b829c6c",homepage:"https://bit.cloud/teambit/react/ui/component-highlighter",exported:!0},__rest=this&&this.__rest||function(s,e){var t={};for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0&&(t[p]=s[p]);if(s!=null&&typeof Object.getOwnPropertySymbols=="function")for(var i=0,p=Object.getOwnPropertySymbols(s);i<p.length;i++)e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i])&&(t[p[i]]=s[p[i]]);return t},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.MockSnap=exports2.MockButton=exports2.MockTarget=void 0;const react_1=__importDefault(__webpack_require__(7363)),react_ui_highlighter_component_metadata_bit_component_meta_1=__webpack_require__(5011);function MockTarget(_a){var{children}=_a,rest=__rest(_a,["children"]);return react_1.default.createElement("div",Object.assign({},rest),children)}MockTarget.__bit_component=__bit_component,exports2.MockTarget=MockTarget,MockTarget[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField]={id:"teambit.design/ui/mock-target@1.6.2"};function MockButton(_a){var{children}=_a,rest=__rest(_a,["children"]);return react_1.default.createElement("button",Object.assign({},rest),children)}MockButton.__bit_component=__bit_component,exports2.MockButton=MockButton,MockButton[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField]={id:"teambit.design/ui/icon-button@1.6.2"};function MockSnap(_a){var{children}=_a,rest=__rest(_a,["children"]);return react_1.default.createElement("button",Object.assign({},rest),children)}MockSnap.__bit_component=__bit_component,exports2.MockSnap=MockSnap,MockSnap[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField]={id:"teambit.design/ui/icon-button@a21594d5cc63fd24d2b4763fa7d817b131f0edbb"}},4691:(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{compositions:()=>compositions,compositions_metadata:()=>compositions_metadata,overview:()=>overview});var component_highlighter_docs_namespaceObject={};__webpack_require__.r(component_highlighter_docs_namespaceObject),__webpack_require__.d(component_highlighter_docs_namespaceObject,{default:()=>MDXContent});var children_highlighter_composition=__webpack_require__(295),element_highlighter_compositions=__webpack_require__(1811),hover_highlighter_compositions=__webpack_require__(3688),component_strip_compositions=__webpack_require__(760),external_React_=__webpack_require__(7363);const external_MdxJsReact_namespaceObject=MdxJsReact,external_TeambitMdxUiMdxScopeContext_namespaceObject=TeambitMdxUiMdxScopeContext;var _excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&(!Object.prototype.propertyIsEnumerable.call(source,key)||(target[key]=source[key]))}return target}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};for(var key in source)if(Object.prototype.hasOwnProperty.call(source,key)){if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}var layoutProps={},MDXLayout="wrapper";function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return(0,external_MdxJsReact_namespaceObject.mdx)(MDXLayout,_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,external_MdxJsReact_namespaceObject.mdx)(external_TeambitMdxUiMdxScopeContext_namespaceObject.MDXScopeProvider,{components:{HighlightedElement:element_highlighter_compositions.HighlightedElement},mdxType:"MDXScopeProvider"},(0,external_MdxJsReact_namespaceObject.mdx)("p",null,"The component highlighter allows you to visually inspect bit react components, and provides a link to its documentation page.",(0,external_MdxJsReact_namespaceObject.mdx)("br",{parentName:"p"}),`
|
|
1
|
+
"use strict";(function(root,factory){typeof exports=="object"&&typeof module=="object"?module.exports=factory():typeof define=="function"&&define.amd?define([],factory):typeof exports=="object"?exports["teambit.react/ui/component-highlighter-preview"]=factory():root["teambit.react/ui/component-highlighter-preview"]=factory()})(self,()=>(self.webpackChunk=self.webpackChunk||[]).push([[215],{5245:function(__unused_webpack_module,exports2,__webpack_require__){var __bit_component={id:"teambit.react/ui/component-highlighter@dcd2eb88a350a7c145e00700f7601cd352c13546",homepage:"https://bit.cloud/teambit/react/ui/component-highlighter",exported:!0},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.ChildrenHighlighterWithComponentRule=exports2.ChildrenHighlighterWithRule=exports2.ChildrenHighlighterInsideIgnore=exports2.ChildrenHighlighterWithCustomColors=exports2.ChildrenHighlighterPreview=void 0;const react_1=__importDefault(__webpack_require__(7363)),react_ui_highlighter_component_metadata_bit_component_meta_1=__webpack_require__(2543),ignore_highlighter_1=__webpack_require__(3798),children_highlighter_1=__webpack_require__(651),mock_component_1=__webpack_require__(8423),ChildrenHighlighterPreview=()=>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,"target #1"),react_1.default.createElement("br",null),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,"target #2"));ChildrenHighlighterPreview.__bit_component=__bit_component,exports2.ChildrenHighlighterPreview=ChildrenHighlighterPreview;const ChildrenHighlighterWithCustomColors=()=>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"));ChildrenHighlighterWithCustomColors.__bit_component=__bit_component,exports2.ChildrenHighlighterWithCustomColors=ChildrenHighlighterWithCustomColors;const ChildrenHighlighterInsideIgnore=()=>react_1.default.createElement(ignore_highlighter_1.ExcludeHighlighter,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),"It should only skip exclusion zones inside of it.",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,"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")));ChildrenHighlighterInsideIgnore.__bit_component=__bit_component,exports2.ChildrenHighlighterInsideIgnore=ChildrenHighlighterInsideIgnore;const ChildrenHighlighterWithRule=()=>{const rule="#someSubTree *";return react_1.default.createElement(children_highlighter_1.ChildrenHighlighter,{rule,style:{minWidth:300,fontFamily:"sans-serif"}},react_1.default.createElement("div",null,"element filter: ",react_1.default.createElement("code",null,'"',rule,'"')),react_1.default.createElement("br",null),react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta,null,"no highlighter"),react_1.default.createElement("br",null),react_1.default.createElement("br",null),react_1.default.createElement("br",null),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")))};ChildrenHighlighterWithRule.__bit_component=__bit_component,exports2.ChildrenHighlighterWithRule=ChildrenHighlighterWithRule;const ChildrenHighlighterWithComponentRule=()=>{const filterTarget="teambit.design/ui/mock-target";return react_1.default.createElement(children_highlighter_1.ChildrenHighlighter,{componentRule:filterTarget,style:{minWidth:300,fontFamily:"sans-serif"}},react_1.default.createElement("div",null,"component filter: ",react_1.default.createElement("code",null,'"',filterTarget,'"')),react_1.default.createElement("br",null),react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta,null,"no highlighter"),react_1.default.createElement("br",null),react_1.default.createElement("br",null),react_1.default.createElement("br",null),react_1.default.createElement(mock_component_1.MockTarget,{style:{display:"inline-block",margin:"0 8px"}},"this will be highlighted"))};ChildrenHighlighterWithComponentRule.__bit_component=__bit_component,exports2.ChildrenHighlighterWithComponentRule=ChildrenHighlighterWithComponentRule},5584:function(__unused_webpack_module,exports2,__webpack_require__){var __bit_component={id:"teambit.react/ui/component-highlighter@dcd2eb88a350a7c145e00700f7601cd352c13546",homepage:"https://bit.cloud/teambit/react/ui/component-highlighter",exported:!0},__createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){k2===void 0&&(k2=k);var desc=Object.getOwnPropertyDescriptor(m,k);(!desc||("get"in desc?!m.__esModule:desc.writable||desc.configurable))&&(desc={enumerable:!0,get:function(){return m[k]}}),Object.defineProperty(o,k2,desc)}:function(o,m,k,k2){k2===void 0&&(k2=k),o[k2]=m[k]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(o,v){Object.defineProperty(o,"default",{enumerable:!0,value:v})}:function(o,v){o.default=v}),__importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(mod!=null)for(var k in mod)k!=="default"&&Object.prototype.hasOwnProperty.call(mod,k)&&__createBinding(result,mod,k);return __setModuleDefault(result,mod),result};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.OffscreenElements=exports2.FullscreenElement=exports2.MovingElement=exports2.Sizes=exports2.Customized=exports2.HighlightedElement=void 0;const react_1=__importStar(__webpack_require__(7363)),element_highlighter_1=__webpack_require__(2654),mock_component_1=__webpack_require__(8423),HighlightedElement=({style,targetStyle,watchMotion,className})=>{const targetRef=(0,react_1.createRef)();return react_1.default.createElement("div",{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"),react_1.default.createElement(element_highlighter_1.ElementHighlighter,{targetRef,components:[mock_component_1.MockTarget],style,watchMotion,placement:"bottom"}))};HighlightedElement.__bit_component=__bit_component,exports2.HighlightedElement=HighlightedElement;const Customized=()=>react_1.default.createElement(exports2.HighlightedElement,{style:{"--bit-highlighter-color":"#94deb4","--bit-highlighter-color-hover":"#d0f1de","--bit-highlighter-color-active":"#37b26c"}});Customized.__bit_component=__bit_component,exports2.Customized=Customized;const Sizes=()=>react_1.default.createElement("div",null,react_1.default.createElement(exports2.HighlightedElement,{style:{fontSize:10}}),react_1.default.createElement(exports2.HighlightedElement,{style:{fontSize:14}}),react_1.default.createElement(exports2.HighlightedElement,{style:{fontSize:18}}));Sizes.__bit_component=__bit_component,exports2.Sizes=Sizes;const frameInterval=1e3/30,MovingElement=()=>{const[margin,setMargin]=(0,react_1.useState)(0);return(0,react_1.useEffect)(()=>{const intervalId=setInterval(()=>setMargin(x=>(x+1)%100),frameInterval);return()=>clearInterval(intervalId)},[]),react_1.default.createElement(exports2.HighlightedElement,{targetStyle:{marginLeft:margin},watchMotion:!0})};MovingElement.__bit_component=__bit_component,exports2.MovingElement=MovingElement;const FullscreenElement=()=>{const targetRef=(0,react_1.createRef)();return react_1.default.createElement("div",{style:{fontFamily:"sans-serif"}},react_1.default.createElement("div",{ref:targetRef,style:{height:"100vh",width:"100%",background:"#bceed4"}},"This element will cover the entire document,",react_1.default.createElement("br",null),"pushing the highlighter to the edge of the window.",react_1.default.createElement("br",null),"The highlighter should remain inside and expand no further than the document."),react_1.default.createElement(element_highlighter_1.ElementHighlighter,{targetRef,components:[mock_component_1.MockTarget],watchMotion:!0}))};FullscreenElement.__bit_component=__bit_component,exports2.FullscreenElement=FullscreenElement;const edgeStyles={position:"absolute",background:"cyan",padding:30},centerStyles={top:{top:-30,left:"50%",transform:"translate(-50%,0)"},right:{right:-30,top:"50%",transform:"translate(0, -50%)"},bottom:{bottom:-30,left:"50%",transform:"translate(-50%,0)"},left:{left:-30,top:"50%",transform:"translate(0, -50%)"}};function OffscreenElements(){const target01=(0,react_1.createRef)(),target02=(0,react_1.createRef)(),target03=(0,react_1.createRef)(),target04=(0,react_1.createRef)();return react_1.default.createElement("div",{style:{fontFamily:"sans-serif",height:"100%"}},react_1.default.createElement("div",{style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"}},react_1.default.createElement("div",{ref:target01,style:Object.assign(Object.assign({},edgeStyles),centerStyles.top)},"top"),react_1.default.createElement("div",{ref:target02,style:Object.assign(Object.assign({},edgeStyles),centerStyles.right)},"right"),react_1.default.createElement("div",{ref:target03,style:Object.assign(Object.assign({},edgeStyles),centerStyles.bottom)},"bottom"),react_1.default.createElement("div",{ref:target04,style:Object.assign(Object.assign({},edgeStyles),centerStyles.left)},"left"),react_1.default.createElement(element_highlighter_1.ElementHighlighter,{targetRef:target01,components:[mock_component_1.MockTarget],watchMotion:!0}),react_1.default.createElement(element_highlighter_1.ElementHighlighter,{targetRef:target02,components:[mock_component_1.MockTarget],watchMotion:!0}),react_1.default.createElement(element_highlighter_1.ElementHighlighter,{targetRef:target03,components:[mock_component_1.MockTarget],watchMotion:!0}),react_1.default.createElement(element_highlighter_1.ElementHighlighter,{targetRef:target04,components:[mock_component_1.MockTarget],watchMotion:!0})))}OffscreenElements.__bit_component=__bit_component,exports2.OffscreenElements=OffscreenElements},6549:function(__unused_webpack_module,exports2,__webpack_require__){var __bit_component={id:"teambit.react/ui/component-highlighter@dcd2eb88a350a7c145e00700f7601cd352c13546",homepage:"https://bit.cloud/teambit/react/ui/component-highlighter",exported:!0},__createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){k2===void 0&&(k2=k);var desc=Object.getOwnPropertyDescriptor(m,k);(!desc||("get"in desc?!m.__esModule:desc.writable||desc.configurable))&&(desc={enumerable:!0,get:function(){return m[k]}}),Object.defineProperty(o,k2,desc)}:function(o,m,k,k2){k2===void 0&&(k2=k),o[k2]=m[k]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(o,v){Object.defineProperty(o,"default",{enumerable:!0,value:v})}:function(o,v){o.default=v}),__importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(mod!=null)for(var k in mod)k!=="default"&&Object.prototype.hasOwnProperty.call(mod,k)&&__createBinding(result,mod,k);return __setModuleDefault(result,mod),result};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.HoverExclusionZones=exports2.UnmountingElement=exports2.ShowWhenHovering=void 0;const react_1=__importStar(__webpack_require__(7363)),hover_highlighter_1=__webpack_require__(8298),mock_component_1=__webpack_require__(8423),ignore_highlighter_1=__webpack_require__(3798),ShowWhenHovering=()=>{const[disabled,setDisabled]=(0,react_1.useState)(!1);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},react_1.default.createElement("div",null,react_1.default.createElement("br",null),react_1.default.createElement("div",null,react_1.default.createElement(mock_component_1.MockButton,{onClick:()=>setDisabled(x=>!x)},"Hover here")),react_1.default.createElement("div",null,disabled?"X":"\u2713"," highlighter is ",disabled?"disabled":"enabled"))))};ShowWhenHovering.__bit_component=__bit_component,exports2.ShowWhenHovering=ShowWhenHovering;const UnmountingElement=()=>{const[shown,setShown]=(0,react_1.useState)(!0);return(0,react_1.useEffect)(()=>{const tid=setInterval(()=>setShown(x=>!x),1500);return()=>clearInterval(tid)},[]),react_1.default.createElement("div",{style:{padding:"16px 50px 32px 16px",minWidth:300,fontFamily:"sans-serif"}},react_1.default.createElement(hover_highlighter_1.HoverHighlighter,null,react_1.default.createElement("div",null,!shown&&"(hidden)"),react_1.default.createElement("div",null,shown&&react_1.default.createElement(mock_component_1.MockButton,null,"Hover here")),react_1.default.createElement("br",null),react_1.default.createElement(mock_component_1.MockTarget,null,react_1.default.createElement("div",null,shown&&react_1.default.createElement(mock_component_1.MockButton,null,"Hover here")),react_1.default.createElement("div",null,"same with a container"))))};UnmountingElement.__bit_component=__bit_component,exports2.UnmountingElement=UnmountingElement;const HoverExclusionZones=()=>react_1.default.createElement("div",{style:{padding:"16px 50px 32px 16px",minWidth:300,fontFamily:"sans-serif"}},react_1.default.createElement(hover_highlighter_1.HoverHighlighter,null,react_1.default.createElement(mock_component_1.MockTarget,null,"container (target-able)",react_1.default.createElement("div",null,react_1.default.createElement(mock_component_1.MockButton,null,"will be highlighted"))),react_1.default.createElement("br",null),react_1.default.createElement(mock_component_1.MockTarget,null,"container (target-able)",react_1.default.createElement("div",Object.assign({},ignore_highlighter_1.excludeHighlighterAtt),react_1.default.createElement(mock_component_1.MockButton,null,"will be ignored")))));HoverExclusionZones.__bit_component=__bit_component,exports2.HoverExclusionZones=HoverExclusionZones},6651:function(__unused_webpack_module,exports2,__webpack_require__){var __bit_component={id:"teambit.react/ui/component-highlighter@dcd2eb88a350a7c145e00700f7601cd352c13546",homepage:"https://bit.cloud/teambit/react/ui/component-highlighter",exported:!0},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.ComponentStripPreview=void 0;const react_1=__importDefault(__webpack_require__(7363)),component_strip_1=__webpack_require__(7227),mock_component_1=__webpack_require__(8423),ComponentStripPreview=()=>react_1.default.createElement("div",{style:{fontFamily:"sans-serif",padding:8}},react_1.default.createElement(component_strip_1.ComponentStrip,{component:mock_component_1.MockSnap}),react_1.default.createElement("br",null),react_1.default.createElement(component_strip_1.ComponentStrip,{component:mock_component_1.MockButton}));ComponentStripPreview.__bit_component=__bit_component,exports2.ComponentStripPreview=ComponentStripPreview},8423:function(__unused_webpack_module,exports2,__webpack_require__){var __bit_component={id:"teambit.react/ui/component-highlighter@dcd2eb88a350a7c145e00700f7601cd352c13546",homepage:"https://bit.cloud/teambit/react/ui/component-highlighter",exported:!0},__rest=this&&this.__rest||function(s,e){var t={};for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0&&(t[p]=s[p]);if(s!=null&&typeof Object.getOwnPropertySymbols=="function")for(var i=0,p=Object.getOwnPropertySymbols(s);i<p.length;i++)e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i])&&(t[p[i]]=s[p[i]]);return t},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.MockSnap=exports2.MockButton=exports2.MockTarget=void 0;const react_1=__importDefault(__webpack_require__(7363)),react_ui_highlighter_component_metadata_bit_component_meta_1=__webpack_require__(2543);function MockTarget(_a){var{children}=_a,rest=__rest(_a,["children"]);return react_1.default.createElement("div",Object.assign({},rest),children)}MockTarget.__bit_component=__bit_component,exports2.MockTarget=MockTarget,MockTarget[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField]={id:"teambit.design/ui/mock-target@1.6.2"};function MockButton(_a){var{children}=_a,rest=__rest(_a,["children"]);return react_1.default.createElement("button",Object.assign({},rest),children)}MockButton.__bit_component=__bit_component,exports2.MockButton=MockButton,MockButton[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField]={id:"teambit.design/ui/icon-button@1.6.2"};function MockSnap(_a){var{children}=_a,rest=__rest(_a,["children"]);return react_1.default.createElement("button",Object.assign({},rest),children)}MockSnap.__bit_component=__bit_component,exports2.MockSnap=MockSnap,MockSnap[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField]={id:"teambit.design/ui/icon-button@a21594d5cc63fd24d2b4763fa7d817b131f0edbb"}},2076:(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{compositions:()=>compositions,compositions_metadata:()=>compositions_metadata,overview:()=>overview});var component_highlighter_docs_namespaceObject={};__webpack_require__.r(component_highlighter_docs_namespaceObject),__webpack_require__.d(component_highlighter_docs_namespaceObject,{default:()=>MDXContent});var children_highlighter_composition=__webpack_require__(5245),element_highlighter_compositions=__webpack_require__(5584),component_strip_compositions=__webpack_require__(6651),hover_highlighter_compositions=__webpack_require__(6549),external_React_=__webpack_require__(7363);const external_MdxJsReact_namespaceObject=MdxJsReact,external_TeambitMdxUiMdxScopeContext_namespaceObject=TeambitMdxUiMdxScopeContext;var _excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&(!Object.prototype.propertyIsEnumerable.call(source,key)||(target[key]=source[key]))}return target}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};for(var key in source)if(Object.prototype.hasOwnProperty.call(source,key)){if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}var layoutProps={},MDXLayout="wrapper";function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return(0,external_MdxJsReact_namespaceObject.mdx)(MDXLayout,_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,external_MdxJsReact_namespaceObject.mdx)(external_TeambitMdxUiMdxScopeContext_namespaceObject.MDXScopeProvider,{components:{HighlightedElement:element_highlighter_compositions.HighlightedElement},mdxType:"MDXScopeProvider"},(0,external_MdxJsReact_namespaceObject.mdx)("p",null,"The component highlighter allows you to visually inspect bit react components, and provides a link to its documentation page.",(0,external_MdxJsReact_namespaceObject.mdx)("br",{parentName:"p"}),`
|
|
2
2
|
`,"It is mostly used for compositions debugging."),(0,external_MdxJsReact_namespaceObject.mdx)(element_highlighter_compositions.HighlightedElement,{mdxType:"HighlightedElement"}),(0,external_MdxJsReact_namespaceObject.mdx)("h2",null,"How to use?"),(0,external_MdxJsReact_namespaceObject.mdx)("p",null,"Simplest way to use the component is by wrapping your code with ",(0,external_MdxJsReact_namespaceObject.mdx)("inlineCode",{parentName:"p"},"ComponentHighlighter"),".",(0,external_MdxJsReact_namespaceObject.mdx)("br",{parentName:"p"}),`
|
|
3
3
|
`,"It will automatically detect components from DOM elements, just by hovering on them."),(0,external_MdxJsReact_namespaceObject.mdx)("pre",null,(0,external_MdxJsReact_namespaceObject.mdx)("code",{parentName:"pre",className:"language-tsx"},`import { ComponentHighlighter } from '@teambit/react.ui.component-highlighter';
|
|
4
4
|
|
|
@@ -98,4 +98,4 @@ return (
|
|
|
98
98
|
...
|
|
99
99
|
</ComponentHighlighter>
|
|
100
100
|
`)),(0,external_MdxJsReact_namespaceObject.mdx)("p",null,"You can control the size using regular ",(0,external_MdxJsReact_namespaceObject.mdx)("inlineCode",{parentName:"p"},"font-size"),".",(0,external_MdxJsReact_namespaceObject.mdx)("br",{parentName:"p"}),`
|
|
101
|
-
`,"Keep in mind that the label can be either two elements (when using component id), and a single element (for other texts)")))}MDXContent.isMDXComponent=!0;var __bit_component={id:"teambit.react/ui/component-highlighter@
|
|
101
|
+
`,"Keep in mind that the label can be either two elements (when using component id), and a single element (for other texts)")))}MDXContent.isMDXComponent=!0;var __bit_component={id:"teambit.react/ui/component-highlighter@dcd2eb88a350a7c145e00700f7601cd352c13546",homepage:"https://bit.cloud/teambit/react/ui/component-highlighter",exported:!0};const compositions=[children_highlighter_composition,element_highlighter_compositions,component_strip_compositions,hover_highlighter_compositions],overview=[component_highlighter_docs_namespaceObject],compositions_metadata={compositions:[{displayName:"Children highlighter preview",identifier:"ChildrenHighlighterPreview"},{displayName:"Children highlighter with custom colors",identifier:"ChildrenHighlighterWithCustomColors"},{displayName:"Children highlighter inside ignore",identifier:"ChildrenHighlighterInsideIgnore"},{displayName:"Children highlighter with rule",identifier:"ChildrenHighlighterWithRule"},{displayName:"Children highlighter with component rule",identifier:"ChildrenHighlighterWithComponentRule"},{displayName:"Highlighted element",identifier:"HighlightedElement"},{displayName:"Customized",identifier:"Customized"},{displayName:"Sizes",identifier:"Sizes"},{displayName:"Moving element",identifier:"MovingElement"},{displayName:"Fullscreen element",identifier:"FullscreenElement"},{displayName:"Offscreen elements",identifier:"OffscreenElements"},{displayName:"Component strip preview",identifier:"ComponentStripPreview"},{displayName:"Show when hovering",identifier:"ShowWhenHovering"},{displayName:"Unmounting element",identifier:"UnmountingElement"},{displayName:"Hover exclusion zones",identifier:"HoverExclusionZones"}]}}},__webpack_require__=>{var __webpack_exec__=moduleId=>__webpack_require__(__webpack_require__.s=moduleId),__webpack_exports__=__webpack_exec__(2076);return __webpack_exports__}]));
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.frame_overlayBorder__1N2G-{border:2px solid #eebcc9;border:2px solid var(--bit-highlighter-color,#eebcc9);border-radius:11px;box-sizing:border-box;padding:4px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.frame_hidden__eqMFY{display:none}.label_othersContainer__2XFhb>*{margin-bottom:8px}.label_othersContainer__2XFhb>:last-child{margin-bottom:0}.label_othersTooltip__3EmUs{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.label_othersTooltip__3EmUs:before{content:"▾";display:inline-block;transition:transform .3s}.label_othersTooltip__3EmUs.label_active__13BoC:before{transform:rotate(-180deg)}.label_hidden__3icql{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;visibility:hidden}.component-strip_componentStrip__20ITG{border-radius:.5em;box-shadow:var(--bit-highlighter-shadow);display:flex;white-space:nowrap;width:-moz-fit-content;width:fit-content}.component-strip_componentStrip__20ITG>*{background:#eebcc9;background:var(--bit-highlighter-color,#eebcc9);line-height:1.5;margin-right:.125em;padding:0 .5em;transform:translateZ(0);transition:filter .3s,background-color .3s}.component-strip_componentStrip__20ITG>:link,.component-strip_componentStrip__20ITG>:visited{color:inherit;text-decoration:inherit}.component-strip_componentStrip__20ITG>:link:hover,.component-strip_componentStrip__20ITG>:visited:hover{background:#f6dae2;background:var(--bit-highlighter-color-hover,#f6dae2)}.component-strip_componentStrip__20ITG>:link:active,.component-strip_componentStrip__20ITG>:visited:active{background:#e79db1;background:var(--bit-highlighter-color-active,#e79db1);color:inherit}.component-strip_componentStrip__20ITG>:first-child{border-bottom-left-radius:.5em;border-top-left-radius:.5em}.component-strip_componentStrip__20ITG>:last-child{border-bottom-right-radius:.5em;border-top-right-radius:.5em;margin-right:0}.component-strip_nameBlock__t3CSn{display:flex}.component-strip_nameBlock__t3CSn .component-strip_version__3TTs4{max-width:13ch;overflow:hidden;text-overflow:ellipsis;transition:max-width .48s;white-space:nowrap}.component-strip_nameBlock__t3CSn .component-strip_version__3TTs4:hover{max-width:61ch}.element-highlighter_label__KIGNl{padding:8px}.element-highlighter_frame__2V6bK,.element-highlighter_label__KIGNl{z-index:15500}
|