@strapi/design-system 1.5.0 → 1.6.0-alpha.0

package/dist/Combobox/Combobox.js

@@ -1,7 +1,6 @@
 import o, { useState as y, useRef as E, useEffect as U, useLayoutEffect as Ee, Children as _, cloneElement as xe } from "react";
 import e from "prop-types";
-import ve from "@strapi/icons/CarretDown";
-import ye from "@strapi/icons/Cross";
+import { Cross as ve, CarretDown as ye } from "@strapi/icons";
 import { useId as Ie } from "../helpers/useId.js";
 import { filterOptions as j, maintainScrollVisibility as ke, getActionFromKey as Oe, MenuActions as b, getUpdatedIndex as $ } from "./utils.js";
 import { Flex as q } from "../Flex/Flex.js";
@@ -45,14 +44,14 @@ const I = ({
   placeholder: oe,
   required: F,
   value: d,
-  ...re
+  ...ne
 }) => {
-  const ne = () => s.find((t) => t.props?.value.toLowerCase() === d.toLowerCase()).props?.children, [a, T] = y(0), [ae, ie] = y(null), [l, A] = y(s), [u, le] = y(!1), [n, k] = y(""), C = E(), O = E(!1), v = E(), P = E(), se = E(), V = E(!0), i = Ie("combobox"), K = `${i}-label`;
-  if (!g && !re["aria-label"])
+  const re = () => s.find((t) => t.props?.value.toLowerCase() === d.toLowerCase()).props?.children, [a, T] = y(0), [ae, ie] = y(null), [l, A] = y(s), [u, le] = y(!1), [r, k] = y(""), C = E(), O = E(!1), v = E(), P = E(), se = E(), V = E(!0), i = Ie("combobox"), K = `${i}-label`;
+  if (!g && !ne["aria-label"])
     throw new Error('The Combobox component needs a "label" or an "aria-label" props');
   U(() => {
-    A(j(s, n));
-  }, [n, s]), U(() => {
+    A(j(s, r));
+  }, [r, s]), U(() => {
     u && C.current && ke(C.current);
   }, [a, u]), Ee(() => {
     V.current && (V.current = !1);
@@ -61,11 +60,11 @@ const I = ({
     S(null), k("");
   }, pe = (t) => {
     D && D(t);
-    const r = v.current.value;
-    A(j(s, r)), T(0), ie(null), n !== r && k(r), u || f(!0, !1);
+    const n = v.current.value;
+    A(j(s, n)), T(0), ie(null), r !== n && k(n), u || f(!0, !1);
   }, de = (t) => {
-    const { key: r } = t, p = x && n ? l.length : l.length - 1, h = Oe(r, u);
-    switch (d && !n && r === Ue.BACKSPACE && N(), h) {
+    const { key: n } = t, p = x && r ? l.length : l.length - 1, h = Oe(n, u);
+    switch (d && !r && n === Ue.BACKSPACE && N(), h) {
       case b.Next: {
         if (a === p) {
           m(0);
@@ -114,25 +113,25 @@ const I = ({
   }, H = () => {
     O.current = !0;
   }, w = (t) => {
-    const r = l[t];
-    if (k(""), r) {
-      S(r.props.value), f(!1);
+    const n = l[t];
+    if (k(""), n) {
+      S(n.props.value), f(!1);
       return;
     }
-    x && (ee(n), f(!1));
-  }, f = (t, r = !0) => {
-    le(t), r && v.current.focus();
-  }, me = _.toArray(l).map((t, r) => {
-    const p = a === r;
+    x && (ee(r), f(!1));
+  }, f = (t, n = !0) => {
+    le(t), n && v.current.focus();
+  }, me = _.toArray(l).map((t, n) => {
+    const p = a === n;
     return xe(t, {
-      id: `${i}-${r}`,
-      "aria-selected": ae === r,
-      "aria-posinset": r + 1,
+      id: `${i}-${n}`,
+      "aria-selected": ae === n,
+      "aria-posinset": n + 1,
       "aria-setsize": _.toArray(l).length,
       ref(h) {
         p && (C.current = h);
       },
-      onClick: () => ue(r),
+      onClick: () => ue(n),
       onMouseDown: H,
       isSelected: p
     });
@@ -141,8 +140,8 @@ const I = ({
   }, ge = () => {
     v.current.focus(), f(!0);
   }, Ce = () => {
-    const t = l.findIndex((r) => r.props?.children === n);
-    return n && t === -1;
+    const t = l.findIndex((n) => n.props?.children === r);
+    return r && t === -1;
   }, he = (t) => {
     t.preventDefault(), f(t, !0);
   };
@@ -165,9 +164,9 @@ const I = ({
     hasError: M
   }, /* @__PURE__ */ o.createElement(Be, {
     wrap: "wrap"
-  }, !n && d && /* @__PURE__ */ o.createElement(De, {
+  }, !r && d && /* @__PURE__ */ o.createElement(De, {
     id: `${i}-selected-value`
-  }, /* @__PURE__ */ o.createElement(z, null, ne())), /* @__PURE__ */ o.createElement(Fe, {
+  }, /* @__PURE__ */ o.createElement(z, null, re())), /* @__PURE__ */ o.createElement(Fe, {
     "aria-activedescendant": ce,
     "aria-autocomplete": "list",
     "aria-controls": `${i}-listbox`,
@@ -189,8 +188,8 @@ const I = ({
     role: "combobox",
     spellCheck: "off",
     type: "text",
-    value: n
-  })), /* @__PURE__ */ o.createElement(q, null, (d || n) && /* @__PURE__ */ o.createElement(Me, {
+    value: r
+  })), /* @__PURE__ */ o.createElement(q, null, (d || r) && /* @__PURE__ */ o.createElement(Me, {
     id: `${i}-clear`,
     "aria-label": G,
     disabled: c,
@@ -198,7 +197,7 @@ const I = ({
     as: "button",
     onClick: be,
     type: "button"
-  }, /* @__PURE__ */ o.createElement(ye, null)), /* @__PURE__ */ o.createElement(Le, {
+  }, /* @__PURE__ */ o.createElement(ve, null)), /* @__PURE__ */ o.createElement(Le, {
     disabled: c,
     paddingLeft: 3,
     "aria-hidden": !0,
@@ -206,7 +205,7 @@ const I = ({
     onClick: ge,
     tabIndex: -1,
     type: "button"
-  }, /* @__PURE__ */ o.createElement(ve, null)))), /* @__PURE__ */ o.createElement(Ke, null), /* @__PURE__ */ o.createElement(Ne, null)), u && /* @__PURE__ */ o.createElement(we, {
+  }, /* @__PURE__ */ o.createElement(ye, null)))), /* @__PURE__ */ o.createElement(Ke, null), /* @__PURE__ */ o.createElement(Ne, null)), u && /* @__PURE__ */ o.createElement(we, {
     id: `${i}-popover`,
     source: P,
     spacing: 4,
@@ -229,7 +228,7 @@ const I = ({
     onMouseDown: H,
     onClick: () => w(),
     taindex: 0
-  }, J(n))), !l.length && !x && !L && /* @__PURE__ */ o.createElement($e, {
+  }, J(r))), !l.length && !x && !L && /* @__PURE__ */ o.createElement($e, {
     paddingLeft: 4,
     paddingRight: 4,
     paddingTop: 2,
@@ -237,7 +236,7 @@ const I = ({
     ref: C
   }, /* @__PURE__ */ o.createElement(z, {
     textColor: "neutral800"
-  }, Z(n))), L && /* @__PURE__ */ o.createElement(q, {
+  }, Z(r))), L && /* @__PURE__ */ o.createElement(q, {
     justifyContent: "center",
     alignItems: "center",
     paddingTop: 2,

package/dist/DatePicker/DatePicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),L=require("prop-types"),O=require("@strapi/icons/Calendar"),z=require("@strapi/icons/Cross"),S=require("../themes/sizes.cjs"),B=require("../TextInput/TextInput.cjs"),d=require("./components.cjs"),M=require("./DatePickerCalendar.cjs"),v=require("./utils/formatDate.cjs"),W=require("../helpers/getDefaultLocale.cjs"),i=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},a=i(o),e=i(L),A=i(O),F=i(z),f=({ariaLabel:t,initialDate:h,selectedDate:n,onChange:k,label:c,locale:q,selectedDateLabel:P,onClear:p,clearLabel:_,disabled:r,id:y,minDate:R,maxDate:j,...E})=>{const[D,s]=o.useState(!1),l=o.useRef(null),m=o.useRef(null),g=q||W.getDefaultLocale(),b=n?v.formatDate(n,g):"",C=()=>{r||s(u=>!u)},I=()=>{r||(p(),m.current.focus())},T=u=>{k(u),s(!1)},x=()=>{s(!1)};return a.default.createElement(d.DatePickerWrapper,{bold:D},a.default.createElement(B.TextInput,{ref:l,onClick:C,onChange:()=>{},value:b,startAction:a.default.createElement(d.DatePickerButton,{ref:m,onClick:C,"aria-label":n?P(v.formatDate(n,g)):c||t,type:"button","aria-disabled":r},a.default.createElement(A.default,{"aria-hidden":!0})),endAction:p&&b?a.default.createElement(d.IconBox,{as:"button",onClick:I,"aria-label":_,"aria-disabled":r},a.default.createElement(F.default,null)):void 0,"aria-autocomplete":"none",label:c,"aria-label":t,disabled:r,id:y,...E}),l.current&&l.current.inputWrapperRef&&D&&a.default.createElement(M.DatePickerCalendar,{selectedDate:n,initialDate:h,onChange:T,onEscape:x,popoverSource:l.current.inputWrapperRef,label:c||t,minDate:R,maxDate:j}))};f.defaultProps={ariaLabel:void 0,clearLabel:void 0,disabled:!1,id:void 0,label:void 0,locale:void 0,initialDate:new Date,minDate:void 0,maxDate:void 0,onClear:void 0,parentFieldId:void 0,placeholder:void 0,selectedDate:void 0,size:"M"};f.propTypes={ariaLabel:e.default.string,clearLabel:e.default.string,disabled:e.default.bool,id:e.default.string,initialDate:e.default.instanceOf(Date),label:e.default.string,locale:e.default.string,maxDate:e.default.instanceOf(Date),minDate:e.default.instanceOf(Date),onChange:e.default.func.isRequired,onClear:e.default.func,parentFieldId:e.default.string,placeholder:e.default.string,selectedDate:e.default.instanceOf(Date),selectedDateLabel:e.default.func.isRequired,size:e.default.oneOf(Object.keys(S.sizes.input))};exports.DatePicker=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),z=require("prop-types"),v=require("@strapi/icons"),I=require("../themes/sizes.cjs"),S=require("../TextInput/TextInput.cjs"),u=require("./components.cjs"),B=require("./DatePickerCalendar.cjs"),C=require("./utils/formatDate.cjs"),M=require("../helpers/getDefaultLocale.cjs"),h=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},a=h(o),e=h(z),f=({ariaLabel:t,initialDate:k,selectedDate:n,onChange:P,label:i,locale:q,selectedDateLabel:y,onClear:d,clearLabel:R,disabled:l,id:j,minDate:E,maxDate:T,...x})=>{const[p,c]=o.useState(!1),r=o.useRef(null),D=o.useRef(null),m=q||M.getDefaultLocale(),b=n?C.formatDate(n,m):"",g=()=>{l||c(s=>!s)},L=()=>{l||(d(),D.current.focus())},O=s=>{P(s),c(!1)},_=()=>{c(!1)};return a.default.createElement(u.DatePickerWrapper,{bold:p},a.default.createElement(S.TextInput,{ref:r,onClick:g,onChange:()=>{},value:b,startAction:a.default.createElement(u.DatePickerButton,{ref:D,onClick:g,"aria-label":n?y(C.formatDate(n,m)):i||t,type:"button","aria-disabled":l},a.default.createElement(v.Calendar,{"aria-hidden":!0})),endAction:d&&b?a.default.createElement(u.IconBox,{as:"button",onClick:L,"aria-label":R,"aria-disabled":l},a.default.createElement(v.Cross,null)):void 0,"aria-autocomplete":"none",label:i,"aria-label":t,disabled:l,id:j,...x}),r.current&&r.current.inputWrapperRef&&p&&a.default.createElement(B.DatePickerCalendar,{selectedDate:n,initialDate:k,onChange:O,onEscape:_,popoverSource:r.current.inputWrapperRef,label:i||t,minDate:E,maxDate:T}))};f.defaultProps={ariaLabel:void 0,clearLabel:void 0,disabled:!1,id:void 0,label:void 0,locale:void 0,initialDate:new Date,minDate:void 0,maxDate:void 0,onClear:void 0,placeholder:void 0,selectedDate:void 0,size:"M"};f.propTypes={ariaLabel:e.default.string,clearLabel:e.default.string,disabled:e.default.bool,id:e.default.string,initialDate:e.default.instanceOf(Date),label:e.default.string,locale:e.default.string,maxDate:e.default.instanceOf(Date),minDate:e.default.instanceOf(Date),onChange:e.default.func.isRequired,onClear:e.default.func,placeholder:e.default.string,selectedDate:e.default.instanceOf(Date),selectedDateLabel:e.default.func.isRequired,size:e.default.oneOf(Object.keys(I.sizes.input))};exports.DatePicker=f;

package/dist/DatePicker/DatePicker.js

@@ -1,13 +1,12 @@
-import t, { useState as z, useRef as D } from "react";
+import t, { useState as B, useRef as D } from "react";
 import e from "prop-types";
-import B from "@strapi/icons/Calendar";
-import T from "@strapi/icons/Cross";
-import { sizes as W } from "../themes/sizes.js";
-import { TextInput as q } from "../TextInput/TextInput.js";
-import { DatePickerWrapper as A, DatePickerButton as F, IconBox as S } from "./components.js";
-import { DatePickerCalendar as V } from "./DatePickerCalendar.js";
+import { Calendar as T, Cross as W } from "@strapi/icons";
+import { sizes as q } from "../themes/sizes.js";
+import { TextInput as A } from "../TextInput/TextInput.js";
+import { DatePickerWrapper as I, DatePickerButton as S, IconBox as V } from "./components.js";
+import { DatePickerCalendar as _ } from "./DatePickerCalendar.js";
 import { formatDate as b } from "./utils/formatDate.js";
-import { getDefaultLocale as _ } from "../helpers/getDefaultLocale.js";
+import { getDefaultLocale as j } from "../helpers/getDefaultLocale.js";
 const v = ({
   ariaLabel: o,
   initialDate: g,
@@ -24,49 +23,49 @@ const v = ({
   maxDate: O,
   ...x
 }) => {
-  const [p, l] = z(!1), n = D(null), f = D(null), d = h || _(), m = a ? b(a, d) : "", u = () => {
+  const [f, l] = B(!1), n = D(null), p = D(null), u = h || j(), m = a ? b(a, u) : "", d = () => {
     r || l((c) => !c);
   }, y = () => {
-    r || (s(), f.current.focus());
-  }, I = (c) => {
+    r || (s(), p.current.focus());
+  }, L = (c) => {
     C(c), l(!1);
-  }, L = () => {
+  }, z = () => {
     l(!1);
   };
-  return /* @__PURE__ */ t.createElement(A, {
-    bold: p
-  }, /* @__PURE__ */ t.createElement(q, {
+  return /* @__PURE__ */ t.createElement(I, {
+    bold: f
+  }, /* @__PURE__ */ t.createElement(A, {
     ref: n,
-    onClick: u,
+    onClick: d,
     onChange: () => {
     },
     value: m,
-    startAction: /* @__PURE__ */ t.createElement(F, {
-      ref: f,
-      onClick: u,
-      "aria-label": a ? k(b(a, d)) : i || o,
+    startAction: /* @__PURE__ */ t.createElement(S, {
+      ref: p,
+      onClick: d,
+      "aria-label": a ? k(b(a, u)) : i || o,
       type: "button",
       "aria-disabled": r
-    }, /* @__PURE__ */ t.createElement(B, {
+    }, /* @__PURE__ */ t.createElement(T, {
       "aria-hidden": !0
     })),
-    endAction: s && m ? /* @__PURE__ */ t.createElement(S, {
+    endAction: s && m ? /* @__PURE__ */ t.createElement(V, {
       as: "button",
       onClick: y,
       "aria-label": E,
       "aria-disabled": r
-    }, /* @__PURE__ */ t.createElement(T, null)) : void 0,
+    }, /* @__PURE__ */ t.createElement(W, null)) : void 0,
     "aria-autocomplete": "none",
     label: i,
     "aria-label": o,
     disabled: r,
     id: R,
     ...x
-  }), n.current && n.current.inputWrapperRef && p && /* @__PURE__ */ t.createElement(V, {
+  }), n.current && n.current.inputWrapperRef && f && /* @__PURE__ */ t.createElement(_, {
     selectedDate: a,
     initialDate: g,
-    onChange: I,
-    onEscape: L,
+    onChange: L,
+    onEscape: z,
     popoverSource: n.current.inputWrapperRef,
     label: i || o,
     minDate: P,
@@ -84,7 +83,6 @@ v.defaultProps = {
   minDate: void 0,
   maxDate: void 0,
   onClear: void 0,
-  parentFieldId: void 0,
   placeholder: void 0,
   selectedDate: void 0,
   size: "M"
@@ -101,11 +99,10 @@ v.propTypes = {
   minDate: e.instanceOf(Date),
   onChange: e.func.isRequired,
   onClear: e.func,
-  parentFieldId: e.string,
   placeholder: e.string,
   selectedDate: e.instanceOf(Date),
   selectedDateLabel: e.func.isRequired,
-  size: e.oneOf(Object.keys(W.input))
+  size: e.oneOf(Object.keys(q.input))
 };
 export {
   v as DatePicker

package/dist/Flex/Flex.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("styled-components"),r=require("../Box/Box.cjs"),n=require("../helpers/handleResponsiveValues.cjs"),o=require("./FlexProps.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},u=i(l),a={direction:!0},t=u.default(r.Box).withConfig({shouldForwardProp:(e,s)=>!a[e]&&s(e)})`
-  align-items: ${({alignItems:e})=>e};
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("styled-components"),s=require("../Box/Box.cjs"),l=require("../helpers/handleResponsiveValues.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=n(o),r={direction:!0},a=i.default(s.Box).withConfig({shouldForwardProp:(e,t)=>!r[e]&&t(e)})`
+  align-items: ${({alignItems:e="center"})=>e};
   display: ${({inline:e})=>e?"inline-flex":"flex"};
-  flex-direction: ${({direction:e})=>e};
+  flex-direction: ${({direction:e="row"})=>e};
   flex-shrink: ${({shrink:e})=>e};
   flex-wrap: ${({wrap:e})=>e};
-  ${({gap:e,theme:s})=>n("gap",e,s)}};
+  ${({gap:e,theme:t})=>l("gap",e,t)};
   justify-content: ${({justifyContent:e})=>e};
-`;t.defaultProps=o.flexDefaultProps;t.propTypes=o.flexPropTypes;exports.Flex=t;
+`;exports.Flex=a;

package/dist/Flex/Flex.js

@@ -1,22 +1,34 @@
-import t from "styled-components";
-import { Box as i } from "../Box/Box.js";
-import l from "../helpers/handleResponsiveValues.js";
-import { flexDefaultProps as s, flexPropTypes as p } from "./FlexProps.js";
-const f = {
+import i from "styled-components";
+import { Box as r } from "../Box/Box.js";
+import t from "../helpers/handleResponsiveValues.js";
+const n = {
   direction: !0
-}, r = t(i).withConfig({
-  shouldForwardProp: (e, o) => !f[e] && o(e)
+}, a = i(r).withConfig({
+  shouldForwardProp: (e, o) => !n[e] && o(e)
 })`
-  align-items: ${({ alignItems: e }) => e};
-  display: ${({ inline: e }) => e ? "inline-flex" : "flex"};
-  flex-direction: ${({ direction: e }) => e};
-  flex-shrink: ${({ shrink: e }) => e};
-  flex-wrap: ${({ wrap: e }) => e};
-  ${({ gap: e, theme: o }) => l("gap", e, o)}};
-  justify-content: ${({ justifyContent: e }) => e};
+  align-items: ${({
+  alignItems: e = "center"
+}) => e};
+  display: ${({
+  inline: e
+}) => e ? "inline-flex" : "flex"};
+  flex-direction: ${({
+  direction: e = "row"
+}) => e};
+  flex-shrink: ${({
+  shrink: e
+}) => e};
+  flex-wrap: ${({
+  wrap: e
+}) => e};
+  ${({
+  gap: e,
+  theme: o
+}) => t("gap", e, o)};
+  justify-content: ${({
+  justifyContent: e
+}) => e};
 `;
-r.defaultProps = s;
-r.propTypes = p;
 export {
-  r as Flex
+  a as Flex
 };

package/dist/Icon/Icon.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),a=require("prop-types"),n=require("styled-components"),u=require("../Box/Box.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=r(s),l=r(a),d=r(n),p=d.default(u.Box)`
+"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)`
   path {
-    fill: ${({color:e,theme:t})=>t.colors[e]};
+    fill: ${({color:e,theme:t})=>d.extractStyleFromTheme(t.colors,e,void 0)};
   }
   ${({theme:e,colors:t})=>t(e)}
-`,o=c.default.forwardRef((e,t)=>c.default.createElement(p,{ref:t,...e}));o.displayName="Icon";o.defaultProps={color:"neutral600",colors:()=>{}};o.propTypes={color:l.default.string,colors:l.default.func};exports.Icon=o;
+`,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;

package/dist/Icon/Icon.js

@@ -1,26 +1,30 @@
-import e from "react";
-import p from "prop-types";
+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";
-const s = c(l)`
+import { extractStyleFromTheme as p } from "../helpers/theme.js";
+const a = c(l)`
   path {
-    fill: ${({ color: o, theme: r }) => r.colors[o]};
+    fill: ${({
+  color: o,
+  theme: r
+}) => p(r.colors, o, void 0)};
   }
-  ${({ theme: o, colors: r }) => r(o)}
-`, t = e.forwardRef((o, r) => /* @__PURE__ */ e.createElement(s, {
-  ref: r,
-  ...o
+  ${({
+  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
 }));
-t.displayName = "Icon";
-t.defaultProps = {
-  color: "neutral600",
-  colors: () => {
-  }
-};
-t.propTypes = {
-  color: p.string,
-  colors: p.func
-};
+n.displayName = "Icon";
 export {
-  t as Icon
+  n as Icon
 };

package/dist/JSONInput/JSONInput.cjs

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

package/dist/JSONInput/JSONInput.js

@@ -0,0 +1,97 @@
+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 { useCodeMirror as I } from "@uiw/react-codemirror";
+import { Field as L } from "../Field/Field.js";
+import { FieldLabel as T } from "../Field/FieldLabel.js";
+import "../Field/FieldInput.js";
+import { FieldHint as P } from "../Field/FieldHint.js";
+import { FieldError as R } from "../Field/FieldError.js";
+import "../Field/FieldContext.js";
+import "../Field/FieldAction.js";
+import { Stack as j } from "../Stack/Stack.js";
+import { JSONInputContainer as q } from "./JSONInputContainer.js";
+import { markField as z, addMarks as B, lineHighlightMark as _, filterMarks as w } from "./utils/decorationExtension.js";
+const g = ({ label: d, value: E, error: u, hint: b, required: S, onChange: C, disabled: O, labelAction: k, ...F }) => {
+  const a = s(), i = s(null), l = s(null), m = Boolean(u), v = (e) => i.current?.doc?.line(e), y = (e) => {
+    const { text: r, to: n } = v(e), c = n - r.trimStart().length;
+    n > c && l.current?.dispatch({
+      effects: B.of([_.range(c, n)])
+    });
+  }, M = () => {
+    const e = i.current?.doc?.length || 0;
+    l.current?.dispatch({
+      effects: w.of((r, n) => n <= 0 || r >= e)
+    });
+  }, f = (e) => {
+    const { view: r, state: n } = e;
+    l.current = r, i.current = n, M();
+    const p = H()(r);
+    p.length && y(n.doc.lineAt(p[0].from).number);
+  }, N = (e, r) => {
+    f(r), C(e);
+  }, A = (e, r) => {
+    l.current = e, i.current = r, f({ view: e, state: r });
+  }, { setContainer: h } = I({
+    value: E,
+    onCreateEditor: A,
+    theme: "dark",
+    onChange: N,
+    editable: !O,
+    container: a.current,
+    extensions: [x(), z],
+    basicSetup: {
+      lineNumbers: !0,
+      bracketMatching: !0,
+      closeBrackets: !0,
+      indentOnInput: !0,
+      syntaxHighlighting: !0,
+      highlightSelectionMatches: !0,
+      tabSize: 2,
+      defaultCharacterWidth: 5
+    }
+  });
+  return J(() => {
+    const e = a.current;
+    e && h(e);
+  }, [h, m]), /* @__PURE__ */ o.createElement(L, {
+    error: u,
+    hint: b,
+    required: S
+  }, /* @__PURE__ */ o.createElement(j, {
+    spacing: 1
+  }, d && /* @__PURE__ */ o.createElement(T, {
+    action: k
+  }, d), /* @__PURE__ */ o.createElement(q, {
+    ref: a,
+    hasError: m,
+    alignItems: "stretch",
+    fontSize: 2,
+    hasRadius: !0,
+    ...F
+  }), /* @__PURE__ */ o.createElement(R, null), /* @__PURE__ */ o.createElement(P, null)));
+};
+g.defaultProps = {
+  label: void 0,
+  labelAction: void 0,
+  value: "",
+  error: void 0,
+  hint: void 0,
+  required: !1,
+  disabled: !1,
+  onChange() {
+  }
+};
+g.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
+};
+export {
+  g as JSONInput
+};

package/dist/JSONInput/JSONInputContainer.cjs

@@ -0,0 +1,30 @@
+"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},n=l(o),c=n.default(s.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 
+    */
+    background-color: #32324d;
+    width: 100%;
+    outline: none;
+    border: 1px solid ${({theme:e,hasError:t})=>t?e.colors.danger600:e.colors.neutral200};
+    /* inputFocusStyle will receive hasError prop */
+    ${r.inputFocusStyle()}
+  }
+
+  .cm-editor,
+  .cm-scroller {
+    border-radius: ${({theme:e})=>e.borderRadius};
+  }
+
+  .cm-gutters,
+  .cm-activeLineGutter {
+    /* 
+      Hard coded since the color is the same between themes,
+      theme.colors.neutral700 changes between themes 
+    */
+    background-color: #4a4a6a;
+  }
+`;exports.JSONInputContainer=c;

package/dist/JSONInput/JSONInputContainer.js

@@ -0,0 +1,36 @@
+import r from "styled-components";
+import { inputFocusStyle as t } from "../themes/utils.js";
+import { Flex as c } from "../Flex/Flex.js";
+const l = r(c)`
+  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 
+    */
+    background-color: #32324d;
+    width: 100%;
+    outline: none;
+    border: 1px solid ${({ theme: e, hasError: o }) => o ? e.colors.danger600 : e.colors.neutral200};
+    /* inputFocusStyle will receive hasError prop */
+    ${t()}
+  }
+
+  .cm-editor,
+  .cm-scroller {
+    border-radius: ${({ theme: e }) => e.borderRadius};
+  }
+
+  .cm-gutters,
+  .cm-activeLineGutter {
+    /* 
+      Hard coded since the color is the same between themes,
+      theme.colors.neutral700 changes between themes 
+    */
+    background-color: #4a4a6a;
+  }
+`;
+export {
+  l as JSONInputContainer
+};

package/dist/JSONInput/index.cjs

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

package/dist/JSONInput/index.js

@@ -0,0 +1,4 @@
+import { JSONInput as r } from "./JSONInput.js";
+export {
+  r as JSONInput
+};

package/dist/JSONInput/utils/decorationExtension.cjs

@@ -0,0 +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;

package/dist/JSONInput/utils/decorationExtension.js

@@ -0,0 +1,24 @@
+import { StateEffect as o, StateField as d } from "@codemirror/state";
+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({
+  create() {
+    return i.none;
+  },
+  update(r, t) {
+    return r = r.map(t.changes), t.effects.forEach((e) => {
+      e.is(n) ? r = r.update({
+        add: e.value,
+        sort: !0
+      }) : e.is(s) && (r = r.update({ filter: e.value }));
+    }), r;
+  },
+  provide: (r) => a.decorations.from(r)
+});
+export {
+  n as addMarks,
+  s as filterMarks,
+  l as lineHighlightMark,
+  m as markField
+};

package/dist/KeyboardNavigable/KeyboardNavigable.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react"),K=require("prop-types"),g=require("../Box/Box.cjs"),r=require("../helpers/keyboardKeys.cjs"),y=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},v=y(p),f=y(K),d=({tagName:t,attributeName:i,...b})=>{const a=()=>{const e=document.activeElement;return t?e.tagName.toLowerCase()===t:e.hasAttribute(i)},c=e=>t?e.querySelectorAll(t):e.querySelectorAll(`[${i}]`),m=e=>{switch(e.key){case r.KeyboardKeys.RIGHT:case r.KeyboardKeys.DOWN:{if(a()){e.preventDefault();const n=document.activeElement,o=[...c(e.currentTarget)],s=o.findIndex(u=>u===n),l=s+1<o.length?s+1:0;o[l].focus()}break}case r.KeyboardKeys.LEFT:case r.KeyboardKeys.UP:{if(a()){e.preventDefault();const n=document.activeElement,o=[...c(e.currentTarget)],s=o.findIndex(u=>u===n),l=s-1>-1?s-1:o.length-1;o[l].focus()}break}case r.KeyboardKeys.HOME:{a()&&(e.preventDefault(),c(e.currentTarget).item(0).focus());break}case r.KeyboardKeys.END:{if(a()){e.preventDefault();const n=c(e.currentTarget);n.item(n.length-1).focus()}break}}};return v.default.createElement(g.Box,{onKeyDown:m,...b})};d.defaultProps={attributeName:void 0,tagName:void 0};d.propTypes={attributeName:f.default.string,tagName:f.default.string};exports.KeyboardNavigable=d;
+"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;