@strapi/design-system 1.6.3 → 1.6.4

package/dist/IconButton/IconButton.js

@@ -1,56 +1,99 @@
-import l, { cloneElement as b } from "react";
-import t from "prop-types";
-import h from "styled-components";
-import { Tooltip as v } from "../Tooltip/Tooltip.js";
-import { BaseButton as y } from "../BaseButton/BaseButton.js";
-import { Flex as k } from "../Flex/Flex.js";
-import { VisuallyHidden as $ } from "../VisuallyHidden/VisuallyHidden.js";
-const s = h(y)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: ${32 / 16}rem;
-  width: ${32 / 16}rem;
-
+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};
+      fill: ${({
+  theme: r
+}) => r.colors.neutral500};
     }
   }
+
   &:hover {
     svg {
       > g,
       path {
-        fill: ${({ theme: r }) => r.colors.neutral600};
+        fill: ${({
+  theme: r
+}) => r.colors.neutral600};
       }
     }
   }
+
   &:active {
     svg {
       > g,
       path {
-        fill: ${({ theme: r }) => r.colors.neutral400};
+        fill: ${({
+  theme: r
+}) => r.colors.neutral400};
       }
     }
   }
+
   &[aria-disabled='true'] {
-    background-color: ${({ theme: r }) => r.colors.neutral150};
     svg {
       path {
-        fill: ${({ theme: r }) => r.colors.neutral600};
+        fill: ${({
+  theme: r
+}) => r.colors.neutral600};
       }
     }
   }
-  ${({ noBorder: r }) => r ? "border: none;" : void 0}
-`, T = h(k)`
+`, 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}`};
+    border-left: 1px solid ${({
+  theme: r
+}) => r.colors.neutral200};
+    border-radius: ${({
+  theme: r
+}) => `${r.borderRadius} 0 0 ${r.borderRadius}`};
   }
 
   & span:last-child button {
-    border-radius: ${({ theme: r }) => `0 ${r.borderRadius} ${r.borderRadius} 0`};
+    border-radius: ${({
+  theme: r
+}) => `0 ${r.borderRadius} ${r.borderRadius} 0`};
   }
 
   & ${s} {
@@ -59,25 +102,35 @@ const s = h(y)`
 
     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};
         }
       }
     }
@@ -85,64 +138,15 @@ const s = h(y)`
     &[aria-disabled='true'] {
       svg {
         path {
-          fill: ${({ theme: r }) => r.colors.neutral600};
+          fill: ${({
+  theme: r
+}) => r.colors.neutral600};
         }
       }
     }
   }
-`, d = l.forwardRef(
-  ({ label: r, noBorder: n, children: o, icon: e, disabled: a, onClick: c, "aria-label": m, ...u }, f) => {
-    const p = (g) => {
-      !a && c && c(g);
-    };
-    return r ? /* @__PURE__ */ l.createElement(v, {
-      label: r
-    }, /* @__PURE__ */ l.createElement(s, {
-      ...u,
-      ref: f,
-      noBorder: n,
-      onClick: p,
-      "aria-disabled": a
-    }, /* @__PURE__ */ l.createElement($, {
-      as: "span"
-    }, r), b(e || o, {
-      "aria-hidden": !0,
-      focusable: !1
-    }))) : /* @__PURE__ */ l.createElement(s, {
-      ...u,
-      ref: f,
-      noBorder: n,
-      onClick: p,
-      "aria-disabled": a
-    }, /* @__PURE__ */ l.createElement($, {
-      as: "span"
-    }, m), b(e || o, {
-      "aria-hidden": !0,
-      focusable: !1
-    }));
-  }
-);
-d.displayName = "IconButton";
-d.defaultProps = {
-  "aria-label": void 0,
-  children: void 0,
-  disabled: !1,
-  icon: void 0,
-  label: void 0,
-  noBorder: !1,
-  onClick: void 0
-};
-const i = (r, n) => (o, e) => !o[e] && r.every((a) => !o[a]) ? new Error(`One of the following props is required: ${e}, ${r.join(", ")}`) : t.checkPropTypes({ [e]: t[n] }, o, "prop", "IconButton");
-d.propTypes = {
-  "aria-label": i(["label"], "string"),
-  children: i(["icon"], "node"),
-  disabled: t.bool,
-  icon: i(["children"], "node"),
-  label: i(["aria-label"], "string"),
-  noBorder: t.bool,
-  onClick: t.func
-};
+`;
 export {
-  d as IconButton,
-  T as IconButtonGroup
+  I as IconButton,
+  w as IconButtonGroup
 };

package/dist/JSONInput/JSONInput.cjs

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

package/dist/JSONInput/JSONInput.js

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

package/dist/JSONInput/JSONInputContainer.cjs

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

package/dist/JSONInput/JSONInputContainer.js

@@ -1,36 +1,43 @@
 import o from "styled-components";
-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]};
+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]};
 
   .cm-editor {
-    /* 
-      Hard coded since the color is the same between themes,
-      theme.colors.neutral800 changes between themes 
-    */
+    /** 
+     * Hard coded since the color is the same between themes,
+     * theme.colors.neutral800 changes between themes 
+     */
     background-color: #32324d;
     width: 100%;
     outline: none;
   }
 
   .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 */
-    ${t()}
+    ${c()}
   }
 
   .cm-editor,
   .cm-scroller {
-    border-radius: ${({ theme: e }) => e.borderRadius};
+    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 
-    */
+    /** 
+     * Hard coded since the color is the same between themes,
+     * theme.colors.neutral700 changes between themes 
+     */
     background-color: #4a4a6a;
   }
 `;

package/dist/Layout/ActionLayout.js

@@ -11,19 +11,7 @@ const l = a(i)`
   margin-left: ${({ pullRight: t }) => t ? "auto" : void 0};
 `, m = a(l)`
   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 = ({ 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 = {
   endActions: void 0,
   startActions: void 0

package/dist/Layout/ContentLayout.js

@@ -1,10 +1,7 @@
 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);
+const p = ({ children: e }) => /* @__PURE__ */ t.createElement(r, { paddingLeft: 10, paddingRight: 10 }, e);
 p.propTypes = {
   children: o.node.isRequired
 };

package/dist/Layout/HeaderLayout.cjs

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),E=require("styled-components"),v=require("prop-types"),s=require("../Typography/Typography.cjs"),d=require("../Box/Box.cjs"),i=require("../Flex/Flex.cjs"),B=require("../helpers/useElementOnScreen.cjs"),b=require("../helpers/useResizeObserver.cjs"),p=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=p(c),R=p(E),a=p(v),T=()=>{const t=c.useRef(null),[l,r]=c.useState(null),[n,o]=B.useElementOnScreen({root:null,rootMargin:"0px",threshold:0});return b.useResizeObserver(n,()=>{n.current&&r(n.current.getBoundingClientRect())}),c.useEffect(()=>{t.current&&r(t.current.getBoundingClientRect())},[t]),{containerRef:n,isVisible:o,baseHeaderLayoutRef:t,headerSize:l}},f=t=>{const{containerRef:l,isVisible:r,baseHeaderLayoutRef:n,headerSize:o}=T();return e.default.createElement(e.default.Fragment,null,e.default.createElement("div",{style:{height:o?.height},ref:l},r&&e.default.createElement(u,{ref:n,...t})),!r&&e.default.createElement(u,{...t,sticky:!0,width:o?.width}))};f.displayName="HeaderLayout";const L=R.default(d.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),E=require("prop-types"),v=require("styled-components"),d=require("../Box/Box.cjs"),i=require("../Flex/Flex.cjs"),B=require("../helpers/useElementOnScreen.cjs"),b=require("../helpers/useResizeObserver.cjs"),s=require("../Typography/Typography.cjs"),p=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=p(c),a=p(E),R=p(v),T=()=>{const t=c.useRef(null),[l,r]=c.useState(null),[n,o]=B.useElementOnScreen({root:null,rootMargin:"0px",threshold:0});return b.useResizeObserver(n,()=>{n.current&&r(n.current.getBoundingClientRect())}),c.useEffect(()=>{t.current&&r(t.current.getBoundingClientRect())},[t]),{containerRef:n,isVisible:o,baseHeaderLayoutRef:t,headerSize:l}},f=t=>{const{containerRef:l,isVisible:r,baseHeaderLayoutRef:n,headerSize:o}=T();return e.default.createElement(e.default.Fragment,null,e.default.createElement("div",{style:{height:o?.height},ref:l},r&&e.default.createElement(u,{ref:n,...t})),!r&&e.default.createElement(u,{...t,sticky:!0,width:o?.width}))};f.displayName="HeaderLayout";const L=R.default(d.Box)`
   width: ${t=>t.width}px;
 `,u=e.default.forwardRef(({navigationAction:t,primaryAction:l,secondaryAction:r,subtitle:n,title:o,sticky:m,width:h,...y},x)=>{const g=typeof n=="string";return m?e.default.createElement(L,{paddingLeft:6,paddingRight:6,paddingTop:3,paddingBottom:3,position:"fixed",top:0,right:0,background:"neutral0",shadow:"tableShadow",width:h,zIndex:4,"data-strapi-header-sticky":!0},e.default.createElement(i.Flex,{justifyContent:"space-between"},e.default.createElement(i.Flex,null,t&&e.default.createElement(d.Box,{paddingRight:3},t),e.default.createElement(d.Box,null,e.default.createElement(s.Typography,{variant:"beta",as:"h1",...y},o),g?e.default.createElement(s.Typography,{variant:"pi",textColor:"neutral600"},n):n),r?e.default.createElement(d.Box,{paddingLeft:4},r):null),e.default.createElement(i.Flex,null,l?e.default.createElement(d.Box,{paddingLeft:2},l):void 0))):e.default.createElement(d.Box,{ref:x,paddingLeft:10,paddingRight:10,paddingBottom:8,paddingTop:t?6:8,background:"neutral100","data-strapi-header":!0},t?e.default.createElement(d.Box,{paddingBottom:2},t):null,e.default.createElement(i.Flex,{justifyContent:"space-between"},e.default.createElement(i.Flex,null,e.default.createElement(s.Typography,{as:"h1",variant:"alpha",...y},o),r?e.default.createElement(d.Box,{paddingLeft:4},r):null),l),g?e.default.createElement(s.Typography,{variant:"epsilon",textColor:"neutral600",as:"p"},n):n)});u.displayName="BaseHeaderLayout";u.defaultProps={navigationAction:void 0,primaryAction:void 0,secondaryAction:void 0,subtitle:void 0,sticky:!1,width:void 0};u.propTypes={navigationAction:a.default.node,primaryAction:a.default.node,secondaryAction:a.default.node,sticky:a.default.bool,subtitle:a.default.oneOfType([a.default.string,a.default.node]),title:a.default.string.isRequired,width:a.default.number};f.defaultProps={navigationAction:void 0,primaryAction:void 0,secondaryAction:void 0,subtitle:void 0};f.propTypes={navigationAction:a.default.node,primaryAction:a.default.node,secondaryAction:a.default.node,subtitle:a.default.oneOfType([a.default.string,a.default.node]),title:a.default.string.isRequired};exports.BaseHeaderLayout=u;exports.HeaderLayout=f;