@orion-ds/react 5.4.0 → 5.5.1

package/dist/components/CodeEditor/CodeEditor.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),s=require("react"),J=require("../MissingDependencyError.cjs"),Q=require("../../utils/optionalDeps.cjs"),l=require("./CodeEditor.module.css.cjs"),X=require("../../contexts/ThemeContext.cjs");let A,B,K;if(typeof require<"u")try{A=require("react-syntax-highlighter").Prism;const d=require("react-syntax-highlighter/dist/esm/styles/prism");B=d.oneDark,K=d.oneLight}catch{}if(typeof require<"u")try{const r=require("refractor/all");r.default&&r.default.registered&&r.default.registered("markdown")&&!r.default.languages.markdown?.["quoted-string"]&&r.default.languages.insertBefore("markdown","bold",{"quoted-string":{pattern:/"(?:\\.|[^"\\])*"/,greedy:!0,alias:"string"}})}catch{}const P=s.forwardRef(({value:r="",onChange:d,language:C,readOnly:N=!1,showLineNumbers:S=!0,placeholder:E,minRows:p=10,className:F,"aria-label":T,...q},O)=>{const[R,v]=s.useState(),[V,_]=s.useState(!0),[m,z]=s.useState(0),[u,I]=s.useState([]),x=s.useRef(null),y=s.useRef(null),k=s.useRef(null),D=s.useRef(null),U=s.useRef(null),h=s.useRef(null),f=O||U;s.useEffect(()=>{(async()=>{try{const t=Q.checkComponent("CodeEditor");t instanceof Promise?v(await t):v(t)}catch{v(void 0)}finally{_(!1)}})()},[]),s.useEffect(()=>{if(h.current&&f.current){const{start:e,end:t}=h.current;f.current.setSelectionRange(e,t),h.current=null}}),s.useEffect(()=>{const e=k.current,t=D.current;if(!e||!t)return;const i=()=>{const o=t.clientWidth;if(o<=0)return;e.style.width=`${o}px`;const a=r.split(`
-`),g=Math.max(a.length,p),b=[];for(let w=0;w<g;w++){const G=a[w]??"";e.textContent=G||" ",b.push(e.scrollHeight)}I(b)};i();const c=new ResizeObserver(i);return c.observe(t),()=>c.disconnect()},[r,p]),s.useEffect(()=>{const e=i=>{const c=i.target;x.current&&(x.current.scrollTop=c.scrollTop),y.current&&(y.current.scrollTop=c.scrollTop,y.current.scrollLeft=c.scrollLeft)},t=f?.current;if(t)return t.addEventListener("scroll",e),()=>{t.removeEventListener("scroll",e)}},[f]);let L="dark";try{L=X.useThemeContext().theme}catch{}const W=L==="light"?K:B,M=Math.max(r.split(`
-`).length,p);if(R)return n.jsx(J.MissingDependencyError,{...R});if(V)return n.jsx("div",{children:"Loading code editor..."});const j=e=>{const t=e.value.substring(0,e.selectionStart);z(t.split(`
-`).length-1)},H=e=>{if(e.key==="Tab"){e.preventDefault();const t=e.currentTarget,i=t.selectionStart,c=t.selectionEnd,o="  ";if(i===c){const a=r.substring(0,i)+o+r.substring(c);h.current={start:i+o.length,end:i+o.length},d?.(a)}else if(e.shiftKey){const a=r.lastIndexOf(`
-`,i-1)+1,g=r.substring(a).match(/^ {1,2}/)?.[0]??"";if(g.length>0){const b=r.substring(0,a)+r.substring(a+g.length);h.current={start:Math.max(a,i-g.length),end:Math.max(a,c-g.length)},d?.(b)}}else{const a=r.substring(0,i)+o+r.substring(c);h.current={start:i+o.length,end:i+o.length},d?.(a)}}},$=[l.default.wrapper,F].filter(Boolean).join(" ");return C?n.jsxs("div",{className:$,style:{minHeight:`calc(${p} * 1.6em + 2 * var(--spacing-4))`},children:[n.jsx("div",{ref:k,className:l.default.lineMirror,"aria-hidden":"true"}),S&&n.jsx("div",{ref:x,className:l.default.lineNumbers,"aria-hidden":"true",children:Array.from({length:M}).map((e,t)=>n.jsx("div",{className:l.default.lineNumber,style:u[t]!==void 0?{height:`${u[t]}px`}:void 0,children:t+1},t))}),n.jsxs("div",{ref:D,className:l.default.editorArea,children:[n.jsx("div",{className:l.default.lineHighlight,style:{top:u.length>0?`calc(var(--spacing-4) + ${u.slice(0,m).reduce((e,t)=>e+t,0)}px)`:`calc(var(--spacing-4) + ${(m*1.6).toFixed(2)}em)`,...u[m]!==void 0?{height:`${u[m]}px`}:{}},"aria-hidden":"true"}),n.jsx("div",{ref:y,className:l.default.highlightLayer,"aria-hidden":"true",children:n.jsx(A,{language:C,style:W,customStyle:{margin:0,padding:0,background:"transparent",fontSize:"inherit",lineHeight:"inherit",fontFamily:"inherit",whiteSpace:"pre-wrap",wordBreak:"break-word",overflow:"visible"},codeTagProps:{style:{fontFamily:"inherit",background:"transparent",color:"var(--text-primary)",whiteSpace:"pre-wrap",wordBreak:"break-word"}},children:r+`
-`})}),n.jsx("textarea",{ref:f,className:l.default.textareaOverlay,value:r,onChange:e=>d?.(e.target.value),onKeyDown:H,onKeyUp:e=>j(e.currentTarget),onMouseUp:e=>j(e.currentTarget),onClick:e=>j(e.currentTarget),placeholder:E,readOnly:N,"aria-label":T||"Code editor",spellCheck:"false",...q})]})]}):n.jsxs("div",{className:$,style:{minHeight:`calc(${p} * 1.6em + 2 * var(--spacing-4))`},children:[n.jsx("div",{ref:k,className:l.default.lineMirror,"aria-hidden":"true"}),S&&n.jsx("div",{ref:x,className:l.default.lineNumbers,"aria-hidden":"true",children:Array.from({length:M}).map((e,t)=>n.jsx("div",{className:l.default.lineNumber,style:u[t]!==void 0?{height:`${u[t]}px`}:void 0,children:t+1},t))}),n.jsx("textarea",{ref:f,className:l.default.textarea,value:r,onChange:e=>d?.(e.target.value),onKeyDown:H,placeholder:E,readOnly:N,"aria-label":T||"Code editor",spellCheck:"false",...q})]})});P.displayName="CodeEditor";exports.CodeEditor=P;
+"use strict";var Z=Object.create;var F=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var te=Object.getOwnPropertyNames;var re=Object.getPrototypeOf,ne=Object.prototype.hasOwnProperty;var se=(r,n,d,x)=>{if(n&&typeof n=="object"||typeof n=="function")for(let h of te(n))!ne.call(r,h)&&h!==d&&F(r,h,{get:()=>n[h],enumerable:!(x=ee(n,h))||x.enumerable});return r};var O=(r,n,d)=>(d=r!=null?Z(re(r)):{},se(n||!r||!r.__esModule?F(d,"default",{value:r,enumerable:!0}):d,r));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("react"),ie=require("../MissingDependencyError.cjs"),ae=require("../../utils/optionalDeps.cjs"),o=require("./CodeEditor.module.css.cjs"),ce=require("../../contexts/ThemeContext.cjs");let k,N,S;Promise.all([import("react-syntax-highlighter"),import("react-syntax-highlighter/dist/esm/styles/prism")]).then(([r,n])=>{k=r.Prism,N=n.oneDark,S=n.oneLight}).catch(()=>{});const V=i.forwardRef(({value:r="",onChange:n,language:d,readOnly:x=!1,showLineNumbers:h=!0,placeholder:D,minRows:y=10,className:_,"aria-label":M,...H},z)=>{const[$,T]=i.useState(),[I,U]=i.useState(!0),[W,E]=i.useState(!1),[b,G]=i.useState(0),[f,J]=i.useState([]),v=i.useRef(null),j=i.useRef(null),w=i.useRef(null),q=i.useRef(null),Q=i.useRef(null),g=i.useRef(null),m=z||Q;i.useEffect(()=>{(async()=>{try{const t=ae.checkComponent("CodeEditor");t instanceof Promise?T(await t):T(t)}catch{T(void 0)}finally{U(!1)}})()},[]),i.useEffect(()=>{if(k&&N&&S){E(!0);return}const e=setTimeout(()=>{E(!0)},0);return()=>clearTimeout(e)},[]),i.useEffect(()=>{if(g.current&&m.current){const{start:e,end:t}=g.current;m.current.setSelectionRange(e,t),g.current=null}}),i.useEffect(()=>{const e=w.current,t=q.current;if(!e||!t)return;const a=()=>{const u=t.clientWidth;if(u<=0)return;e.style.width=`${u}px`;const c=r.split(`
+`),p=Math.max(c.length,y),C=[];for(let R=0;R<p;R++){const Y=c[R]??"";e.textContent=Y||" ",C.push(e.scrollHeight)}J(C)};a();const l=new ResizeObserver(a);return l.observe(t),()=>l.disconnect()},[r,y]),i.useEffect(()=>{const e=a=>{const l=a.target;v.current&&(v.current.scrollTop=l.scrollTop),j.current&&(j.current.scrollTop=l.scrollTop,j.current.scrollLeft=l.scrollLeft)},t=m?.current;if(t)return t.addEventListener("scroll",e),()=>{t.removeEventListener("scroll",e)}},[m]);let A="dark";try{A=ce.useThemeContext().theme}catch{}const X=A==="light"?S:N,K=Math.max(r.split(`
+`).length,y);if($)return s.jsx(ie.MissingDependencyError,{...$});if(I)return s.jsx("div",{children:"Loading code editor..."});if(d&&!W)return s.jsx("div",{children:"Loading code editor..."});const L=e=>{const t=e.value.substring(0,e.selectionStart);G(t.split(`
+`).length-1)},P=e=>{if(e.key==="Tab"){e.preventDefault();const t=e.currentTarget,a=t.selectionStart,l=t.selectionEnd,u="  ";if(a===l){const c=r.substring(0,a)+u+r.substring(l);g.current={start:a+u.length,end:a+u.length},n?.(c)}else if(e.shiftKey){const c=r.lastIndexOf(`
+`,a-1)+1,p=r.substring(c).match(/^ {1,2}/)?.[0]??"";if(p.length>0){const C=r.substring(0,c)+r.substring(c+p.length);g.current={start:Math.max(c,a-p.length),end:Math.max(c,l-p.length)},n?.(C)}}else{const c=r.substring(0,a)+u+r.substring(l);g.current={start:a+u.length,end:a+u.length},n?.(c)}}},B=[o.default.wrapper,_].filter(Boolean).join(" ");return d?s.jsxs("div",{className:B,style:{minHeight:`calc(${y} * 1.6em + 2 * var(--spacing-4))`},children:[s.jsx("div",{ref:w,className:o.default.lineMirror,"aria-hidden":"true"}),h&&s.jsx("div",{ref:v,className:o.default.lineNumbers,"aria-hidden":"true",children:Array.from({length:K}).map((e,t)=>s.jsx("div",{className:o.default.lineNumber,style:f[t]!==void 0?{height:`${f[t]}px`}:void 0,children:t+1},t))}),s.jsxs("div",{ref:q,className:o.default.editorArea,children:[s.jsx("div",{className:o.default.lineHighlight,style:{top:f.length>0?`calc(var(--spacing-4) + ${f.slice(0,b).reduce((e,t)=>e+t,0)}px)`:`calc(var(--spacing-4) + ${(b*1.6).toFixed(2)}em)`,...f[b]!==void 0?{height:`${f[b]}px`}:{}},"aria-hidden":"true"}),s.jsx("div",{ref:j,className:o.default.highlightLayer,"aria-hidden":"true",children:s.jsx(k,{language:d,style:X,customStyle:{margin:0,padding:0,background:"transparent",fontSize:"inherit",lineHeight:"inherit",fontFamily:"inherit",whiteSpace:"pre-wrap",wordBreak:"break-word",overflow:"visible"},codeTagProps:{style:{fontFamily:"inherit",background:"transparent",color:"var(--text-primary)",whiteSpace:"pre-wrap",wordBreak:"break-word"}},children:r+`
+`})}),s.jsx("textarea",{ref:m,className:o.default.textareaOverlay,value:r,onChange:e=>n?.(e.target.value),onKeyDown:P,onKeyUp:e=>L(e.currentTarget),onMouseUp:e=>L(e.currentTarget),onClick:e=>L(e.currentTarget),placeholder:D,readOnly:x,"aria-label":M||"Code editor",spellCheck:"false",...H})]})]}):s.jsxs("div",{className:B,style:{minHeight:`calc(${y} * 1.6em + 2 * var(--spacing-4))`},children:[s.jsx("div",{ref:w,className:o.default.lineMirror,"aria-hidden":"true"}),h&&s.jsx("div",{ref:v,className:o.default.lineNumbers,"aria-hidden":"true",children:Array.from({length:K}).map((e,t)=>s.jsx("div",{className:o.default.lineNumber,style:f[t]!==void 0?{height:`${f[t]}px`}:void 0,children:t+1},t))}),s.jsx("textarea",{ref:m,className:o.default.textarea,value:r,onChange:e=>n?.(e.target.value),onKeyDown:P,placeholder:D,readOnly:x,"aria-label":M||"Code editor",spellCheck:"false",...H})]})});V.displayName="CodeEditor";exports.CodeEditor=V;

package/dist/components/CodeEditor/CodeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../src/components/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAmD1D;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,UAAU,6FAgWtB,CAAC"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../src/components/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AA+B1D;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,UAAU,6FA4XtB,CAAC"}

package/dist/components/CodeEditor/CodeEditor.mjs

@@ -1,157 +1,156 @@
-import { jsx as s, jsxs as S } from "react/jsx-runtime";
-import { forwardRef as X, useState as v, useRef as g, useEffect as k } from "react";
-import { MissingDependencyError as Y } from "../MissingDependencyError.mjs";
-import { checkComponent as Z } from "../../utils/optionalDeps.mjs";
-import a from "./CodeEditor.module.css.mjs";
-import { useThemeContext as ee } from "../../contexts/ThemeContext.mjs";
-let F, P, V;
-if (typeof require < "u")
-  try {
-    F = require("react-syntax-highlighter").Prism;
-    const l = require("react-syntax-highlighter/dist/esm/styles/prism");
-    P = l.oneDark, V = l.oneLight;
-  } catch {
-  }
-if (typeof require < "u")
-  try {
-    const r = require("refractor/all");
-    r.default && r.default.registered && r.default.registered("markdown") && !r.default.languages.markdown?.["quoted-string"] && r.default.languages.insertBefore("markdown", "bold", {
-      "quoted-string": {
-        pattern: /"(?:\\.|[^"\\])*"/,
-        greedy: !0,
-        alias: "string"
-      }
-    });
-  } catch {
-  }
-const te = X(
+import { jsx as i, jsxs as H } from "react/jsx-runtime";
+import { forwardRef as Z, useState as p, useRef as m, useEffect as x } from "react";
+import { MissingDependencyError as ee } from "../MissingDependencyError.mjs";
+import { checkComponent as te } from "../../utils/optionalDeps.mjs";
+import o from "./CodeEditor.module.css.mjs";
+import { useThemeContext as re } from "../../contexts/ThemeContext.mjs";
+let N, w, C;
+Promise.all([
+  import("react-syntax-highlighter"),
+  import("react-syntax-highlighter/dist/esm/styles/prism")
+]).then(([r, l]) => {
+  N = r.Prism, w = l.oneDark, C = l.oneLight;
+}).catch(() => {
+});
+const ne = Z(
   ({
     value: r = "",
     onChange: l,
-    language: L,
-    readOnly: D = !1,
-    showLineNumbers: E = !0,
-    placeholder: H,
-    minRows: m = 10,
-    className: z,
-    "aria-label": M,
-    ...$
-  }, I) => {
-    const [q, w] = v(), [O, U] = v(!0), [p, W] = v(0), [d, _] = v([]), y = g(null), x = g(null), N = g(null), A = g(null), G = g(null), h = g(null), u = I || G;
-    k(() => {
+    language: T,
+    readOnly: $ = !1,
+    showLineNumbers: A = !0,
+    placeholder: R,
+    minRows: g = 10,
+    className: O,
+    "aria-label": K,
+    ...B
+  }, U) => {
+    const [P, L] = p(), [W, _] = p(!0), [q, S] = p(!1), [y, G] = p(0), [d, J] = p([]), v = m(null), b = m(null), D = m(null), j = m(null), Q = m(null), h = m(null), u = U || Q;
+    x(() => {
       (async () => {
         try {
-          const t = Z("CodeEditor");
-          t instanceof Promise ? w(await t) : w(t);
+          const t = te("CodeEditor");
+          t instanceof Promise ? L(await t) : L(t);
         } catch {
-          w(void 0);
+          L(void 0);
         } finally {
-          U(!1);
+          _(!1);
         }
       })();
-    }, []), k(() => {
+    }, []), x(() => {
+      if (N && w && C) {
+        S(!0);
+        return;
+      }
+      const e = setTimeout(() => {
+        S(!0);
+      }, 0);
+      return () => clearTimeout(e);
+    }, []), x(() => {
       if (h.current && u.current) {
         const { start: e, end: t } = h.current;
         u.current.setSelectionRange(e, t), h.current = null;
       }
-    }), k(() => {
-      const e = N.current, t = A.current;
+    }), x(() => {
+      const e = D.current, t = j.current;
       if (!e || !t) return;
       const n = () => {
-        const c = t.clientWidth;
-        if (c <= 0) return;
-        e.style.width = `${c}px`;
-        const i = r.split(`
-`), f = Math.max(i.length, m), b = [];
-        for (let T = 0; T < f; T++) {
-          const Q = i[T] ?? "";
-          e.textContent = Q || " ", b.push(e.scrollHeight);
+        const a = t.clientWidth;
+        if (a <= 0) return;
+        e.style.width = `${a}px`;
+        const s = r.split(`
+`), f = Math.max(s.length, g), k = [];
+        for (let M = 0; M < f; M++) {
+          const Y = s[M] ?? "";
+          e.textContent = Y || " ", k.push(e.scrollHeight);
         }
-        _(b);
+        J(k);
       };
       n();
-      const o = new ResizeObserver(n);
-      return o.observe(t), () => o.disconnect();
-    }, [r, m]), k(() => {
+      const c = new ResizeObserver(n);
+      return c.observe(t), () => c.disconnect();
+    }, [r, g]), x(() => {
       const e = (n) => {
-        const o = n.target;
-        y.current && (y.current.scrollTop = o.scrollTop), x.current && (x.current.scrollTop = o.scrollTop, x.current.scrollLeft = o.scrollLeft);
+        const c = n.target;
+        v.current && (v.current.scrollTop = c.scrollTop), b.current && (b.current.scrollTop = c.scrollTop, b.current.scrollLeft = c.scrollLeft);
       }, t = u?.current;
       if (t)
         return t.addEventListener("scroll", e), () => {
           t.removeEventListener("scroll", e);
         };
     }, [u]);
-    let R = "dark";
+    let F = "dark";
     try {
-      R = ee().theme;
+      F = re().theme;
     } catch {
     }
-    const J = R === "light" ? V : P, B = Math.max(r.split(`
-`).length, m);
-    if (q)
-      return /* @__PURE__ */ s(Y, { ...q });
-    if (O)
-      return /* @__PURE__ */ s("div", { children: "Loading code editor..." });
-    const C = (e) => {
+    const X = F === "light" ? C : w, V = Math.max(r.split(`
+`).length, g);
+    if (P)
+      return /* @__PURE__ */ i(ee, { ...P });
+    if (W)
+      return /* @__PURE__ */ i("div", { children: "Loading code editor..." });
+    if (T && !q)
+      return /* @__PURE__ */ i("div", { children: "Loading code editor..." });
+    const E = (e) => {
       const t = e.value.substring(0, e.selectionStart);
-      W(t.split(`
+      G(t.split(`
 `).length - 1);
-    }, K = (e) => {
+    }, z = (e) => {
       if (e.key === "Tab") {
         e.preventDefault();
-        const t = e.currentTarget, n = t.selectionStart, o = t.selectionEnd, c = "  ";
-        if (n === o) {
-          const i = r.substring(0, n) + c + r.substring(o);
+        const t = e.currentTarget, n = t.selectionStart, c = t.selectionEnd, a = "  ";
+        if (n === c) {
+          const s = r.substring(0, n) + a + r.substring(c);
           h.current = {
-            start: n + c.length,
-            end: n + c.length
-          }, l?.(i);
+            start: n + a.length,
+            end: n + a.length
+          }, l?.(s);
         } else if (e.shiftKey) {
-          const i = r.lastIndexOf(`
-`, n - 1) + 1, f = r.substring(i).match(/^ {1,2}/)?.[0] ?? "";
+          const s = r.lastIndexOf(`
+`, n - 1) + 1, f = r.substring(s).match(/^ {1,2}/)?.[0] ?? "";
           if (f.length > 0) {
-            const b = r.substring(0, i) + r.substring(i + f.length);
+            const k = r.substring(0, s) + r.substring(s + f.length);
             h.current = {
-              start: Math.max(i, n - f.length),
-              end: Math.max(i, o - f.length)
-            }, l?.(b);
+              start: Math.max(s, n - f.length),
+              end: Math.max(s, c - f.length)
+            }, l?.(k);
           }
         } else {
-          const i = r.substring(0, n) + c + r.substring(o);
+          const s = r.substring(0, n) + a + r.substring(c);
           h.current = {
-            start: n + c.length,
-            end: n + c.length
-          }, l?.(i);
+            start: n + a.length,
+            end: n + a.length
+          }, l?.(s);
         }
       }
-    }, j = [a.wrapper, z].filter(Boolean).join(" ");
-    return L ? /* @__PURE__ */ S(
+    }, I = [o.wrapper, O].filter(Boolean).join(" ");
+    return T ? /* @__PURE__ */ H(
       "div",
       {
-        className: j,
+        className: I,
         style: {
-          minHeight: `calc(${m} * 1.6em + 2 * var(--spacing-4))`
+          minHeight: `calc(${g} * 1.6em + 2 * var(--spacing-4))`
         },
         children: [
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ i(
             "div",
             {
-              ref: N,
-              className: a.lineMirror,
+              ref: D,
+              className: o.lineMirror,
               "aria-hidden": "true"
             }
           ),
-          E && /* @__PURE__ */ s(
+          A && /* @__PURE__ */ i(
             "div",
             {
-              ref: y,
-              className: a.lineNumbers,
+              ref: v,
+              className: o.lineNumbers,
               "aria-hidden": "true",
-              children: Array.from({ length: B }).map((e, t) => /* @__PURE__ */ s(
+              children: Array.from({ length: V }).map((e, t) => /* @__PURE__ */ i(
                 "div",
                 {
-                  className: a.lineNumber,
+                  className: o.lineNumber,
                   style: d[t] !== void 0 ? { height: `${d[t]}px` } : void 0,
                   children: t + 1
                 },
@@ -159,29 +158,29 @@ const te = X(
               ))
             }
           ),
-          /* @__PURE__ */ S("div", { ref: A, className: a.editorArea, children: [
-            /* @__PURE__ */ s(
+          /* @__PURE__ */ H("div", { ref: j, className: o.editorArea, children: [
+            /* @__PURE__ */ i(
               "div",
               {
-                className: a.lineHighlight,
+                className: o.lineHighlight,
                 style: {
-                  top: d.length > 0 ? `calc(var(--spacing-4) + ${d.slice(0, p).reduce((e, t) => e + t, 0)}px)` : `calc(var(--spacing-4) + ${(p * 1.6).toFixed(2)}em)`,
-                  ...d[p] !== void 0 ? { height: `${d[p]}px` } : {}
+                  top: d.length > 0 ? `calc(var(--spacing-4) + ${d.slice(0, y).reduce((e, t) => e + t, 0)}px)` : `calc(var(--spacing-4) + ${(y * 1.6).toFixed(2)}em)`,
+                  ...d[y] !== void 0 ? { height: `${d[y]}px` } : {}
                 },
                 "aria-hidden": "true"
               }
             ),
-            /* @__PURE__ */ s(
+            /* @__PURE__ */ i(
               "div",
               {
-                ref: x,
-                className: a.highlightLayer,
+                ref: b,
+                className: o.highlightLayer,
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ s(
-                  F,
+                children: /* @__PURE__ */ i(
+                  N,
                   {
-                    language: L,
-                    style: J,
+                    language: T,
+                    style: X,
                     customStyle: {
                       margin: 0,
                       padding: 0,
@@ -208,44 +207,44 @@ const te = X(
                 )
               }
             ),
-            /* @__PURE__ */ s(
+            /* @__PURE__ */ i(
               "textarea",
               {
                 ref: u,
-                className: a.textareaOverlay,
+                className: o.textareaOverlay,
                 value: r,
                 onChange: (e) => l?.(e.target.value),
-                onKeyDown: K,
-                onKeyUp: (e) => C(e.currentTarget),
-                onMouseUp: (e) => C(e.currentTarget),
-                onClick: (e) => C(e.currentTarget),
-                placeholder: H,
-                readOnly: D,
-                "aria-label": M || "Code editor",
+                onKeyDown: z,
+                onKeyUp: (e) => E(e.currentTarget),
+                onMouseUp: (e) => E(e.currentTarget),
+                onClick: (e) => E(e.currentTarget),
+                placeholder: R,
+                readOnly: $,
+                "aria-label": K || "Code editor",
                 spellCheck: "false",
-                ...$
+                ...B
               }
             )
           ] })
         ]
       }
-    ) : /* @__PURE__ */ S(
+    ) : /* @__PURE__ */ H(
       "div",
       {
-        className: j,
-        style: { minHeight: `calc(${m} * 1.6em + 2 * var(--spacing-4))` },
+        className: I,
+        style: { minHeight: `calc(${g} * 1.6em + 2 * var(--spacing-4))` },
         children: [
-          /* @__PURE__ */ s("div", { ref: N, className: a.lineMirror, "aria-hidden": "true" }),
-          E && /* @__PURE__ */ s(
+          /* @__PURE__ */ i("div", { ref: D, className: o.lineMirror, "aria-hidden": "true" }),
+          A && /* @__PURE__ */ i(
             "div",
             {
-              ref: y,
-              className: a.lineNumbers,
+              ref: v,
+              className: o.lineNumbers,
               "aria-hidden": "true",
-              children: Array.from({ length: B }).map((e, t) => /* @__PURE__ */ s(
+              children: Array.from({ length: V }).map((e, t) => /* @__PURE__ */ i(
                 "div",
                 {
-                  className: a.lineNumber,
+                  className: o.lineNumber,
                   style: d[t] !== void 0 ? { height: `${d[t]}px` } : void 0,
                   children: t + 1
                 },
@@ -253,19 +252,19 @@ const te = X(
               ))
             }
           ),
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ i(
             "textarea",
             {
               ref: u,
-              className: a.textarea,
+              className: o.textarea,
               value: r,
               onChange: (e) => l?.(e.target.value),
-              onKeyDown: K,
-              placeholder: H,
-              readOnly: D,
-              "aria-label": M || "Code editor",
+              onKeyDown: z,
+              placeholder: R,
+              readOnly: $,
+              "aria-label": K || "Code editor",
               spellCheck: "false",
-              ...$
+              ...B
             }
           )
         ]
@@ -273,7 +272,7 @@ const te = X(
     );
   }
 );
-te.displayName = "CodeEditor";
+ne.displayName = "CodeEditor";
 export {
-  te as CodeEditor
+  ne as CodeEditor
 };

package/dist/contexts/ThemeContext.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),t=require("react"),S=require("../hooks/useTheme.cjs"),i=require("../utils/fonts.cjs"),O=require("../components/FontLoader/FontLoader.cjs"),h={theme:"light",brand:"orion",setTheme:()=>{},setBrand:()=>{},toggleTheme:()=>{},isDark:!1,isLight:!0},p=t.createContext(h);function P(){return typeof window>"u"?!0:getComputedStyle(document.documentElement).getPropertyValue("--orion-react-styles-loaded").trim()==="1"}function x({children:o,defaultTheme:r,defaultBrand:d,options:T,disableFontWarnings:c=!1,disableAutoFontLoading:g=!1,disableCSSWarnings:u=!1}){const v={...T,...r!==void 0&&{defaultTheme:r},...d!==void 0&&{defaultBrand:d}},n=S.useTheme(v),l=t.useRef(new Set),a=t.useRef(!1);return t.useEffect(()=>{if(u||typeof window>"u"||!(process.env.NODE_ENV==="development"||window.location.hostname==="localhost"))return;const s=setTimeout(()=>{!a.current&&!P()&&(a.current=!0,console.warn(`[Orion] Component styles not detected!
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),t=require("react"),S=require("../hooks/useTheme.cjs"),i=require("../utils/fonts.cjs"),O=require("../components/FontLoader/FontLoader.cjs"),h={theme:"light",brand:"orion",setTheme:()=>{},setBrand:()=>{},toggleTheme:()=>{},isDark:!1,isLight:!0},p=t.createContext(h);function P(){return typeof window>"u"?!0:getComputedStyle(document.documentElement).getPropertyValue("--orion-react-styles-loaded").trim()==="1"}function x({children:o,defaultTheme:r,defaultBrand:d,options:T,disableFontWarnings:c=!1,disableAutoFontLoading:v=!1,disableCSSWarnings:u=!1}){const g={...T,...r!==void 0&&{defaultTheme:r},...d!==void 0&&{defaultBrand:d}},n=S.useTheme(g),a=t.useRef(new Set),m=t.useRef(!1);return t.useEffect(()=>{if(u||typeof window>"u"||!(process.env.NODE_ENV==="development"||window.location.hostname==="localhost"))return;const s=setTimeout(()=>{!m.current&&!P()&&(m.current=!0,console.warn(`[Orion] Component styles not detected!
 
 You must import the component CSS file:
 
@@ -6,7 +6,7 @@ You must import the component CSS file:
 
 Add this import in your app entry file. It includes both design tokens and component styles.
 
-To disable this warning, set disableCSSWarnings={true} on ThemeProvider.`))},100);return()=>clearTimeout(s)},[u]),t.useEffect(()=>{if(c||typeof window>"u"||!(process.env.NODE_ENV==="development"||typeof window<"u"&&window.location.hostname==="localhost"))return;const s=setTimeout(()=>{const{brand:e}=n,m=i.getMissingFonts(e);if(m.length>0&&!l.current.has(e)){l.current.add(e);const w=i.BRAND_FONTS[e].join(", ");console.warn(`[Orion] Missing fonts for "${e}" brand: ${m.join(", ")}
+To disable this warning, set disableCSSWarnings={true} on ThemeProvider.`))},100);return()=>clearTimeout(s)},[u]),t.useEffect(()=>{if(c||typeof window>"u"||!(process.env.NODE_ENV==="development"||typeof window<"u"&&window.location.hostname==="localhost"))return;const s=setTimeout(()=>{const{brand:e}=n,l=i.getMissingFonts(e);if(l.length>0&&!a.current.has(e)){a.current.add(e);const w=i.BRAND_FONTS[e].join(", ");console.warn(`[Orion] Missing fonts for "${e}" brand: ${l.join(", ")}
 
 The "${e}" brand requires these fonts: ${w}
 
@@ -24,14 +24,16 @@ Option 2: Add Google Fonts to your HTML <head>
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="${i.GOOGLE_FONTS_URL}" rel="stylesheet">
 
-To disable this warning, set disableFontWarnings={true} on ThemeProvider.`)}},1e3);return()=>clearTimeout(s)},[n.brand,c,n]),f.jsxs(p.Provider,{value:n,children:[!g&&f.jsx(O.FontLoader,{}),o]})}function C(){const o=t.useContext(p);return process.env.NODE_ENV==="development"&&typeof window<"u"&&o===h&&console.warn(`⚠️ [Orion] useThemeContext() called outside <ThemeProvider>. Using SSR defaults.
+To disable this warning, set disableFontWarnings={true} on ThemeProvider.`)}},1e3);return()=>clearTimeout(s)},[n.brand,c,n]),f.jsxs(p.Provider,{value:n,children:[!v&&f.jsx(O.FontLoader,{}),o]})}function C(){const o=t.useContext(p);if(o===h&&process.env.NODE_ENV==="development")throw new Error(`useThemeContext must be used within a <ThemeProvider> component.
 
-For full theme functionality, wrap your app with <ThemeProvider>:
+Wrap your app at the root:
 
-export default function App() {
-  return (
-    <ThemeProvider>
-      <YourComponents />
-    </ThemeProvider>
-  );
-}`),o}exports.ThemeProvider=x;exports.useThemeContext=C;
+  import { ThemeProvider } from '@orion-ds/react';
+
+  export default function App() {
+    return (
+      <ThemeProvider>
+        <YourComponents />
+      </ThemeProvider>
+    );
+  }`);return o}exports.ThemeProvider=x;exports.useThemeContext=C;

package/dist/contexts/ThemeContext.d.ts

@@ -55,13 +55,16 @@ export declare function ThemeProvider({ children, defaultTheme, defaultBrand, op
  *
  * ⚠️ IMPORTANT: Must be used inside a ThemeProvider for full functionality
  *
- * Returns SSR-safe defaults if used outside ThemeProvider (instead of throwing).
- * In development, a warning is logged if context is accessed outside the provider.
+ * **Development**: Throws a clear error if used outside ThemeProvider
+ * (helps catch integration mistakes early)
+ *
+ * **Production**: Returns SSR-safe defaults if used outside ThemeProvider
+ * (maintains compatibility during Next.js static prerendering)
  *
  * @example
  * ```tsx
  * function MyComponent() {
- *   const { theme, brand, setTheme, setBrand } = useTheme();
+ *   const { theme, brand, setTheme, setBrand } = useThemeContext();
  *   // Components automatically inherit theme/brand from <html> attributes
  *   // DO NOT pass brand prop to components - it's applied globally!
  * }

package/dist/contexts/ThemeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAoC3B;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEhC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEjE;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;OAKG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,mBAA2B,EAC3B,sBAA8B,EAC9B,kBAA0B,GAC3B,EAAE,kBAAkB,2CA2FpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,IAAI,cAAc,CAsBhD"}
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAoC3B;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEhC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEjE;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;OAKG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,mBAA2B,EAC3B,sBAA8B,EAC9B,kBAA0B,GAC3B,EAAE,kBAAkB,2CA2FpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,eAAe,IAAI,cAAc,CAyBhD"}

package/dist/contexts/ThemeContext.mjs

@@ -1,8 +1,8 @@
 import { jsxs as y, jsx as S } from "react/jsx-runtime";
-import { useRef as a, useEffect as u, useContext as O, createContext as x } from "react";
+import { useRef as u, useEffect as l, useContext as O, createContext as x } from "react";
 import { useTheme as C } from "../hooks/useTheme.mjs";
-import { getMissingFonts as F, BRAND_FONTS as P, GOOGLE_FONTS_URL as D } from "../utils/fonts.mjs";
-import { FontLoader as E } from "../components/FontLoader/FontLoader.mjs";
+import { getMissingFonts as E, BRAND_FONTS as P, GOOGLE_FONTS_URL as D } from "../utils/fonts.mjs";
+import { FontLoader as F } from "../components/FontLoader/FontLoader.mjs";
 const f = {
   theme: "light",
   brand: "orion",
@@ -18,7 +18,7 @@ const f = {
 function L() {
   return typeof window > "u" ? !0 : getComputedStyle(document.documentElement).getPropertyValue("--orion-react-styles-loaded").trim() === "1";
 }
-function A({
+function R({
   children: o,
   defaultTheme: n,
   defaultBrand: s,
@@ -27,15 +27,15 @@ function A({
   disableAutoFontLoading: T = !1,
   disableCSSWarnings: d = !1
 }) {
-  const g = {
+  const v = {
     ...h,
     ...n !== void 0 && { defaultTheme: n },
     ...s !== void 0 && { defaultBrand: s }
-  }, t = C(g), c = a(/* @__PURE__ */ new Set()), m = a(!1);
-  return u(() => {
+  }, t = C(v), m = u(/* @__PURE__ */ new Set()), c = u(!1);
+  return l(() => {
     if (d || typeof window > "u" || !(process.env.NODE_ENV === "development" || window.location.hostname === "localhost")) return;
     const r = setTimeout(() => {
-      !m.current && !L() && (m.current = !0, console.warn(
+      !c.current && !L() && (c.current = !0, console.warn(
         `[Orion] Component styles not detected!
 
 You must import the component CSS file:
@@ -48,15 +48,15 @@ To disable this warning, set disableCSSWarnings={true} on ThemeProvider.`
       ));
     }, 100);
     return () => clearTimeout(r);
-  }, [d]), u(() => {
+  }, [d]), l(() => {
     if (i || typeof window > "u" || !(process.env.NODE_ENV === "development" || typeof window < "u" && window.location.hostname === "localhost")) return;
     const r = setTimeout(() => {
-      const { brand: e } = t, l = F(e);
-      if (l.length > 0 && !c.current.has(e)) {
-        c.current.add(e);
+      const { brand: e } = t, a = E(e);
+      if (a.length > 0 && !m.current.has(e)) {
+        m.current.add(e);
         const w = P[e].join(", ");
         console.warn(
-          `[Orion] Missing fonts for "${e}" brand: ${l.join(", ")}
+          `[Orion] Missing fonts for "${e}" brand: ${a.join(", ")}
 
 The "${e}" brand requires these fonts: ${w}
 
@@ -80,27 +80,31 @@ To disable this warning, set disableFontWarnings={true} on ThemeProvider.`
     }, 1e3);
     return () => clearTimeout(r);
   }, [t.brand, i, t]), /* @__PURE__ */ y(p.Provider, { value: t, children: [
-    !T && /* @__PURE__ */ S(E, {}),
+    !T && /* @__PURE__ */ S(F, {}),
     o
   ] });
 }
 function $() {
   const o = O(p);
-  return process.env.NODE_ENV === "development" && typeof window < "u" && o === f && console.warn(
-    `⚠️ [Orion] useThemeContext() called outside <ThemeProvider>. Using SSR defaults.
+  if (o === f && process.env.NODE_ENV === "development")
+    throw new Error(
+      `useThemeContext must be used within a <ThemeProvider> component.
 
-For full theme functionality, wrap your app with <ThemeProvider>:
+Wrap your app at the root:
 
-export default function App() {
-  return (
-    <ThemeProvider>
-      <YourComponents />
-    </ThemeProvider>
-  );
-}`
-  ), o;
+  import { ThemeProvider } from '@orion-ds/react';
+
+  export default function App() {
+    return (
+      <ThemeProvider>
+        <YourComponents />
+      </ThemeProvider>
+    );
+  }`
+    );
+  return o;
 }
 export {
-  A as ThemeProvider,
+  R as ThemeProvider,
   $ as useThemeContext
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-ds/react",
-  "version": "5.4.0",
+  "version": "5.5.1",
   "type": "module",
   "description": "Orion Design System - React component library with 40+ AI-ready components and 9 templates",
   "author": "Orion Design System Team",