@strapi/design-system 1.7.0 → 1.7.1

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

package/dist/IconButton/IconButton.js

@@ -1,53 +1,24 @@
 import { jsxs as m, jsx as a } from "react/jsx-runtime";
 import * as e from "react";
 import s from "styled-components";
-import { BaseButton as g } from "../BaseButton/BaseButton.js";
-import { Flex as v } from "../Flex/Flex.js";
-import { Tooltip as R } from "../Tooltip/Tooltip.js";
-import { VisuallyHidden as k } from "../VisuallyHidden/VisuallyHidden.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: `${2}rem`,
-    width: `${2}rem`,
-    ...h,
-    ref: $,
-    onClick: (b) => {
-      !o && l && l(b);
-    },
-    children: [a(k, {
-      as: "span",
-      children: r ?? p
-    }), e.cloneElement(f || u, {
-      "aria-hidden": !0,
-      focusable: !1
-    })]
-  });
-  return r ? a(R, {
-    label: r,
-    children: t
-  }) : t;
-}), n = s(g)`
+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};
     }
   }
 
@@ -55,9 +26,7 @@ const W = e.forwardRef(({
     svg {
       > g,
       path {
-        fill: ${({
-  theme: r
-}) => r.colors.neutral600};
+        fill: ${({ theme: r }) => r.colors.neutral600};
       }
     }
   }
@@ -66,9 +35,7 @@ const W = e.forwardRef(({
     svg {
       > g,
       path {
-        fill: ${({
-  theme: r
-}) => r.colors.neutral400};
+        fill: ${({ theme: r }) => r.colors.neutral400};
       }
     }
   }
@@ -76,26 +43,18 @@ const W = e.forwardRef(({
   &[aria-disabled='true'] {
     svg {
       path {
-        fill: ${({
-  theme: r
-}) => r.colors.neutral600};
+        fill: ${({ theme: r }) => r.colors.neutral600};
       }
     }
   }
-`, E = s(v)`
+`, 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`};
   }
 
   & ${n} {
@@ -104,35 +63,25 @@ const W = e.forwardRef(({
 
     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};
         }
       }
     }
@@ -140,9 +89,7 @@ const W = e.forwardRef(({
     &[aria-disabled='true'] {
       svg {
         path {
-          fill: ${({
-  theme: r
-}) => r.colors.neutral600};
+          fill: ${({ theme: r }) => r.colors.neutral600};
         }
       }
     }

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 t=require("styled-components"),o=require("../themes/utils.cjs"),c=require("../Flex/Flex.cjs"),n=t(c.Flex)`
   line-height: ${({theme:e})=>e.lineHeights[2]};
 
   .cm-editor {
@@ -12,9 +12,9 @@
   }
 
   .cm-scroller {
-    border: 1px solid ${({theme:e,hasError:t})=>t?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 */
-    ${s.inputFocusStyle()}
+    ${o.inputFocusStyle()}
   }
 
   .cm-editor,

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;

package/dist/KeyboardNavigable/KeyboardNavigable.js

@@ -1,52 +1,45 @@
 import { jsx as m } from "react/jsx-runtime";
-import { Box as i } from "../Box/Box.js";
 import { KeyboardKeys as o } from "../helpers/keyboardKeys.js";
-const v = ({
-  tagName: s,
-  attributeName: a = "",
-  ...d
-}) => {
+import { Box as i } from "../Box/Box.js";
+const v = ({ tagName: s, attributeName: a = "", ...d }) => {
   const r = () => {
     const e = document.activeElement;
     return e ? s ? e.tagName.toLowerCase() === s : e.hasAttribute(a) : !1;
   }, l = (e) => s ? e.querySelectorAll(s) : e.querySelectorAll(`[${a}]`);
-  return m(i, {
-    onKeyDown: (e) => {
-      switch (e.key) {
-        case o.RIGHT:
-        case o.DOWN: {
-          if (r()) {
-            e.preventDefault();
-            const n = document.activeElement, t = [...l(e.currentTarget)], c = t.findIndex((f) => f === n), u = c + 1 < t.length ? c + 1 : 0;
-            t[u].focus();
-          }
-          break;
-        }
-        case o.LEFT:
-        case o.UP: {
-          if (r()) {
-            e.preventDefault();
-            const n = document.activeElement, t = [...l(e.currentTarget)], c = t.findIndex((f) => f === n), u = c - 1 > -1 ? c - 1 : t.length - 1;
-            t[u].focus();
-          }
-          break;
+  return m(i, { onKeyDown: (e) => {
+    switch (e.key) {
+      case o.RIGHT:
+      case o.DOWN: {
+        if (r()) {
+          e.preventDefault();
+          const n = document.activeElement, t = [...l(e.currentTarget)], c = t.findIndex((f) => f === n), u = c + 1 < t.length ? c + 1 : 0;
+          t[u].focus();
         }
-        case o.HOME: {
-          r() && (e.preventDefault(), l(e.currentTarget).item(0).focus());
-          break;
+        break;
+      }
+      case o.LEFT:
+      case o.UP: {
+        if (r()) {
+          e.preventDefault();
+          const n = document.activeElement, t = [...l(e.currentTarget)], c = t.findIndex((f) => f === n), u = c - 1 > -1 ? c - 1 : t.length - 1;
+          t[u].focus();
         }
-        case o.END: {
-          if (r()) {
-            e.preventDefault();
-            const n = l(e.currentTarget);
-            n.item(n.length - 1).focus();
-          }
-          break;
+        break;
+      }
+      case o.HOME: {
+        r() && (e.preventDefault(), l(e.currentTarget).item(0).focus());
+        break;
+      }
+      case o.END: {
+        if (r()) {
+          e.preventDefault();
+          const n = l(e.currentTarget);
+          n.item(n.length - 1).focus();
         }
+        break;
       }
-    },
-    ...d
-  });
+    }
+  }, ...d });
 };
 export {
   v as KeyboardNavigable

package/dist/KeyboardNavigable/index.cjs

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

package/dist/Layout/ActionLayout.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),i=require("prop-types"),f=require("styled-components"),n=require("../Box/Box.cjs"),s=require("../Flex/Flex.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(d),r=l(i),c=l(f),u=c.default(s.Flex)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const r=require("prop-types"),s=require("styled-components"),l=require("../Flex/Flex.cjs"),i=require("../Box/Box.cjs"),c=s(l.Flex)`
   & > * + * {
     margin-left: ${({theme:e})=>e.spaces[2]};
   }
 
   margin-left: ${({pullRight:e})=>e?"auto":void 0};
-`,p=c.default(u)`
+`,d=s(c)`
   flex-shrink: 0;
-`,a=({startActions:e,endActions:o})=>e||o?t.default.createElement(n.Box,{paddingLeft:10,paddingRight:10},t.default.createElement(n.Box,{paddingBottom:4},t.default.createElement(s.Flex,{justifyContent:"space-between",alignItems:"flex-start"},e&&t.default.createElement(u,{wrap:"wrap"},e),o&&t.default.createElement(p,{pullRight:!0},o)))):null;a.defaultProps={endActions:void 0,startActions:void 0};a.propTypes={endActions:r.default.node,startActions:r.default.node};exports.ActionLayout=a;
+`,o=({startActions:e,endActions:n})=>e||n?t.jsx(i.Box,{paddingLeft:10,paddingRight:10,children:t.jsx(i.Box,{paddingBottom:4,children:t.jsxs(l.Flex,{justifyContent:"space-between",alignItems:"flex-start",children:[e&&t.jsx(c,{wrap:"wrap",children:e}),n&&t.jsx(d,{pullRight:!0,children:n})]})})}):null;o.defaultProps={endActions:void 0,startActions:void 0};o.propTypes={endActions:r.node,startActions:r.node};exports.ActionLayout=o;

package/dist/Layout/ActionLayout.js

@@ -1,25 +1,29 @@
-import e from "react";
-import r from "prop-types";
-import a from "styled-components";
-import { Box as n } from "../Box/Box.js";
-import { Flex as i } from "../Flex/Flex.js";
-const l = a(i)`
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import "react";
+import e from "prop-types";
+import n from "styled-components";
+import { Flex as p } from "../Flex/Flex.js";
+import { Box as i } from "../Box/Box.js";
+const d = n(p)`
   & > * + * {
     margin-left: ${({ theme: t }) => t.spaces[2]};
   }
 
   margin-left: ${({ pullRight: t }) => t ? "auto" : void 0};
-`, m = a(l)`
+`, a = n(d)`
   flex-shrink: 0;
-`, p = ({ startActions: t, endActions: o }) => t || o ? /* @__PURE__ */ e.createElement(n, { paddingLeft: 10, paddingRight: 10 }, /* @__PURE__ */ e.createElement(n, { paddingBottom: 4 }, /* @__PURE__ */ e.createElement(i, { justifyContent: "space-between", alignItems: "flex-start" }, t && /* @__PURE__ */ e.createElement(l, { wrap: "wrap" }, t), o && /* @__PURE__ */ e.createElement(m, { pullRight: !0 }, o)))) : null;
-p.defaultProps = {
+`, l = ({ startActions: t, endActions: r }) => t || r ? /* @__PURE__ */ o(i, { paddingLeft: 10, paddingRight: 10, children: /* @__PURE__ */ o(i, { paddingBottom: 4, children: /* @__PURE__ */ s(p, { justifyContent: "space-between", alignItems: "flex-start", children: [
+  t && /* @__PURE__ */ o(d, { wrap: "wrap", children: t }),
+  r && /* @__PURE__ */ o(a, { pullRight: !0, children: r })
+] }) }) }) : null;
+l.defaultProps = {
   endActions: void 0,
   startActions: void 0
 };
-p.propTypes = {
-  endActions: r.node,
-  startActions: r.node
+l.propTypes = {
+  endActions: e.node,
+  startActions: e.node
 };
 export {
-  p as ActionLayout
+  l as ActionLayout
 };

package/dist/Layout/ContentLayout.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),n=require("prop-types"),u=require("../Box/Box.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=t(r),c=t(n),o=({children:e})=>a.default.createElement(u.Box,{paddingLeft:10,paddingRight:10},e);o.propTypes={children:c.default.node.isRequired};exports.ContentLayout=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const o=require("prop-types"),n=require("../Box/Box.cjs"),e=({children:t})=>r.jsx(n.Box,{paddingLeft:10,paddingRight:10,children:t});e.propTypes={children:o.node.isRequired};exports.ContentLayout=e;

package/dist/Layout/ContentLayout.js

@@ -1,10 +1,11 @@
-import t from "react";
-import o from "prop-types";
-import { Box as r } from "../Box/Box.js";
-const p = ({ children: e }) => /* @__PURE__ */ t.createElement(r, { paddingLeft: 10, paddingRight: 10 }, e);
-p.propTypes = {
-  children: o.node.isRequired
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import p from "prop-types";
+import { Box as t } from "../Box/Box.js";
+const e = ({ children: o }) => /* @__PURE__ */ r(t, { paddingLeft: 10, paddingRight: 10, children: o });
+e.propTypes = {
+  children: p.node.isRequired
 };
 export {
-  p as ContentLayout
+  e as ContentLayout
 };