@uiw/react-json-view 2.0.0-alpha.3 → 2.0.0-alpha.31

package/cjs/store/Types.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Types = void 0;
+exports.Types = Types;
 exports.useTypes = useTypes;
 exports.useTypesDispatch = useTypesDispatch;
 exports.useTypesStore = void 0;
@@ -50,7 +50,8 @@ var initialState = {
   },
   Map: {
     style: {
-      color: 'var(--w-rjv-type-map-color, #268bd2)'
+      color: 'var(--w-rjv-type-map-color, #268bd2)',
+      marginRight: 3
     },
     as: 'span',
     'data-type': 'map',
@@ -86,7 +87,8 @@ var initialState = {
   },
   Set: {
     style: {
-      color: 'var(--w-rjv-type-set-color, #268bd2)'
+      color: 'var(--w-rjv-type-set-color, #268bd2)',
+      marginRight: 3
     },
     as: 'span',
     'data-type': 'set',
@@ -134,10 +136,9 @@ var Context = /*#__PURE__*/(0, _react.createContext)(initialState);
 var reducer = function reducer(state, action) {
   return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), action);
 };
-var useTypesStore = function useTypesStore() {
+var useTypesStore = exports.useTypesStore = function useTypesStore() {
   return (0, _react.useContext)(Context);
 };
-exports.useTypesStore = useTypesStore;
 var DispatchTypes = /*#__PURE__*/(0, _react.createContext)(function () {});
 DispatchTypes.displayName = 'JVR.DispatchTypes';
 function useTypes() {
@@ -146,7 +147,7 @@ function useTypes() {
 function useTypesDispatch() {
   return (0, _react.useContext)(DispatchTypes);
 }
-var Types = function Types(_ref) {
+function Types(_ref) {
   var initial = _ref.initial,
     dispatch = _ref.dispatch,
     children = _ref.children;
@@ -157,6 +158,5 @@ var Types = function Types(_ref) {
       children: children
     })
   });
-};
-exports.Types = Types;
+}
 Types.displayName = 'JVR.Types';

package/cjs/store.d.ts

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { JsonViewProps } from './';
-import { type InitialTypesState } from './store/Types';
+import { type InitialTypesState, type TagType } from './store/Types';
 export type BlockTagType = keyof JSX.IntrinsicElements;
 export interface InitialState<T extends object> {
     value?: object;
@@ -9,9 +9,11 @@ export interface InitialState<T extends object> {
     objectSortKeys?: JsonViewProps<T>['objectSortKeys'];
     displayObjectSize?: JsonViewProps<T>['displayObjectSize'];
     shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
+    stringEllipsis?: JsonViewProps<T>['stringEllipsis'];
     enableClipboard?: JsonViewProps<T>['enableClipboard'];
     highlightUpdates?: JsonViewProps<T>['highlightUpdates'];
     collapsed?: JsonViewProps<T>['collapsed'];
+    shouldExpandNodeInitially?: JsonViewProps<T>['shouldExpandNodeInitially'];
     indentWidth?: number;
 }
 export declare const initialState: InitialState<object>;
@@ -20,10 +22,13 @@ export declare const Context: React.Context<InitialState<object>>;
 export declare function reducer(state: InitialState<object>, action: InitialState<object>): InitialState<object>;
 export declare const useStore: () => InitialState<object>;
 export declare const useDispatchStore: () => Dispatch;
-export interface ProviderProps {
+export interface ProviderProps<T extends TagType> {
     initialState?: InitialState<object>;
-    initialTypes?: InitialTypesState;
+    initialTypes?: InitialTypesState<T>;
 }
-export declare const Provider: React.FC<PropsWithChildren<ProviderProps>>;
+export declare const Provider: {
+    <T extends TagType>({ children, initialState: init, initialTypes, }: PropsWithChildren<ProviderProps<T>>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export declare function useDispatch(): Dispatch;
 export {};

package/cjs/store.js

@@ -18,28 +18,24 @@ var _Types = require("./store/Types");
 var _Symbols = require("./store/Symbols");
 var _Section = require("./store/Section");
 var _jsxRuntime = require("react/jsx-runtime");
-var initialState = {
+var initialState = exports.initialState = {
   objectSortKeys: false,
   indentWidth: 15
 };
-exports.initialState = initialState;
-var Context = /*#__PURE__*/(0, _react.createContext)(initialState);
-exports.Context = Context;
+var Context = exports.Context = /*#__PURE__*/(0, _react.createContext)(initialState);
 Context.displayName = 'JVR.Context';
 var DispatchContext = /*#__PURE__*/(0, _react.createContext)(function () {});
 DispatchContext.displayName = 'JVR.DispatchContext';
 function reducer(state, action) {
   return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), action);
 }
-var useStore = function useStore() {
+var useStore = exports.useStore = function useStore() {
   return (0, _react.useContext)(Context);
 };
-exports.useStore = useStore;
-var useDispatchStore = function useDispatchStore() {
+var useDispatchStore = exports.useDispatchStore = function useDispatchStore() {
   return (0, _react.useContext)(DispatchContext);
 };
-exports.useDispatchStore = useDispatchStore;
-var Provider = function Provider(_ref) {
+var Provider = exports.Provider = function Provider(_ref) {
   var children = _ref.children,
     init = _ref.initialState,
     initialTypes = _ref.initialTypes;
@@ -98,7 +94,6 @@ var Provider = function Provider(_ref) {
     })
   });
 };
-exports.Provider = Provider;
 function useDispatch() {
   return (0, _react.useContext)(DispatchContext);
 }

package/cjs/symbol/Arrow.d.ts

@@ -1,6 +1,6 @@
 import { type SymbolsElement } from '../store/Symbols';
 import { type TagType } from '../store/Types';
 export declare const Arrow: {
-    (props: SymbolsElement<TagType>): null;
+    <K extends TagType = "span">(props: SymbolsElement<K>): null;
     displayName: string;
 };

package/cjs/symbol/Arrow.js

@@ -6,12 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.Arrow = void 0;
 var _Symbols = require("../store/Symbols");
 var _useRender = require("../utils/useRender");
-var Arrow = function Arrow(props) {
+var Arrow = exports.Arrow = function Arrow(props) {
   var _useSymbolsStore = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore$Arro = _useSymbolsStore.Arrow,
     Comp = _useSymbolsStore$Arro === void 0 ? {} : _useSymbolsStore$Arro;
   (0, _useRender.useSymbolsRender)(Comp, props, 'Arrow');
   return null;
 };
-exports.Arrow = Arrow;
 Arrow.displayName = 'JVR.Arrow';

package/cjs/symbol/BraceLeft.d.ts

@@ -1,6 +1,6 @@
 import { type SymbolsElement } from '../store/Symbols';
 import { type TagType } from '../store/Types';
 export declare const BraceLeft: {
-    (props: SymbolsElement<TagType>): null;
+    <K extends TagType = "span">(props: SymbolsElement<K>): null;
     displayName: string;
 };

package/cjs/symbol/BraceLeft.js

@@ -6,12 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.BraceLeft = void 0;
 var _Symbols = require("../store/Symbols");
 var _useRender = require("../utils/useRender");
-var BraceLeft = function BraceLeft(props) {
+var BraceLeft = exports.BraceLeft = function BraceLeft(props) {
   var _useSymbolsStore = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore$Brac = _useSymbolsStore.BraceLeft,
     Comp = _useSymbolsStore$Brac === void 0 ? {} : _useSymbolsStore$Brac;
   (0, _useRender.useSymbolsRender)(Comp, props, 'BraceLeft');
   return null;
 };
-exports.BraceLeft = BraceLeft;
 BraceLeft.displayName = 'JVR.BraceLeft';

package/cjs/symbol/BraceRight.d.ts

@@ -1,6 +1,6 @@
 import { type SymbolsElement } from '../store/Symbols';
 import { type TagType } from '../store/Types';
 export declare const BraceRight: {
-    (props: SymbolsElement<TagType>): null;
+    <K extends TagType = "span">(props: SymbolsElement<K>): null;
     displayName: string;
 };

package/cjs/symbol/BraceRight.js

@@ -6,12 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.BraceRight = void 0;
 var _Symbols = require("../store/Symbols");
 var _useRender = require("../utils/useRender");
-var BraceRight = function BraceRight(props) {
+var BraceRight = exports.BraceRight = function BraceRight(props) {
   var _useSymbolsStore = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore$Brac = _useSymbolsStore.BraceRight,
     Comp = _useSymbolsStore$Brac === void 0 ? {} : _useSymbolsStore$Brac;
   (0, _useRender.useSymbolsRender)(Comp, props, 'BraceRight');
   return null;
 };
-exports.BraceRight = BraceRight;
 BraceRight.displayName = 'JVR.BraceRight';

package/cjs/symbol/BracketsLeft.d.ts

@@ -1,6 +1,6 @@
 import { type SymbolsElement } from '../store/Symbols';
 import { type TagType } from '../store/Types';
 export declare const BracketsLeft: {
-    (props: SymbolsElement<TagType>): null;
+    <K extends TagType = "span">(props: SymbolsElement<K>): null;
     displayName: string;
 };

package/cjs/symbol/BracketsLeft.js

@@ -6,12 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.BracketsLeft = void 0;
 var _Symbols = require("../store/Symbols");
 var _useRender = require("../utils/useRender");
-var BracketsLeft = function BracketsLeft(props) {
+var BracketsLeft = exports.BracketsLeft = function BracketsLeft(props) {
   var _useSymbolsStore = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore$Brac = _useSymbolsStore.BracketsLeft,
     Comp = _useSymbolsStore$Brac === void 0 ? {} : _useSymbolsStore$Brac;
   (0, _useRender.useSymbolsRender)(Comp, props, 'BracketsLeft');
   return null;
 };
-exports.BracketsLeft = BracketsLeft;
 BracketsLeft.displayName = 'JVR.BracketsLeft';

package/cjs/symbol/BracketsRight.d.ts

@@ -1,6 +1,6 @@
 import { type SymbolsElement } from '../store/Symbols';
 import { type TagType } from '../store/Types';
 export declare const BracketsRight: {
-    (props: SymbolsElement<TagType>): null;
+    <K extends TagType = "span">(props: SymbolsElement<K>): null;
     displayName: string;
 };

package/cjs/symbol/BracketsRight.js

@@ -6,12 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.BracketsRight = void 0;
 var _Symbols = require("../store/Symbols");
 var _useRender = require("../utils/useRender");
-var BracketsRight = function BracketsRight(props) {
+var BracketsRight = exports.BracketsRight = function BracketsRight(props) {
   var _useSymbolsStore = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore$Brac = _useSymbolsStore.BracketsRight,
     Comp = _useSymbolsStore$Brac === void 0 ? {} : _useSymbolsStore$Brac;
   (0, _useRender.useSymbolsRender)(Comp, props, 'BracketsRight');
   return null;
 };
-exports.BracketsRight = BracketsRight;
 BracketsRight.displayName = 'JVR.BracketsRight';

package/cjs/symbol/Colon.d.ts

@@ -1,6 +1,6 @@
 import { type SymbolsElement } from '../store/Symbols';
 import { type TagType } from '../store/Types';
 export declare const Colon: {
-    (props: SymbolsElement<TagType>): null;
+    <K extends TagType = "span">(props: SymbolsElement<K>): null;
     displayName: string;
 };

package/cjs/symbol/Colon.js

@@ -6,12 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.Colon = void 0;
 var _Symbols = require("../store/Symbols");
 var _useRender = require("../utils/useRender");
-var Colon = function Colon(props) {
+var Colon = exports.Colon = function Colon(props) {
   var _useSymbolsStore = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore$Colo = _useSymbolsStore.Colon,
     Comp = _useSymbolsStore$Colo === void 0 ? {} : _useSymbolsStore$Colo;
   (0, _useRender.useSymbolsRender)(Comp, props, 'Colon');
   return null;
 };
-exports.Colon = Colon;
 Colon.displayName = 'JVR.Colon';

package/cjs/symbol/Quote.d.ts

@@ -1,6 +1,6 @@
 import { type SymbolsElement } from '../store/Symbols';
 import { type TagType } from '../store/Types';
 export declare const Quote: {
-    (props: SymbolsElement<TagType>): null;
+    <K extends TagType = "span">(props: SymbolsElement<K>): null;
     displayName: string;
 };

package/cjs/symbol/Quote.js

@@ -6,12 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.Quote = void 0;
 var _Symbols = require("../store/Symbols");
 var _useRender = require("../utils/useRender");
-var Quote = function Quote(props) {
+var Quote = exports.Quote = function Quote(props) {
   var _useSymbolsStore = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore$Quot = _useSymbolsStore.Quote,
     Comp = _useSymbolsStore$Quot === void 0 ? {} : _useSymbolsStore$Quot;
   (0, _useRender.useSymbolsRender)(Comp, props, 'Quote');
   return null;
 };
-exports.Quote = Quote;
 Quote.displayName = 'JVR.Quote';

package/cjs/symbol/ValueQuote.d.ts

@@ -1,6 +1,6 @@
 import { type SymbolsElement } from '../store/Symbols';
 import { type TagType } from '../store/Types';
 export declare const ValueQuote: {
-    (props: SymbolsElement<TagType>): null;
+    <K extends TagType = "span">(props: SymbolsElement<K>): null;
     displayName: string;
 };

package/cjs/symbol/ValueQuote.js

@@ -6,12 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.ValueQuote = void 0;
 var _Symbols = require("../store/Symbols");
 var _useRender = require("../utils/useRender");
-var ValueQuote = function ValueQuote(props) {
+var ValueQuote = exports.ValueQuote = function ValueQuote(props) {
   var _useSymbolsStore = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore$Valu = _useSymbolsStore.ValueQuote,
     Comp = _useSymbolsStore$Valu === void 0 ? {} : _useSymbolsStore$Valu;
   (0, _useRender.useSymbolsRender)(Comp, props, 'ValueQuote');
   return null;
 };
-exports.ValueQuote = ValueQuote;
 ValueQuote.displayName = 'JVR.ValueQuote';

package/cjs/symbol/index.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
-import { type SymbolsElement } from '../store/Symbols';
+import { type SymbolsElement, type SymbolsElementResult } from '../store/Symbols';
 import { type TagType } from '../store/Types';
 export declare const Quote: {
-    (props: {
-        isNumber?: boolean | undefined;
-    } & import("react").HTMLAttributes<HTMLElement>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    <T extends object>(props: {
+        isNumber?: boolean;
+    } & React.HTMLAttributes<HTMLElement> & SymbolsElementResult<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export declare const ValueQuote: {
@@ -12,23 +11,19 @@ export declare const ValueQuote: {
     displayName: string;
 };
 export declare const Colon: {
-    (): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    <T extends object>(props: SymbolsElementResult<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const Arrow: {
-    <T extends TagType>(props: {
-        as?: T | undefined;
-        render?: ((props: SymbolsElement<T>) => import("react").ReactNode) | undefined;
-        'data-type'?: string | undefined;
-    } & import("react").PropsWithoutRef<import("react").ComponentProps<T>> & {
+    <T extends TagType, K extends object>(props: SymbolsElement<T> & {
         expandKey: string;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    } & SymbolsElementResult<K>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const BracketsOpen: {
-    ({ isBrackets }: {
-        isBrackets?: boolean | undefined;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    <K extends object>(props: {
+        isBrackets?: boolean;
+    } & SymbolsElementResult<K>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 type BracketsCloseProps = {
@@ -36,7 +31,7 @@ type BracketsCloseProps = {
     isVisiable?: boolean;
 };
 export declare const BracketsClose: {
-    ({ isBrackets, isVisiable }: BracketsCloseProps): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    <K extends object>(props: BracketsCloseProps & SymbolsElementResult<K>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export {};

package/cjs/symbol/index.js

@@ -12,7 +12,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _Symbols = require("../store/Symbols");
 var _Expands = require("../store/Expands");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["isNumber"],
+var _excluded = ["isNumber", "value", "parentValue", "keyName", "keys"],
   _excluded2 = ["as", "render"],
   _excluded3 = ["as", "render"],
   _excluded4 = ["as", "render"],
@@ -21,11 +21,15 @@ var _excluded = ["isNumber"],
   _excluded7 = ["as", "render"],
   _excluded8 = ["as", "render"],
   _excluded9 = ["as", "render"];
-var Quote = function Quote(props) {
+var Quote = exports.Quote = function Quote(props) {
   var _useSymbolsStore = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore$Quot = _useSymbolsStore.Quote,
     Comp = _useSymbolsStore$Quot === void 0 ? {} : _useSymbolsStore$Quot;
   var isNumber = props.isNumber,
+    value = props.value,
+    parentValue = props.parentValue,
+    keyName = props.keyName,
+    keys = props.keys,
     other = (0, _objectWithoutProperties2["default"])(props, _excluded);
   if (isNumber) return null;
   var as = Comp.as,
@@ -33,13 +37,18 @@ var Quote = function Quote(props) {
     reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded2);
   var Elm = as || 'span';
   var elmProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other), reset);
-  var child = render && typeof render === 'function' && render(elmProps);
+  var result = {
+    value: value,
+    parentValue: parentValue,
+    keyName: keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
+  var child = render && typeof render === 'function' && render(elmProps, result);
   if (child) return child;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, elmProps));
 };
-exports.Quote = Quote;
 Quote.displayName = 'JVR.Quote';
-var ValueQuote = function ValueQuote(props) {
+var ValueQuote = exports.ValueQuote = function ValueQuote(props) {
   var _useSymbolsStore2 = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore2$Val = _useSymbolsStore2.ValueQuote,
     Comp = _useSymbolsStore2$Val === void 0 ? {} : _useSymbolsStore2$Val;
@@ -49,13 +58,16 @@ var ValueQuote = function ValueQuote(props) {
     reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded3);
   var Elm = as || 'span';
   var elmProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other), reset);
-  var child = render && typeof render === 'function' && render(elmProps);
+  var child = render && typeof render === 'function' && render(elmProps, {});
   if (child) return child;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, elmProps));
 };
-exports.ValueQuote = ValueQuote;
 ValueQuote.displayName = 'JVR.ValueQuote';
-var Colon = function Colon() {
+var Colon = exports.Colon = function Colon(props) {
+  var value = props.value,
+    parentValue = props.parentValue,
+    keyName = props.keyName,
+    keys = props.keys;
   var _useSymbolsStore3 = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore3$Col = _useSymbolsStore3.Colon,
     Comp = _useSymbolsStore3$Col === void 0 ? {} : _useSymbolsStore3$Col;
@@ -63,18 +75,27 @@ var Colon = function Colon() {
     render = Comp.render,
     reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded4);
   var Elm = as || 'span';
-  var child = render && typeof render === 'function' && render(reset);
+  var child = render && typeof render === 'function' && render(reset, {
+    value: value,
+    parentValue: parentValue,
+    keyName: keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  });
   if (child) return child;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, reset));
 };
-exports.Colon = Colon;
 Colon.displayName = 'JVR.Colon';
-var Arrow = function Arrow(props) {
+var Arrow = exports.Arrow = function Arrow(props) {
   var _useSymbolsStore4 = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore4$Arr = _useSymbolsStore4.Arrow,
     Comp = _useSymbolsStore4$Arr === void 0 ? {} : _useSymbolsStore4$Arr;
   var expands = (0, _Expands.useExpandsStore)();
-  var expandKey = props.expandKey;
+  var expandKey = props.expandKey,
+    resetStyle = props.style,
+    value = props.value,
+    parentValue = props.parentValue,
+    keyName = props.keyName,
+    keys = props.keys;
   var isExpanded = !!expands[expandKey];
   var as = Comp.as,
     style = Comp.style,
@@ -82,46 +103,71 @@ var Arrow = function Arrow(props) {
     reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded5);
   var Elm = as || 'span';
   var isRender = render && typeof render === 'function';
-  var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+  var elmProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     'data-expanded': isExpanded,
-    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), props.style)
-  }));
+    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), resetStyle)
+  });
+  var result = {
+    value: value,
+    parentValue: parentValue,
+    keyName: keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
+  var child = isRender && render(elmProps, result);
   if (child) return child;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), props.style)
+    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), resetStyle)
   }));
 };
-exports.Arrow = Arrow;
 Arrow.displayName = 'JVR.Arrow';
-var BracketsOpen = function BracketsOpen(_ref) {
-  var isBrackets = _ref.isBrackets;
+var BracketsOpen = exports.BracketsOpen = function BracketsOpen(props) {
+  var isBrackets = props.isBrackets,
+    value = props.value,
+    parentValue = props.parentValue,
+    keyName = props.keyName,
+    keys = props.keys;
   var _useSymbolsStore5 = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore5$Bra = _useSymbolsStore5.BracketsLeft,
     BracketsLeft = _useSymbolsStore5$Bra === void 0 ? {} : _useSymbolsStore5$Bra,
     _useSymbolsStore5$Bra2 = _useSymbolsStore5.BraceLeft,
     BraceLeft = _useSymbolsStore5$Bra2 === void 0 ? {} : _useSymbolsStore5$Bra2;
+  var result = {
+    value: value,
+    parentValue: parentValue,
+    keyName: keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
   if (isBrackets) {
     var as = BracketsLeft.as,
       _render = BracketsLeft.render,
       reset = (0, _objectWithoutProperties2["default"])(BracketsLeft, _excluded6);
     var BracketsLeftComp = as || 'span';
-    var _child = _render && typeof _render === 'function' && _render(reset);
+    var _child = _render && typeof _render === 'function' && _render(reset, result);
     if (_child) return _child;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(BracketsLeftComp, (0, _objectSpread2["default"])({}, reset));
   }
   var elm = BraceLeft.as,
     render = BraceLeft.render,
-    props = (0, _objectWithoutProperties2["default"])(BraceLeft, _excluded7);
+    resetProps = (0, _objectWithoutProperties2["default"])(BraceLeft, _excluded7);
   var BraceLeftComp = elm || 'span';
-  var child = render && typeof render === 'function' && render(props);
+  var child = render && typeof render === 'function' && render(resetProps, result);
   if (child) return child;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BraceLeftComp, (0, _objectSpread2["default"])({}, props));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BraceLeftComp, (0, _objectSpread2["default"])({}, resetProps));
 };
-exports.BracketsOpen = BracketsOpen;
 BracketsOpen.displayName = 'JVR.BracketsOpen';
-var BracketsClose = function BracketsClose(_ref2) {
-  var isBrackets = _ref2.isBrackets,
-    isVisiable = _ref2.isVisiable;
+var BracketsClose = exports.BracketsClose = function BracketsClose(props) {
+  var isBrackets = props.isBrackets,
+    isVisiable = props.isVisiable,
+    value = props.value,
+    parentValue = props.parentValue,
+    keyName = props.keyName,
+    keys = props.keys;
+  var result = {
+    value: value,
+    parentValue: parentValue,
+    keyName: keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
   if (!isVisiable) return null;
   var _useSymbolsStore6 = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore6$Bra = _useSymbolsStore6.BracketsRight,
@@ -133,7 +179,7 @@ var BracketsClose = function BracketsClose(_ref2) {
       _render2 = BracketsRight.render,
       _reset = (0, _objectWithoutProperties2["default"])(BracketsRight, _excluded8);
     var BracketsRightComp = as || 'span';
-    var _child2 = _render2 && typeof _render2 === 'function' && _render2(_reset);
+    var _child2 = _render2 && typeof _render2 === 'function' && _render2(_reset, result);
     if (_child2) return _child2;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(BracketsRightComp, (0, _objectSpread2["default"])({}, _reset));
   }
@@ -141,9 +187,8 @@ var BracketsClose = function BracketsClose(_ref2) {
     render = BraceRight.render,
     reset = (0, _objectWithoutProperties2["default"])(BraceRight, _excluded9);
   var BraceRightComp = elm || 'span';
-  var child = render && typeof render === 'function' && render(reset);
+  var child = render && typeof render === 'function' && render(reset, result);
   if (child) return child;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(BraceRightComp, (0, _objectSpread2["default"])({}, reset));
 };
-exports.BracketsClose = BracketsClose;
 BracketsClose.displayName = 'JVR.BracketsClose';

package/cjs/theme/basic.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const basicTheme: import("react").CSSProperties;
+export declare const basicTheme: React.CSSProperties;

package/cjs/theme/basic.js

@@ -4,9 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.basicTheme = void 0;
-var basicTheme = {
+var basicTheme = exports.basicTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#b5bd68',
+  '--w-rjv-key-number': '#002b36',
   '--w-rjv-key-string': '#b5bd68',
   '--w-rjv-background-color': '#2E3235',
   '--w-rjv-line-color': '#292d30',
@@ -19,6 +20,7 @@ var basicTheme = {
   '--w-rjv-curlybraces-color': '#cc99cc',
   '--w-rjv-colon-color': '#bababa',
   '--w-rjv-brackets-color': '#808080',
+  '--w-rjv-ellipsis-color': '#cb4b16',
   '--w-rjv-quotes-color': 'var(--w-rjv-key-string)',
   '--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)',
   '--w-rjv-type-string-color': '#b5bd68',
@@ -31,5 +33,4 @@ var basicTheme = {
   '--w-rjv-type-null-color': '#8abeb7',
   '--w-rjv-type-nan-color': '#8abeb7',
   '--w-rjv-type-undefined-color': '#8abeb7'
-};
-exports.basicTheme = basicTheme;
+};

package/cjs/theme/dark.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const darkTheme: import("react").CSSProperties;
+export declare const darkTheme: React.CSSProperties;

package/cjs/theme/dark.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.darkTheme = void 0;
-var darkTheme = {
+var darkTheme = exports.darkTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#0184a6',
   '--w-rjv-key-string': '#0184a6',
@@ -30,5 +30,4 @@ var darkTheme = {
   '--w-rjv-type-null-color': '#d33682',
   '--w-rjv-type-nan-color': '#076678',
   '--w-rjv-type-undefined-color': '#586e75'
-};
-exports.darkTheme = darkTheme;
+};

package/cjs/theme/github.dark.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const githubDarkTheme: import("react").CSSProperties;
+export declare const githubDarkTheme: React.CSSProperties;