@strapi/design-system 0.0.0-599b75fb-test → 0.0.0-622b91ef

package/dist/Grid/Grid.cjs

@@ -1,5 +1,5 @@
-"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)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),i=require("styled-components"),d=require("../helpers/handleResponsiveValues.cjs"),l=require("../Box/Box.cjs"),n=e=>e&&e.__esModule?e:{default:e},u=n(i),a=u.default(l.Box)`
   display: grid;
   grid-template-columns: repeat(${({gridCols:e})=>e}, 1fr);
-  ${({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;
+  ${({theme:e,gap:t})=>d("gap",t,e)}
+`,c=e=>{const{gap:t="0",gridCols:r=12,...s}=e;return o.jsx(a,{gap:t,gridCols:r,...s})};exports.Grid=c;

package/dist/Grid/Grid.js

@@ -1,25 +1,15 @@
-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 s } from "../Box/Box.js";
-import d from "../helpers/handleResponsiveValues.js";
-const f = n(s)`
+import { jsx as e } from "react/jsx-runtime";
+import s from "styled-components";
+import i from "../helpers/handleResponsiveValues.js";
+import { Box as m } from "../Box/Box.js";
+const a = s(m)`
   display: grid;
   grid-template-columns: repeat(${({ gridCols: r }) => r}, 1fr);
-  ${({ 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: o.oneOfType([o.number, o.arrayOf(o.number)]),
-  gridCols: o.number
+  ${({ theme: r, gap: o }) => i("gap", o, r)}
+`, f = (r) => {
+  const { gap: o = "0", gridCols: p = 12, ...t } = r;
+  return e(a, { gap: o, gridCols: p, ...t });
 };
 export {
-  p as Grid
+  f 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("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`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),i=require("../Box/Box.cjs"),o=e=>e&&e.__esModule?e:{default:e},d=o(t),r=d.default(i.Box)`
   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}=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;
+`;exports.GridItem=r;

package/dist/Grid/GridItem.js

@@ -1,33 +1,17 @@
-import o from "react";
-import e from "prop-types";
-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};
+import m from "styled-components";
+import { Box as e } from "../Box/Box.js";
+const t = m(e)`
+  grid-column: span ${({ col: i }) => i};
   max-width: 100%;
 
-  ${({ theme: r }) => r.mediaQueries.tablet} {
-    grid-column: span ${({ s: r }) => r};
+  ${({ theme: i }) => i.mediaQueries.tablet} {
+    grid-column: span ${({ s: i }) => i};
   }
 
-  ${({ theme: r }) => r.mediaQueries.mobile} {
-    grid-column: span ${({ xs: r }) => r};
+  ${({ theme: i }) => i.mediaQueries.mobile} {
+    grid-column: span ${({ xs: i }) => i};
   }
-`, m = ({ col: r, xs: t, s: i, ...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,
-  s: void 0,
-  xs: void 0
-};
-m.propTypes = {
-  col: e.number,
-  s: e.number,
-  xs: e.number
-};
+`;
 export {
-  m as GridItem
+  t as GridItem
 };

package/dist/Grid/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Grid.cjs"),r=require("./GridItem.cjs");exports.Grid=e.Grid;exports.GridItem=r.GridItem;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Grid.cjs"),r=require("./GridItem.cjs");exports.Grid=e.Grid;exports.GridItem=r.GridItem;

package/dist/Icon/Icon.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),l=require("react"),u=require("styled-components"),a=require("../Box/Box.cjs"),d=require("../helpers/theme.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=o(l),f=o(u),m=f.default(a.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),s=require("react"),u=require("styled-components"),a=require("../helpers/theme.cjs"),d=require("../Box/Box.cjs"),o=e=>e&&e.__esModule?e:{default:e},i=o(s),f=o(u),m=f.default(d.Box)`
   path {
-    fill: ${({color:e,theme:t})=>d.extractStyleFromTheme(t.colors,e,void 0)};
+    fill: ${({color:e,theme:t})=>a.extractStyleFromTheme(t.colors,e,void 0)};
   }
   ${({theme:e,colors:t})=>t(e)}
-`,r=i.default.forwardRef(({color:e="neutral600",colors:t=()=>"",...c},s)=>n.jsx(m,{ref:s,color:e,colors:t,...c}));r.displayName="Icon";exports.Icon=r;
+`,r=i.default.forwardRef(({color:e="neutral600",colors:t=()=>"",...c},n)=>l.jsx(m,{ref:n,color:e,colors:t,...c}));r.displayName="Icon";exports.Icon=r;

package/dist/Icon/Icon.js

@@ -1,29 +1,14 @@
 import { jsx as m } from "react/jsx-runtime";
 import f from "react";
 import c from "styled-components";
-import { Box as l } from "../Box/Box.js";
-import { extractStyleFromTheme as p } from "../helpers/theme.js";
-const a = c(l)`
+import { extractStyleFromTheme as l } from "../helpers/theme.js";
+import { Box as p } from "../Box/Box.js";
+const a = c(p)`
   path {
-    fill: ${({
-  color: o,
-  theme: r
-}) => p(r.colors, o, void 0)};
+    fill: ${({ color: o, theme: r }) => l(r.colors, o, void 0)};
   }
-  ${({
-  theme: o,
-  colors: r
-}) => r(o)}
-`, n = f.forwardRef(({
-  color: o = "neutral600",
-  colors: r = () => "",
-  ...t
-}, e) => m(a, {
-  ref: e,
-  color: o,
-  colors: r,
-  ...t
-}));
+  ${({ theme: o, colors: r }) => r(o)}
+`, n = f.forwardRef(({ color: o = "neutral600", colors: r = () => "", ...t }, e) => m(a, { ref: e, color: o, colors: r, ...t }));
 n.displayName = "Icon";
 export {
   n as Icon

package/dist/Icon/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Icon.cjs");exports.Icon=e.Icon;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Icon.cjs");exports.Icon=e.Icon;

package/dist/IconButton/IconButton.cjs

@@ -1,4 +1,4 @@
-"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)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),v=require("react"),j=require("styled-components"),y=require("../VisuallyHidden/VisuallyHidden.cjs"),_=require("../Tooltip/Tooltip.cjs"),B=require("../BaseButton/BaseButton.cjs"),m=require("../Flex/Flex.cjs"),R=e=>e&&e.__esModule?e:{default:e};function q(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 o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const u=q(v),c=R(j),x=u.forwardRef(({label:e,background:t,borderWidth:r,noBorder:o=!1,children:d,icon:f,disabled:l=!1,onClick:a,"aria-label":p,...b},g)=>{const $=h=>{!l&&a&&a(h)},s=n.jsxs(i,{"aria-disabled":l,background:l?"neutral150":t,borderWidth:o?0:r,justifyContent:"center",height:"2rem",width:"2rem",...b,ref:g,onClick:$,children:[n.jsx(y.VisuallyHidden,{as:"span",children:e??p}),u.cloneElement(f||d,{"aria-hidden":!0,focusable:!1})]});return e?n.jsx(_.Tooltip,{label:e,children:s}):s}),i=c.default(B.BaseButton)`
   svg {
     > g,
     path {
@@ -31,7 +31,7 @@
       }
     }
   }
-`,R=i.default(v.Flex)`
+`,O=c.default(m.Flex)`
   & span:first-child button {
     border-left: 1px solid ${({theme:e})=>e.colors.neutral200};
     border-radius: ${({theme:e})=>`${e.borderRadius} 0 0 ${e.borderRadius}`};
@@ -41,7 +41,7 @@
     border-radius: ${({theme:e})=>`0 ${e.borderRadius} ${e.borderRadius} 0`};
   }
 
-  & ${c} {
+  & ${i} {
     border-radius: 0;
     border-left: none;
 
@@ -78,4 +78,4 @@
       }
     }
   }
-`;exports.IconButton=_;exports.IconButtonGroup=R;
+`;exports.IconButton=x;exports.IconButtonGroup=O;

package/dist/IconButton/IconButton.js

@@ -1,51 +1,24 @@
-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)`
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import * as e from "react";
+import s from "styled-components";
+import { VisuallyHidden as g } from "../VisuallyHidden/VisuallyHidden.js";
+import { Tooltip as v } from "../Tooltip/Tooltip.js";
+import { BaseButton as R } from "../BaseButton/BaseButton.js";
+import { Flex as k } from "../Flex/Flex.js";
+const W = e.forwardRef(({ label: r, background: i, borderWidth: c, noBorder: d = !1, children: u, icon: f, disabled: o = !1, onClick: l, "aria-label": p, ...h }, $) => {
+  const t = m(n, { "aria-disabled": o, background: o ? "neutral150" : i, borderWidth: d ? 0 : c, justifyContent: "center", height: "2rem", width: "2rem", ...h, ref: $, onClick: (b) => {
+    !o && l && l(b);
+  }, children: [a(g, { as: "span", children: r ?? p }), e.cloneElement(f || u, {
+    "aria-hidden": !0,
+    focusable: !1
+    // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
+  })] });
+  return r ? a(v, { label: r, children: t }) : t;
+}), n = s(R)`
   svg {
     > g,
     path {
-      fill: ${({
-  theme: r
-}) => r.colors.neutral500};
+      fill: ${({ theme: r }) => r.colors.neutral500};
     }
   }
 
@@ -53,9 +26,7 @@ const I = a.forwardRef(({
     svg {
       > g,
       path {
-        fill: ${({
-  theme: r
-}) => r.colors.neutral600};
+        fill: ${({ theme: r }) => r.colors.neutral600};
       }
     }
   }
@@ -64,9 +35,7 @@ const I = a.forwardRef(({
     svg {
       > g,
       path {
-        fill: ${({
-  theme: r
-}) => r.colors.neutral400};
+        fill: ${({ theme: r }) => r.colors.neutral400};
       }
     }
   }
@@ -74,63 +43,45 @@ const I = a.forwardRef(({
   &[aria-disabled='true'] {
     svg {
       path {
-        fill: ${({
-  theme: r
-}) => r.colors.neutral600};
+        fill: ${({ theme: r }) => r.colors.neutral600};
       }
     }
   }
-`, w = n(m)`
+`, E = s(k)`
   & 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} {
+  & ${n} {
     border-radius: 0;
     border-left: none;
 
     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};
         }
       }
     }
@@ -138,15 +89,13 @@ const I = a.forwardRef(({
     &[aria-disabled='true'] {
       svg {
         path {
-          fill: ${({
-  theme: r
-}) => r.colors.neutral600};
+          fill: ${({ theme: r }) => r.colors.neutral600};
         }
       }
     }
   }
 `;
 export {
-  I as IconButton,
-  w as IconButtonGroup
+  W as IconButton,
+  E as IconButtonGroup
 };

package/dist/IconButton/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./IconButton.cjs");exports.IconButton=o.IconButton;exports.IconButtonGroup=o.IconButtonGroup;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./IconButton.cjs");exports.IconButton=o.IconButton;exports.IconButtonGroup=o.IconButtonGroup;

package/dist/JSONInput/JSONInput.cjs

@@ -1 +1 @@
-"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"),N=require("@uiw/react-codemirror"),k=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("../Flex/Flex.cjs"),z=({label:d,error:a,hint:E,labelAction:x,value:S="",required:m=!1,disabled:h=!1,onChange:q=()=>null,...p})=>{const i=l.useRef(),o=l.useRef(),c=l.useRef(),C=Boolean(a),b=e=>{const r=o.current?.doc;if(r){const{text:s,to:t}=r.line(e),g=t-s.trimStart().length;t>g&&c.current?.dispatch({effects:u.addMarks.of([u.lineHighlightMark.range(g,t)])})}},I=()=>{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,I();const t=j.jsonParseLinter()(r);t.length&&b(e.doc.lineAt(t[0].from).number)},O=(e,r)=>{F(r),q(e)},J=(e,r)=>{c.current=e,o.current=r,F({view:e,state:r})},{setContainer:f}=N.useCodeMirror({value:S,onCreateEditor:J,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}}),M=()=>{h||i.current?.children[0].children[1].children[1]?.focus()};return l.useEffect(()=>{const e=i.current;e&&f(e)},[f]),n.jsx(H.Field,{error:a,hint:E,required:m,children:n.jsxs(y.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[d&&n.jsx(R.FieldLabel,{onClick:M,action:x,children:d}),n.jsx(k.JSONInputContainer,{ref:i,hasError:C,alignItems:"stretch",fontSize:2,hasRadius:!0,...p}),n.jsx(A.FieldError,{}),n.jsx(L.FieldHint,{})]})})};exports.JSONInput=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("react"),S=require("@codemirror/lang-json"),M=require("@uiw/react-codemirror"),N=require("./JSONInputContainer.cjs"),l=require("./utils/decorationExtension.cjs"),R=require("../Field/Field.cjs"),H=require("../Flex/Flex.cjs"),L=require("../Field/FieldLabel.cjs"),y=require("../Field/FieldError.cjs"),z=require("../Field/FieldHint.cjs"),A=({label:a,error:d,hint:x,labelAction:F,value:m="",required:q=!1,disabled:h=!1,onChange:p=()=>null,...b})=>{const i=u.useRef(),o=u.useRef(),c=u.useRef(),j=!!d,C=e=>{const r=o.current?.doc;if(r){const{text:s,to:t}=r.line(e),E=t-s.trimStart().length;t>E&&c.current?.dispatch({effects:l.addMarks.of([l.lineHighlightMark.range(E,t)])})}},O=()=>{const e=o.current?.doc;if(e){const r=e.length||0;c.current?.dispatch({effects:l.filterMarks.of((s,t)=>t<=0||s>=r)})}},f=({state:e,view:r})=>{c.current=r,o.current=e,O();const t=S.jsonParseLinter()(r);t.length&&C(e.doc.lineAt(t[0].from).number)},k=(e,r)=>{f(r),p(e)},I=(e,r)=>{c.current=e,o.current=r,f({view:e,state:r})},{setContainer:g}=M.useCodeMirror({value:m,onCreateEditor:I,container:i.current,editable:!h,extensions:[S.json(),l.markField],onChange:k,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 u.useEffect(()=>{const e=i.current;e&&g(e)},[g]),n.jsx(R.Field,{error:d,hint:x,required:q,children:n.jsxs(H.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[a&&n.jsx(L.FieldLabel,{onClick:J,action:F,children:a}),n.jsx(N.JSONInputContainer,{ref:i,hasError:j,alignItems:"stretch",fontSize:2,hasRadius:!0,...b}),n.jsx(y.FieldError,{}),n.jsx(z.FieldHint,{})]})})};exports.JSONInput=A;

package/dist/JSONInput/JSONInput.js

@@ -5,31 +5,15 @@ import { useCodeMirror as L } from "@uiw/react-codemirror";
 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 V } from "../Field/FieldHint.js";
+import { Flex as P } from "../Flex/Flex.js";
+import { FieldLabel as V } from "../Field/FieldLabel.js";
 import { FieldError as D } from "../Field/FieldError.js";
-import "../Field/FieldContext.js";
-import "../Field/FieldAction.js";
-import { Flex as G } from "../Flex/Flex.js";
-const er = ({
-  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(), F = Boolean(d), b = (r) => {
+import { FieldHint as G } from "../Field/FieldHint.js";
+const v = ({ label: a, error: d, hint: g, labelAction: p, value: E = "", required: S = !1, disabled: u = !1, onChange: k = () => null, ...C }) => {
+  const o = l(), i = l(), c = l(), F = !!d, b = (r) => {
     const t = i.current?.doc;
     if (t) {
-      const {
-        text: s,
-        to: e
-      } = t.line(r), m = e - s.trimStart().length;
+      const { text: s, to: e } = t.line(r), m = e - s.trimStart().length;
       e > m && c.current?.dispatch({
         effects: B.of([R.range(m, e)])
       });
@@ -42,23 +26,15 @@ const er = ({
         effects: q.of((s, e) => e <= 0 || s >= t)
       });
     }
-  }, f = ({
-    state: r,
-    view: t
-  }) => {
+  }, f = ({ state: r, view: t }) => {
     c.current = t, i.current = r, x();
     const e = H()(t);
     e.length && b(r.doc.lineAt(e[0].from).number);
   }, M = (r, t) => {
     f(t), k(r);
   }, I = (r, t) => {
-    c.current = r, i.current = t, f({
-      view: r,
-      state: t
-    });
-  }, {
-    setContainer: h
-  } = L({
+    c.current = r, i.current = t, f({ view: r, state: t });
+  }, { setContainer: h } = L({
     value: E,
     onCreateEditor: I,
     container: o.current,
@@ -81,29 +57,8 @@ const er = ({
   return J(() => {
     const r = o.current;
     r && h(r);
-  }, [h]), n(y, {
-    error: d,
-    hint: p,
-    required: S,
-    children: O(G, {
-      direction: "column",
-      alignItems: "stretch",
-      gap: 1,
-      children: [a && n(P, {
-        onClick: N,
-        action: g,
-        children: a
-      }), n(z, {
-        ref: o,
-        hasError: F,
-        alignItems: "stretch",
-        fontSize: 2,
-        hasRadius: !0,
-        ...C
-      }), n(D, {}), n(V, {})]
-    })
-  });
+  }, [h]), n(y, { error: d, hint: g, required: S, children: O(P, { direction: "column", alignItems: "stretch", gap: 1, children: [a && n(V, { onClick: N, action: p, children: a }), n(z, { ref: o, hasError: F, alignItems: "stretch", fontSize: 2, hasRadius: !0, ...C }), n(D, {}), n(G, {})] }) });
 };
 export {
-  er as JSONInput
+  v as JSONInput
 };

package/dist/JSONInput/JSONInputContainer.cjs

@@ -1,4 +1,4 @@
-"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)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),o=require("../themes/utils.cjs"),s=require("../Flex/Flex.cjs"),n=e=>e&&e.__esModule?e:{default:e},c=n(r),l=c.default(s.Flex)`
   line-height: ${({theme:e})=>e.lineHeights[2]};
 
   .cm-editor {
@@ -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 */
-    ${s.inputFocusStyle()}
+    ${o.inputFocusStyle()}
   }
 
   .cm-editor,
@@ -30,4 +30,4 @@
      */
     background-color: #4a4a6a;
   }
-`;exports.JSONInputContainer=n;
+`;exports.JSONInputContainer=l;

package/dist/JSONInput/JSONInputContainer.js

@@ -1,10 +1,8 @@
 import o from "styled-components";
-import { Flex as t } from "../Flex/Flex.js";
-import { inputFocusStyle as c } from "../themes/utils.js";
-const l = o(t)`
-  line-height: ${({
-  theme: e
-}) => e.lineHeights[2]};
+import { inputFocusStyle as t } from "../themes/utils.js";
+import { Flex as c } from "../Flex/Flex.js";
+const l = o(c)`
+  line-height: ${({ theme: e }) => e.lineHeights[2]};
 
   .cm-editor {
     /** 
@@ -17,19 +15,14 @@ const l = o(t)`
   }
 
   .cm-scroller {
-    border: 1px solid ${({
-  theme: e,
-  hasError: r
-}) => r ? e.colors.danger600 : e.colors.neutral200};
+    border: 1px solid ${({ theme: e, hasError: r }) => r ? e.colors.danger600 : e.colors.neutral200};
     /* inputFocusStyle will receive hasError prop */
-    ${c()}
+    ${t()}
   }
 
   .cm-editor,
   .cm-scroller {
-    border-radius: ${({
-  theme: e
-}) => e.borderRadius};
+    border-radius: ${({ theme: e }) => e.borderRadius};
   }
 
   .cm-gutters,

package/dist/JSONInput/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./JSONInput.cjs");exports.JSONInput=e.JSONInput;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./JSONInput.cjs");exports.JSONInput=t.JSONInput;

package/dist/JSONInput/utils/decorationExtension.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@codemirror/state"),t=require("@codemirror/view"),a=i.StateEffect.define(),d=i.StateEffect.define(),s=t.Decoration.mark({attributes:{style:"background-color: yellow; color: black"}}),n=i.StateField.define({create(){return t.Decoration.none},update(e,o){return e=e.map(o.changes),o.effects.forEach(r=>{r.is(a)?e=e.update({add:r.value,sort:!0}):r.is(d)&&(e=e.update({filter:r.value}))}),e},provide:e=>t.EditorView.decorations.from(e)});exports.addMarks=a;exports.filterMarks=d;exports.lineHighlightMark=s;exports.markField=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("@codemirror/state"),r=require("@codemirror/view"),a=i.StateEffect.define(),d=i.StateEffect.define(),s=r.Decoration.mark({attributes:{style:"background-color: yellow; color: black"}}),n=i.StateField.define({create(){return r.Decoration.none},update(e,o){return e=e.map(o.changes),o.effects.forEach(t=>{t.is(a)?e=e.update({add:t.value,sort:!0}):t.is(d)&&(e=e.update({filter:t.value}))}),e},provide:e=>r.EditorView.decorations.from(e)});exports.addMarks=a;exports.filterMarks=d;exports.lineHighlightMark=s;exports.markField=n;

package/dist/JSONInput/utils/decorationExtension.js

@@ -3,9 +3,11 @@ import { Decoration as i, EditorView as a } from "@codemirror/view";
 const n = o.define(), s = o.define(), l = i.mark({
   attributes: { style: "background-color: yellow; color: black" }
 }), m = d.define({
+  // Start with an empty set of decorations
   create() {
     return i.none;
   },
+  // This is called whenever the editor updates it computes the new set
   update(r, t) {
     return r = r.map(t.changes), t.effects.forEach((e) => {
       e.is(n) ? r = r.update({
@@ -14,6 +16,7 @@ const n = o.define(), s = o.define(), l = i.mark({
       }) : e.is(s) && (r = r.update({ filter: e.value }));
     }), r;
   },
+  // Indicate that this field provides a set of decorations
   provide: (r) => a.decorations.from(r)
 });
 export {

package/dist/KeyboardNavigable/KeyboardNavigable.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react/jsx-runtime"),m=require("../Box/Box.cjs"),s=require("../helpers/keyboardKeys.cjs"),b=({tagName:r,attributeName:d="",...f})=>{const c=()=>{const e=document.activeElement;return e?r?e.tagName.toLowerCase()===r:e.hasAttribute(d):!1},l=e=>r?e.querySelectorAll(r):e.querySelectorAll(`[${d}]`),i=e=>{switch(e.key){case s.KeyboardKeys.RIGHT:case s.KeyboardKeys.DOWN:{if(c()){e.preventDefault();const n=document.activeElement,t=[...l(e.currentTarget)],o=t.findIndex(a=>a===n),u=o+1<t.length?o+1:0;t[u].focus()}break}case s.KeyboardKeys.LEFT:case s.KeyboardKeys.UP:{if(c()){e.preventDefault();const n=document.activeElement,t=[...l(e.currentTarget)],o=t.findIndex(a=>a===n),u=o-1>-1?o-1:t.length-1;t[u].focus()}break}case s.KeyboardKeys.HOME:{c()&&(e.preventDefault(),l(e.currentTarget).item(0).focus());break}case s.KeyboardKeys.END:{if(c()){e.preventDefault();const n=l(e.currentTarget);n.item(n.length-1).focus()}break}}};return y.jsx(m.Box,{onKeyDown:i,...f})};exports.KeyboardNavigable=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),s=require("../helpers/keyboardKeys.cjs"),m=require("../Box/Box.cjs"),b=({tagName:r,attributeName:d="",...f})=>{const c=()=>{const e=document.activeElement;return e?r?e.tagName.toLowerCase()===r:e.hasAttribute(d):!1},l=e=>r?e.querySelectorAll(r):e.querySelectorAll(`[${d}]`),i=e=>{switch(e.key){case s.KeyboardKeys.RIGHT:case s.KeyboardKeys.DOWN:{if(c()){e.preventDefault();const n=document.activeElement,t=[...l(e.currentTarget)],o=t.findIndex(a=>a===n),u=o+1<t.length?o+1:0;t[u].focus()}break}case s.KeyboardKeys.LEFT:case s.KeyboardKeys.UP:{if(c()){e.preventDefault();const n=document.activeElement,t=[...l(e.currentTarget)],o=t.findIndex(a=>a===n),u=o-1>-1?o-1:t.length-1;t[u].focus()}break}case s.KeyboardKeys.HOME:{c()&&(e.preventDefault(),l(e.currentTarget).item(0).focus());break}case s.KeyboardKeys.END:{if(c()){e.preventDefault();const n=l(e.currentTarget);n.item(n.length-1).focus()}break}}};return y.jsx(m.Box,{onKeyDown:i,...f})};exports.KeyboardNavigable=b;