@stianlarsen/react-code-preview/dist/index.esm.js

A React component that provides tabbed navigation for viewing a live component preview and its source code separately.

import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import{useState as r,useEffect as n,useRef as i,useLayoutEffect as c,Suspense as a,isValidElement as d}from"react";import{createHighlighter as l}from"shiki";function s(e,o){void 0===o&&(o={});var t=o.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}function f(e,o,t,r){return new(t||(t=Promise))((function(n,i){function c(e){try{d(r.next(e))}catch(e){i(e)}}function a(e){try{d(r.throw(e))}catch(e){i(e)}}function d(e){var o;e.done?n(e.value):(o=e.value,o instanceof t?o:new t((function(e){e(o)}))).then(c,a)}d((r=r.apply(e,o||[])).next())}))}s(".code-preview{--cp-radius:0.5rem;--cp-background:#fff;--cp-background-editor:#18181b;--cp-foreground:#09090b;--cp-muted-foreground:#71717a;--cp-border:#e4e4e7;--cp-black:hsl(0 0 0%);align-items:flex-start;display:flex;flex-direction:column;gap:1.25rem;height:100%;justify-content:flex-start;max-width:700px;padding:1rem}.code-preview__tabs{box-shadow:inset 0 -1px var(--cp-border);flex-wrap:nowrap;justify-content:flex-start;min-width:100%}.code-preview__tabs,.code-preview__tabs__trigger{align-items:center;display:flex;position:relative}.code-preview__tabs__trigger{background-color:transparent;border-color:transparent;color:var(--cp-muted-foreground);cursor:pointer;font-size:.875rem;font-weight:500;justify-content:center;line-height:1.25rem;padding:.5rem 1rem .75rem;text-rendering:optimizeLegibility;transition:color .15s ease}.code-preview__tabs__trigger-active,.code-preview__tabs__trigger:hover{color:var(--cp-foreground)}.code-preview__tabs__underline{background-color:var(--cp-foreground);border-radius:.7px;bottom:0;height:2px;position:absolute;transition:left .25s ease,width .25s ease}.code-preview__content{overflow:hidden;overflow-y:scroll;position:relative;scroll-behavior:smooth;width:100%}.code-preview__content__component-wrapper{align-items:center;border:1px solid var(--cp-border);border-radius:var(--cp-radius);display:flex;flex-direction:column;gap:1rem;justify-content:center;min-height:250px;padding:1rem;width:100%}.code-preview__content__code-wrapper{border:1px solid var(--cp-border);border-radius:var(--cp-radius);height:100%;overflow:auto}.code-preview__content__code-wrapper pre{background-color:var(--cp-background-editor);height:100%;max-height:350px;overflow:auto;padding:1rem 0}.code-preview__content__code-wrapper pre code{background-color:transparent;border-radius:0;border-width:0;-webkit-box-decoration-break:clone;counter-reset:line;display:grid;font-size:.875rem;line-height:1.25rem;min-width:100%;overflow-wrap:break-word;overflow-x:scroll;padding:0}.code-preview__content__code-wrapper pre code .line{display:inline-block;min-height:1rem;padding:.125rem 1rem;width:100%}@media (prefers-color-scheme:dark){.code-preview{--cp-background:#09090b;--cp-foreground:#fafafa;--cp-border:#27272a}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvZGVQcmV2aWV3LmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUNFLGtCQUFtQixDQUNuQixvQkFBK0IsQ0FDL0IsOEJBQXVDLENBQ3ZDLHVCQUFrQyxDQUNsQyw2QkFBMEMsQ0FDMUMsbUJBQThCLENBQzlCLHNCQUF1QixDQUl2QixzQkFBdUIsQ0FGdkIsWUFBYSxDQUNiLHFCQUFzQixDQU10QixXQUFZLENBSFosV0FBWSxDQURaLDBCQUEyQixDQUUzQixlQUFnQixDQUNoQixZQUVGLENBQ0Esb0JBT0Usd0NBQXlDLENBTHpDLGdCQUFpQixDQUVqQiwwQkFBMkIsQ0FFM0IsY0FFRixDQUNBLGlEQU5FLGtCQUFtQixDQUZuQixZQUFhLENBSWIsaUJBcUJGLENBakJBLDZCQVdFLDRCQUE2QixDQUM3Qix3QkFBeUIsQ0FFekIsZ0NBQWlDLENBRGpDLGNBQWUsQ0FMZixpQkFBbUIsQ0FDbkIsZUFBZ0IsQ0FOaEIsc0JBQXVCLENBSXZCLG1CQUFvQixDQURwQix5QkFBNEIsQ0FTNUIsaUNBQWtDLENBQ2xDLDBCQUNGLENBSUEsdUVBQ0UsMEJBQ0YsQ0FDQSwrQkFJRSxxQ0FBc0MsQ0FFdEMsa0JBQW9CLENBSnBCLFFBQVMsQ0FDVCxVQUFXLENBRlgsaUJBQWtCLENBSWxCLHlDQUVGLENBQ0EsdUJBRUUsZUFBZ0IsQ0FFaEIsaUJBQWtCLENBRGxCLGlCQUFrQixDQUVsQixzQkFBdUIsQ0FKdkIsVUFLRixDQUNBLDBDQUtFLGtCQUFtQixDQUluQixpQ0FBa0MsQ0FDbEMsOEJBQStCLENBVC9CLFlBQWEsQ0FDYixxQkFBc0IsQ0FDdEIsUUFBUyxDQUNULHNCQUF1QixDQUd2QixnQkFBaUIsQ0FDakIsWUFBYSxDQUZiLFVBS0YsQ0FFQSxxQ0FFRSxpQ0FBa0MsQ0FDbEMsOEJBQStCLENBRi9CLFdBQVksQ0FHWixhQUNGLENBQ0EseUNBRUUsNENBQTZDLENBQzdDLFdBQVksQ0FDWixnQkFBaUIsQ0FDakIsYUFBYyxDQUpkLGNBS0YsQ0FDQSw4Q0FRRSw0QkFBNkIsQ0FGN0IsZUFBZ0IsQ0FDaEIsY0FBZSxDQUlmLGtDQUFtQyxDQURuQyxrQkFBbUIsQ0FQbkIsWUFBYSxDQUZiLGlCQUFtQixDQUNuQixtQkFBb0IsQ0FFcEIsY0FBZSxDQUNmLHdCQUF5QixDQU96QixpQkFBa0IsQ0FIbEIsU0FJRixDQUNBLG9EQUNFLG9CQUFxQixDQUNyQixlQUFnQixDQUVoQixvQkFBc0IsQ0FEdEIsVUFFRixDQUVBLG1DQUNFLGNBQ0UsdUJBQWtDLENBQ2xDLHVCQUE4QixDQUM5QixtQkFDRixDQUNGIiwiZmlsZSI6ImNvZGVQcmV2aWV3LmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5jb2RlLXByZXZpZXcge1xuICAtLWNwLXJhZGl1czogMC41cmVtO1xuICAtLWNwLWJhY2tncm91bmQ6IGhzbCgwIDAlIDEwMCUpO1xuICAtLWNwLWJhY2tncm91bmQtZWRpdG9yOiBoc2woMjQwIDYlIDEwJSk7XG4gIC0tY3AtZm9yZWdyb3VuZDogaHNsKDI0MCAxMCUgMy45JSk7XG4gIC0tY3AtbXV0ZWQtZm9yZWdyb3VuZDogaHNsKDI0MCAzLjglIDQ2LjElKTtcbiAgLS1jcC1ib3JkZXI6IGhzbCgyNDAgNS45JSA5MCUpO1xuICAtLWNwLWJsYWNrOiBoc2woMCAwIDAlKTtcblxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBhbGlnbi1pdGVtczogZmxleC1zdGFydDtcbiAganVzdGlmeS1jb250ZW50OiBmbGV4LXN0YXJ0O1xuICBoZWlnaHQ6IDEwMCU7XG4gIG1heC13aWR0aDogNzAwcHg7XG4gIHBhZGRpbmc6IDFyZW07XG4gIGdhcDogMS4yNXJlbTtcbn1cbi5jb2RlLXByZXZpZXdfX3RhYnMge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LXdyYXA6IG5vd3JhcDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBmbGV4LXN0YXJ0O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIG1pbi13aWR0aDogMTAwJTtcbiAgYm94LXNoYWRvdzogaW5zZXQgMCAtMXB4IHZhcigtLWNwLWJvcmRlcik7XG59XG4uY29kZS1wcmV2aWV3X190YWJzX190cmlnZ2VyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIHBhZGRpbmc6IDAuNXJlbSAxcmVtIDAuNzVyZW07XG4gIGxpbmUtaGVpZ2h0OiAxLjI1cmVtO1xuICBmb250LXNpemU6IDAuODc1cmVtO1xuICBmb250LXdlaWdodDogNTAwO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50O1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIGNvbG9yOiB2YXIoLS1jcC1tdXRlZC1mb3JlZ3JvdW5kKTtcbiAgdGV4dC1yZW5kZXJpbmc6IG9wdGltaXplTGVnaWJpbGl0eTtcbiAgdHJhbnNpdGlvbjogY29sb3IgMC4xNXMgZWFzZTtcbn1cbi5jb2RlLXByZXZpZXdfX3RhYnNfX3RyaWdnZXI6aG92ZXIge1xuICBjb2xvcjogdmFyKC0tY3AtZm9yZWdyb3VuZCk7XG59XG4uY29kZS1wcmV2aWV3X190YWJzX190cmlnZ2VyLWFjdGl2ZSB7XG4gIGNvbG9yOiB2YXIoLS1jcC1mb3JlZ3JvdW5kKTtcbn1cbi5jb2RlLXByZXZpZXdfX3RhYnNfX3VuZGVybGluZSB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgYm90dG9tOiAwO1xuICBoZWlnaHQ6IDJweDtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY3AtZm9yZWdyb3VuZCk7XG4gIHRyYW5zaXRpb246IGxlZnQgMC4yNXMgZWFzZSwgd2lkdGggMC4yNXMgZWFzZTtcbiAgYm9yZGVyLXJhZGl1czogMC43cHg7XG59XG4uY29kZS1wcmV2aWV3X19jb250ZW50IHtcbiAgd2lkdGg6IDEwMCU7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgb3ZlcmZsb3cteTogc2Nyb2xsO1xuICBzY3JvbGwtYmVoYXZpb3I6IHNtb290aDtcbn1cbi5jb2RlLXByZXZpZXdfX2NvbnRlbnRfX2NvbXBvbmVudC13cmFwcGVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgZ2FwOiAxcmVtO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgd2lkdGg6IDEwMCU7XG4gIG1pbi1oZWlnaHQ6IDI1MHB4O1xuICBwYWRkaW5nOiAxcmVtO1xuICBib3JkZXI6IDFweCBzb2xpZCB2YXIoLS1jcC1ib3JkZXIpO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1jcC1yYWRpdXMpO1xufVxuXG4uY29kZS1wcmV2aWV3X19jb250ZW50X19jb2RlLXdyYXBwZXIge1xuICBoZWlnaHQ6IDEwMCU7XG4gIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLWNwLWJvcmRlcik7XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLWNwLXJhZGl1cyk7XG4gIG92ZXJmbG93OiBhdXRvO1xufVxuLmNvZGUtcHJldmlld19fY29udGVudF9fY29kZS13cmFwcGVyIHByZSB7XG4gIHBhZGRpbmc6IDFyZW0gMDtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY3AtYmFja2dyb3VuZC1lZGl0b3IpO1xuICBoZWlnaHQ6IDEwMCU7XG4gIG1heC1oZWlnaHQ6IDM1MHB4O1xuICBvdmVyZmxvdzogYXV0bztcbn1cbi5jb2RlLXByZXZpZXdfX2NvbnRlbnRfX2NvZGUtd3JhcHBlciBwcmUgY29kZSB7XG4gIGZvbnQtc2l6ZTogMC44NzVyZW07XG4gIGxpbmUtaGVpZ2h0OiAxLjI1cmVtO1xuICBkaXNwbGF5OiBncmlkO1xuICBtaW4td2lkdGg6IDEwMCU7XG4gIG92ZXJmbG93LXdyYXA6IGJyZWFrLXdvcmQ7XG4gIGJvcmRlci1yYWRpdXM6IDA7XG4gIGJvcmRlci13aWR0aDogMDtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIHBhZGRpbmc6IDA7XG4gIGNvdW50ZXItcmVzZXQ6IGxpbmU7XG4gIC13ZWJraXQtYm94LWRlY29yYXRpb24tYnJlYWs6IGNsb25lO1xuICBvdmVyZmxvdy14OiBzY3JvbGw7XG59XG4uY29kZS1wcmV2aWV3X19jb250ZW50X19jb2RlLXdyYXBwZXIgcHJlIGNvZGUgLmxpbmUge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIG1pbi1oZWlnaHQ6IDFyZW07XG4gIHdpZHRoOiAxMDAlO1xuICBwYWRkaW5nOiAwLjEyNXJlbSAxcmVtO1xufVxuXG5AbWVkaWEgKHByZWZlcnMtY29sb3Itc2NoZW1lOiBkYXJrKSB7XG4gIC5jb2RlLXByZXZpZXcge1xuICAgIC0tY3AtYmFja2dyb3VuZDogaHNsKDI0MCAxMCUgMy45JSk7XG4gICAgLS1jcC1mb3JlZ3JvdW5kOiBoc2woMCAwJSA5OCUpO1xuICAgIC0tY3AtYm9yZGVyOiBoc2woMjQwIDMuNyUgMTUuOSUpO1xuICB9XG59LyojIHNvdXJjZU1hcHBpbmdVUkw9Y29kZVByZXZpZXcuY3NzLm1hcCAqLyJdfQ== */"),"function"==typeof SuppressedError&&SuppressedError;let u=null;const g=(e,o,t)=>{const[i,c]=r(""),[a]=r((e=>e.replace(/^```[\w\s]*[\r\n]+/gm,"").replace(/[\r\n]+\s*```$/gm,"").trim())(e)),[d,s]=r(!0),{theme:g}=(()=>{const[e,o]=r(!1);return n((()=>{if("undefined"!=typeof window){const e=window.matchMedia("(prefers-color-scheme: dark)");return e.matches&&o(!0),e.addEventListener("change",(e=>o(e.matches))),()=>{e.removeEventListener("change",(e=>o(e.matches)))}}}),[]),{theme:e?"dark":"light"}})();return n((()=>{let e=!0;return f(void 0,void 0,void 0,(function*(){try{const r=yield f(void 0,void 0,void 0,(function*(){return u||(u=yield l({langs:["typescript"],themes:[]})),u}));if(!e)return;let n="dark"===g?null!=t?t:"blackout":null!=o?o:"blackout";"blackout"===n?yield r.loadTheme(b):yield r.loadTheme(n);const i=r.codeToHtml(a,{lang:"typescript",theme:"blackout"===n?"lambda-studio-blackout":n});e&&(c(i),s(!1))}catch(o){console.error("Error while highlighting code:",o),e&&s(!1)}})),()=>{e=!1}}),[t,o,g,a]),{highlightedCode:i,codeString:a,loadingCode:d}},b={name:"lambda-studio-blackout",type:"dark",displayName:"Lambda Studio - Blackout",semanticHighlighting:!0,colors:{"editorLink.activeForeground":"#ca8a0488",foreground:"#fff8","button.background":"#fff","button.foreground":"#000","button.hoverBackground":"#fffb","list.highlightForeground":"#fff","textLink.foreground":"#fff","scrollbar.shadow":"#000","textLink.activeForeground":"#fff8","editor.lineHighlightBackground":"#8881","editor.lineHighlightBorder":"#8882","editorCursor.foreground":"#fff","editor.findMatchBackground":"#fff8","editor.findMatchHighlightBackground":"#fff2","list.activeSelectionForeground":"#fff","list.focusForeground":"#fff","list.hoverForeground":"#fff","list.inactiveSelectionForeground":"#fff","list.inactiveSelectionBackground":"#000","list.focusBackground":"#000","list.focusAndSelectionOutline":"#000","list.focusHighlightForeground":"#fff","list.hoverBackground":"#000","list.focusOutline":"#000","list.activeSelectionBackground":"#000","editorIndentGuide.background":"#fff2","editor.background":"#18181b","editor.foreground":"#fff","editor.foldBackground":"#000","editor.hoverHighlightBackground":"#000","editor.selectionBackground":"#8888","editor.inactiveSelectionBackground":"#8882","gitDecoration.modifiedResourceForeground":"#fff","gitDecoration.untrackedResourceForeground":"#a7cb7b","gitDecoration.conflictingResourceForeground":"#ca8a04","gitDecoration.deletedResourceForeground":"#c97b89","listFilterWidget.background":"#000","input.background":"#fff1","titleBar.activeForeground":"#fff","editorWidget.background":"#000","editorGutter.background":"#000","debugToolBar.background":"#000","commandCenter.background":"#000","sideBarSectionHeader.background":"#000",focusBorder:"#fff8","titleBar.activeBackground":"#000","titleBar.inactiveBackground":"#000","breadcrumb.background":"#000","activityBar.background":"#000","activityBar.foreground":"#fff8","panel.background":"#000","sideBar.background":"#000","sideBarTitle.foreground":"#fff8","tab.hoverBackground":"#000","terminal.background":"#000","statusBar.background":"#000","statusBar.foreground":"#fff8","selection.background":"#fff2","editorPane.background":"#000","badge.background":"#000","banner.background":"#000","menu.background":"#000","activityBarBadge.background":"#000","activityBarBadge.foreground":"#fff8","editorLineNumber.foreground":"#fff2","editorLineNumber.activeForeground":"#fff8","statusBarItem.errorBackground":"#f43f5e"},semanticTokenColors:{comment:{foreground:"#fff4"},keyword:{foreground:"#fff8"},string:{foreground:"#fff8"},selfKeyword:{foreground:"#fff",bold:!0},"method.declaration":{foreground:"#fff",bold:!0},"method.definition":{foreground:"#fff",bold:!0},method:{foreground:"#fff",bold:!1},"function.declaration":{foreground:"#fff",bold:!0},"function.definition":{foreground:"#fff",bold:!0},function:{foreground:"#fff",bold:!1},property:{foreground:"#fff"},enumMember:{foreground:"#fff8",bold:!1},enum:{foreground:"#fff",bold:!0},boolean:{foreground:"#fff8"},number:{foreground:"#fff8"},type:{foreground:"#fff",bold:!0},typeAlias:{foreground:"#fff",bold:!0},class:{foreground:"#fff",bold:!0},selfTypeKeyword:{foreground:"#fff",bold:!0},builtinType:{foreground:"#fff",bold:!0},interface:{foreground:"#fff8",bold:!1},typeParameter:{foreground:"#fff",bold:!0},lifetime:{foreground:"#fff8",italic:!1,bold:!1},namespace:{foreground:"#fff"},macro:{foreground:"#fff",bold:!1},decorator:{foreground:"#fff",bold:!1},builtinAttribute:{foreground:"#fff",bold:!1},"generic.attribute":{foreground:"#fff"},derive:{foreground:"#fff"},operator:{foreground:"#fff8"},variable:{foreground:"#fff"},"variable.readonly":{foreground:"#fff8"},parameter:{foreground:"#fff"},"variable.mutable":{underline:!0},"parameter.mutable":{underline:!0},"selfKeyword.mutable":{underline:!0},"variable.constant":{foreground:"#fff8"},struct:{foreground:"#fff",bold:!0}},tokenColors:[{name:"Fallback Operator",scope:["keyword.operator"],settings:{foreground:"#fff8"}},{name:"Fallback keywords",scope:["storage.type.ts","keyword","keyword.other","keyword.control","storage.type","storage.modifier"],settings:{foreground:"#fff8"}},{name:"Fallback strings",scope:["string"],settings:{foreground:"#fff8"}},{name:"Fallback JSON Properties",scope:["support.type.property-name.json"],settings:{foreground:"#fff"}},{name:"Fallback string variables",scope:["string variable","string meta.interpolation"],settings:{foreground:"#fff"}},{name:"Fallback comments",scope:["comment"],settings:{foreground:"#fff4"}},{name:"Fallback constants",scope:["constant"],settings:{foreground:"#fff8"}},{name:"Fallback self/this",scope:["variable.language.this"],settings:{foreground:"#fff"}},{name:"Fallback types",scope:["entity.other.alias","source.php support.class","entity.name.type","meta.function-call support.class","keyword.other.type","entity.other.inherited-class"],settings:{foreground:"#fff",fontStyle:"bold"}},{name:"Fallback method calls",scope:["meta.method-call entity.name.function"],settings:{foreground:"#fff",fontStyle:""}},{name:"Fallback function calls",scope:["meta.function-call entity.name.function","meta.function-call support.function","meta.function.call entity.name.function"],settings:{foreground:"#fff",fontStyle:""}},{name:"Fallback enums & constants",scope:["constant.enum","constant.other"],settings:{foreground:"#fff8"}},{name:"Fallback Properties & func arguments",scope:["variable.other.property","entity.name.goto-label","entity.name.variable.parameter"],settings:{foreground:"#fff"}},{name:"Fallback functions & methods declarations",scope:["entity.name.function","support.function","support.function.constructor","entity.name.function meta.function-call meta.method-call"],settings:{foreground:"#fff",fontStyle:"bold"}},{name:"HTML Tags",scope:["meta.tag entity.name.tag.html","entity.name.tag.template.html"],settings:{foreground:"#fff"}},{name:"HTML Attributes",scope:["entity.other.attribute-name.html"],settings:{foreground:"#fff8"}},{name:"HTML Custom Tag",scope:["meta.tag.other.unrecognized.html entity.name.tag.html"],settings:{foreground:"#fff"}},{name:"HTML Keywords",scope:["text.html keyword"],settings:{foreground:"#fff"}},{name:"Punctuations",scope:["punctuation","meta.brace"],settings:{foreground:"#fff8"}}]},p="blackout",m=(...e)=>e.filter(Boolean).join(" ");var Q="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},B={},h=Q&&Q.__awaiter||function(e,o,t,r){return new(t||(t=Promise))((function(n,i){function c(e){try{d(r.next(e))}catch(e){i(e)}}function a(e){try{d(r.throw(e))}catch(e){i(e)}}function d(e){var o;e.done?n(e.value):(o=e.value,o instanceof t?o:new t((function(e){e(o)}))).then(c,a)}d((r=r.apply(e,o||[])).next())}))};Object.defineProperty(B,"__esModule",{value:!0});var y=B.copy=void 0;y=B.copy=(e,o)=>h(void 0,void 0,void 0,(function*(){try{if(window&&navigator.clipboard&&window.isSecureContext)return yield navigator.clipboard.writeText(e),o&&o(),!0;{let t=document.createElement("textarea");t.value=e,t.style.position="fixed",t.style.left="-9999px",t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return!!document.execCommand("copy")&&(o&&o(),!0)}catch(e){return console.error("Error copying text:",e),!1}finally{document.body.removeChild(t)}}}catch(e){return console.error("Error copying text:",e),!1}}));const x=()=>e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",width:16,height:16,className:"copy-icon copy-success",fill:"none",children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z"})}),F=()=>e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",width:16,height:16,className:"copy-icon copy",fill:"none",children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75"})});s(".copy-button{align-items:center;background-color:var(--cp-black);border-color:var(--cp-muted-foreground);border-radius:.5rem;border-style:solid;border-width:1px;box-shadow:none;cursor:pointer;display:flex;font-family:inherit;font-weight:500;justify-content:center;line-height:1;margin:0;opacity:.65;overflow:hidden;padding:.4rem;position:absolute;right:.5rem;text-transform:none;top:.5rem;white-space:nowrap;z-index:100}.copy-button,.copy-button .copy-icon{color:var(--cp-background);transition:all .2s ease}.copy-button .copy-icon{fill:none;height:1.5rem;width:1.5rem}.copy-button:focus,.copy-button:hover{--cp-black:#212121;background-color:var(--cp-black);opacity:1}.copy-button:active{border-color:var(--cp-border);opacity:1;transform:scale(.96)}.copy-button-released{animation:successFade 1s linear}@media screen and (max-width:768px){.copy-button{opacity:1}}@media screen and (prefers-color-scheme:dark){.copy-button .copy-icon{color:var(--cp-foreground)}}@keyframes successFade{0%{border-color:#10b981}to{border-color:var(--cp-muted-foreground)}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvcHlCdXR0b24uc2NzcyIsImNvcHlCdXR0b24uY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGFBS0Usa0JBQUEsQ0F3QkEsZ0NBQUEsQ0FGQSx1Q0FBQSxDQVpBLG1CQUFBLENBV0Esa0JBQUEsQ0FEQSxnQkFBQSxDQVJBLGVBQUEsQ0FmQSxjQUFBLENBaUJBLFlBQUEsQ0FOQSxtQkFBQSxDQUpBLGVBQUEsQ0FIQSxzQkFBQSxDQUtBLGFBQUEsQ0FWQSxRQUFBLENBZ0NBLFdBQUEsQ0FiQSxlQUFBLENBakJBLGFBQUEsQ0FrQkEsaUJBQUEsQ0FFQSxXQUFBLENBWEEsbUJBQUEsQ0FVQSxTQUFBLENBZEEsa0JBQUEsQ0EwQkEsV0NSRixDRFVFLHFDQU5BLDBCQUFBLENBQ0EsdUJDRUYsQ0RHRSx3QkFLRSxTQUFBLENBRkEsYUFBQSxDQURBLFlDTEosQ0RZRSxzQ0FFRSxrQkFBQSxDQUNBLGdDQUFBLENBQ0EsU0NYSixDRGNFLG9CQUdFLDZCQUFBLENBRkEsU0FBQSxDQUNBLG9CQ1hKLENEZ0JBLHNCQUNFLCtCQ2JGLENEZ0JBLG9DQUNFLGFBQ0UsU0NiRixDQUNGLENEZ0JBLDhDQUVJLHdCQUNFLDBCQ2ZKLENBQ0YsQ0RtQkEsdUJBQ0UsR0FDRSxvQkNqQkYsQ0RtQkEsR0FDRSx1Q0NqQkYsQ0FDRiIsImZpbGUiOiJjb3B5QnV0dG9uLmNzcyJ9 */");const I=({value:o,onCopied:t})=>{const[n,i]=r(!1);return e("button",{onClick:()=>f(void 0,void 0,void 0,(function*(){yield y(o),t&&t(),i(!0),setTimeout((()=>{i(!1)}),2e3)})),type:"button",className:`copy-button ${n?"copy-button-released":""} `,"aria-disabled":n,disabled:n,children:e(n?F:x,{})})},v=({activeTab:t,setActiveTab:n})=>{const a=i([]),[d,l]=r({left:"preview"===t?"0":"86px",width:"preview"===t?"82px":"65px"});return c((()=>{const e=a.current.findIndex((e=>{var o;return(null===(o=null==e?void 0:e.textContent)||void 0===o?void 0:o.toLowerCase())===t}));if(-1!==e&&a.current[e]){const{offsetLeft:o,clientWidth:t}=a.current[e];l({left:`${o}px`,width:`${t}px`})}}),[t]),o("div",{className:"code-preview__tabs",children:[["preview","code"].map(((o,r)=>e("button",{className:"code-preview__tabs__trigger "+(t===o?"code-preview__tabs__trigger-active":""),ref:e=>{a.current[r]=e},onClick:()=>((e,o)=>{n(o);const t=a.current[e];if(t){const{offsetLeft:e,clientWidth:o}=t;l({left:`${e}px`,width:`${o}px`})}})(r,o),children:o.charAt(0).toUpperCase()+o.slice(1)},o))),e("div",{className:"code-preview__tabs__underline",style:d})]})},k=({component:n,code:i,lightTheme:c=p,darkTheme:d=p,className:l,style:s,initialTab:f="preview",onCopied:u})=>{const[b,Q]=r(f),{highlightedCode:B,codeString:h,loadingCode:y}=g(i,c,d),x=m("code-preview",l);return e(a,{fallback:e(t,{}),children:o("div",{className:x,style:Object.assign({},s),children:[e(v,{setActiveTab:Q,activeTab:b}),o("div",{className:"code-preview__content",children:["preview"===b&&n&&e("div",{className:"code-preview__content__component-wrapper",children:Z(n)}),"code"===b&&B&&!y&&o(t,{children:[e(I,{value:h,onCopied:u}),!y&&e("div",{className:"code-preview__content__code-wrapper",dangerouslySetInnerHTML:{__html:B}})]})]})]})})},Z=o=>{try{if(d(o))return o;return e(o,{})}catch(e){console.error("== renderComponent ==\nError rendering component",e)}},G=r=>{const{code:n,darkTheme:i,lightTheme:c,className:d,style:l,onCopied:s}=r,{highlightedCode:f,codeString:u}=g(n,c,i),b=m("code-preview",d);return e(a,{fallback:e(t,{}),children:e("div",{className:b,style:Object.assign({},l),children:e("div",{className:"code-preview__content",children:f&&o(t,{children:[e(I,{value:u,onCopied:s}),e("div",{className:"code-preview__content__code-wrapper",dangerouslySetInnerHTML:{__html:f}})]})})})})},U=o=>e("component"in o?k:G,Object.assign({},o));export{U as CodePreview};