@fuf-stack/pixels 0.29.3 → 0.31.0

package/dist/{chunk-OP6ST4KB.cjs → chunk-7XJHVFT3.cjs}

@@ -1,7 +1,11 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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});
 
 var _chunkHVLEV6BGcjs = require('./chunk-HVLEV6BG.cjs');
 
+
+
+var _chunkD4TLDLEXcjs = require('./chunk-D4TLDLEX.cjs');
+
 // src/AvatarGroup/AvatarGroup.tsx
 var _avatar = require('@nextui-org/avatar');
 var _jsxruntime = require('react/jsx-runtime');
@@ -24,32 +28,30 @@ var AvatarGroup = ({
       isDisabled: disabled,
       radius: rounded,
       size,
-      children: _optionalChain([avatars, 'optionalAccess', _ => _.map, 'call', _2 => _2((avatar) => {
+      children: avatars == null ? void 0 : avatars.map((avatar) => {
         return AvatarWrapper ? (
           // eslint-disable-next-line react/jsx-props-no-spreading
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AvatarWrapper, { ...avatar.wrapperProps, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AvatarWrapper, _chunkD4TLDLEXcjs.__spreadProps.call(void 0, _chunkD4TLDLEXcjs.__spreadValues.call(void 0, {}, avatar.wrapperProps), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _chunkHVLEV6BGcjs.Avatar_default,
-            {
-              ...avatar,
-              disabled: disabled || _optionalChain([avatar, 'optionalAccess', _3 => _3.disabled]),
+            _chunkD4TLDLEXcjs.__spreadProps.call(void 0, _chunkD4TLDLEXcjs.__spreadValues.call(void 0, {}, avatar), {
+              disabled: disabled || (avatar == null ? void 0 : avatar.disabled),
               rounded,
               bordered,
               size
-            },
+            }),
             avatar.src
-          ) })
+          ) }))
         ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           _chunkHVLEV6BGcjs.Avatar_default,
-          {
-            ...avatar,
-            disabled: disabled || _optionalChain([avatar, 'optionalAccess', _4 => _4.disabled]),
+          _chunkD4TLDLEXcjs.__spreadProps.call(void 0, _chunkD4TLDLEXcjs.__spreadValues.call(void 0, {}, avatar), {
+            disabled: disabled || (avatar == null ? void 0 : avatar.disabled),
             rounded,
             bordered,
             size
-          },
+          }),
           avatar.src
         );
-      })])
+      })
     }
   );
 };
@@ -62,4 +64,4 @@ var AvatarGroup_default2 = AvatarGroup_default;
 
 
 exports.AvatarGroup_default = AvatarGroup_default; exports.AvatarGroup_default2 = AvatarGroup_default2;
-//# sourceMappingURL=chunk-OP6ST4KB.cjs.map
+//# sourceMappingURL=chunk-7XJHVFT3.cjs.map

package/dist/chunk-7XJHVFT3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-7XJHVFT3.cjs","../src/AvatarGroup/AvatarGroup.tsx","../src/AvatarGroup/index.ts"],"names":["AvatarGroup_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACA;ACLA,4CAA+C;AAoDnC,+CAAA;AAvBZ,IAAM,YAAA,EAAc,CAAC;AAAA,EACnB,SAAA,EAAW,KAAA;AAAA,EACX,QAAA,EAAU,MAAA;AAAA,EACV,UAAA,EAAY,EAAA;AAAA,EACZ,SAAA,EAAW,KAAA;AAAA,EACX,KAAA,EAAO,IAAA;AAAA,EACP,QAAA,EAAU,CAAC,CAAA;AAAA,EACX,IAAA,EAAM,CAAA;AAAA,EACN,aAAA,EAAe,cAAA,EAAgB,KAAA;AACjC,CAAA,EAAA,GAAwB;AACtB,EAAA,uBACE,6BAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,EAAY,QAAA;AAAA,MACZ,UAAA,EAAY,QAAA;AAAA,MACZ,MAAA,EAAQ,OAAA;AAAA,MACR,IAAA;AAAA,MAEC,QAAA,EAAA,QAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,OAAA,CAAS,GAAA,CAAI,CAAC,MAAA,EAAA,GAAW;AACxB,QAAA,OAAO,cAAA,EAAA;AAAA;AAAA,0BAEL,6BAAA,aAAC,EAAA,6CAAA,8CAAA,CAAA,CAAA,EAAkB,MAAA,CAAO,YAAA,CAAA,EAAzB,EACC,QAAA,kBAAA,6BAAA;AAAA,YAAC,gCAAA;AAAA,YAAA,6CAAA,8CAAA,CAAA,CAAA,EAGK,MAAA,CAAA,EAHL;AAAA,cAIC,QAAA,EAAU,SAAA,GAAA,CAAY,OAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,MAAA,CAAQ,QAAA,CAAA;AAAA,cAC9B,OAAA;AAAA,cACA,QAAA;AAAA,cACA;AAAA,YAAA,CAAA,CAAA;AAAA,YANK,MAAA,CAAO;AAAA,UAOd,EAAA,CAAA,CACF;AAAA,QAAA,EAAA,kBAEA,6BAAA;AAAA,UAAC,gCAAA;AAAA,UAAA,6CAAA,8CAAA,CAAA,CAAA,EAGK,MAAA,CAAA,EAHL;AAAA,YAIC,QAAA,EAAU,SAAA,GAAA,CAAY,OAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,MAAA,CAAQ,QAAA,CAAA;AAAA,YAC9B,OAAA;AAAA,YACA,QAAA;AAAA,YACA;AAAA,UAAA,CAAA,CAAA;AAAA,UANK,MAAA,CAAO;AAAA,QAOd,CAAA;AAAA,MAEJ,CAAA;AAAA,IAAA;AAAA,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,oBAAA,EAAQ,WAAA;ADvBf;AACA;AErDA,IAAOA,qBAAAA,EAAQ,mBAAA;AFuDf;AACA;AACE;AACA;AACF,uGAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-7XJHVFT3.cjs","sourcesContent":[null,"import type { JSX } from 'react';\nimport type { AvatarProps } from '../Avatar/Avatar';\n\nimport { AvatarGroup as NextAvatarGroup } from '@nextui-org/avatar';\n\nimport { Avatar } from '../Avatar';\n\nexport interface AvatarGroupProps {\n  /* Display a border ring around the Avatar */\n  bordered?: boolean;\n  /* Roundness of the border around the Avatar */\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n  /** CSS class name */\n  className?: string;\n  /* Disables the Avatar */\n  disabled?: boolean;\n  /* Size of the Avatar */\n  size?: 'sm' | 'md' | 'lg';\n  /* Maximum number of avatars to display before +X is displayed */\n  max?: number;\n  /* Array of avatarProps */\n  avatars?: (Omit<AvatarProps, 'size' | 'rounded' | 'bordered'> & {\n    /* Custom wrapperProps for each avatarWrapper */\n    wrapperProps?: Record<string, unknown>;\n  })[];\n  /* Custom wrapper for each avatar */\n  avatarWrapper?: JSX.ElementType;\n}\n\n/**\n * AvatarGroup component based on [NextUI AvatarGroup](https://nextui.org/docs/components/avatar)\n */\nconst AvatarGroup = ({\n  bordered = false,\n  rounded = 'full',\n  className = '',\n  disabled = false,\n  size = 'md',\n  avatars = [],\n  max = 3,\n  avatarWrapper: AvatarWrapper = undefined,\n}: AvatarGroupProps) => {\n  return (\n    <NextAvatarGroup\n      max={max}\n      className={className}\n      isBordered={bordered}\n      isDisabled={disabled}\n      radius={rounded}\n      size={size}\n    >\n      {avatars?.map((avatar) => {\n        return AvatarWrapper ? (\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          <AvatarWrapper {...avatar.wrapperProps}>\n            <Avatar\n              key={avatar.src}\n              // eslint-disable-next-line react/jsx-props-no-spreading\n              {...avatar}\n              disabled={disabled || avatar?.disabled}\n              rounded={rounded}\n              bordered={bordered}\n              size={size}\n            />\n          </AvatarWrapper>\n        ) : (\n          <Avatar\n            key={avatar.src}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...avatar}\n            disabled={disabled || avatar?.disabled}\n            rounded={rounded}\n            bordered={bordered}\n            size={size}\n          />\n        );\n      })}\n    </NextAvatarGroup>\n  );\n};\n\nexport default AvatarGroup;\n","import AvatarGroup from './AvatarGroup';\n\nexport type { AvatarGroupProps } from './AvatarGroup';\n\nexport { AvatarGroup };\n\nexport default AvatarGroup;\n"]}

package/dist/{chunk-JPALSO5E.cjs → chunk-AVYWDZ7X.cjs}

@@ -1,4 +1,8 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/Card/Card.tsx
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkD4TLDLEXcjs = require('./chunk-D4TLDLEX.cjs');
+
+// src/Card/Card.tsx
 
 
 
@@ -25,11 +29,11 @@ var Card = ({
   footer = void 0
 }) => {
   const variants = cardVariants();
-  const { divider: dividerClassName, ...classNames } = _pixelutils.variantsToClassNames.call(void 0, 
+  const _a = _pixelutils.variantsToClassNames.call(void 0, 
     variants,
     className,
     "base"
-  );
+  ), { divider: dividerClassName } = _a, classNames = _chunkD4TLDLEXcjs.__objRest.call(void 0, _a, ["divider"]);
   const divider = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _divider.Divider, { className: dividerClassName });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     _card.Card,
@@ -63,4 +67,4 @@ var Card_default2 = Card_default;
 
 
 exports.cardVariants = cardVariants; exports.Card_default = Card_default; exports.Card_default2 = Card_default2;
-//# sourceMappingURL=chunk-JPALSO5E.cjs.map
+//# sourceMappingURL=chunk-AVYWDZ7X.cjs.map

package/dist/chunk-AVYWDZ7X.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-AVYWDZ7X.cjs","../src/Card/Card.tsx","../src/Card/index.ts"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACA;ACDA;AACE;AACA;AACA;AACA;AAAc,wCACT;AACP,8CAAuC;AAEvC,oDAAyC;AA+CvB,+CAAA;AA5CX,IAAM,aAAA,EAAe,4BAAA;AAAG,EAC7B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,uBAAA;AAAA,IACN,IAAA,EAAM,EAAA;AAAA,IACN,OAAA,EAAS,qBAAA;AAAA,IACT,MAAA,EAAQ,EAAA;AAAA,IACR,MAAA,EAAQ;AAAA,EACV;AACF,CAAC,CAAA;AAqBD,IAAM,KAAA,EAAO,CAAC;AAAA,EACZ,SAAA,EAAW,IAAA;AAAA,EACX,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,OAAA,EAAS,KAAA,CAAA;AAAA,EACT,OAAA,EAAS,KAAA,CAAA;AAAA,EACT,OAAA,EAAS,KAAA;AACX,CAAA,EAAA,GAAiB;AAEf,EAAA,MAAM,SAAA,EAAW,YAAA,CAAa,CAAA;AAC9B,EAAA,MAAqD,GAAA,EAAA,8CAAA;AAAA,IACnD,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,EACF,CAAA,EAJQ,EAAA,OAAA,EAAS,iBApDnB,EAAA,EAoDuD,EAAA,EAAf,WAAA,EAAA,yCAAA,EAAe,EAAf,CAA9B,SAAA,CAAA,CAAA;AAMR,EAAA,MAAM,QAAA,kBAAU,6BAAA,gBAAC,EAAA,EAAY,SAAA,EAAW,iBAAA,CAAkB,CAAA;AAE1D,EAAA,uBACE,8BAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,UAAA;AAAA,MACA,aAAA,EAAa,OAAA,GAAU,CAAA,KAAA,EAAQ,MAAM,CAAA,CAAA;AAC5B,MAAA;AACF,MAAA;AACA,MAAA;AAEN,MAAA;AACC,QAAA;AACG,0BAAA;AAGA,UAAA;AACH,QAAA;AAEY,wBAAA;AAIZ,QAAA;AACG,UAAA;AACA,0BAAA;AAGH,QAAA;AAAA,MAAA;AAAA,IAAA;AAEJ,EAAA;AAEJ;AAEe;AD/B+B;AACA;AEvD/B;AFyD+B;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-AVYWDZ7X.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport {\n  Card as NextCard,\n  CardBody as NextCardBody,\n  CardFooter as NextCardFooter,\n  CardHeader as NextCardHeader,\n} from '@nextui-org/card';\nimport { Divider as NextDivider } from '@nextui-org/divider';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// card styling variants\nexport const cardVariants = tv({\n  slots: {\n    base: 'border border-divider',\n    body: '',\n    divider: 'my-0 border-divider',\n    footer: '',\n    header: 'text-base font-semibold',\n  },\n});\n\ntype VariantProps = TVProps<typeof cardVariants>;\ntype ClassName = TVClassName<typeof cardVariants>;\n\nexport interface CardProps extends VariantProps {\n  /** card body content */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** footer content */\n  footer?: ReactNode;\n  /** header content */\n  header?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Card component based on [NextUI Card](https://nextui.org/docs/components/card)\n */\nconst Card = ({\n  children = null,\n  className = undefined,\n  testId = undefined,\n  header = undefined,\n  footer = undefined,\n}: CardProps) => {\n  // classNames from slots\n  const variants = cardVariants();\n  const { divider: dividerClassName, ...classNames } = variantsToClassNames(\n    variants,\n    className,\n    'base',\n  );\n\n  const divider = <NextDivider className={dividerClassName} />;\n\n  return (\n    <NextCard\n      classNames={classNames}\n      data-testid={testId && `card_${testId}`}\n      fullWidth\n      radius=\"sm\"\n      shadow=\"none\"\n    >\n      {header && (\n        <>\n          <NextCardHeader data-testid={testId && `card_header_${testId}`}>\n            {header}\n          </NextCardHeader>\n          {divider}\n        </>\n      )}\n      <NextCardBody data-testid={testId && `card_body_${testId}`}>\n        {children}\n      </NextCardBody>\n      {footer && (\n        <>\n          {divider}\n          <NextCardFooter data-testid={testId && `card_footer_${testId}`}>\n            {footer}\n          </NextCardFooter>\n        </>\n      )}\n    </NextCard>\n  );\n};\n\nexport default Card;\n","import Card, { cardVariants } from './Card';\n\nexport type { CardProps } from './Card';\n\nexport { Card, cardVariants };\n\nexport default Card;\n"]}

package/dist/{chunk-APEDJG3R.js → chunk-CZJKT7IC.js}

@@ -1,3 +1,7 @@
+import {
+  __objRest
+} from "./chunk-J7N2552D.js";
+
 // src/Card/Card.tsx
 import {
   Card as NextCard,
@@ -25,11 +29,11 @@ var Card = ({
   footer = void 0
 }) => {
   const variants = cardVariants();
-  const { divider: dividerClassName, ...classNames } = variantsToClassNames(
+  const _a = variantsToClassNames(
     variants,
     className,
     "base"
-  );
+  ), { divider: dividerClassName } = _a, classNames = __objRest(_a, ["divider"]);
   const divider = /* @__PURE__ */ jsx(NextDivider, { className: dividerClassName });
   return /* @__PURE__ */ jsxs(
     NextCard,
@@ -63,4 +67,4 @@ export {
   Card_default,
   Card_default2
 };
-//# sourceMappingURL=chunk-APEDJG3R.js.map
+//# sourceMappingURL=chunk-CZJKT7IC.js.map

package/dist/{chunk-APEDJG3R.js.map → chunk-CZJKT7IC.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/Card/Card.tsx","../src/Card/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport {\n  Card as NextCard,\n  CardBody as NextCardBody,\n  CardFooter as NextCardFooter,\n  CardHeader as NextCardHeader,\n} from '@nextui-org/card';\nimport { Divider as NextDivider } from '@nextui-org/divider';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// card styling variants\nexport const cardVariants = tv({\n  slots: {\n    base: 'border border-divider',\n    body: '',\n    divider: 'my-0 border-divider',\n    footer: '',\n    header: 'text-base font-semibold',\n  },\n});\n\ntype VariantProps = TVProps<typeof cardVariants>;\ntype ClassName = TVClassName<typeof cardVariants>;\n\nexport interface CardProps extends VariantProps {\n  /** card body content */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** footer content */\n  footer?: ReactNode;\n  /** header content */\n  header?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Card component based on [NextUI Card](https://nextui.org/docs/components/card)\n */\nconst Card = ({\n  children = null,\n  className = undefined,\n  testId = undefined,\n  header = undefined,\n  footer = undefined,\n}: CardProps) => {\n  // classNames from slots\n  const variants = cardVariants();\n  const { divider: dividerClassName, ...classNames } = variantsToClassNames(\n    variants,\n    className,\n    'base',\n  );\n\n  const divider = <NextDivider className={dividerClassName} />;\n\n  return (\n    <NextCard\n      classNames={classNames}\n      data-testid={testId && `card_${testId}`}\n      fullWidth\n      radius=\"sm\"\n      shadow=\"none\"\n    >\n      {header && (\n        <>\n          <NextCardHeader data-testid={testId && `card_header_${testId}`}>\n            {header}\n          </NextCardHeader>\n          {divider}\n        </>\n      )}\n      <NextCardBody data-testid={testId && `card_body_${testId}`}>\n        {children}\n      </NextCardBody>\n      {footer && (\n        <>\n          {divider}\n          <NextCardFooter data-testid={testId && `card_footer_${testId}`}>\n            {footer}\n          </NextCardFooter>\n        </>\n      )}\n    </NextCard>\n  );\n};\n\nexport default Card;\n","import Card, { cardVariants } from './Card';\n\nexport type { CardProps } from './Card';\n\nexport { Card, cardVariants };\n\nexport default Card;\n"],"mappings":";AAGA;AAAA,EACE,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,cAAc;AAAA,OACT;AACP,SAAS,WAAW,mBAAmB;AAEvC,SAAS,IAAI,4BAA4B;AA+CvB,SAWV,UAXU,KAWV,YAXU;AA5CX,IAAM,eAAe,GAAG;AAAA,EAC7B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AACF,CAAC;AAqBD,IAAM,OAAO,CAAC;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX,MAAiB;AAEf,QAAM,WAAW,aAAa;AAC9B,QAAM,EAAE,SAAS,kBAAkB,GAAG,WAAW,IAAI;AAAA,IACnD;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,UAAU,oBAAC,eAAY,WAAW,kBAAkB;AAE1D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,UAAU,QAAQ,MAAM;AAAA,MACrC,WAAS;AAAA,MACT,QAAO;AAAA,MACP,QAAO;AAAA,MAEN;AAAA,kBACC,iCACE;AAAA,8BAAC,kBAAe,eAAa,UAAU,eAAe,MAAM,IACzD,kBACH;AAAA,UACC;AAAA,WACH;AAAA,QAEF,oBAAC,gBAAa,eAAa,UAAU,aAAa,MAAM,IACrD,UACH;AAAA,QACC,UACC,iCACG;AAAA;AAAA,UACD,oBAAC,kBAAe,eAAa,UAAU,eAAe,MAAM,IACzD,kBACH;AAAA,WACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,eAAQ;;;ACrFf,IAAOA,gBAAQ;","names":["Card_default"]}
+{"version":3,"sources":["../src/Card/Card.tsx","../src/Card/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport {\n  Card as NextCard,\n  CardBody as NextCardBody,\n  CardFooter as NextCardFooter,\n  CardHeader as NextCardHeader,\n} from '@nextui-org/card';\nimport { Divider as NextDivider } from '@nextui-org/divider';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// card styling variants\nexport const cardVariants = tv({\n  slots: {\n    base: 'border border-divider',\n    body: '',\n    divider: 'my-0 border-divider',\n    footer: '',\n    header: 'text-base font-semibold',\n  },\n});\n\ntype VariantProps = TVProps<typeof cardVariants>;\ntype ClassName = TVClassName<typeof cardVariants>;\n\nexport interface CardProps extends VariantProps {\n  /** card body content */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** footer content */\n  footer?: ReactNode;\n  /** header content */\n  header?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Card component based on [NextUI Card](https://nextui.org/docs/components/card)\n */\nconst Card = ({\n  children = null,\n  className = undefined,\n  testId = undefined,\n  header = undefined,\n  footer = undefined,\n}: CardProps) => {\n  // classNames from slots\n  const variants = cardVariants();\n  const { divider: dividerClassName, ...classNames } = variantsToClassNames(\n    variants,\n    className,\n    'base',\n  );\n\n  const divider = <NextDivider className={dividerClassName} />;\n\n  return (\n    <NextCard\n      classNames={classNames}\n      data-testid={testId && `card_${testId}`}\n      fullWidth\n      radius=\"sm\"\n      shadow=\"none\"\n    >\n      {header && (\n        <>\n          <NextCardHeader data-testid={testId && `card_header_${testId}`}>\n            {header}\n          </NextCardHeader>\n          {divider}\n        </>\n      )}\n      <NextCardBody data-testid={testId && `card_body_${testId}`}>\n        {children}\n      </NextCardBody>\n      {footer && (\n        <>\n          {divider}\n          <NextCardFooter data-testid={testId && `card_footer_${testId}`}>\n            {footer}\n          </NextCardFooter>\n        </>\n      )}\n    </NextCard>\n  );\n};\n\nexport default Card;\n","import Card, { cardVariants } from './Card';\n\nexport type { CardProps } from './Card';\n\nexport { Card, cardVariants };\n\nexport default Card;\n"],"mappings":";;;;;AAGA;AAAA,EACE,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,cAAc;AAAA,OACT;AACP,SAAS,WAAW,mBAAmB;AAEvC,SAAS,IAAI,4BAA4B;AA+CvB,SAWV,UAXU,KAWV,YAXU;AA5CX,IAAM,eAAe,GAAG;AAAA,EAC7B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AACF,CAAC;AAqBD,IAAM,OAAO,CAAC;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX,MAAiB;AAEf,QAAM,WAAW,aAAa;AAC9B,QAAqD;AAAA,IACnD;AAAA,IACA;AAAA,IACA;AAAA,EACF,GAJQ,WAAS,iBApDnB,IAoDuD,IAAf,uBAAe,IAAf,CAA9B;AAMR,QAAM,UAAU,oBAAC,eAAY,WAAW,kBAAkB;AAE1D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,UAAU,QAAQ,MAAM;AAAA,MACrC,WAAS;AAAA,MACT,QAAO;AAAA,MACP,QAAO;AAAA,MAEN;AAAA,kBACC,iCACE;AAAA,8BAAC,kBAAe,eAAa,UAAU,eAAe,MAAM,IACzD,kBACH;AAAA,UACC;AAAA,WACH;AAAA,QAEF,oBAAC,gBAAa,eAAa,UAAU,aAAa,MAAM,IACrD,UACH;AAAA,QACC,UACC,iCACG;AAAA;AAAA,UACD,oBAAC,kBAAe,eAAa,UAAU,eAAe,MAAM,IACzD,kBACH;AAAA,WACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,eAAQ;;;ACrFf,IAAOA,gBAAQ;","names":["Card_default"]}

package/dist/chunk-D4TLDLEX.cjs

@@ -0,0 +1,63 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+
+
+
+
+
+
+exports.__spreadValues = __spreadValues; exports.__spreadProps = __spreadProps; exports.__objRest = __objRest; exports.__commonJS = __commonJS; exports.__toESM = __toESM;
+//# sourceMappingURL=chunk-D4TLDLEX.cjs.map

package/dist/chunk-D4TLDLEX.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-D4TLDLEX.cjs"],"names":[],"mappings":"AAAA,6EAAI,SAAS,EAAE,MAAM,CAAC,MAAM;AAC5B,IAAI,UAAU,EAAE,MAAM,CAAC,cAAc;AACrC,IAAI,WAAW,EAAE,MAAM,CAAC,gBAAgB;AACxC,IAAI,iBAAiB,EAAE,MAAM,CAAC,wBAAwB;AACtD,IAAI,kBAAkB,EAAE,MAAM,CAAC,yBAAyB;AACxD,IAAI,kBAAkB,EAAE,MAAM,CAAC,mBAAmB;AAClD,IAAI,oBAAoB,EAAE,MAAM,CAAC,qBAAqB;AACtD,IAAI,aAAa,EAAE,MAAM,CAAC,cAAc;AACxC,IAAI,aAAa,EAAE,MAAM,CAAC,SAAS,CAAC,cAAc;AAClD,IAAI,aAAa,EAAE,MAAM,CAAC,SAAS,CAAC,oBAAoB;AACxD,IAAI,gBAAgB,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,GAAG,IAAI,EAAE,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG,EAAE,EAAE,KAAK;AAC/J,IAAI,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG;AAC/B,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;AAChC,IAAI,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;AACvC,EAAE,GAAG,CAAC,mBAAmB;AACzB,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;AACzC,IAAI;AACJ,EAAE,OAAO,CAAC;AACV,CAAC;AACD,IAAI,cAAc,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,UAAU,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;AACjE,IAAI,UAAU,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG;AACrC,EAAE,IAAI,OAAO,EAAE,CAAC,CAAC;AACjB,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG,MAAM;AACzB,IAAI,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;AACpE,MAAM,MAAM,CAAC,IAAI,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC;AACjC,EAAE,GAAG,CAAC,OAAO,GAAG,KAAK,GAAG,mBAAmB;AAC3C,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,mBAAmB,CAAC,MAAM,CAAC,EAAE;AAClD,MAAM,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACtE,QAAQ,MAAM,CAAC,IAAI,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC;AACnC,IAAI;AACJ,EAAE,OAAO,MAAM;AACf,CAAC;AACD,IAAI,WAAW,EAAE,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,SAAS,SAAS,CAAC,EAAE;AACnD,EAAE,OAAO,IAAI,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO;AACpG,CAAC;AACD,IAAI,YAAY,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG;AAC9C,EAAE,GAAG,CAAC,KAAK,GAAG,OAAO,KAAK,IAAI,SAAS,GAAG,OAAO,KAAK,IAAI,UAAU,EAAE;AACtE,IAAI,IAAI,CAAC,IAAI,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC;AAC3C,MAAM,GAAG,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI,IAAI,MAAM;AACvD,QAAQ,SAAS,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,KAAK,EAAE,gBAAgB,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC;AAC1H,EAAE;AACF,EAAE,OAAO,EAAE;AACX,CAAC;AACD,IAAI,QAAQ,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,CAAC,OAAO,EAAE,IAAI,GAAG,KAAK,EAAE,QAAQ,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,WAAW;AAChH;AACA;AACA;AACA;AACA,EAAE,WAAW,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE,MAAM;AACjH,EAAE;AACF,CAAC,CAAC;AACF;AACA;AACE;AACA;AACA;AACA;AACA;AACF,0KAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-D4TLDLEX.cjs"}

package/dist/{chunk-5WRI5ZAA.js → chunk-J7N2552D.js}

@@ -1,9 +1,38 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __commonJS = (cb, mod) => function __require() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
@@ -25,7 +54,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 
 export {
+  __spreadValues,
+  __spreadProps,
+  __objRest,
   __commonJS,
   __toESM
 };
-//# sourceMappingURL=chunk-5WRI5ZAA.js.map
+//# sourceMappingURL=chunk-J7N2552D.js.map

package/dist/{chunk-C2BIHVLT.js → chunk-LCSYN3DI.js}

@@ -3,8 +3,10 @@ import {
 } from "./chunk-ODLZQXBE.js";
 import {
   __commonJS,
+  __spreadProps,
+  __spreadValues,
   __toESM
-} from "./chunk-5WRI5ZAA.js";
+} from "./chunk-J7N2552D.js";
 
 // ../../node_modules/.pnpm/@babel+runtime@7.26.0/node_modules/@babel/runtime/helpers/extends.js
 var require_extends = __commonJS({
@@ -52,9 +54,7 @@ var require_objectDestructuringEmpty = __commonJS({
 });
 
 // src/Json/Json.tsx
-import { useState as useState3 } from "react";
-import { FaChevronDown, FaChevronUp, FaTimesCircle } from "react-icons/fa";
-import { HiOutlineClipboard, HiOutlineClipboardCheck } from "react-icons/hi";
+import { useMemo as useMemo2, useState as useState3 } from "react";
 
 // ../../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 = __toESM(require_extends());
@@ -2562,120 +2562,204 @@ var vscodeTheme = {
 
 // src/Json/Json.tsx
 import { useTheme } from "next-themes";
-import { cn } from "@fuf-stack/pixel-utils";
-import { Fragment as Fragment3, jsx, jsxs } from "react/jsx-runtime";
+import { cn as cn2 } from "@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
+import { HiOutlineClipboard, HiOutlineClipboardCheck } from "react-icons/hi";
+import { cn } from "@fuf-stack/pixel-utils";
+import { jsx } from "react/jsx-runtime";
+var CopiedRenderer = () => {
+  return /* @__PURE__ */ jsx(
+    esm_default.Copied,
+    {
+      render: (props) => {
+        const { style, onClick, className } = props;
+        const isCopied = props["data-copied"];
+        const elmClasses = cn(
+          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__ */ jsx(
+          "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__ */ jsx(HiOutlineClipboardCheck, { className: elmClasses }) : /* @__PURE__ */ jsx(HiOutlineClipboard, { className: elmClasses })
+          }
+        );
+      }
+    }
+  );
 };
-var Json = ({ className = null, collapsed = false, value }) => {
+var CopiedRenderer_default = CopiedRenderer;
+
+// src/Json/subcomponents/ErrorRenderer.tsx
+import { FaChevronDown, FaChevronUp, FaTimesCircle } from "react-icons/fa";
+import { Fragment as Fragment3, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ErrorRenderer = ({
+  error,
+  data,
+  showDetails,
+  onToggleDetails
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "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__ */ jsxs("div", { className: "flex w-full justify-between gap-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx2(FaTimesCircle, { className: "mr-2", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx2("span", { className: "font-medium", children: "Failed to parse JSON data" })
+          ] }),
+          /* @__PURE__ */ jsx2(
+            Button_default,
+            {
+              color: "danger",
+              size: "sm",
+              variant: "light",
+              onClick: onToggleDetails,
+              "aria-expanded": showDetails,
+              "aria-controls": "error-details",
+              children: showDetails ? /* @__PURE__ */ jsxs(Fragment3, { children: [
+                /* @__PURE__ */ jsx2(FaChevronUp, { "aria-hidden": "true" }),
+                " Hide Details"
+              ] }) : /* @__PURE__ */ jsxs(Fragment3, { children: [
+                /* @__PURE__ */ jsx2(FaChevronDown, { "aria-hidden": "true" }),
+                " Show Details"
+              ] })
+            }
+          )
+        ] }),
+        showDetails && /* @__PURE__ */ jsxs("div", { id: "error-details", className: "mt-4 w-full text-left", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx2("strong", { children: "Error:" }),
+            /* @__PURE__ */ jsx2("pre", { children: error instanceof Error ? `${error.name}: ${error.message}` : "Unknown error" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+            /* @__PURE__ */ jsx2("strong", { children: "Data:" }),
+            /* @__PURE__ */ jsx2("pre", { children: typeof data !== "string" ? JSON.stringify(data, null, 2) : data })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var ErrorRenderer_default = ErrorRenderer;
+
+// src/Json/subcomponents/NullRenderer.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var NullRenderer = () => {
+  return /* @__PURE__ */ jsx3(
+    esm_default.Null,
+    {
+      render: () => /* @__PURE__ */ jsx3("span", { className: "rounded bg-warning-100 px-1 text-xs text-warning-700", children: "null" })
+    }
+  );
+};
+var NullRenderer_default = NullRenderer;
+
+// src/Json/Json.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var Json = ({
+  className = void 0,
+  collapsed = false,
+  value,
+  maxHeight = void 0,
+  onCopy = void 0,
+  errorRenderer = void 0
+}) => {
   const [showDetails, setShowDetails] = useState3(false);
   const { resolvedTheme } = useTheme();
-  const isDarkMode = resolvedTheme === "dark" || document.body.classList.contains("dark");
+  const isDarkMode = useMemo2(
+    () => 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 {
-    content = /* @__PURE__ */ jsx(
-      esm_default,
+    const parsedValue = getValue(value);
+    content = /* @__PURE__ */ jsx4(
+      "div",
       {
-        className: "pr-5",
-        collapsed,
-        displayDataTypes: false,
-        style: {
-          ...isDarkMode ? vscodeTheme : lightTheme,
-          backgroundColor: "unset"
-        },
-        value: getValue(value),
-        children: /* @__PURE__ */ jsx(
-          esm_default.Copied,
+        style: { maxHeight, overflowY: maxHeight ? "auto" : void 0 },
+        className: "relative",
+        children: /* @__PURE__ */ jsxs2(
+          esm_default,
           {
-            render: ({
-              // @ts-expect-error this should be fine
-              "data-copied": copied,
-              style,
-              ...elmProps
-            }) => {
-              const elmClasses = cn(
-                elmProps.className,
-                "absolute -right-4 -top-[2px] h-4 w-4 !fill-transparent pl-1",
-                { "text-success": copied }
-              );
-              return /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "relative !ml-0 !h-[1em] !w-0",
-                  style,
-                  "data-testid": "copy-button",
-                  children: copied ? /* @__PURE__ */ jsx(
-                    HiOutlineClipboardCheck,
-                    {
-                      ...elmProps,
-                      className: elmClasses
-                    }
-                  ) : (
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    /* @__PURE__ */ jsx(HiOutlineClipboard, { ...elmProps, className: elmClasses })
-                  )
-                }
-              );
-            }
+            className: "pr-5",
+            collapsed,
+            displayDataTypes: false,
+            style: __spreadProps(__spreadValues({}, isDarkMode ? vscodeTheme : lightTheme), {
+              backgroundColor: "unset"
+            }),
+            value: parsedValue,
+            onCopy: handleCopy,
+            children: [
+              /* @__PURE__ */ jsx4(CopiedRenderer_default, {}),
+              /* @__PURE__ */ jsx4(NullRenderer_default, {})
+            ]
           }
         )
       }
     );
   } catch (err) {
-    error = /* @__PURE__ */ jsxs(
-      "div",
+    const defaultError = /* @__PURE__ */ jsx4(
+      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__ */ jsxs("div", { className: "flex w-full justify-between gap-6", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-              /* @__PURE__ */ jsx(FaTimesCircle, { className: "mr-2" }),
-              /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Failed to parse JSON data" })
-            ] }),
-            /* @__PURE__ */ jsx(
-              Button_default,
-              {
-                color: "danger",
-                size: "sm",
-                variant: "light",
-                onClick: () => setShowDetails(!showDetails),
-                children: showDetails ? /* @__PURE__ */ jsxs(Fragment3, { children: [
-                  /* @__PURE__ */ jsx(FaChevronUp, {}),
-                  " Hide Details"
-                ] }) : /* @__PURE__ */ jsxs(Fragment3, { children: [
-                  /* @__PURE__ */ jsx(FaChevronDown, {}),
-                  " Show Details"
-                ] })
-              }
-            )
-          ] }),
-          showDetails && /* @__PURE__ */ jsxs("div", { className: "mt-4 w-full text-left", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("strong", { children: "Error:" }),
-              /* @__PURE__ */ jsxs("pre", { children: [
-                err?.name,
-                ": ",
-                err?.message
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
-              /* @__PURE__ */ jsx("strong", { children: "Data:" }),
-              /* @__PURE__ */ jsx("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__ */ jsx("div", { className: cn(className), children: error || content });
+  return /* @__PURE__ */ jsx4("div", { "aria-label": "JSON viewer", className: cn2(className), role: "region", children: error || content });
 };
 var Json_default = Json;
 
@@ -2686,4 +2770,4 @@ export {
   Json_default,
   Json_default2
 };
-//# sourceMappingURL=chunk-C2BIHVLT.js.map
+//# sourceMappingURL=chunk-LCSYN3DI.js.map