@fuf-stack/pixels 0.29.3 → 0.31.0

package/dist/{chunk-XFUHF75Z.cjs → chunk-OLKLIWBE.cjs}

@@ -1,13 +1,15 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _chunk7TIFKRWYcjs = require('./chunk-7TIFKRWY.cjs');
 
 
 
-var _chunkDZUJEN5Ncjs = require('./chunk-DZUJEN5N.cjs');
+
+
+var _chunkD4TLDLEXcjs = require('./chunk-D4TLDLEX.cjs');
 
 // ../../node_modules/.pnpm/@babel+runtime@7.26.0/node_modules/@babel/runtime/helpers/extends.js
-var require_extends = _chunkDZUJEN5Ncjs.__commonJS.call(void 0, {
+var require_extends = _chunkD4TLDLEXcjs.__commonJS.call(void 0, {
   "../../node_modules/.pnpm/@babel+runtime@7.26.0/node_modules/@babel/runtime/helpers/extends.js"(exports, module) {
     "use strict";
     function _extends22() {
@@ -24,7 +26,7 @@ var require_extends = _chunkDZUJEN5Ncjs.__commonJS.call(void 0, {
 });
 
 // ../../node_modules/.pnpm/@babel+runtime@7.26.0/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
-var require_objectWithoutPropertiesLoose = _chunkDZUJEN5Ncjs.__commonJS.call(void 0, {
+var require_objectWithoutPropertiesLoose = _chunkD4TLDLEXcjs.__commonJS.call(void 0, {
   "../../node_modules/.pnpm/@babel+runtime@7.26.0/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports, module) {
     "use strict";
     function _objectWithoutPropertiesLoose12(r, e) {
@@ -41,7 +43,7 @@ var require_objectWithoutPropertiesLoose = _chunkDZUJEN5Ncjs.__commonJS.call(voi
 });
 
 // ../../node_modules/.pnpm/@babel+runtime@7.26.0/node_modules/@babel/runtime/helpers/objectDestructuringEmpty.js
-var require_objectDestructuringEmpty = _chunkDZUJEN5Ncjs.__commonJS.call(void 0, {
+var require_objectDestructuringEmpty = _chunkD4TLDLEXcjs.__commonJS.call(void 0, {
   "../../node_modules/.pnpm/@babel+runtime@7.26.0/node_modules/@babel/runtime/helpers/objectDestructuringEmpty.js"(exports, module) {
     "use strict";
     function _objectDestructuringEmpty2(t) {
@@ -53,20 +55,18 @@ var require_objectDestructuringEmpty = _chunkDZUJEN5Ncjs.__commonJS.call(void 0,
 
 // src/Json/Json.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _fa = require('react-icons/fa');
-var _hi = require('react-icons/hi');
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/index.js
-var import_extends21 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_extends());
-var import_objectWithoutPropertiesLoose11 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
+var import_extends21 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_extends());
+var import_objectWithoutPropertiesLoose11 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
 
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/store.js
-var import_extends7 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_extends());
+var import_extends7 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_extends());
 
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/store/ShowTools.js
-var import_extends = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_extends());
+var import_extends = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_extends());
 
 var _jsxruntime = require('react/jsx-runtime');
 var initialState = {};
@@ -101,7 +101,7 @@ var ShowTools = (_ref) => {
 ShowTools.displayName = "JVR.ShowTools";
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/store/Expands.js
-var import_extends2 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_extends());
+var import_extends2 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_extends());
 
 
 var initialState2 = {};
@@ -136,7 +136,7 @@ var Expands = (_ref) => {
 Expands.displayName = "JVR.Expands";
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/store/Types.js
-var import_extends3 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_extends());
+var import_extends3 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_extends());
 
 
 var initialState3 = {
@@ -291,12 +291,12 @@ function Types(_ref) {
 Types.displayName = "JVR.Types";
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/store/Symbols.js
-var import_extends5 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_extends());
+var import_extends5 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_extends());
 
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/arrow/TriangleArrow.js
-var import_extends4 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_extends());
-var import_objectWithoutPropertiesLoose = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
+var import_extends4 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_extends());
+var import_objectWithoutPropertiesLoose = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
 
 
 var _excluded = ["style"];
@@ -425,7 +425,7 @@ var Symbols = (_ref) => {
 Symbols.displayName = "JVR.Symbols";
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/store/Section.js
-var import_extends6 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_extends());
+var import_extends6 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_extends());
 
 
 var initialState5 = {
@@ -565,14 +565,14 @@ var Provider = (_ref) => {
 Provider.displayName = "JVR.Provider";
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/Container.js
-var import_extends20 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_extends());
-var import_objectWithoutPropertiesLoose10 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
+var import_extends20 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_extends());
+var import_objectWithoutPropertiesLoose10 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
 
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/symbol/index.js
-var import_objectDestructuringEmpty = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_objectDestructuringEmpty());
-var import_extends8 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_extends());
-var import_objectWithoutPropertiesLoose2 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
+var import_objectDestructuringEmpty = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_objectDestructuringEmpty());
+var import_extends8 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_extends());
+var import_objectWithoutPropertiesLoose2 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
 
 var _excluded2 = ["isNumber", "value", "parentValue", "keyName", "keys"];
 var _excluded22 = ["as", "render"];
@@ -814,18 +814,18 @@ var NestedClose = (props) => {
 NestedClose.displayName = "JVR.NestedClose";
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/comps/NestedOpen.js
-var import_extends19 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_extends());
+var import_extends19 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_extends());
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/comps/KeyValues.js
-var import_extends15 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_extends());
+var import_extends15 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_extends());
 
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/comps/Value.js
-var import_extends10 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_extends());
+var import_extends10 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_extends());
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/types/index.js
-var import_extends9 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_extends());
-var import_objectWithoutPropertiesLoose3 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
+var import_extends9 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_extends());
+var import_objectWithoutPropertiesLoose3 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
 
 
 var _excluded10 = ["as", "render"];
@@ -1443,11 +1443,11 @@ var Value = (props) => {
 Value.displayName = "JVR.Value";
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/section/KeyName.js
-var import_extends12 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_extends());
-var import_objectWithoutPropertiesLoose4 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
+var import_extends12 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_extends());
+var import_objectWithoutPropertiesLoose4 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/utils/useRender.js
-var import_extends11 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_extends());
+var import_extends11 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_extends());
 
 function useSymbolsRender(currentProps, props, key) {
   var dispatch = useSymbolsDispatch();
@@ -1534,8 +1534,8 @@ var KeyNameComp = (props) => {
 KeyNameComp.displayName = "JVR.KeyNameComp";
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/section/Row.js
-var import_extends13 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_extends());
-var import_objectWithoutPropertiesLoose5 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
+var import_extends13 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_extends());
+var import_objectWithoutPropertiesLoose5 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
 
 var _excluded15 = ["children", "value", "parentValue", "keyName", "keys"];
 var _excluded24 = ["as", "render", "children"];
@@ -1628,8 +1628,8 @@ function useHighlight(_ref) {
 }
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/comps/Copied.js
-var import_extends14 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_extends());
-var import_objectWithoutPropertiesLoose6 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
+var import_extends14 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_extends());
+var import_objectWithoutPropertiesLoose6 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
 
 
 var _excluded16 = ["keyName", "value", "parentValue", "expandKey", "keys"];
@@ -1913,8 +1913,8 @@ var KeyValuesItem = (props) => {
 KeyValuesItem.displayName = "JVR.KeyValuesItem";
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/section/CountInfoExtra.js
-var import_extends16 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_extends());
-var import_objectWithoutPropertiesLoose7 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
+var import_extends16 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_extends());
+var import_objectWithoutPropertiesLoose7 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
 
 var _excluded17 = ["value", "keyName"];
 var _excluded26 = ["as", "render"];
@@ -1952,8 +1952,8 @@ var CountInfoExtraComps = (props) => {
 CountInfoExtraComps.displayName = "JVR.CountInfoExtraComps";
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/section/CountInfo.js
-var import_extends17 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_extends());
-var import_objectWithoutPropertiesLoose8 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
+var import_extends17 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_extends());
+var import_objectWithoutPropertiesLoose8 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
 
 var _excluded18 = ["value", "keyName"];
 var _excluded27 = ["as", "render"];
@@ -2001,8 +2001,8 @@ var CountInfoComp = (props) => {
 CountInfoComp.displayName = "JVR.CountInfoComp";
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/section/Ellipsis.js
-var import_extends18 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_extends());
-var import_objectWithoutPropertiesLoose9 = _chunkDZUJEN5Ncjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
+var import_extends18 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_extends());
+var import_objectWithoutPropertiesLoose9 = _chunkD4TLDLEXcjs.__toESM.call(void 0, require_objectWithoutPropertiesLoose());
 
 var _excluded19 = ["as", "render"];
 var Ellipsis = (props) => {
@@ -2564,118 +2564,202 @@ var vscodeTheme = {
 var _nextthemes = require('next-themes');
 var _pixelutils = require('@fuf-stack/pixel-utils');
 
+// src/Json/jsonParser.ts
+var JsonParseError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "JsonParseError";
+  }
+};
 var getValue = (value) => {
   if (typeof value === "string") {
-    return JSON.parse(value);
+    try {
+      return JSON.parse(value);
+    } catch (error) {
+      throw new JsonParseError(
+        `Invalid JSON string: ${error.message}`
+      );
+    }
+  }
+  if (value === null || value === void 0) {
+    throw new JsonParseError("Value cannot be null or undefined");
   }
   if (typeof value === "object") {
     return value;
   }
-  throw new Error(`${typeof value} can not be visualized`);
+  throw new JsonParseError(`${typeof value} cannot be visualized`);
+};
+
+// src/Json/subcomponents/CopiedRenderer.tsx
+var _hi = require('react-icons/hi');
+
+
+var CopiedRenderer = () => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    esm_default.Copied,
+    {
+      render: (props) => {
+        const { style, onClick, className } = props;
+        const isCopied = props["data-copied"];
+        const elmClasses = _pixelutils.cn.call(void 0, 
+          className,
+          "absolute -right-4 -top-[2px] h-4 w-4 !fill-transparent pl-1",
+          { "text-success": isCopied }
+        );
+        const handleKeyDown = (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            onClick == null ? void 0 : onClick(e);
+          }
+        };
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "span",
+          {
+            className: "relative !ml-0 !h-[1em] !w-0",
+            style,
+            "data-testid": "copy-button",
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: handleKeyDown,
+            onClick: (e) => onClick == null ? void 0 : onClick(e),
+            "aria-label": isCopied ? "Copied to clipboard" : "Copy to clipboard",
+            children: isCopied ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _hi.HiOutlineClipboardCheck, { className: elmClasses }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _hi.HiOutlineClipboard, { className: elmClasses })
+          }
+        );
+      }
+    }
+  );
 };
-var Json = ({ className = null, collapsed = false, value }) => {
+var CopiedRenderer_default = CopiedRenderer;
+
+// src/Json/subcomponents/ErrorRenderer.tsx
+var _fa = require('react-icons/fa');
+
+var ErrorRenderer = ({
+  error,
+  data,
+  showDetails,
+  onToggleDetails
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: "mb-4 flex flex-col items-center rounded-lg border border-danger bg-danger-50 p-4 text-sm text-danger",
+      role: "alert",
+      "aria-live": "polite",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full justify-between gap-6", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaTimesCircle, { className: "mr-2", "aria-hidden": "true" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium", children: "Failed to parse JSON data" })
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunk7TIFKRWYcjs.Button_default,
+            {
+              color: "danger",
+              size: "sm",
+              variant: "light",
+              onClick: onToggleDetails,
+              "aria-expanded": showDetails,
+              "aria-controls": "error-details",
+              children: showDetails ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaChevronUp, { "aria-hidden": "true" }),
+                " Hide Details"
+              ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaChevronDown, { "aria-hidden": "true" }),
+                " Show Details"
+              ] })
+            }
+          )
+        ] }),
+        showDetails && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { id: "error-details", className: "mt-4 w-full text-left", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: "Error:" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "pre", { children: error instanceof Error ? `${error.name}: ${error.message}` : "Unknown error" })
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-4", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: "Data:" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "pre", { children: typeof data !== "string" ? JSON.stringify(data, null, 2) : data })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var ErrorRenderer_default = ErrorRenderer;
+
+// src/Json/subcomponents/NullRenderer.tsx
+
+var NullRenderer = () => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    esm_default.Null,
+    {
+      render: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rounded bg-warning-100 px-1 text-xs text-warning-700", children: "null" })
+    }
+  );
+};
+var NullRenderer_default = NullRenderer;
+
+// src/Json/Json.tsx
+
+var Json = ({
+  className = void 0,
+  collapsed = false,
+  value,
+  maxHeight = void 0,
+  onCopy = void 0,
+  errorRenderer = void 0
+}) => {
   const [showDetails, setShowDetails] = _react.useState.call(void 0, false);
   const { resolvedTheme } = _nextthemes.useTheme.call(void 0, );
-  const isDarkMode = resolvedTheme === "dark" || document.body.classList.contains("dark");
+  const isDarkMode = _react.useMemo.call(void 0, 
+    () => resolvedTheme === "dark" || document.body.classList.contains("dark"),
+    [resolvedTheme]
+  );
+  const handleCopy = (event) => {
+    const copiedValue = event.currentTarget.textContent || "";
+    onCopy == null ? void 0 : onCopy(copiedValue);
+  };
   let content = null;
   let error = null;
   try {
+    const parsedValue = getValue(value);
     content = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      esm_default,
+      "div",
       {
-        className: "pr-5",
-        collapsed,
-        displayDataTypes: false,
-        style: {
-          ...isDarkMode ? vscodeTheme : lightTheme,
-          backgroundColor: "unset"
-        },
-        value: getValue(value),
-        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          esm_default.Copied,
+        style: { maxHeight, overflowY: maxHeight ? "auto" : void 0 },
+        className: "relative",
+        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          esm_default,
           {
-            render: ({
-              // @ts-expect-error this should be fine
-              "data-copied": copied,
-              style,
-              ...elmProps
-            }) => {
-              const elmClasses = _pixelutils.cn.call(void 0, 
-                elmProps.className,
-                "absolute -right-4 -top-[2px] h-4 w-4 !fill-transparent pl-1",
-                { "text-success": copied }
-              );
-              return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                "span",
-                {
-                  className: "relative !ml-0 !h-[1em] !w-0",
-                  style,
-                  "data-testid": "copy-button",
-                  children: copied ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _hi.HiOutlineClipboardCheck,
-                    {
-                      ...elmProps,
-                      className: elmClasses
-                    }
-                  ) : (
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _hi.HiOutlineClipboard, { ...elmProps, className: elmClasses })
-                  )
-                }
-              );
-            }
+            className: "pr-5",
+            collapsed,
+            displayDataTypes: false,
+            style: _chunkD4TLDLEXcjs.__spreadProps.call(void 0, _chunkD4TLDLEXcjs.__spreadValues.call(void 0, {}, isDarkMode ? vscodeTheme : lightTheme), {
+              backgroundColor: "unset"
+            }),
+            value: parsedValue,
+            onCopy: handleCopy,
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CopiedRenderer_default, {}),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NullRenderer_default, {})
+            ]
           }
         )
       }
     );
   } catch (err) {
-    error = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      "div",
+    const defaultError = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      ErrorRenderer_default,
       {
-        className: "mb-4 flex flex-col items-center rounded-lg border border-danger bg-danger-50 p-4 text-sm text-danger",
-        role: "alert",
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full justify-between gap-6", children: [
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center", children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaTimesCircle, { className: "mr-2" }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium", children: "Failed to parse JSON data" })
-            ] }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunk7TIFKRWYcjs.Button_default,
-              {
-                color: "danger",
-                size: "sm",
-                variant: "light",
-                onClick: () => setShowDetails(!showDetails),
-                children: showDetails ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaChevronUp, {}),
-                  " Hide Details"
-                ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaChevronDown, {}),
-                  " Show Details"
-                ] })
-              }
-            )
-          ] }),
-          showDetails && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-4 w-full text-left", children: [
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: "Error:" }),
-              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "pre", { children: [
-                _optionalChain([err, 'optionalAccess', _2 => _2.name]),
-                ": ",
-                _optionalChain([err, 'optionalAccess', _3 => _3.message])
-              ] })
-            ] }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-4", children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: "Data:" }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "pre", { children: typeof value !== "string" ? JSON.stringify(value, null, 2) : value })
-            ] })
-          ] })
-        ]
+        error: err,
+        data: value,
+        showDetails,
+        onToggleDetails: () => setShowDetails(!showDetails)
       }
     );
+    error = errorRenderer ? errorRenderer(err, value) : defaultError;
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _pixelutils.cn.call(void 0, className), children: error || content });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "aria-label": "JSON viewer", className: _pixelutils.cn.call(void 0, className), role: "region", children: error || content });
 };
 var Json_default = Json;
 
@@ -2686,4 +2770,4 @@ var Json_default2 = Json_default;
 
 
 exports.Json_default = Json_default; exports.Json_default2 = Json_default2;
-//# sourceMappingURL=chunk-XFUHF75Z.cjs.map
+//# sourceMappingURL=chunk-OLKLIWBE.cjs.map