@strapi/design-system 0.0.0-599b75fb-test

package/dist/Field/FieldLabel.js

@@ -0,0 +1,50 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import r from "styled-components";
+import { useField as h } from "./FieldContext.js";
+import { Flex as f } from "../Flex/Flex.js";
+import { once as g } from "../helpers/deprecations.js";
+import { Typography as n } from "../Typography/Typography.js";
+const u = g(console.warn), A = c(({
+  children: e,
+  action: o,
+  required: i,
+  ...l
+}, s) => {
+  const {
+    id: a,
+    required: d
+  } = h(), p = d || i;
+  return i !== void 0 && u('Deprecation warning: Usage of "required" prop in FieldLabel component is deprecated. This is discouraged and will be removed in the next major release. Please use the Field component to share the required prop.'), m(x, {
+    ref: s,
+    variant: "pi",
+    textColor: "neutral800",
+    htmlFor: a,
+    fontWeight: "bold",
+    as: "label",
+    ...l,
+    children: [e, p && t(y, {
+      textColor: "danger600",
+      children: "*"
+    }), o && t(F, {
+      marginLeft: 1,
+      children: o
+    })]
+  });
+}), x = r(n)`
+  display: flex;
+  align-items: center;
+`, y = r(n)`
+  line-height: 0;
+`, F = r(f)`
+  line-height: 0;
+
+  svg path {
+    fill: ${({
+  theme: e
+}) => e.colors.neutral500};
+  }
+`;
+export {
+  A as FieldLabel
+};

package/dist/Field/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("./Field.cjs"),t=require("./FieldLabel.cjs"),e=require("./FieldInput.cjs"),r=require("./FieldHint.cjs"),d=require("./FieldError.cjs"),i=require("./FieldContext.cjs"),F=require("./FieldAction.cjs");exports.Field=l.Field;exports.FieldLabel=t.FieldLabel;exports.FieldInput=e.FieldInput;exports.InputWrapper=e.InputWrapper;exports.FieldHint=r.FieldHint;exports.FieldError=d.FieldError;exports.FieldContext=i.FieldContext;exports.useField=i.useField;exports.FieldAction=F.FieldAction;

package/dist/Field/index.js

@@ -0,0 +1,18 @@
+import { Field as o } from "./Field.js";
+import { FieldLabel as p } from "./FieldLabel.js";
+import { FieldInput as l, InputWrapper as d } from "./FieldInput.js";
+import { FieldHint as F } from "./FieldHint.js";
+import { FieldError as m } from "./FieldError.js";
+import { FieldContext as u, useField as a } from "./FieldContext.js";
+import { FieldAction as b } from "./FieldAction.js";
+export {
+  o as Field,
+  b as FieldAction,
+  u as FieldContext,
+  m as FieldError,
+  F as FieldHint,
+  l as FieldInput,
+  p as FieldLabel,
+  d as InputWrapper,
+  a as useField
+};

package/dist/Flex/Flex.cjs

@@ -0,0 +1,9 @@
+"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="row"})=>e};
+  flex-shrink: ${({shrink:e})=>e};
+  flex-wrap: ${({wrap:e})=>e};
+  ${({gap:e,theme:t})=>l("gap",e,t)};
+  justify-content: ${({justifyContent:e})=>e};
+`;exports.Flex=a;

package/dist/Flex/Flex.js

@@ -0,0 +1,34 @@
+import i from "styled-components";
+import { Box as r } from "../Box/Box.js";
+import t from "../helpers/handleResponsiveValues.js";
+const n = {
+  direction: !0
+}, a = i(r).withConfig({
+  shouldForwardProp: (e, o) => !n[e] && o(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};
+`;
+export {
+  a as Flex
+};

package/dist/Flex/index.cjs

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

package/dist/Flex/index.js

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

package/dist/FocusTrap/FocusTrap.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),r=require("react"),l=require("../helpers/getFocusableNodes.cjs"),a=require("../helpers/keyboardKeys.cjs"),m=({onEscape:n,restoreFocus:o=!0,...f})=>{const s=r.useRef(null);r.useEffect(()=>{let e=null;return o&&(e=document.activeElement),()=>{e&&e.focus()}},[o]),r.useEffect(()=>{if(!s.current)return;const e=l.getFocusableNodes(s.current);e.length>0?e[0].focus():console.warn("[FocusTrap]: it seems there are no focusable elements in the focus trap tree. Make sure there s at least one.")},[]);const i=e=>{if(e.key===a.KeyboardKeys.ESCAPE&&n){n();return}if(e.key!==a.KeyboardKeys.TAB)return;const t=l.getFocusableNodes(s.current);if(t.length>0){const u=t[0],c=t[t.length-1];e.shiftKey?u===document.activeElement&&(e.preventDefault(),c.focus()):c===document.activeElement&&(e.preventDefault(),u.focus())}};return d.jsx("div",{ref:s,onKeyDown:i,...f})};exports.FocusTrap=m;

package/dist/FocusTrap/FocusTrap.js

@@ -0,0 +1,41 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as m, useEffect as l } from "react";
+import { getFocusableNodes as u } from "../helpers/getFocusableNodes.js";
+import { KeyboardKeys as c } from "../helpers/keyboardKeys.js";
+const v = ({
+  onEscape: r,
+  restoreFocus: o = !0,
+  ...i
+}) => {
+  const n = m(null);
+  return l(() => {
+    let e = null;
+    return o && (e = document.activeElement), () => {
+      e && e.focus();
+    };
+  }, [o]), l(() => {
+    if (!n.current)
+      return;
+    const e = u(n.current);
+    e.length > 0 ? e[0].focus() : console.warn("[FocusTrap]: it seems there are no focusable elements in the focus trap tree. Make sure there s at least one.");
+  }, []), a("div", {
+    ref: n,
+    onKeyDown: (e) => {
+      if (e.key === c.ESCAPE && r) {
+        r();
+        return;
+      }
+      if (e.key !== c.TAB)
+        return;
+      const t = u(n.current);
+      if (t.length > 0) {
+        const s = t[0], f = t[t.length - 1];
+        e.shiftKey ? s === document.activeElement && (e.preventDefault(), f.focus()) : f === document.activeElement && (e.preventDefault(), s.focus());
+      }
+    },
+    ...i
+  });
+};
+export {
+  v as FocusTrap
+};

package/dist/FocusTrap/index.cjs

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

package/dist/FocusTrap/index.js

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

package/dist/Grid/Grid.cjs

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

package/dist/Grid/Grid.js

@@ -0,0 +1,25 @@
+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)`
+  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
+};
+export {
+  p as Grid
+};

package/dist/Grid/GridContext.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext({gap:0,gridCols:12}),r=()=>e.useContext(t);exports.GridContext=t;exports.useGrid=r;

package/dist/Grid/GridContext.js

@@ -0,0 +1,6 @@
+import { createContext as t, useContext as o } from "react";
+const e = t({ gap: 0, gridCols: 12 }), n = () => o(e);
+export {
+  e as GridContext,
+  n as useGrid
+};

package/dist/Grid/GridItem.cjs

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),c=require("prop-types"),p=require("styled-components"),m=require("./GridContext.cjs"),f=require("../Box/Box.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=o(l),t=o(c),y=o(p),x=y.default.div`
+  grid-column: span ${({col:e})=>e};
+  max-width: 100%;
+
+  ${({theme:e})=>e.mediaQueries.tablet} {
+    grid-column: span ${({s:e})=>e};
+  }
+
+  ${({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;

package/dist/Grid/GridItem.js

@@ -0,0 +1,33 @@
+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};
+  max-width: 100%;
+
+  ${({ theme: r }) => r.mediaQueries.tablet} {
+    grid-column: span ${({ s: r }) => r};
+  }
+
+  ${({ theme: r }) => r.mediaQueries.mobile} {
+    grid-column: span ${({ xs: r }) => r};
+  }
+`, 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
+};

package/dist/Grid/index.cjs

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

package/dist/Grid/index.js

@@ -0,0 +1,6 @@
+import { Grid as e } from "./Grid.js";
+import { GridItem as t } from "./GridItem.js";
+export {
+  e as Grid,
+  t as GridItem
+};

package/dist/Icon/Icon.cjs

@@ -0,0 +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)`
+  path {
+    fill: ${({color:e,theme:t})=>d.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;

package/dist/Icon/Icon.js

@@ -0,0 +1,30 @@
+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)`
+  path {
+    fill: ${({
+  color: o,
+  theme: r
+}) => p(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
+}));
+n.displayName = "Icon";
+export {
+  n as Icon
+};

package/dist/Icon/index.cjs

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

package/dist/Icon/index.js

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

package/dist/IconButton/IconButton.cjs

@@ -0,0 +1,81 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),$=require("react"),h=require("styled-components"),j=require("../BaseButton/BaseButton.cjs"),v=require("../Flex/Flex.cjs"),y=require("../Tooltip/Tooltip.cjs"),B=require("../VisuallyHidden/VisuallyHidden.cjs"),m=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function x(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const u=x($),i=m(h),_=u.forwardRef(({label:e,noBorder:r=!1,children:t,icon:o,disabled:l=!1,onClick:a,"aria-label":d,...f},p)=>{const b=g=>{!l&&a&&a(g)},s=n.jsxs(c,{"aria-disabled":l,background:l?"neutral150":void 0,borderWidth:r?0:void 0,justifyContent:"center",height:`${2}rem`,width:`${2}rem`,...f,ref:p,onClick:b,children:[n.jsx(B.VisuallyHidden,{as:"span",children:e??d}),u.cloneElement(o||t,{"aria-hidden":!0,focusable:!1})]});return e?n.jsx(y.Tooltip,{label:e,children:s}):s}),c=i.default(j.BaseButton)`
+  svg {
+    > g,
+    path {
+      fill: ${({theme:e})=>e.colors.neutral500};
+    }
+  }
+
+  &:hover {
+    svg {
+      > g,
+      path {
+        fill: ${({theme:e})=>e.colors.neutral600};
+      }
+    }
+  }
+
+  &:active {
+    svg {
+      > g,
+      path {
+        fill: ${({theme:e})=>e.colors.neutral400};
+      }
+    }
+  }
+
+  &[aria-disabled='true'] {
+    svg {
+      path {
+        fill: ${({theme:e})=>e.colors.neutral600};
+      }
+    }
+  }
+`,R=i.default(v.Flex)`
+  & span:first-child button {
+    border-left: 1px solid ${({theme:e})=>e.colors.neutral200};
+    border-radius: ${({theme:e})=>`${e.borderRadius} 0 0 ${e.borderRadius}`};
+  }
+
+  & span:last-child button {
+    border-radius: ${({theme:e})=>`0 ${e.borderRadius} ${e.borderRadius} 0`};
+  }
+
+  & ${c} {
+    border-radius: 0;
+    border-left: none;
+
+    svg {
+      path {
+        fill: ${({theme:e})=>e.colors.neutral700};
+      }
+    }
+
+    &:hover {
+      background-color: ${({theme:e})=>e.colors.neutral100};
+
+      svg {
+        path {
+          fill: ${({theme:e})=>e.colors.neutral800};
+        }
+      }
+    }
+
+    &:active {
+      background-color: ${({theme:e})=>e.colors.neutral150};
+      svg {
+        path {
+          fill: ${({theme:e})=>e.colors.neutral900};
+        }
+      }
+    }
+
+    &[aria-disabled='true'] {
+      svg {
+        path {
+          fill: ${({theme:e})=>e.colors.neutral600};
+        }
+      }
+    }
+  }
+`;exports.IconButton=_;exports.IconButtonGroup=R;

package/dist/IconButton/IconButton.js

@@ -0,0 +1,152 @@
+import { jsxs as $, jsx as e } from "react/jsx-runtime";
+import * as a from "react";
+import n from "styled-components";
+import { BaseButton as b } from "../BaseButton/BaseButton.js";
+import { Flex as m } from "../Flex/Flex.js";
+import { Tooltip as g } from "../Tooltip/Tooltip.js";
+import { VisuallyHidden as v } from "../VisuallyHidden/VisuallyHidden.js";
+const I = a.forwardRef(({
+  label: r,
+  noBorder: i = !1,
+  children: d,
+  icon: c,
+  disabled: o = !1,
+  onClick: l,
+  "aria-label": u,
+  ...f
+}, p) => {
+  const t = $(s, {
+    "aria-disabled": o,
+    background: o ? "neutral150" : void 0,
+    borderWidth: i ? 0 : void 0,
+    justifyContent: "center",
+    height: `${2}rem`,
+    width: `${2}rem`,
+    ...f,
+    ref: p,
+    onClick: (h) => {
+      !o && l && l(h);
+    },
+    children: [e(v, {
+      as: "span",
+      children: r ?? u
+    }), a.cloneElement(c || d, {
+      "aria-hidden": !0,
+      focusable: !1
+    })]
+  });
+  return r ? e(g, {
+    label: r,
+    children: t
+  }) : t;
+}), s = n(b)`
+  svg {
+    > g,
+    path {
+      fill: ${({
+  theme: r
+}) => r.colors.neutral500};
+    }
+  }
+
+  &:hover {
+    svg {
+      > g,
+      path {
+        fill: ${({
+  theme: r
+}) => r.colors.neutral600};
+      }
+    }
+  }
+
+  &:active {
+    svg {
+      > g,
+      path {
+        fill: ${({
+  theme: r
+}) => r.colors.neutral400};
+      }
+    }
+  }
+
+  &[aria-disabled='true'] {
+    svg {
+      path {
+        fill: ${({
+  theme: r
+}) => r.colors.neutral600};
+      }
+    }
+  }
+`, w = n(m)`
+  & span:first-child button {
+    border-left: 1px solid ${({
+  theme: r
+}) => r.colors.neutral200};
+    border-radius: ${({
+  theme: r
+}) => `${r.borderRadius} 0 0 ${r.borderRadius}`};
+  }
+
+  & span:last-child button {
+    border-radius: ${({
+  theme: r
+}) => `0 ${r.borderRadius} ${r.borderRadius} 0`};
+  }
+
+  & ${s} {
+    border-radius: 0;
+    border-left: none;
+
+    svg {
+      path {
+        fill: ${({
+  theme: r
+}) => r.colors.neutral700};
+      }
+    }
+
+    &:hover {
+      background-color: ${({
+  theme: r
+}) => r.colors.neutral100};
+
+      svg {
+        path {
+          fill: ${({
+  theme: r
+}) => r.colors.neutral800};
+        }
+      }
+    }
+
+    &:active {
+      background-color: ${({
+  theme: r
+}) => r.colors.neutral150};
+      svg {
+        path {
+          fill: ${({
+  theme: r
+}) => r.colors.neutral900};
+        }
+      }
+    }
+
+    &[aria-disabled='true'] {
+      svg {
+        path {
+          fill: ${({
+  theme: r
+}) => r.colors.neutral600};
+        }
+      }
+    }
+  }
+`;
+export {
+  I as IconButton,
+  w as IconButtonGroup
+};

package/dist/IconButton/index.cjs

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

package/dist/IconButton/index.js

@@ -0,0 +1,5 @@
+import { IconButton as n, IconButtonGroup as r } from "./IconButton.js";
+export {
+  n as IconButton,
+  r as IconButtonGroup
+};

package/dist/JSONInput/JSONInput.cjs

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