@strapi/design-system 1.6.4 → 1.6.6

package/dist/Field/FieldInput.js

@@ -1,33 +1,96 @@
-import t, { forwardRef as k } from "react";
-import r from "prop-types";
-import m from "styled-components";
+import { jsxs as y, jsx as a } from "react/jsx-runtime";
+import { forwardRef as w } from "react";
+import p, { css as R } from "styled-components";
 import { useField as I } from "./FieldContext.js";
-import { Box as c } from "../Box/Box.js";
-import { Flex as v } from "../Flex/Flex.js";
-import { sizes as x } from "../themes/sizes.js";
-import { inputFocusStyle as C } from "../themes/utils.js";
-const u = {
+import { Box as l } from "../Box/Box.js";
+import { Flex as k } from "../Flex/Flex.js";
+import { inputFocusStyle as B } from "../themes/utils.js";
+const c = {
   S: 6.5,
   M: 10.5
-}, E = m.input`
+}, M = w(({
+  endAction: r,
+  startAction: o,
+  disabled: e = !1,
+  onChange: d,
+  size: u = "M",
+  ...f
+}, $) => {
+  const {
+    id: i,
+    error: t,
+    hint: h,
+    name: g,
+    required: m
+  } = I();
+  let n;
+  t ? n = `${i}-error` : h && (n = `${i}-hint`);
+  const s = Boolean(t), b = (x) => {
+    !e && d && d(x);
+  };
+  return y(j, {
+    justifyContent: "space-between",
+    hasError: s,
+    disabled: e,
+    children: [o ? a(l, {
+      paddingLeft: 3,
+      paddingRight: 2,
+      children: o
+    }) : null, a(F, {
+      id: i,
+      name: g,
+      ref: $,
+      "aria-describedby": n,
+      "aria-invalid": s,
+      "aria-disabled": e,
+      disabled: e,
+      "data-disabled": e ? "" : void 0,
+      hasLeftAction: Boolean(o),
+      hasRightAction: Boolean(r),
+      onChange: b,
+      "aria-required": m,
+      $size: u,
+      ...f
+    }), r ? a(l, {
+      paddingLeft: 2,
+      paddingRight: 3,
+      children: r
+    }) : null]
+  });
+}), F = p.input`
   border: none;
-  border-radius: ${({ theme: e }) => e.borderRadius};
-  padding-bottom: ${({ size: e }) => `${u[e] / 16}rem`};
-  padding-left: ${({ theme: e, hasLeftAction: o }) => o ? 0 : e.spaces[4]};
-  padding-right: ${({ theme: e, hasRightAction: o }) => o ? 0 : e.spaces[4]};
-  padding-top: ${({ size: e }) => `${u[e] / 16}rem`};
-  cursor: ${(e) => e["aria-disabled"] ? "not-allowed" : void 0};
+  border-radius: ${({
+  theme: r
+}) => r.borderRadius};
+  padding-bottom: ${({
+  $size: r
+}) => `${c[r] / 16}rem`};
+  padding-left: ${({
+  theme: r,
+  hasLeftAction: o
+}) => o ? 0 : r.spaces[4]};
+  padding-right: ${({
+  theme: r,
+  hasRightAction: o
+}) => o ? 0 : r.spaces[4]};
+  padding-top: ${({
+  $size: r
+}) => `${c[r] / 16}rem`};
+  cursor: ${(r) => r["aria-disabled"] ? "not-allowed" : void 0};
 
-  color: ${({ theme: e }) => e.colors.neutral800};
+  color: ${({
+  theme: r
+}) => r.colors.neutral800};
   font-weight: 400;
-  // TODO: Make sure to use the theme when it's ready
-  font-size: ${14 / 16}rem;
+  font-size: ${(r) => r.theme.fontSizes[2]};
   display: block;
   width: 100%;
   background: inherit;
 
   ::placeholder {
-    color: ${({ theme: e }) => e.colors.neutral500};
+    color: ${({
+  theme: r
+}) => r.colors.neutral500};
     opacity: 1;
   }
 
@@ -40,59 +103,28 @@ const u = {
     outline: none;
     box-shadow: none;
   }
-`, F = m(v)`
-  border: 1px solid ${({ theme: e, hasError: o }) => o ? e.colors.danger600 : e.colors.neutral200};
-  border-radius: ${({ theme: e }) => e.borderRadius};
-  background: ${({ theme: e }) => e.colors.neutral0};
-  ${C()}
+`, j = p(k)`
+  border: 1px solid ${({
+  theme: r,
+  hasError: o
+}) => o ? r.colors.danger600 : r.colors.neutral200};
+  border-radius: ${({
+  theme: r
+}) => r.borderRadius};
+  background: ${({
+  theme: r
+}) => r.colors.neutral0};
+  ${B()}
 
-  ${({ theme: e, disabled: o }) => o ? `
-    color: ${e.colors.neutral600};
-    background: ${e.colors.neutral150};
-  
-  ` : void 0}
-`, d = k(({ endAction: e, startAction: o, disabled: a, onChange: f, size: s, ...g }, b) => {
-  const { id: n, error: l, hint: h, name: $, required: y } = I();
-  let i;
-  l ? i = `${n}-error` : h && (i = `${n}-hint`);
-  const p = Boolean(l), w = (R) => {
-    a || f(R);
-  };
-  return /* @__PURE__ */ t.createElement(F, { size: s, justifyContent: "space-between", hasError: p, disabled: a }, o && /* @__PURE__ */ t.createElement(c, { paddingLeft: 3, paddingRight: 2 }, o), /* @__PURE__ */ t.createElement(
-    E,
-    {
-      id: n,
-      name: $,
-      ref: b,
-      "aria-describedby": i,
-      "aria-invalid": p,
-      "aria-disabled": a,
-      hasLeftAction: Boolean(o),
-      hasRightAction: Boolean(e),
-      onChange: w,
-      "aria-required": y,
-      size: s,
-      ...g
-    }
-  ), e && /* @__PURE__ */ t.createElement(c, { paddingLeft: 2, paddingRight: 3 }, e));
-});
-d.displayName = "FieldInput";
-d.defaultProps = {
-  disabled: !1,
-  endAction: void 0,
-  size: "M",
-  startAction: void 0,
-  onChange() {
-  }
-};
-d.propTypes = {
-  disabled: r.bool,
-  endAction: r.element,
-  onChange: r.func,
-  size: r.oneOf(Object.keys(x.input)),
-  startAction: r.element
-};
+  ${({
+  theme: r,
+  disabled: o
+}) => o ? R`
+          color: ${r.colors.neutral600};
+          background: ${r.colors.neutral150};
+        ` : void 0}
+`;
 export {
-  d as FieldInput,
-  F as InputWrapper
+  M as FieldInput,
+  j as InputWrapper
 };

package/dist/Field/FieldLabel.cjs

@@ -1,9 +1,12 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react"),g=require("prop-types"),h=require("styled-components"),m=require("./FieldContext.cjs"),n=require("../Flex/Flex.cjs"),d=require("../Typography/Typography.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(y),r=o(g),s=o(h),q=s.default(d.Typography)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),u=require("react"),p=require("styled-components"),h=require("./FieldContext.cjs"),y=require("../Flex/Flex.cjs"),g=require("../helpers/deprecations.cjs"),i=require("../Typography/Typography.cjs"),f=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=f(p),x=g.once(console.warn),F=u.forwardRef(({children:e,action:o,required:n,...l},s)=>{const{id:a,required:c}=h.useField(),d=c||n;return n!==void 0&&x('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.'),t.jsxs(j,{ref:s,variant:"pi",textColor:"neutral800",htmlFor:a,fontWeight:"bold",as:"label",...l,children:[e,d&&t.jsx(q,{textColor:"danger600",children:"*"}),o&&t.jsx(m,{marginLeft:1,children:o})]})}),j=r.default(i.Typography)`
+  display: flex;
+  align-items: center;
+`,q=r.default(i.Typography)`
   line-height: 0;
-`,F=s.default(n.Flex)`
+`,m=r.default(y.Flex)`
   line-height: 0;
 
   svg path {
     fill: ${({theme:e})=>e.colors.neutral500};
   }
-`,l=({children:e,action:a,required:i,...u})=>{const{id:c,required:p}=m.useField(),f=p||i;return i!==void 0&&console.warn('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.'),t.default.createElement(d.Typography,{variant:"pi",textColor:"neutral800",htmlFor:c,fontWeight:"bold",as:"label",...u},t.default.createElement(n.Flex,{alignItems:"center"},e,f&&t.default.createElement(q,{textColor:"danger600"},"*"),a&&t.default.createElement(F,{marginLeft:1},a)))};l.defaultProps={action:void 0,required:void 0};l.propTypes={action:r.default.element,children:r.default.node.isRequired,required:r.default.bool};exports.FieldLabel=l;
+`;exports.FieldLabel=F;

package/dist/Field/FieldLabel.js

@@ -1,32 +1,50 @@
-import e from "react";
-import o from "prop-types";
-import n from "styled-components";
-import { useField as u } from "./FieldContext.js";
-import { Flex as l } from "../Flex/Flex.js";
-import { Typography as a } from "../Typography/Typography.js";
-const h = n(a)`
+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 = n(l)`
+`, F = r(f)`
   line-height: 0;
 
   svg path {
-    fill: ${({ theme: r }) => r.colors.neutral500};
+    fill: ${({
+  theme: e
+}) => e.colors.neutral500};
   }
-`, d = ({ children: r, action: t, required: i, ...s }) => {
-  const { id: p, required: m } = u(), c = m || i;
-  return i !== void 0 && console.warn(
-    '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.'
-  ), /* @__PURE__ */ e.createElement(a, { variant: "pi", textColor: "neutral800", htmlFor: p, fontWeight: "bold", as: "label", ...s }, /* @__PURE__ */ e.createElement(l, { alignItems: "center" }, r, c && /* @__PURE__ */ e.createElement(h, { textColor: "danger600" }, "*"), t && /* @__PURE__ */ e.createElement(f, { marginLeft: 1 }, t)));
-};
-d.defaultProps = {
-  action: void 0,
-  required: void 0
-};
-d.propTypes = {
-  action: o.element,
-  children: o.node.isRequired,
-  required: o.bool
-};
+`;
 export {
-  d as FieldLabel
+  A as FieldLabel
 };

package/dist/FocusTrap/FocusTrap.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),b=require("prop-types"),a=require("../helpers/getFocusableNodes.cjs"),f=require("../helpers/keyboardKeys.cjs"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},m=d(r),i=d(b),n=({onEscape:t,restoreFocus:u,...p})=>{const o=r.useRef(null);r.useEffect(()=>{let e=null;return u&&(e=document.activeElement),()=>{e&&e.focus()}},[u]),r.useEffect(()=>{if(!o.current)return;const e=a.getFocusableNodes(o.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 y=e=>{if(e.key===f.KeyboardKeys.ESCAPE&&t){t();return}if(e.key!==f.KeyboardKeys.TAB)return;const s=a.getFocusableNodes(o.current);if(s.length>0){const c=s[0],l=s[s.length-1];e.shiftKey?c===document.activeElement&&(e.preventDefault(),l.focus()):l===document.activeElement&&(e.preventDefault(),c.focus())}};return m.default.createElement("div",{ref:o,onKeyDown:y,...p})};n.defaultProps={onEscape:void 0,restoreFocus:!0};n.propTypes={onEscape:i.default.func,restoreFocus:i.default.bool};exports.FocusTrap=n;
+"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

@@ -1,45 +1,41 @@
-import d, { useRef as E, useEffect as f } from "react";
-import u from "prop-types";
-import { getFocusableNodes as l } from "../helpers/getFocusableNodes.js";
-import { KeyboardKeys as i } from "../helpers/keyboardKeys.js";
-const a = ({ onEscape: o, restoreFocus: n, ...m }) => {
-  const r = E(null);
-  f(() => {
+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 n && (e = document.activeElement), () => {
+    return o && (e = document.activeElement), () => {
       e && e.focus();
     };
-  }, [n]), f(() => {
-    if (!r.current)
+  }, [o]), l(() => {
+    if (!n.current)
       return;
-    const e = l(r.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 p = (e) => {
-    if (e.key === i.ESCAPE && o) {
-      o();
-      return;
-    }
-    if (e.key !== i.TAB)
-      return;
-    const t = l(r.current);
-    if (t.length > 0) {
-      const s = t[0], c = t[t.length - 1];
-      e.shiftKey ? s === document.activeElement && (e.preventDefault(), c.focus()) : c === document.activeElement && (e.preventDefault(), s.focus());
-    }
-  };
-  return /* @__PURE__ */ d.createElement("div", { ref: r, onKeyDown: p, ...m });
-};
-a.defaultProps = {
-  onEscape: void 0,
-  restoreFocus: !0
-};
-a.propTypes = {
-  onEscape: u.func,
-  restoreFocus: u.bool
+    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 {
-  a as FocusTrap
+  v as FocusTrap
 };

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.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)`
   svg {
     > g,
     path {
@@ -31,7 +31,7 @@
       }
     }
   }
-`,R=i.default(v.Flex)`
+`,O=c.default(B.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=q;exports.IconButtonGroup=O;

package/dist/IconButton/IconButton.js

@@ -1,45 +1,47 @@
-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(({
+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,
-  noBorder: i = !1,
-  children: d,
-  icon: c,
+  background: i,
+  borderWidth: c,
+  noBorder: d = !1,
+  children: u,
+  icon: f,
   disabled: o = !1,
   onClick: l,
-  "aria-label": u,
-  ...f
-}, p) => {
-  const t = $(s, {
+  "aria-label": p,
+  ...h
+}, $) => {
+  const t = m(n, {
     "aria-disabled": o,
-    background: o ? "neutral150" : void 0,
-    borderWidth: i ? 0 : void 0,
+    background: o ? "neutral150" : i,
+    borderWidth: d ? 0 : c,
     justifyContent: "center",
     height: `${2}rem`,
     width: `${2}rem`,
-    ...f,
-    ref: p,
-    onClick: (h) => {
-      !o && l && l(h);
+    ...h,
+    ref: $,
+    onClick: (b) => {
+      !o && l && l(b);
     },
-    children: [e(v, {
+    children: [a(k, {
       as: "span",
-      children: r ?? u
-    }), a.cloneElement(c || d, {
+      children: r ?? p
+    }), e.cloneElement(f || u, {
       "aria-hidden": !0,
       focusable: !1
     })]
   });
-  return r ? e(g, {
+  return r ? a(R, {
     label: r,
     children: t
   }) : t;
-}), s = n(b)`
+}), n = s(g)`
   svg {
     > g,
     path {
@@ -80,7 +82,7 @@ const I = a.forwardRef(({
       }
     }
   }
-`, w = n(m)`
+`, E = s(v)`
   & span:first-child button {
     border-left: 1px solid ${({
   theme: r
@@ -96,7 +98,7 @@ const I = a.forwardRef(({
 }) => `0 ${r.borderRadius} ${r.borderRadius} 0`};
   }
 
-  & ${s} {
+  & ${n} {
     border-radius: 0;
     border-left: none;
 
@@ -147,6 +149,6 @@ const I = a.forwardRef(({
   }
 `;
 export {
-  I as IconButton,
-  w as IconButtonGroup
+  W as IconButton,
+  E as 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"),M=require("@uiw/react-codemirror"),N=require("./JSONInputContainer.cjs"),u=require("./utils/decorationExtension.cjs"),H=require("../Field/Field.cjs"),R=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const L=require("../Field/FieldHint.cjs"),A=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const y=require("../Stack/Stack.cjs"),z=({label:d,error:a,hint:S,labelAction:E,value:q="",required:x=!1,disabled:h=!1,onChange:m=()=>null,...p})=>{const i=l.useRef(),o=l.useRef(),c=l.useRef(),k=Boolean(a),C=e=>{const r=o.current?.doc;if(r){const{text:s,to:t}=r.line(e),F=t-s.trimStart().length;t>F&&c.current?.dispatch({effects:u.addMarks.of([u.lineHighlightMark.range(F,t)])})}},b=()=>{const e=o.current?.doc;if(e){const r=e.length||0;c.current?.dispatch({effects:u.filterMarks.of((s,t)=>t<=0||s>=r)})}},f=({state:e,view:r})=>{c.current=r,o.current=e,b();const t=j.jsonParseLinter()(r);t.length&&C(e.doc.lineAt(t[0].from).number)},O=(e,r)=>{f(r),m(e)},I=(e,r)=>{c.current=e,o.current=r,f({view:e,state:r})},{setContainer:g}=M.useCodeMirror({value:q,onCreateEditor:I,container:i.current,editable:!h,extensions:[j.json(),u.markField],onChange:O,theme:"dark",basicSetup:{lineNumbers:!0,bracketMatching:!0,closeBrackets:!0,indentOnInput:!0,syntaxHighlighting:!0,highlightSelectionMatches:!0,tabSize:2}}),J=()=>{h||i.current?.children[0].children[1].children[1]?.focus()};return l.useEffect(()=>{const e=i.current;e&&g(e)},[g]),n.jsx(H.Field,{error:a,hint:S,required:x,children:n.jsxs(y.Stack,{spacing:1,children:[d&&n.jsx(R.FieldLabel,{onClick:J,action:E,children:d}),n.jsx(N.JSONInputContainer,{ref:i,hasError:k,alignItems:"stretch",fontSize:2,hasRadius:!0,...p}),n.jsx(A.FieldError,{}),n.jsx(L.FieldHint,{})]})})};exports.JSONInput=z;
+"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;

package/dist/JSONInput/JSONInput.js

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as I } from "react/jsx-runtime";
+import { jsx as n, jsxs as O } from "react/jsx-runtime";
 import { useRef as l, useEffect as J } from "react";
 import { json as j, jsonParseLinter as H } from "@codemirror/lang-json";
 import { useCodeMirror as L } from "@uiw/react-codemirror";
@@ -11,8 +11,8 @@ import { FieldHint as V } from "../Field/FieldHint.js";
 import { FieldError as D } from "../Field/FieldError.js";
 import "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { Stack as G } from "../Stack/Stack.js";
-const nr = ({
+import { Flex as G } from "../Flex/Flex.js";
+const er = ({
   label: a,
   error: d,
   hint: p,
@@ -23,35 +23,35 @@ const nr = ({
   onChange: k = () => null,
   ...C
 }) => {
-  const o = l(), i = l(), c = l(), b = Boolean(d), F = (r) => {
+  const o = l(), i = l(), c = l(), F = Boolean(d), b = (r) => {
     const t = i.current?.doc;
     if (t) {
       const {
         text: s,
-        to: n
-      } = t.line(r), m = n - s.trimStart().length;
-      n > m && c.current?.dispatch({
-        effects: B.of([R.range(m, n)])
+        to: e
+      } = t.line(r), m = e - s.trimStart().length;
+      e > m && c.current?.dispatch({
+        effects: B.of([R.range(m, e)])
       });
     }
-  }, M = () => {
+  }, x = () => {
     const r = i.current?.doc;
     if (r) {
       const t = r.length || 0;
       c.current?.dispatch({
-        effects: q.of((s, n) => n <= 0 || s >= t)
+        effects: q.of((s, e) => e <= 0 || s >= t)
       });
     }
   }, f = ({
     state: r,
     view: t
   }) => {
-    c.current = t, i.current = r, M();
-    const n = H()(t);
-    n.length && F(r.doc.lineAt(n[0].from).number);
-  }, x = (r, t) => {
+    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);
-  }, N = (r, t) => {
+  }, I = (r, t) => {
     c.current = r, i.current = t, f({
       view: r,
       state: t
@@ -60,11 +60,11 @@ const nr = ({
     setContainer: h
   } = L({
     value: E,
-    onCreateEditor: N,
+    onCreateEditor: I,
     container: o.current,
     editable: !u,
     extensions: [j(), A],
-    onChange: x,
+    onChange: M,
     theme: "dark",
     basicSetup: {
       lineNumbers: !0,
@@ -75,33 +75,35 @@ const nr = ({
       highlightSelectionMatches: !0,
       tabSize: 2
     }
-  }), O = () => {
+  }), N = () => {
     u || o.current?.children[0].children[1].children[1]?.focus();
   };
   return J(() => {
     const r = o.current;
     r && h(r);
-  }, [h]), e(y, {
+  }, [h]), n(y, {
     error: d,
     hint: p,
     required: S,
-    children: I(G, {
-      spacing: 1,
-      children: [a && e(P, {
-        onClick: O,
+    children: O(G, {
+      direction: "column",
+      alignItems: "stretch",
+      gap: 1,
+      children: [a && n(P, {
+        onClick: N,
         action: g,
         children: a
-      }), e(z, {
+      }), n(z, {
         ref: o,
-        hasError: b,
+        hasError: F,
         alignItems: "stretch",
         fontSize: 2,
         hasRadius: !0,
         ...C
-      }), e(D, {}), e(V, {})]
+      }), n(D, {}), n(V, {})]
     })
   });
 };
 export {
-  nr as JSONInput
+  er as JSONInput
 };