@strapi/design-system 1.6.1 → 1.6.3

package/dist/Combobox/ComboboxList.js

@@ -1,15 +1,8 @@
-import { useEffect as t } from "react";
-import p from "prop-types";
-import { maintainScrollVisibility as e } from "./utils.js";
-const o = ({ options: i, activeOptionRef: r }) => (t(() => {
-  r.current && e(r.current);
-}, [r]), i);
-o.defaultProps = {
-  activeOptionRef: void 0
-};
-o.propTypes = {
-  options: p.array.isRequired
+import r from "prop-types";
+const p = ({ options: o }) => o;
+p.propTypes = {
+  options: r.array.isRequired
 };
 export {
-  o as ComboboxList
+  p as ComboboxList
 };

package/dist/DateTimePicker/DateTimePicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react"),E=require("../Stack/Stack.cjs"),v=require("../DatePicker/DatePicker.cjs"),C=require("../TimePicker/TimePicker.cjs"),R=require("../Field/Field.cjs"),x=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const A=require("../Field/FieldHint.cjs"),O=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const q=require("../helpers/useId.cjs"),$=require("./parseDate.cjs"),H=require("./DateTimePickerProps.cjs"),z=i=>i&&typeof i=="object"&&"default"in i?i:{default:i},a=z(p),F=({ariaLabel:i,clearLabel:P,disabled:T,error:f,hint:y,label:o,labelAction:M,onChange:s,onClear:m,name:g,required:D,selectButtonTitle:I,size:j,step:b,value:c,...S})=>{const d=$.parseDate(c),[r,n]=p.useState(d),[u,l]=p.useState(d?`${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`:null),h=e=>{n(e);let t;u?(t=new Date(e),t.setHours(u.split(":")[0]),t.setMinutes(u.split(":")[1])):(t=new Date(e),l(`${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`)),s&&s(t)},w=e=>{l(e);const t=r?new Date(r):new Date;t.setHours(e.split(":")[0]),t.setMinutes(e.split(":")[1]),r||n(t),s&&s(t)},_=()=>{n(void 0),l(void 0),m()},L=()=>{l(void 0);let e;r&&(e=new Date(r),e.setHours("00"),e.setMinutes("00")),s&&s(e)};p.useEffect(()=>{if(c&&+c!=+r){const e=$.parseDate(c);n(e),l(e?`${e.getHours()}:${e.getMinutes()}:${e.getSeconds()}`:null)}else c||(n(void 0),l(void 0))},[c,r]);const k=q.useId("datetime-label",S?.id),V=q.useId("datetimepicker");return a.default.createElement(R.Field,{name:g,role:"group",id:k,"aria-labelledby":k,hint:y,error:f,required:D},a.default.createElement(E.Stack,{spacing:1},o&&a.default.createElement(x.FieldLabel,{action:M},o),a.default.createElement(E.Stack,{horizontal:!0,spacing:2},a.default.createElement(v.DatePicker,{"data-testid":"datetimepicker-date",id:k,name:g,ariaLabel:o||i,error:typeof f=="string",selectedDate:r,selectedDateLabel:e=>`Date picker, current is ${e}`,onChange:h,required:D,size:j,onClear:m&&_,clearLabel:P,disabled:T,...S}),a.default.createElement(C.TimePicker,{"data-testid":"datetimepicker-time",size:j,"aria-label":o||i,error:typeof f=="string",value:u,onChange:w,onClear:m&&L,clearLabel:P,required:D,selectButtonTitle:I,disabled:T,step:b})),a.default.createElement(A.FieldHint,null),a.default.createElement(O.FieldError,{id:V})))};F.defaultProps=H.dateTimePickerDefaultProps;F.propTypes=H.dateTimePickerPropTypes;exports.DateTimePicker=F;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react"),E=require("../Stack/Stack.cjs"),L=require("../DatePicker/DatePicker.cjs"),V=require("../TimePicker/TimePicker.cjs"),v=require("../Field/Field.cjs"),C=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const R=require("../Field/FieldHint.cjs"),x=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const A=require("../helpers/useId.cjs"),y=require("./parseDate.cjs"),$=require("./DateTimePickerProps.cjs"),O=i=>i&&typeof i=="object"&&"default"in i?i:{default:i},s=O(p),P=({ariaLabel:i,clearLabel:g,disabled:T,error:f,hint:D,label:o,labelAction:H,onChange:a,onClear:m,name:j,required:k,selectButtonTitle:M,size:S,step:b,value:c,...q})=>{const n=y.parseDate(c),[r,d]=p.useState(n),[u,l]=p.useState(n?`${n.getHours()}:${n.getMinutes()}:${n.getSeconds()}`:null),h=e=>{d(e);let t;u?(t=new Date(e),t.setHours(u.split(":")[0]),t.setMinutes(u.split(":")[1])):(t=new Date(e),l(`${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`)),a&&a(t)},w=e=>{l(e);const t=r?new Date(r):new Date;t.setHours(e.split(":")[0]),t.setMinutes(e.split(":")[1]),r||d(t),a&&a(t)},I=()=>{d(void 0),l(void 0),m()},_=()=>{l(void 0);let e;r&&(e=new Date(r),e.setHours("00"),e.setMinutes("00")),a&&a(e)};p.useEffect(()=>{if(c&&+c!=+r){const e=y.parseDate(c);d(e),l(e?`${e.getHours()}:${e.getMinutes()}:${e.getSeconds()}`:null)}else c||(d(void 0),l(void 0))},[c,r]);const F=A.useId(q?.id);return s.default.createElement(v.Field,{name:j,role:"group",id:F,"aria-labelledby":F,hint:D,error:f,required:k},s.default.createElement(E.Stack,{spacing:1},o&&s.default.createElement(C.FieldLabel,{action:H},o),s.default.createElement(E.Stack,{horizontal:!0,spacing:2},s.default.createElement(L.DatePicker,{"data-testid":"datetimepicker-date",id:F,name:j,ariaLabel:o||i,error:typeof f=="string",hint:typeof D=="string",selectedDate:r,selectedDateLabel:e=>`Date picker, current is ${e}`,onChange:h,required:k,size:S,onClear:m&&I,clearLabel:g,disabled:T,...q}),s.default.createElement(V.TimePicker,{"data-testid":"datetimepicker-time",size:S,"aria-label":o||i,error:typeof f=="string",hint:typeof D=="string",value:u,onChange:w,onClear:m&&_,clearLabel:g,required:k,selectButtonTitle:M,disabled:T,step:b})),s.default.createElement(R.FieldHint,null),s.default.createElement(x.FieldError,null)))};P.defaultProps=$.dateTimePickerDefaultProps;P.propTypes=$.dateTimePickerPropTypes;exports.DateTimePicker=P;

package/dist/DateTimePicker/DateTimePicker.js

@@ -1,111 +1,111 @@
-import r, { useState as P, useEffect as C } from "react";
-import { Stack as S } from "../Stack/Stack.js";
-import { DatePicker as L } from "../DatePicker/DatePicker.js";
-import { TimePicker as R } from "../TimePicker/TimePicker.js";
-import { Field as j } from "../Field/Field.js";
-import { FieldLabel as z } from "../Field/FieldLabel.js";
+import r, { useState as S, useEffect as x } from "react";
+import { Stack as y } from "../Stack/Stack.js";
+import { DatePicker as C } from "../DatePicker/DatePicker.js";
+import { TimePicker as L } from "../TimePicker/TimePicker.js";
+import { Field as R } from "../Field/Field.js";
+import { FieldLabel as b } from "../Field/FieldLabel.js";
 import "../Field/FieldInput.js";
-import { FieldHint as A } from "../Field/FieldHint.js";
-import { FieldError as B } from "../Field/FieldError.js";
+import { FieldHint as j } from "../Field/FieldHint.js";
+import { FieldError as z } from "../Field/FieldError.js";
 import "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { useId as H } from "../helpers/useId.js";
-import { parseDate as M } from "./parseDate.js";
-import { dateTimePickerDefaultProps as G, dateTimePickerPropTypes as J } from "./DateTimePickerProps.js";
-const w = ({
-  ariaLabel: D,
-  clearLabel: g,
-  disabled: T,
-  error: c,
-  hint: y,
-  label: d,
-  labelAction: F,
+import { useId as A } from "../helpers/useId.js";
+import { parseDate as H } from "./parseDate.js";
+import { dateTimePickerDefaultProps as B, dateTimePickerPropTypes as G } from "./DateTimePickerProps.js";
+const M = ({
+  ariaLabel: g,
+  clearLabel: T,
+  disabled: E,
+  error: d,
+  hint: p,
+  label: l,
+  labelAction: w,
   onChange: o,
-  onClear: p,
-  name: E,
-  required: f,
+  onClear: f,
+  name: $,
+  required: u,
   selectButtonTitle: h,
   size: k,
-  step: V,
+  step: F,
   value: a,
-  ...$
+  ...P
 }) => {
-  const n = M(a), [i, m] = P(n), [l, s] = P(
+  const n = H(a), [i, m] = S(n), [c, s] = S(
     n ? `${n.getHours()}:${n.getMinutes()}:${n.getSeconds()}` : null
-  ), I = (e) => {
+  ), V = (e) => {
     m(e);
     let t;
-    l ? (t = new Date(e), t.setHours(l.split(":")[0]), t.setMinutes(l.split(":")[1])) : (t = new Date(e), s(`${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`)), o && o(t);
-  }, _ = (e) => {
+    c ? (t = new Date(e), t.setHours(c.split(":")[0]), t.setMinutes(c.split(":")[1])) : (t = new Date(e), s(`${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`)), o && o(t);
+  }, I = (e) => {
     s(e);
     const t = i ? new Date(i) : new Date();
     t.setHours(e.split(":")[0]), t.setMinutes(e.split(":")[1]), i || m(t), o && o(t);
-  }, b = () => {
-    m(void 0), s(void 0), p();
+  }, _ = () => {
+    m(void 0), s(void 0), f();
   }, v = () => {
     s(void 0);
     let e;
     i && (e = new Date(i), e.setHours("00"), e.setMinutes("00")), o && o(e);
   };
-  C(() => {
+  x(() => {
     if (a && +a != +i) {
-      const e = M(a);
+      const e = H(a);
       m(e), s(
         e ? `${e.getHours()}:${e.getMinutes()}:${e.getSeconds()}` : null
       );
     } else
       a || (m(void 0), s(void 0));
   }, [a, i]);
-  const u = H("datetime-label", $?.id), x = H("datetimepicker");
-  return /* @__PURE__ */ r.createElement(j, {
-    name: E,
+  const D = A(P?.id);
+  return /* @__PURE__ */ r.createElement(R, {
+    name: $,
     role: "group",
-    id: u,
-    "aria-labelledby": u,
-    hint: y,
-    error: c,
-    required: f
-  }, /* @__PURE__ */ r.createElement(S, {
+    id: D,
+    "aria-labelledby": D,
+    hint: p,
+    error: d,
+    required: u
+  }, /* @__PURE__ */ r.createElement(y, {
     spacing: 1
-  }, d && /* @__PURE__ */ r.createElement(z, {
-    action: F
-  }, d), /* @__PURE__ */ r.createElement(S, {
+  }, l && /* @__PURE__ */ r.createElement(b, {
+    action: w
+  }, l), /* @__PURE__ */ r.createElement(y, {
     horizontal: !0,
     spacing: 2
-  }, /* @__PURE__ */ r.createElement(L, {
+  }, /* @__PURE__ */ r.createElement(C, {
     "data-testid": "datetimepicker-date",
-    id: u,
-    name: E,
-    ariaLabel: d || D,
-    error: typeof c == "string",
+    id: D,
+    name: $,
+    ariaLabel: l || g,
+    error: typeof d == "string",
+    hint: typeof p == "string",
     selectedDate: i,
     selectedDateLabel: (e) => `Date picker, current is ${e}`,
-    onChange: I,
-    required: f,
+    onChange: V,
+    required: u,
     size: k,
-    onClear: p && b,
-    clearLabel: g,
-    disabled: T,
-    ...$
-  }), /* @__PURE__ */ r.createElement(R, {
+    onClear: f && _,
+    clearLabel: T,
+    disabled: E,
+    ...P
+  }), /* @__PURE__ */ r.createElement(L, {
     "data-testid": "datetimepicker-time",
     size: k,
-    "aria-label": d || D,
-    error: typeof c == "string",
-    value: l,
-    onChange: _,
-    onClear: p && v,
-    clearLabel: g,
-    required: f,
+    "aria-label": l || g,
+    error: typeof d == "string",
+    hint: typeof p == "string",
+    value: c,
+    onChange: I,
+    onClear: f && v,
+    clearLabel: T,
+    required: u,
     selectButtonTitle: h,
-    disabled: T,
-    step: V
-  })), /* @__PURE__ */ r.createElement(A, null), /* @__PURE__ */ r.createElement(B, {
-    id: x
-  })));
+    disabled: E,
+    step: F
+  })), /* @__PURE__ */ r.createElement(j, null), /* @__PURE__ */ r.createElement(z, null)));
 };
-w.defaultProps = G;
-w.propTypes = J;
+M.defaultProps = B;
+M.propTypes = G;
 export {
-  w as DateTimePicker
+  M as DateTimePicker
 };

package/dist/Dialog/Dialog.cjs

@@ -1,14 +1,11 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("prop-types"),g=require("react"),m=require("styled-components"),u=require("../Box/Box.cjs"),b=require("../FocusTrap/FocusTrap.cjs"),q=require("../Portal/Portal.cjs"),h=require("../Flex/Flex.cjs"),x=require("../Typography/Typography.cjs"),D=require("../DismissibleLayer/DismissibleLayer.cjs"),T=require("../helpers/setOpacity.cjs"),j=require("../helpers/useLockScroll.cjs"),E=require("../helpers/useId.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=o(y),t=o(g),l=o(m),P=l.default.div`
-  position: fixed;
-  z-index: 4;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("prop-types"),g=require("react"),m=require("styled-components"),o=require("../Box/Box.cjs"),b=require("../FocusTrap/FocusTrap.cjs"),q=require("../Portal/Portal.cjs"),h=require("../Flex/Flex.cjs"),x=require("../Typography/Typography.cjs"),D=require("../DismissibleLayer/DismissibleLayer.cjs"),T=require("../helpers/setOpacity.cjs"),j=require("../helpers/useLockScroll.cjs"),E=require("../helpers/useId.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=l(y),t=l(g),s=l(m),P=s.default(o.Box)`
   inset: 0;
   background: ${({theme:e})=>T.setOpacity(e.colors.neutral800,.2)};
-  padding: 0 ${({theme:e})=>e.spaces[8]};
-`,_=l.default(u.Box)`
+`,_=s.default(o.Box)`
   max-width: ${412/16}rem;
   margin: 0 auto;
   overflow: hidden;
   margin-top: 10%;
-`,F=l.default(h.Flex)`
+`,F=s.default(h.Flex)`
   border-bottom: 1px solid ${({theme:e})=>e.colors.neutral150};
-`,r=({onClose:e,title:n,as:d,isOpen:s,id:c,...p})=>{const f=E.useId("dialog",c);if(j(s),!s)return null;const i=`${f}-label`;return t.default.createElement(q.Portal,null,t.default.createElement(P,null,t.default.createElement(b.FocusTrap,null,t.default.createElement(D.DismissibleLayer,{onEscapeKeyDown:e,onPointerDownOutside:e},t.default.createElement(_,{"aria-labelledby":i,"aria-modal":!0,background:"neutral0",hasRadius:!0,shadow:"popupShadow",role:"dialog"},t.default.createElement(F,{padding:6,justifyContent:"center"},t.default.createElement(x.Typography,{variant:"beta",as:d||"h2",id:i},n)),t.default.createElement(u.Box,{...p}))))))};r.displayName="Dialog";r.defaultProps={as:"h2",id:void 0};r.propTypes={as:a.default.string,id:a.default.oneOfType([a.default.string,a.default.number]),isOpen:a.default.bool.isRequired,onClose:a.default.func.isRequired,title:a.default.string.isRequired};exports.Dialog=r;
+`,r=({onClose:e,title:n,as:c,isOpen:i,id:d,...p})=>{const f=E.useId(d);if(j(i),!i)return null;const u=`${f}-label`;return t.default.createElement(q.Portal,null,t.default.createElement(P,{padding:8,position:"fixed",zIndex:4},t.default.createElement(b.FocusTrap,null,t.default.createElement(D.DismissibleLayer,{onEscapeKeyDown:e,onPointerDownOutside:e},t.default.createElement(_,{"aria-labelledby":u,"aria-modal":!0,background:"neutral0",hasRadius:!0,shadow:"popupShadow",role:"dialog"},t.default.createElement(F,{padding:6,justifyContent:"center"},t.default.createElement(x.Typography,{variant:"beta",as:c||"h2",id:u},n)),t.default.createElement(o.Box,{...p}))))))};r.displayName="Dialog";r.defaultProps={as:"h2",id:void 0};r.propTypes={as:a.default.string,id:a.default.oneOfType([a.default.string,a.default.number]),isOpen:a.default.bool.isRequired,onClose:a.default.func.isRequired,title:a.default.string.isRequired};exports.Dialog=r;

package/dist/Dialog/Dialog.js

@@ -1,7 +1,7 @@
-import r from "prop-types";
-import o from "react";
+import o from "prop-types";
+import e from "react";
 import t from "styled-components";
-import { Box as n } from "../Box/Box.js";
+import { Box as a } from "../Box/Box.js";
 import { FocusTrap as c } from "../FocusTrap/FocusTrap.js";
 import { Portal as f } from "../Portal/Portal.js";
 import { Flex as g } from "../Flex/Flex.js";
@@ -10,57 +10,58 @@ import { DismissibleLayer as b } from "../DismissibleLayer/DismissibleLayer.js";
 import { setOpacity as E } from "../helpers/setOpacity.js";
 import h from "../helpers/useLockScroll.js";
 import { useId as D } from "../helpers/useId.js";
-const x = t.div`
-  position: fixed;
-  z-index: 4;
+const x = t(a)`
   inset: 0;
-  background: ${({ theme: e }) => E(e.colors.neutral800, 0.2)};
-  padding: 0 ${({ theme: e }) => e.spaces[8]};
-`, w = t(n)`
+  background: ${({ theme: r }) => E(r.colors.neutral800, 0.2)};
+`, w = t(a)`
   max-width: ${412 / 16}rem;
   margin: 0 auto;
   overflow: hidden;
   margin-top: 10%;
 `, R = t(g)`
-  border-bottom: 1px solid ${({ theme: e }) => e.colors.neutral150};
-`, a = ({ onClose: e, title: m, as: s, isOpen: i, id: d, ...p }) => {
-  const u = D("dialog", d);
-  if (h(i), !i)
+  border-bottom: 1px solid ${({ theme: r }) => r.colors.neutral150};
+`, i = ({ onClose: r, title: m, as: s, isOpen: n, id: d, ...p }) => {
+  const u = D(d);
+  if (h(n), !n)
     return null;
   const l = `${u}-label`;
-  return /* @__PURE__ */ o.createElement(f, null, /* @__PURE__ */ o.createElement(x, null, /* @__PURE__ */ o.createElement(c, null, /* @__PURE__ */ o.createElement(b, {
-    onEscapeKeyDown: e,
-    onPointerDownOutside: e
-  }, /* @__PURE__ */ o.createElement(w, {
+  return /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement(x, {
+    padding: 8,
+    position: "fixed",
+    zIndex: 4
+  }, /* @__PURE__ */ e.createElement(c, null, /* @__PURE__ */ e.createElement(b, {
+    onEscapeKeyDown: r,
+    onPointerDownOutside: r
+  }, /* @__PURE__ */ e.createElement(w, {
     "aria-labelledby": l,
     "aria-modal": !0,
     background: "neutral0",
     hasRadius: !0,
     shadow: "popupShadow",
     role: "dialog"
-  }, /* @__PURE__ */ o.createElement(R, {
+  }, /* @__PURE__ */ e.createElement(R, {
     padding: 6,
     justifyContent: "center"
-  }, /* @__PURE__ */ o.createElement(y, {
+  }, /* @__PURE__ */ e.createElement(y, {
     variant: "beta",
     as: s || "h2",
     id: l
-  }, m)), /* @__PURE__ */ o.createElement(n, {
+  }, m)), /* @__PURE__ */ e.createElement(a, {
     ...p
   }))))));
 };
-a.displayName = "Dialog";
-a.defaultProps = {
+i.displayName = "Dialog";
+i.defaultProps = {
   as: "h2",
   id: void 0
 };
-a.propTypes = {
-  as: r.string,
-  id: r.oneOfType([r.string, r.number]),
-  isOpen: r.bool.isRequired,
-  onClose: r.func.isRequired,
-  title: r.string.isRequired
+i.propTypes = {
+  as: o.string,
+  id: o.oneOfType([o.string, o.number]),
+  isOpen: o.bool.isRequired,
+  onClose: o.func.isRequired,
+  title: o.string.isRequired
 };
 export {
-  a as Dialog
+  i as Dialog
 };

package/dist/Field/Field.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),p=require("prop-types"),y=require("./FieldContext.cjs"),v=require("../helpers/useId.cjs"),o=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=o(c),e=o(p),d=({children:t,name:l,error:u,hint:a,id:i,required:n,...f})=>{const s=v.useId("field",i);return r.default.createElement("div",{...f},r.default.createElement(y.FieldContext.Provider,{value:{name:l,id:s,error:u,hint:a,required:n}},t))};d.defaultProps={error:void 0,hint:void 0,id:void 0,name:void 0,required:!1};d.propTypes={children:e.default.node.isRequired,error:e.default.oneOfType([e.default.string,e.default.bool]),hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.oneOfType([e.default.string,e.default.number]),name:e.default.string,required:e.default.bool};exports.Field=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),p=require("prop-types"),y=require("./FieldContext.cjs"),v=require("../helpers/useId.cjs"),o=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=o(c),e=o(p),d=({children:t,name:l,error:u,hint:a,id:n,required:i,...f})=>{const s=v.useId(n);return r.default.createElement("div",{...f},r.default.createElement(y.FieldContext.Provider,{value:{name:l,id:s,error:u,hint:a,required:i}},t))};d.defaultProps={error:void 0,hint:void 0,id:void 0,name:void 0,required:!1};d.propTypes={children:e.default.node.isRequired,error:e.default.oneOfType([e.default.string,e.default.bool]),hint:e.default.oneOfType([e.default.string,e.default.bool,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.oneOfType([e.default.string,e.default.number]),name:e.default.string,required:e.default.bool};exports.Field=d;

package/dist/Field/Field.js

@@ -1,13 +1,13 @@
 import r from "react";
 import e from "prop-types";
-import { FieldContext as l } from "./FieldContext.js";
-import { useId as s } from "../helpers/useId.js";
-const o = ({ children: i, name: d, error: t, hint: n, id: p, required: m, ...a }) => {
-  const f = s("field", p);
+import { FieldContext as s } from "./FieldContext.js";
+import { useId as f } from "../helpers/useId.js";
+const o = ({ children: i, name: t, error: d, hint: n, id: p, required: m, ...a }) => {
+  const l = f(p);
   return /* @__PURE__ */ r.createElement("div", {
     ...a
-  }, /* @__PURE__ */ r.createElement(l.Provider, {
-    value: { name: d, id: f, error: t, hint: n, required: m }
+  }, /* @__PURE__ */ r.createElement(s.Provider, {
+    value: { name: t, id: l, error: d, hint: n, required: m }
   }, i));
 };
 o.defaultProps = {
@@ -20,7 +20,7 @@ o.defaultProps = {
 o.propTypes = {
   children: e.node.isRequired,
   error: e.oneOfType([e.string, e.bool]),
-  hint: e.oneOfType([e.string, e.node, e.arrayOf(e.node)]),
+  hint: e.oneOfType([e.string, e.bool, e.node, e.arrayOf(e.node)]),
   id: e.oneOfType([e.string, e.number]),
   name: e.string,
   required: e.bool

package/dist/Field/FieldHint.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),i=require("./FieldContext.cjs"),n=require("../Typography/Typography.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=a(o),u=()=>{const{id:e,hint:t,error:r}=i.useField();return!t||r?null:l.default.createElement(n.Typography,{variant:"pi",as:"p",id:`${e}-hint`,textColor:"neutral600"},t)};exports.FieldHint=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),i=require("./FieldContext.cjs"),n=require("../Typography/Typography.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=a(o),u=()=>{const{id:e,hint:t,error:r}=i.useField();return!t||typeof t!="string"||r?null:l.default.createElement(n.Typography,{variant:"pi",as:"p",id:`${e}-hint`,textColor:"neutral600"},t)};exports.FieldHint=u;

package/dist/Field/FieldHint.js

@@ -2,13 +2,13 @@ import i from "react";
 import { useField as o } from "./FieldContext.js";
 import { Typography as n } from "../Typography/Typography.js";
 const m = () => {
-  const { id: t, hint: r, error: e } = o();
-  return !r || e ? null : /* @__PURE__ */ i.createElement(n, {
+  const { id: r, hint: t, error: e } = o();
+  return !t || typeof t != "string" || e ? null : /* @__PURE__ */ i.createElement(n, {
     variant: "pi",
     as: "p",
-    id: `${t}-hint`,
+    id: `${r}-hint`,
     textColor: "neutral600"
-  }, r);
+  }, t);
 };
 export {
   m as FieldHint

package/dist/JSONInput/JSONInput.cjs

@@ -1 +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;
+"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;

package/dist/JSONInput/JSONInput.js

@@ -1,45 +1,45 @@
 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 { useCodeMirror as L } from "@uiw/react-codemirror";
+import { Field as T } from "../Field/Field.js";
+import { FieldLabel as P } 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 { FieldHint as R } from "../Field/FieldHint.js";
+import { FieldError as j } 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)])
+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)])
     });
   }, M = () => {
-    const e = i.current?.doc?.length || 0;
+    const e = c.current?.doc?.length || 0;
     l.current?.dispatch({
-      effects: w.of((r, n) => n <= 0 || r >= e)
+      effects: V.of((r, n) => n <= 0 || r >= e)
     });
-  }, f = (e) => {
+  }, h = (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);
+    l.current = r, c.current = n, M();
+    const g = H()(r);
+    g.length && y(n.doc.lineAt(g[0].from).number);
   }, N = (e, r) => {
-    f(r), C(e);
+    h(r), k(e);
   }, A = (e, r) => {
-    l.current = e, i.current = r, f({ view: e, state: r });
-  }, { setContainer: h } = I({
-    value: E,
+    l.current = e, c.current = r, h({ view: e, state: r });
+  }, { setContainer: p } = L({
+    value: b,
     onCreateEditor: A,
     theme: "dark",
     onChange: N,
-    editable: !O,
-    container: a.current,
-    extensions: [x(), z],
+    editable: !f,
+    container: i.current,
+    extensions: [x(), B],
     basicSetup: {
       lineNumbers: !0,
       bracketMatching: !0,
@@ -50,28 +50,31 @@ const g = ({ label: d, value: E, error: u, hint: b, required: S, onChange: C, di
       tabSize: 2,
       defaultCharacterWidth: 5
     }
-  });
+  }), I = () => {
+    f || i.current.children[0].children[1].children[1].focus();
+  };
   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, {
+    const e = i.current;
+    e && p(e);
+  }, [p, m]), /* @__PURE__ */ o.createElement(T, {
+    error: d,
+    hint: S,
+    required: C
+  }, /* @__PURE__ */ o.createElement(q, {
     spacing: 1
-  }, d && /* @__PURE__ */ o.createElement(T, {
-    action: k
-  }, d), /* @__PURE__ */ o.createElement(q, {
-    ref: a,
+  }, 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(R, null), /* @__PURE__ */ o.createElement(P, null)));
+  }), /* @__PURE__ */ o.createElement(j, null), /* @__PURE__ */ o.createElement(R, null)));
 };
-g.defaultProps = {
+E.defaultProps = {
   label: void 0,
   labelAction: void 0,
   value: "",
@@ -82,7 +85,7 @@ g.defaultProps = {
   onChange() {
   }
 };
-g.propTypes = {
+E.propTypes = {
   label: t.string,
   labelAction: t.element,
   value: t.string,
@@ -93,5 +96,5 @@ g.propTypes = {
   onChange: t.func
 };
 export {
-  g as JSONInput
+  E as JSONInput
 };

package/dist/JSONInput/JSONInputContainer.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("styled-components"),r=require("../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)`
+"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)`
   line-height: ${({theme:e})=>e.lineHeights[2]};
 
   .cm-editor {
@@ -9,6 +9,9 @@
     background-color: #32324d;
     width: 100%;
     outline: none;
+  }
+
+  .cm-scroller {
     border: 1px solid ${({theme:e,hasError:t})=>t?e.colors.danger600:e.colors.neutral200};
     /* inputFocusStyle will receive hasError prop */
     ${r.inputFocusStyle()}
@@ -27,4 +30,4 @@
     */
     background-color: #4a4a6a;
   }
-`;exports.JSONInputContainer=c;
+`;exports.JSONInputContainer=n;

package/dist/JSONInput/JSONInputContainer.js

@@ -1,7 +1,7 @@
-import r from "styled-components";
+import o from "styled-components";
 import { inputFocusStyle as t } from "../themes/utils.js";
 import { Flex as c } from "../Flex/Flex.js";
-const l = r(c)`
+const l = o(c)`
   line-height: ${({ theme: e }) => e.lineHeights[2]};
 
   .cm-editor {
@@ -12,7 +12,10 @@ const l = r(c)`
     background-color: #32324d;
     width: 100%;
     outline: none;
-    border: 1px solid ${({ theme: e, hasError: o }) => o ? e.colors.danger600 : e.colors.neutral200};
+  }
+
+  .cm-scroller {
+    border: 1px solid ${({ theme: e, hasError: r }) => r ? e.colors.danger600 : e.colors.neutral200};
     /* inputFocusStyle will receive hasError prop */
     ${t()}
   }

package/dist/Layout/HeaderLayout.cjs

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