@strapi/design-system 1.6.2 → 1.6.4

package/dist/Grid/Grid.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),d=require("styled-components"),n=require("prop-types"),c=require("./GridContext.cjs"),p=require("../Box/Box.cjs"),i=require("../helpers/handleResponsiveValues.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=o(u),f=o(d),t=o(n),y=f.default(p.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),l=require("prop-types"),d=require("styled-components"),i=require("./GridContext.cjs"),p=require("../Box/Box.cjs"),f=require("../helpers/handleResponsiveValues.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function y(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const s=y(c),o=a(l),m=a(d),b=m.default(p.Box)`
   display: grid;
   grid-template-columns: repeat(${({gridCols:e})=>e}, 1fr);
-  ${({theme:e,gap:r})=>i("gap",r,e)}
-`,s=({gap:e,gridCols:r,...l})=>a.default.createElement(c.GridContext.Provider,{value:{gap:e,gridCols:r}},a.default.createElement(y,{gap:e,gridCols:r,...l}));s.defaultProps={gap:0,gridCols:12};s.propTypes={gap:t.default.oneOfType([t.default.number,t.default.arrayOf(t.default.number)]),gridCols:t.default.number};exports.Grid=s;
+  ${({theme:e,gap:t})=>f("gap",t,e)}
+`,u=({gap:e,gridCols:t,...r})=>{const n=s.useMemo(()=>({gap:e,gridCols:t}),[e,t]);return s.createElement(i.GridContext.Provider,{value:n},s.createElement(b,{gap:e,gridCols:t,...r}))};u.defaultProps={gap:0,gridCols:12};u.propTypes={gap:o.default.oneOfType([o.default.number,o.default.arrayOf(o.default.number)]),gridCols:o.default.number};exports.Grid=u;

package/dist/Grid/Grid.js

@@ -1,27 +1,24 @@
-import t from "react";
-import a from "styled-components";
-import e from "prop-types";
+import * as t from "react";
+import o from "prop-types";
+import n from "styled-components";
 import { GridContext as i } from "./GridContext.js";
-import { Box as n } from "../Box/Box.js";
+import { Box as s } from "../Box/Box.js";
 import d from "../helpers/handleResponsiveValues.js";
-const l = a(n)`
+const f = n(s)`
   display: grid;
   grid-template-columns: repeat(${({ gridCols: r }) => r}, 1fr);
-  ${({ theme: r, gap: o }) => d("gap", o, r)}
-`, p = ({ gap: r, gridCols: o, ...m }) => /* @__PURE__ */ t.createElement(i.Provider, {
-  value: { gap: r, gridCols: o }
-}, /* @__PURE__ */ t.createElement(l, {
-  gap: r,
-  gridCols: o,
-  ...m
-}));
+  ${({ theme: r, gap: e }) => d("gap", e, r)}
+`, p = ({ gap: r, gridCols: e, ...m }) => {
+  const a = t.useMemo(() => ({ gap: r, gridCols: e }), [r, e]);
+  return /* @__PURE__ */ t.createElement(i.Provider, { value: a }, /* @__PURE__ */ t.createElement(f, { gap: r, gridCols: e, ...m }));
+};
 p.defaultProps = {
   gap: 0,
   gridCols: 12
 };
 p.propTypes = {
-  gap: e.oneOfType([e.number, e.arrayOf(e.number)]),
-  gridCols: e.number
+  gap: o.oneOfType([o.number, o.arrayOf(o.number)]),
+  gridCols: o.number
 };
 export {
   p as Grid

package/dist/Grid/GridItem.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),c=require("styled-components"),p=require("prop-types"),m=require("../Box/Box.cjs"),f=require("./GridContext.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=o(l),y=o(c),t=o(p),x=y.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),c=require("prop-types"),p=require("styled-components"),m=require("./GridContext.cjs"),f=require("../Box/Box.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=o(l),t=o(c),y=o(p),x=y.default.div`
   grid-column: span ${({col:e})=>e};
   max-width: 100%;
 
@@ -9,4 +9,4 @@
   ${({theme:e})=>e.mediaQueries.mobile} {
     grid-column: span ${({xs:e})=>e};
   }
-`,r=({col:e,xs:d,s:u,...n})=>{const{gap:a,gridCols:i}=f.useGrid();return s.default.createElement(x,{gap:a,gridCols:i,col:e,xs:d,s:u},s.default.createElement(m.Box,{...n}))};r.defaultProps={col:void 0,s:void 0,xs:void 0};r.propTypes={col:t.default.number,s:t.default.number,xs:t.default.number};exports.GridItem=r;
+`,r=({col:e,xs:d,s:u,...n})=>{const{gap:a,gridCols:i}=m.useGrid();return s.default.createElement(x,{gap:a,gridCols:i,col:e,xs:d,s:u},s.default.createElement(f.Box,{...n}))};r.defaultProps={col:void 0,s:void 0,xs:void 0};r.propTypes={col:t.default.number,s:t.default.number,xs:t.default.number};exports.GridItem=r;

package/dist/Grid/GridItem.js

@@ -1,8 +1,8 @@
 import o from "react";
-import n from "styled-components";
 import e from "prop-types";
-import { Box as a } from "../Box/Box.js";
-import { useGrid as l } from "./GridContext.js";
+import n from "styled-components";
+import { useGrid as a } from "./GridContext.js";
+import { Box as l } from "../Box/Box.js";
 const u = n.div`
   grid-column: span ${({ col: r }) => r};
   max-width: 100%;
@@ -15,16 +15,8 @@ const u = n.div`
     grid-column: span ${({ xs: r }) => r};
   }
 `, m = ({ col: r, xs: t, s: i, ...p }) => {
-  const { gap: s, gridCols: d } = l();
-  return /* @__PURE__ */ o.createElement(u, {
-    gap: s,
-    gridCols: d,
-    col: r,
-    xs: t,
-    s: i
-  }, /* @__PURE__ */ o.createElement(a, {
-    ...p
-  }));
+  const { gap: s, gridCols: d } = a();
+  return /* @__PURE__ */ o.createElement(u, { gap: s, gridCols: d, col: r, xs: t, s: i }, /* @__PURE__ */ o.createElement(l, { ...p }));
 };
 m.defaultProps = {
   col: void 0,

package/dist/IconButton/IconButton.cjs

@@ -1,16 +1,11 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),B=require("prop-types"),m=require("styled-components"),E=require("../Tooltip/Tooltip.cjs"),T=require("../BaseButton/BaseButton.cjs"),_=require("../Flex/Flex.cjs"),g=require("../VisuallyHidden/VisuallyHidden.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=c(d),a=c(B),v=c(m),u=v.default(T.BaseButton)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: ${32/16}rem;
-  width: ${32/16}rem;
-
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),$=require("react"),h=require("styled-components"),j=require("../BaseButton/BaseButton.cjs"),v=require("../Flex/Flex.cjs"),y=require("../Tooltip/Tooltip.cjs"),B=require("../VisuallyHidden/VisuallyHidden.cjs"),m=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function x(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const u=x($),i=m(h),_=u.forwardRef(({label:e,noBorder:r=!1,children:t,icon:o,disabled:l=!1,onClick:a,"aria-label":d,...f},p)=>{const b=g=>{!l&&a&&a(g)},s=n.jsxs(c,{"aria-disabled":l,background:l?"neutral150":void 0,borderWidth:r?0:void 0,justifyContent:"center",height:`${2}rem`,width:`${2}rem`,...f,ref:p,onClick:b,children:[n.jsx(B.VisuallyHidden,{as:"span",children:e??d}),u.cloneElement(o||t,{"aria-hidden":!0,focusable:!1})]});return e?n.jsx(y.Tooltip,{label:e,children:s}):s}),c=i.default(j.BaseButton)`
   svg {
     > g,
     path {
       fill: ${({theme:e})=>e.colors.neutral500};
     }
   }
+
   &:hover {
     svg {
       > g,
@@ -19,6 +14,7 @@
       }
     }
   }
+
   &:active {
     svg {
       > g,
@@ -27,16 +23,15 @@
       }
     }
   }
+
   &[aria-disabled='true'] {
-    background-color: ${({theme:e})=>e.colors.neutral150};
     svg {
       path {
         fill: ${({theme:e})=>e.colors.neutral600};
       }
     }
   }
-  ${({noBorder:e})=>e?"border: none;":void 0}
-`,j=v.default(_.Flex)`
+`,R=i.default(v.Flex)`
   & span:first-child button {
     border-left: 1px solid ${({theme:e})=>e.colors.neutral200};
     border-radius: ${({theme:e})=>`${e.borderRadius} 0 0 ${e.borderRadius}`};
@@ -46,7 +41,7 @@
     border-radius: ${({theme:e})=>`0 ${e.borderRadius} ${e.borderRadius} 0`};
   }
 
-  & ${u} {
+  & ${c} {
     border-radius: 0;
     border-left: none;
 
@@ -83,4 +78,4 @@
       }
     }
   }
-`,s=t.default.forwardRef(({label:e,noBorder:n,children:l,icon:o,disabled:r,onClick:f,"aria-label":h,...p},b)=>{const $=y=>{!r&&f&&f(y)};return e?t.default.createElement(E.Tooltip,{label:e},t.default.createElement(u,{...p,ref:b,noBorder:n,onClick:$,"aria-disabled":r},t.default.createElement(g.VisuallyHidden,{as:"span"},e),d.cloneElement(o||l,{"aria-hidden":!0,focusable:!1}))):t.default.createElement(u,{...p,ref:b,noBorder:n,onClick:$,"aria-disabled":r},t.default.createElement(g.VisuallyHidden,{as:"span"},h),d.cloneElement(o||l,{"aria-hidden":!0,focusable:!1}))});s.displayName="IconButton";s.defaultProps={"aria-label":void 0,children:void 0,disabled:!1,icon:void 0,label:void 0,noBorder:!1,onClick:void 0};const i=(e,n)=>(l,o)=>!l[o]&&e.every(r=>!l[r])?new Error(`One of the following props is required: ${o}, ${e.join(", ")}`):a.default.checkPropTypes({[o]:a.default[n]},l,"prop","IconButton");s.propTypes={"aria-label":i(["label"],"string"),children:i(["icon"],"node"),disabled:a.default.bool,icon:i(["children"],"node"),label:i(["aria-label"],"string"),noBorder:a.default.bool,onClick:a.default.func};exports.IconButton=s;exports.IconButtonGroup=j;
+`;exports.IconButton=_;exports.IconButtonGroup=R;

package/dist/IconButton/IconButton.js

@@ -1,56 +1,99 @@
-import l, { cloneElement as b } from "react";
-import t from "prop-types";
-import h from "styled-components";
-import { Tooltip as v } from "../Tooltip/Tooltip.js";
-import { BaseButton as y } from "../BaseButton/BaseButton.js";
-import { Flex as k } from "../Flex/Flex.js";
-import { VisuallyHidden as $ } from "../VisuallyHidden/VisuallyHidden.js";
-const s = h(y)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: ${32 / 16}rem;
-  width: ${32 / 16}rem;
-
+import { jsxs as $, jsx as e } from "react/jsx-runtime";
+import * as a from "react";
+import n from "styled-components";
+import { BaseButton as b } from "../BaseButton/BaseButton.js";
+import { Flex as m } from "../Flex/Flex.js";
+import { Tooltip as g } from "../Tooltip/Tooltip.js";
+import { VisuallyHidden as v } from "../VisuallyHidden/VisuallyHidden.js";
+const I = a.forwardRef(({
+  label: r,
+  noBorder: i = !1,
+  children: d,
+  icon: c,
+  disabled: o = !1,
+  onClick: l,
+  "aria-label": u,
+  ...f
+}, p) => {
+  const t = $(s, {
+    "aria-disabled": o,
+    background: o ? "neutral150" : void 0,
+    borderWidth: i ? 0 : void 0,
+    justifyContent: "center",
+    height: `${2}rem`,
+    width: `${2}rem`,
+    ...f,
+    ref: p,
+    onClick: (h) => {
+      !o && l && l(h);
+    },
+    children: [e(v, {
+      as: "span",
+      children: r ?? u
+    }), a.cloneElement(c || d, {
+      "aria-hidden": !0,
+      focusable: !1
+    })]
+  });
+  return r ? e(g, {
+    label: r,
+    children: t
+  }) : t;
+}), s = n(b)`
   svg {
     > g,
     path {
-      fill: ${({ theme: r }) => r.colors.neutral500};
+      fill: ${({
+  theme: r
+}) => r.colors.neutral500};
     }
   }
+
   &:hover {
     svg {
       > g,
       path {
-        fill: ${({ theme: r }) => r.colors.neutral600};
+        fill: ${({
+  theme: r
+}) => r.colors.neutral600};
       }
     }
   }
+
   &:active {
     svg {
       > g,
       path {
-        fill: ${({ theme: r }) => r.colors.neutral400};
+        fill: ${({
+  theme: r
+}) => r.colors.neutral400};
       }
     }
   }
+
   &[aria-disabled='true'] {
-    background-color: ${({ theme: r }) => r.colors.neutral150};
     svg {
       path {
-        fill: ${({ theme: r }) => r.colors.neutral600};
+        fill: ${({
+  theme: r
+}) => r.colors.neutral600};
       }
     }
   }
-  ${({ noBorder: r }) => r ? "border: none;" : void 0}
-`, T = h(k)`
+`, w = n(m)`
   & span:first-child button {
-    border-left: 1px solid ${({ theme: r }) => r.colors.neutral200};
-    border-radius: ${({ theme: r }) => `${r.borderRadius} 0 0 ${r.borderRadius}`};
+    border-left: 1px solid ${({
+  theme: r
+}) => r.colors.neutral200};
+    border-radius: ${({
+  theme: r
+}) => `${r.borderRadius} 0 0 ${r.borderRadius}`};
   }
 
   & span:last-child button {
-    border-radius: ${({ theme: r }) => `0 ${r.borderRadius} ${r.borderRadius} 0`};
+    border-radius: ${({
+  theme: r
+}) => `0 ${r.borderRadius} ${r.borderRadius} 0`};
   }
 
   & ${s} {
@@ -59,25 +102,35 @@ const s = h(y)`
 
     svg {
       path {
-        fill: ${({ theme: r }) => r.colors.neutral700};
+        fill: ${({
+  theme: r
+}) => r.colors.neutral700};
       }
     }
 
     &:hover {
-      background-color: ${({ theme: r }) => r.colors.neutral100};
+      background-color: ${({
+  theme: r
+}) => r.colors.neutral100};
 
       svg {
         path {
-          fill: ${({ theme: r }) => r.colors.neutral800};
+          fill: ${({
+  theme: r
+}) => r.colors.neutral800};
         }
       }
     }
 
     &:active {
-      background-color: ${({ theme: r }) => r.colors.neutral150};
+      background-color: ${({
+  theme: r
+}) => r.colors.neutral150};
       svg {
         path {
-          fill: ${({ theme: r }) => r.colors.neutral900};
+          fill: ${({
+  theme: r
+}) => r.colors.neutral900};
         }
       }
     }
@@ -85,64 +138,15 @@ const s = h(y)`
     &[aria-disabled='true'] {
       svg {
         path {
-          fill: ${({ theme: r }) => r.colors.neutral600};
+          fill: ${({
+  theme: r
+}) => r.colors.neutral600};
         }
       }
     }
   }
-`, d = l.forwardRef(
-  ({ label: r, noBorder: n, children: o, icon: e, disabled: a, onClick: c, "aria-label": m, ...u }, f) => {
-    const p = (g) => {
-      !a && c && c(g);
-    };
-    return r ? /* @__PURE__ */ l.createElement(v, {
-      label: r
-    }, /* @__PURE__ */ l.createElement(s, {
-      ...u,
-      ref: f,
-      noBorder: n,
-      onClick: p,
-      "aria-disabled": a
-    }, /* @__PURE__ */ l.createElement($, {
-      as: "span"
-    }, r), b(e || o, {
-      "aria-hidden": !0,
-      focusable: !1
-    }))) : /* @__PURE__ */ l.createElement(s, {
-      ...u,
-      ref: f,
-      noBorder: n,
-      onClick: p,
-      "aria-disabled": a
-    }, /* @__PURE__ */ l.createElement($, {
-      as: "span"
-    }, m), b(e || o, {
-      "aria-hidden": !0,
-      focusable: !1
-    }));
-  }
-);
-d.displayName = "IconButton";
-d.defaultProps = {
-  "aria-label": void 0,
-  children: void 0,
-  disabled: !1,
-  icon: void 0,
-  label: void 0,
-  noBorder: !1,
-  onClick: void 0
-};
-const i = (r, n) => (o, e) => !o[e] && r.every((a) => !o[a]) ? new Error(`One of the following props is required: ${e}, ${r.join(", ")}`) : t.checkPropTypes({ [e]: t[n] }, o, "prop", "IconButton");
-d.propTypes = {
-  "aria-label": i(["label"], "string"),
-  children: i(["icon"], "node"),
-  disabled: t.bool,
-  icon: i(["children"], "node"),
-  label: i(["aria-label"], "string"),
-  noBorder: t.bool,
-  onClick: t.func
-};
+`;
 export {
-  d as IconButton,
-  T as IconButtonGroup
+  I as IconButton,
+  w as IconButtonGroup
 };

package/dist/JSONInput/JSONInput.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),_=require("prop-types"),b=require("@codemirror/lang-json"),x=require("@uiw/react-codemirror"),A=require("../Field/Field.cjs"),H=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const R=require("../Field/FieldHint.cjs"),T=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const P=require("../Stack/Stack.cjs"),w=require("./JSONInputContainer.cjs"),u=require("./utils/decorationExtension.cjs"),m=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},o=m(l),t=m(_),f=({label:n,value:q,error:h,hint:j,required:C,onChange:O,disabled:g,labelAction:k,...y})=>{const c=l.useRef(),a=l.useRef(null),s=l.useRef(null),p=Boolean(h),I=e=>a.current?.doc?.line(e),J=e=>{const{text:r,to:i}=I(e),d=i-r.trimStart().length;i>d&&s.current?.dispatch({effects:u.addMarks.of([u.lineHighlightMark.range(d,i)])})},N=()=>{const e=a.current?.doc?.length||0;s.current?.dispatch({effects:u.filterMarks.of((r,i)=>i<=0||r>=e)})},F=e=>{const{view:r,state:i}=e;s.current=r,a.current=i,N();const S=b.jsonParseLinter()(r);S.length&&J(i.doc.lineAt(S[0].from).number)},v=(e,r)=>{F(r),O(e)},M=(e,r)=>{s.current=e,a.current=r,F({view:e,state:r})},{setContainer:E}=x.useCodeMirror({value:q,onCreateEditor:M,theme:"dark",onChange:v,editable:!g,container:c.current,extensions:[b.json(),u.markField],basicSetup:{lineNumbers:!0,bracketMatching:!0,closeBrackets:!0,indentOnInput:!0,syntaxHighlighting:!0,highlightSelectionMatches:!0,tabSize:2,defaultCharacterWidth:5}}),L=()=>{g||c.current.children[0].children[1].children[1].focus()};return l.useEffect(()=>{const e=c.current;e&&E(e)},[E,p]),o.default.createElement(A.Field,{error:h,hint:j,required:C},o.default.createElement(P.Stack,{spacing:1},n&&o.default.createElement(H.FieldLabel,{onClick:L,action:k},n),o.default.createElement(w.JSONInputContainer,{ref:c,hasError:p,alignItems:"stretch",fontSize:2,hasRadius:!0,...y}),o.default.createElement(T.FieldError,null),o.default.createElement(R.FieldHint,null)))};f.defaultProps={label:void 0,labelAction:void 0,value:"",error:void 0,hint:void 0,required:!1,disabled:!1,onChange(){}};f.propTypes={label:t.default.string,labelAction:t.default.element,value:t.default.string,error:t.default.oneOfType([t.default.string,t.default.bool]),hint:t.default.oneOfType([t.default.string,t.default.node,t.default.arrayOf(t.default.node)]),required:t.default.bool,disabled:t.default.bool,onChange:t.default.func};exports.JSONInput=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),l=require("react"),j=require("@codemirror/lang-json"),M=require("@uiw/react-codemirror"),N=require("./JSONInputContainer.cjs"),u=require("./utils/decorationExtension.cjs"),H=require("../Field/Field.cjs"),R=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const L=require("../Field/FieldHint.cjs"),A=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const y=require("../Stack/Stack.cjs"),z=({label:d,error:a,hint:S,labelAction:E,value:q="",required:x=!1,disabled:h=!1,onChange:m=()=>null,...p})=>{const i=l.useRef(),o=l.useRef(),c=l.useRef(),k=Boolean(a),C=e=>{const r=o.current?.doc;if(r){const{text:s,to:t}=r.line(e),F=t-s.trimStart().length;t>F&&c.current?.dispatch({effects:u.addMarks.of([u.lineHighlightMark.range(F,t)])})}},b=()=>{const e=o.current?.doc;if(e){const r=e.length||0;c.current?.dispatch({effects:u.filterMarks.of((s,t)=>t<=0||s>=r)})}},f=({state:e,view:r})=>{c.current=r,o.current=e,b();const t=j.jsonParseLinter()(r);t.length&&C(e.doc.lineAt(t[0].from).number)},O=(e,r)=>{f(r),m(e)},I=(e,r)=>{c.current=e,o.current=r,f({view:e,state:r})},{setContainer:g}=M.useCodeMirror({value:q,onCreateEditor:I,container:i.current,editable:!h,extensions:[j.json(),u.markField],onChange:O,theme:"dark",basicSetup:{lineNumbers:!0,bracketMatching:!0,closeBrackets:!0,indentOnInput:!0,syntaxHighlighting:!0,highlightSelectionMatches:!0,tabSize:2}}),J=()=>{h||i.current?.children[0].children[1].children[1]?.focus()};return l.useEffect(()=>{const e=i.current;e&&g(e)},[g]),n.jsx(H.Field,{error:a,hint:S,required:x,children:n.jsxs(y.Stack,{spacing:1,children:[d&&n.jsx(R.FieldLabel,{onClick:J,action:E,children:d}),n.jsx(N.JSONInputContainer,{ref:i,hasError:k,alignItems:"stretch",fontSize:2,hasRadius:!0,...p}),n.jsx(A.FieldError,{}),n.jsx(L.FieldHint,{})]})})};exports.JSONInput=z;

package/dist/JSONInput/JSONInput.js

@@ -1,45 +1,71 @@
-import o, { useRef as s, useEffect as J } from "react";
-import t from "prop-types";
-import { json as x, jsonParseLinter as H } from "@codemirror/lang-json";
+import { jsx as e, jsxs as I } from "react/jsx-runtime";
+import { useRef as l, useEffect as J } from "react";
+import { json as j, jsonParseLinter as H } from "@codemirror/lang-json";
 import { useCodeMirror as L } from "@uiw/react-codemirror";
-import { Field as T } from "../Field/Field.js";
+import { JSONInputContainer as z } from "./JSONInputContainer.js";
+import { markField as A, addMarks as B, lineHighlightMark as R, filterMarks as q } from "./utils/decorationExtension.js";
+import { Field as y } from "../Field/Field.js";
 import { FieldLabel as P } from "../Field/FieldLabel.js";
 import "../Field/FieldInput.js";
-import { FieldHint as R } from "../Field/FieldHint.js";
-import { FieldError as j } from "../Field/FieldError.js";
+import { FieldHint as V } from "../Field/FieldHint.js";
+import { FieldError as D } from "../Field/FieldError.js";
 import "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { Stack as q } from "../Stack/Stack.js";
-import { JSONInputContainer as z } from "./JSONInputContainer.js";
-import { markField as B, addMarks as _, lineHighlightMark as w, filterMarks as V } from "./utils/decorationExtension.js";
-const E = ({ label: u, value: b, error: d, hint: S, required: C, onChange: k, disabled: f, labelAction: O, ...F }) => {
-  const i = s(), c = s(null), l = s(null), m = Boolean(d), v = (e) => c.current?.doc?.line(e), y = (e) => {
-    const { text: r, to: n } = v(e), a = n - r.trimStart().length;
-    n > a && l.current?.dispatch({
-      effects: _.of([w.range(a, n)])
-    });
+import { Stack as G } from "../Stack/Stack.js";
+const nr = ({
+  label: a,
+  error: d,
+  hint: p,
+  labelAction: g,
+  value: E = "",
+  required: S = !1,
+  disabled: u = !1,
+  onChange: k = () => null,
+  ...C
+}) => {
+  const o = l(), i = l(), c = l(), b = Boolean(d), F = (r) => {
+    const t = i.current?.doc;
+    if (t) {
+      const {
+        text: s,
+        to: n
+      } = t.line(r), m = n - s.trimStart().length;
+      n > m && c.current?.dispatch({
+        effects: B.of([R.range(m, n)])
+      });
+    }
   }, M = () => {
-    const e = c.current?.doc?.length || 0;
-    l.current?.dispatch({
-      effects: V.of((r, n) => n <= 0 || r >= e)
+    const r = i.current?.doc;
+    if (r) {
+      const t = r.length || 0;
+      c.current?.dispatch({
+        effects: q.of((s, n) => n <= 0 || s >= t)
+      });
+    }
+  }, f = ({
+    state: r,
+    view: t
+  }) => {
+    c.current = t, i.current = r, M();
+    const n = H()(t);
+    n.length && F(r.doc.lineAt(n[0].from).number);
+  }, x = (r, t) => {
+    f(t), k(r);
+  }, N = (r, t) => {
+    c.current = r, i.current = t, f({
+      view: r,
+      state: t
     });
-  }, h = (e) => {
-    const { view: r, state: n } = e;
-    l.current = r, c.current = n, M();
-    const g = H()(r);
-    g.length && y(n.doc.lineAt(g[0].from).number);
-  }, N = (e, r) => {
-    h(r), k(e);
-  }, A = (e, r) => {
-    l.current = e, c.current = r, h({ view: e, state: r });
-  }, { setContainer: p } = L({
-    value: b,
-    onCreateEditor: A,
+  }, {
+    setContainer: h
+  } = L({
+    value: E,
+    onCreateEditor: N,
+    container: o.current,
+    editable: !u,
+    extensions: [j(), A],
+    onChange: x,
     theme: "dark",
-    onChange: N,
-    editable: !f,
-    container: i.current,
-    extensions: [x(), B],
     basicSetup: {
       lineNumbers: !0,
       bracketMatching: !0,
@@ -47,54 +73,35 @@ const E = ({ label: u, value: b, error: d, hint: S, required: C, onChange: k, di
       indentOnInput: !0,
       syntaxHighlighting: !0,
       highlightSelectionMatches: !0,
-      tabSize: 2,
-      defaultCharacterWidth: 5
+      tabSize: 2
     }
-  }), I = () => {
-    f || i.current.children[0].children[1].children[1].focus();
+  }), O = () => {
+    u || o.current?.children[0].children[1].children[1]?.focus();
   };
   return J(() => {
-    const e = i.current;
-    e && p(e);
-  }, [p, m]), /* @__PURE__ */ o.createElement(T, {
+    const r = o.current;
+    r && h(r);
+  }, [h]), e(y, {
     error: d,
-    hint: S,
-    required: C
-  }, /* @__PURE__ */ o.createElement(q, {
-    spacing: 1
-  }, u && /* @__PURE__ */ o.createElement(P, {
-    onClick: I,
-    action: O
-  }, u), /* @__PURE__ */ o.createElement(z, {
-    ref: i,
-    hasError: m,
-    alignItems: "stretch",
-    fontSize: 2,
-    hasRadius: !0,
-    ...F
-  }), /* @__PURE__ */ o.createElement(j, null), /* @__PURE__ */ o.createElement(R, null)));
-};
-E.defaultProps = {
-  label: void 0,
-  labelAction: void 0,
-  value: "",
-  error: void 0,
-  hint: void 0,
-  required: !1,
-  disabled: !1,
-  onChange() {
-  }
-};
-E.propTypes = {
-  label: t.string,
-  labelAction: t.element,
-  value: t.string,
-  error: t.oneOfType([t.string, t.bool]),
-  hint: t.oneOfType([t.string, t.node, t.arrayOf(t.node)]),
-  required: t.bool,
-  disabled: t.bool,
-  onChange: t.func
+    hint: p,
+    required: S,
+    children: I(G, {
+      spacing: 1,
+      children: [a && e(P, {
+        onClick: O,
+        action: g,
+        children: a
+      }), e(z, {
+        ref: o,
+        hasError: b,
+        alignItems: "stretch",
+        fontSize: 2,
+        hasRadius: !0,
+        ...C
+      }), e(D, {}), e(V, {})]
+    })
+  });
 };
 export {
-  E as JSONInput
+  nr as JSONInput
 };

package/dist/JSONInput/JSONInputContainer.cjs

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("styled-components"),r=require("../themes/utils.cjs"),s=require("../Flex/Flex.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=l(o),n=c.default(s.Flex)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("styled-components"),r=require("../Flex/Flex.cjs"),s=require("../themes/utils.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=l(o),n=c.default(r.Flex)`
   line-height: ${({theme:e})=>e.lineHeights[2]};
 
   .cm-editor {
-    /* 
-      Hard coded since the color is the same between themes,
-      theme.colors.neutral800 changes between themes 
-    */
+    /** 
+     * Hard coded since the color is the same between themes,
+     * theme.colors.neutral800 changes between themes 
+     */
     background-color: #32324d;
     width: 100%;
     outline: none;
@@ -14,7 +14,7 @@
   .cm-scroller {
     border: 1px solid ${({theme:e,hasError:t})=>t?e.colors.danger600:e.colors.neutral200};
     /* inputFocusStyle will receive hasError prop */
-    ${r.inputFocusStyle()}
+    ${s.inputFocusStyle()}
   }
 
   .cm-editor,
@@ -24,10 +24,10 @@
 
   .cm-gutters,
   .cm-activeLineGutter {
-    /* 
-      Hard coded since the color is the same between themes,
-      theme.colors.neutral700 changes between themes 
-    */
+    /** 
+     * Hard coded since the color is the same between themes,
+     * theme.colors.neutral700 changes between themes 
+     */
     background-color: #4a4a6a;
   }
 `;exports.JSONInputContainer=n;