@strapi/design-system 0.0.0-jsoninput.0

package/dist/JSONInput/JSONInput.js

@@ -0,0 +1,122 @@
+var j = Object.defineProperty;
+var f = Object.getOwnPropertySymbols;
+var O = Object.prototype.hasOwnProperty, k = Object.prototype.propertyIsEnumerable;
+var C = (e, r, t) => r in e ? j(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, F = (e, r) => {
+  for (var t in r || (r = {}))
+    O.call(r, t) && C(e, t, r[t]);
+  if (f)
+    for (var t of f(r))
+      k.call(r, t) && C(e, t, r[t]);
+  return e;
+};
+var v = (e, r) => {
+  var t = {};
+  for (var a in e)
+    O.call(e, a) && r.indexOf(a) < 0 && (t[a] = e[a]);
+  if (e != null && f)
+    for (var a of f(e))
+      r.indexOf(a) < 0 && k.call(e, a) && (t[a] = e[a]);
+  return t;
+};
+import d, { useRef as p, useEffect as q } from "react";
+import i from "prop-types";
+import { json as z, jsonParseLinter as B } from "@codemirror/lang-json";
+import { useCodeMirror as _ } from "@uiw/react-codemirror";
+import { Field as w } from "../Field/Field.js";
+import { FieldLabel as V } from "../Field/FieldLabel.js";
+import "../Field/FieldInput.js";
+import { FieldHint as W } 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";
+import { JSONInputContainer as K } from "./JSONInputContainer.js";
+import { markField as Q, addMarks as U, lineHighlightMark as X, filterMarks as Y } from "./utils/decorationExtension.js";
+const y = (Z) => {
+  var g = Z, { label: e, value: r, error: t, hint: a, required: M, onChange: N, disabled: A, labelAction: J } = g, x = v(g, ["label", "value", "error", "hint", "required", "onChange", "disabled", "labelAction"]);
+  const h = p(), u = p(null), m = p(null), E = Boolean(t), H = (n) => {
+    var o, l;
+    return (l = (o = u.current) == null ? void 0 : o.doc) == null ? void 0 : l.line(n);
+  }, I = (n) => {
+    var c;
+    const { text: o, to: l } = H(n), s = l - o.trimStart().length;
+    l > s && ((c = m.current) == null || c.dispatch({
+      effects: U.of([X.range(s, l)])
+    }));
+  }, L = () => {
+    var o, l, s;
+    const n = ((l = (o = u.current) == null ? void 0 : o.doc) == null ? void 0 : l.length) || 0;
+    (s = m.current) == null || s.dispatch({
+      effects: Y.of((c, R) => R <= 0 || c >= n)
+    });
+  }, b = (n) => {
+    const { view: o, state: l } = n;
+    m.current = o, u.current = l, L();
+    const c = B()(o);
+    c.length && I(l.doc.lineAt(c[0].from).number);
+  }, T = (n, o) => {
+    b(o), N(n);
+  }, P = (n, o) => {
+    m.current = n, u.current = o, b({ view: n, state: o });
+  }, { setContainer: S } = _({
+    value: r,
+    onCreateEditor: P,
+    theme: "dark",
+    onChange: T,
+    editable: !A,
+    container: h.current,
+    extensions: [z(), Q],
+    basicSetup: {
+      lineNumbers: !0,
+      bracketMatching: !0,
+      closeBrackets: !0,
+      indentOnInput: !0,
+      syntaxHighlighting: !0,
+      highlightSelectionMatches: !0,
+      tabSize: 2,
+      defaultCharacterWidth: 5
+    }
+  });
+  return q(() => {
+    const n = h.current;
+    n && S(n);
+  }, [S, E]), /* @__PURE__ */ d.createElement(w, {
+    error: t,
+    hint: a,
+    required: M
+  }, /* @__PURE__ */ d.createElement(G, {
+    spacing: 1
+  }, e && /* @__PURE__ */ d.createElement(V, {
+    action: J
+  }, e), /* @__PURE__ */ d.createElement(K, F({
+    ref: h,
+    hasError: E,
+    alignItems: "stretch",
+    fontSize: 2,
+    hasRadius: !0
+  }, x)), /* @__PURE__ */ d.createElement(D, null), /* @__PURE__ */ d.createElement(W, null)));
+};
+y.defaultProps = {
+  label: void 0,
+  labelAction: void 0,
+  value: "",
+  error: void 0,
+  hint: void 0,
+  required: !1,
+  disabled: !1,
+  onChange() {
+  }
+};
+y.propTypes = {
+  label: i.string,
+  labelAction: i.element,
+  value: i.string,
+  error: i.oneOfType([i.string, i.bool]),
+  hint: i.oneOfType([i.string, i.node, i.arrayOf(i.node)]),
+  required: i.bool,
+  disabled: i.bool,
+  onChange: i.func
+};
+export {
+  y as JSONInput
+};

package/dist/JSONInput/JSONInputContainer.cjs

@@ -0,0 +1,30 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("styled-components"),r=require("../themes/utils.cjs"),s=require("../Flex/Flex.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=l(o),c=n.default(s.Flex)`
+  line-height: ${({theme:e})=>e.lineHeights[2]};
+
+  .cm-editor {
+    /* 
+      Hard coded since the color is the same between themes,
+      theme.colors.neutral800 changes between themes 
+    */
+    background-color: #32324d;
+    width: 100%;
+    outline: none;
+    border: 1px solid ${({theme:e,hasError:t})=>t?e.colors.danger600:e.colors.neutral200};
+    /* inputFocusStyle will receive hasError prop */
+    ${r.inputFocusStyle()}
+  }
+
+  .cm-editor,
+  .cm-scroller {
+    border-radius: ${({theme:e})=>e.borderRadius};
+  }
+
+  .cm-gutters,
+  .cm-activeLineGutter {
+    /* 
+      Hard coded since the color is the same between themes,
+      theme.colors.neutral700 changes between themes 
+    */
+    background-color: #4a4a6a;
+  }
+`;exports.JSONInputContainer=c;

package/dist/JSONInput/JSONInputContainer.js

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

package/dist/JSONInput/index.cjs

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

package/dist/JSONInput/index.js

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

package/dist/JSONInput/utils/decorationExtension.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@codemirror/state"),t=require("@codemirror/view"),a=i.StateEffect.define(),d=i.StateEffect.define(),s=t.Decoration.mark({attributes:{style:"background-color: yellow; color: black"}}),n=i.StateField.define({create(){return t.Decoration.none},update(e,o){return e=e.map(o.changes),o.effects.forEach(r=>{r.is(a)?e=e.update({add:r.value,sort:!0}):r.is(d)&&(e=e.update({filter:r.value}))}),e},provide:e=>t.EditorView.decorations.from(e)});exports.addMarks=a;exports.filterMarks=d;exports.lineHighlightMark=s;exports.markField=n;

package/dist/JSONInput/utils/decorationExtension.js

@@ -0,0 +1,24 @@
+import { StateEffect as o, StateField as d } from "@codemirror/state";
+import { Decoration as i, EditorView as a } from "@codemirror/view";
+const n = o.define(), s = o.define(), l = i.mark({
+  attributes: { style: "background-color: yellow; color: black" }
+}), m = d.define({
+  create() {
+    return i.none;
+  },
+  update(r, t) {
+    return r = r.map(t.changes), t.effects.forEach((e) => {
+      e.is(n) ? r = r.update({
+        add: e.value,
+        sort: !0
+      }) : e.is(s) && (r = r.update({ filter: e.value }));
+    }), r;
+  },
+  provide: (r) => a.decorations.from(r)
+});
+export {
+  n as addMarks,
+  s as filterMarks,
+  l as lineHighlightMark,
+  m as markField
+};

package/dist/KeyboardNavigable/KeyboardNavigable.cjs

@@ -0,0 +1 @@
+"use strict";var h=Object.defineProperty;var i=Object.getOwnPropertySymbols;var K=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable;var p=(e,t,n)=>t in e?h(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,v=(e,t)=>{for(var n in t||(t={}))K.call(t,n)&&p(e,n,t[n]);if(i)for(var n of i(t))g.call(t,n)&&p(e,n,t[n]);return e};var E=(e,t)=>{var n={};for(var r in e)K.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&i)for(var r of i(e))t.indexOf(r)<0&&g.call(e,r)&&(n[r]=e[r]);return n};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("react"),q=require("prop-types"),I=require("../Box/Box.cjs"),c=require("../helpers/keyboardKeys.cjs"),T=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},_=T(k),x=T(q),b=r=>{var m=r,{tagName:e,attributeName:t}=m,n=E(m,["tagName","attributeName"]);const u=()=>{const o=document.activeElement;return e?o.tagName.toLowerCase()===e:o.hasAttribute(t)},d=o=>e?o.querySelectorAll(e):o.querySelectorAll(`[${t}]`),D=o=>{switch(o.key){case c.KeyboardKeys.RIGHT:case c.KeyboardKeys.DOWN:{if(u()){o.preventDefault();const s=document.activeElement,a=[...d(o.currentTarget)],l=a.findIndex(y=>y===s),f=l+1<a.length?l+1:0;a[f].focus()}break}case c.KeyboardKeys.LEFT:case c.KeyboardKeys.UP:{if(u()){o.preventDefault();const s=document.activeElement,a=[...d(o.currentTarget)],l=a.findIndex(y=>y===s),f=l-1>-1?l-1:a.length-1;a[f].focus()}break}case c.KeyboardKeys.HOME:{u()&&(o.preventDefault(),d(o.currentTarget).item(0).focus());break}case c.KeyboardKeys.END:{if(u()){o.preventDefault();const s=d(o.currentTarget);s.item(s.length-1).focus()}break}}};return _.default.createElement(I.Box,v({onKeyDown:D},n))};b.defaultProps={attributeName:void 0,tagName:void 0};b.propTypes={attributeName:x.default.string,tagName:x.default.string};exports.KeyboardNavigable=b;

package/dist/KeyboardNavigable/KeyboardNavigable.js

@@ -0,0 +1,78 @@
+var I = Object.defineProperty;
+var i = Object.getOwnPropertySymbols;
+var y = Object.prototype.hasOwnProperty, g = Object.prototype.propertyIsEnumerable;
+var E = (e, t, n) => t in e ? I(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, v = (e, t) => {
+  for (var n in t || (t = {}))
+    y.call(t, n) && E(e, n, t[n]);
+  if (i)
+    for (var n of i(t))
+      g.call(t, n) && E(e, n, t[n]);
+  return e;
+};
+var x = (e, t) => {
+  var n = {};
+  for (var o in e)
+    y.call(e, o) && t.indexOf(o) < 0 && (n[o] = e[o]);
+  if (e != null && i)
+    for (var o of i(e))
+      t.indexOf(o) < 0 && g.call(e, o) && (n[o] = e[o]);
+  return n;
+};
+import h from "react";
+import b from "prop-types";
+import { Box as k } from "../Box/Box.js";
+import { KeyboardKeys as a } from "../helpers/keyboardKeys.js";
+const D = (o) => {
+  var p = o, { tagName: e, attributeName: t } = p, n = x(p, ["tagName", "attributeName"]);
+  const u = () => {
+    const r = document.activeElement;
+    return e ? r.tagName.toLowerCase() === e : r.hasAttribute(t);
+  }, f = (r) => e ? r.querySelectorAll(e) : r.querySelectorAll(`[${t}]`), T = (r) => {
+    switch (r.key) {
+      case a.RIGHT:
+      case a.DOWN: {
+        if (u()) {
+          r.preventDefault();
+          const c = document.activeElement, s = [...f(r.currentTarget)], l = s.findIndex((m) => m === c), d = l + 1 < s.length ? l + 1 : 0;
+          s[d].focus();
+        }
+        break;
+      }
+      case a.LEFT:
+      case a.UP: {
+        if (u()) {
+          r.preventDefault();
+          const c = document.activeElement, s = [...f(r.currentTarget)], l = s.findIndex((m) => m === c), d = l - 1 > -1 ? l - 1 : s.length - 1;
+          s[d].focus();
+        }
+        break;
+      }
+      case a.HOME: {
+        u() && (r.preventDefault(), f(r.currentTarget).item(0).focus());
+        break;
+      }
+      case a.END: {
+        if (u()) {
+          r.preventDefault();
+          const c = f(r.currentTarget);
+          c.item(c.length - 1).focus();
+        }
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ h.createElement(k, v({
+    onKeyDown: T
+  }, n));
+};
+D.defaultProps = {
+  attributeName: void 0,
+  tagName: void 0
+};
+D.propTypes = {
+  attributeName: b.string,
+  tagName: b.string
+};
+export {
+  D as KeyboardNavigable
+};

package/dist/KeyboardNavigable/index.cjs

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

package/dist/KeyboardNavigable/index.js

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

package/dist/Layout/ActionLayout.cjs

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),i=require("prop-types"),f=require("styled-components"),n=require("../Box/Box.cjs"),s=require("../Flex/Flex.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(d),r=l(i),c=l(f),u=c.default(s.Flex)`
+  & > * + * {
+    margin-left: ${({theme:e})=>e.spaces[2]};
+  }
+
+  margin-left: ${({pullRight:e})=>e?"auto":void 0};
+`,p=c.default(u)`
+  flex-shrink: 0;
+`,a=({startActions:e,endActions:o})=>e||o?t.default.createElement(n.Box,{paddingLeft:10,paddingRight:10},t.default.createElement(n.Box,{paddingBottom:4},t.default.createElement(s.Flex,{justifyContent:"space-between",alignItems:"flex-start"},e&&t.default.createElement(u,{wrap:"wrap"},e),o&&t.default.createElement(p,{pullRight:!0},o)))):null;a.defaultProps={endActions:void 0,startActions:void 0};a.propTypes={endActions:r.default.node,startActions:r.default.node};exports.ActionLayout=a;

package/dist/Layout/ActionLayout.js

@@ -0,0 +1,37 @@
+import e from "react";
+import r from "prop-types";
+import a from "styled-components";
+import { Box as n } from "../Box/Box.js";
+import { Flex as i } from "../Flex/Flex.js";
+const l = a(i)`
+  & > * + * {
+    margin-left: ${({ theme: t }) => t.spaces[2]};
+  }
+
+  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.defaultProps = {
+  endActions: void 0,
+  startActions: void 0
+};
+p.propTypes = {
+  endActions: r.node,
+  startActions: r.node
+};
+export {
+  p as ActionLayout
+};

package/dist/Layout/ContentLayout.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),n=require("prop-types"),u=require("../Box/Box.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=t(r),c=t(n),o=({children:e})=>a.default.createElement(u.Box,{paddingLeft:10,paddingRight:10},e);o.propTypes={children:c.default.node.isRequired};exports.ContentLayout=o;

package/dist/Layout/ContentLayout.js

@@ -0,0 +1,13 @@
+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);
+p.propTypes = {
+  children: o.node.isRequired
+};
+export {
+  p as ContentLayout
+};

package/dist/Layout/GridLayout.cjs

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("prop-types"),s=require("styled-components"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=t(r),a=t(s),o=a.default.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-gap: ${({theme:e})=>e.spaces[4]};
+`;o.propTypes={children:d.default.node.isRequired};exports.GridLayout=o;

package/dist/Layout/GridLayout.js

@@ -0,0 +1,13 @@
+import p from "prop-types";
+import e from "styled-components";
+const i = e.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-gap: ${({ theme: r }) => r.spaces[4]};
+`;
+i.propTypes = {
+  children: p.node.isRequired
+};
+export {
+  i as GridLayout
+};

package/dist/Layout/HeaderLayout.cjs

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

package/dist/Layout/HeaderLayout.js

@@ -0,0 +1,150 @@
+var B = Object.defineProperty, H = Object.defineProperties;
+var T = Object.getOwnPropertyDescriptors;
+var p = Object.getOwnPropertySymbols;
+var E = Object.prototype.hasOwnProperty, v = Object.prototype.propertyIsEnumerable;
+var h = (e, n, t) => n in e ? B(e, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[n] = t, l = (e, n) => {
+  for (var t in n || (n = {}))
+    E.call(n, t) && h(e, t, n[t]);
+  if (p)
+    for (var t of p(n))
+      v.call(n, t) && h(e, t, n[t]);
+  return e;
+}, b = (e, n) => H(e, T(n));
+var R = (e, n) => {
+  var t = {};
+  for (var a in e)
+    E.call(e, a) && n.indexOf(a) < 0 && (t[a] = e[a]);
+  if (e != null && p)
+    for (var a of p(e))
+      n.indexOf(a) < 0 && v.call(e, a) && (t[a] = e[a]);
+  return t;
+};
+import r, { useRef as k, useState as C, useEffect as S } from "react";
+import O from "styled-components";
+import i from "prop-types";
+import { Typography as u } from "../Typography/Typography.js";
+import { Box as d } from "../Box/Box.js";
+import { Flex as s } from "../Flex/Flex.js";
+import { useElementOnScreen as A } from "../helpers/useElementOnScreen.js";
+import { useResizeObserver as P } from "../helpers/useResizeObserver.js";
+const j = () => {
+  const e = k(null), [n, t] = C(null), [a, o] = A({
+    root: null,
+    rootMargin: "0px",
+    threshold: 0
+  });
+  return P(a, () => {
+    a.current && t(a.current.getBoundingClientRect());
+  }), S(() => {
+    e.current && t(e.current.getBoundingClientRect());
+  }, [e]), {
+    containerRef: a,
+    isVisible: o,
+    baseHeaderLayoutRef: e,
+    headerSize: n
+  };
+}, m = (e) => {
+  const { containerRef: n, isVisible: t, baseHeaderLayoutRef: a, headerSize: o } = j();
+  return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("div", {
+    style: { height: o == null ? void 0 : o.height },
+    ref: n
+  }, t && /* @__PURE__ */ r.createElement(c, l({
+    ref: a
+  }, e))), !t && /* @__PURE__ */ r.createElement(c, b(l({}, e), {
+    sticky: !0,
+    width: o == null ? void 0 : o.width
+  })));
+};
+m.displayName = "HeaderLayout";
+const q = O(d)`
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: ${(e) => e.width}px;
+  z-index: 4;
+  box-shadow: ${({ theme: e }) => e.shadows.tableShadow};
+`, c = r.forwardRef(
+  (z, L) => {
+    var g = z, { navigationAction: e, primaryAction: n, secondaryAction: t, subtitle: a, title: o, sticky: w, width: x } = g, f = R(g, ["navigationAction", "primaryAction", "secondaryAction", "subtitle", "title", "sticky", "width"]);
+    const y = typeof a == "string";
+    return w ? /* @__PURE__ */ r.createElement(q, {
+      paddingLeft: 6,
+      paddingRight: 6,
+      paddingTop: 3,
+      paddingBottom: 3,
+      background: "neutral0",
+      width: x,
+      "data-strapi-header-sticky": !0
+    }, /* @__PURE__ */ r.createElement(s, {
+      justifyContent: "space-between"
+    }, /* @__PURE__ */ r.createElement(s, null, e && /* @__PURE__ */ r.createElement(d, {
+      paddingRight: 3
+    }, e), /* @__PURE__ */ r.createElement(d, null, /* @__PURE__ */ r.createElement(u, l({
+      variant: "beta",
+      as: "h1"
+    }, f), o), y ? /* @__PURE__ */ r.createElement(u, {
+      variant: "pi",
+      textColor: "neutral600"
+    }, a) : a), t ? /* @__PURE__ */ r.createElement(d, {
+      paddingLeft: 4
+    }, t) : null), /* @__PURE__ */ r.createElement(s, null, n ? /* @__PURE__ */ r.createElement(d, {
+      paddingLeft: 2
+    }, n) : void 0))) : /* @__PURE__ */ r.createElement(d, {
+      ref: L,
+      paddingLeft: 10,
+      paddingRight: 10,
+      paddingBottom: 8,
+      paddingTop: e ? 6 : 8,
+      background: "neutral100",
+      "data-strapi-header": !0
+    }, e ? /* @__PURE__ */ r.createElement(d, {
+      paddingBottom: 2
+    }, e) : null, /* @__PURE__ */ r.createElement(s, {
+      justifyContent: "space-between"
+    }, /* @__PURE__ */ r.createElement(s, null, /* @__PURE__ */ r.createElement(u, l({
+      as: "h1",
+      variant: "alpha"
+    }, f), o), t ? /* @__PURE__ */ r.createElement(d, {
+      paddingLeft: 4
+    }, t) : null), n), y ? /* @__PURE__ */ r.createElement(u, {
+      variant: "epsilon",
+      textColor: "neutral600",
+      as: "p"
+    }, a) : a);
+  }
+);
+c.displayName = "BaseHeaderLayout";
+c.defaultProps = {
+  navigationAction: void 0,
+  primaryAction: void 0,
+  secondaryAction: void 0,
+  subtitle: void 0,
+  sticky: !1,
+  width: void 0
+};
+c.propTypes = {
+  navigationAction: i.node,
+  primaryAction: i.node,
+  secondaryAction: i.node,
+  sticky: i.bool,
+  subtitle: i.oneOfType([i.string, i.node]),
+  title: i.string.isRequired,
+  width: i.number
+};
+m.defaultProps = {
+  navigationAction: void 0,
+  primaryAction: void 0,
+  secondaryAction: void 0,
+  subtitle: void 0
+};
+m.propTypes = {
+  navigationAction: i.node,
+  primaryAction: i.node,
+  secondaryAction: i.node,
+  subtitle: i.oneOfType([i.string, i.node]),
+  title: i.string.isRequired
+};
+export {
+  c as BaseHeaderLayout,
+  m as HeaderLayout
+};

package/dist/Layout/Layout.cjs

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),u=require("prop-types"),c=require("styled-components"),d=require("../Box/Box.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=t(s),a=t(u),l=t(c),i=l.default(d.Box)`
+  display: grid;
+  grid-template-columns: ${({hasSideNav:e})=>e?"auto 1fr":"1fr"};
+`,f=l.default(d.Box)`
+  overflow-x: hidden;
+`,o=({sideNav:e,children:n})=>r.default.createElement(i,{hasSideNav:Boolean(e)},e,r.default.createElement(f,{paddingBottom:10},n));o.defaultProps={sideNav:void 0};o.propTypes={children:a.default.node.isRequired,sideNav:a.default.node};exports.Layout=o;

package/dist/Layout/Layout.js

@@ -0,0 +1,24 @@
+import o from "react";
+import r from "prop-types";
+import t from "styled-components";
+import { Box as d } from "../Box/Box.js";
+const a = t(d)`
+  display: grid;
+  grid-template-columns: ${({ hasSideNav: e }) => e ? "auto 1fr" : "1fr"};
+`, m = t(d)`
+  overflow-x: hidden;
+`, i = ({ sideNav: e, children: n }) => /* @__PURE__ */ o.createElement(a, {
+  hasSideNav: Boolean(e)
+}, e, /* @__PURE__ */ o.createElement(m, {
+  paddingBottom: 10
+}, n));
+i.defaultProps = {
+  sideNav: void 0
+};
+i.propTypes = {
+  children: r.node.isRequired,
+  sideNav: r.node
+};
+export {
+  i as Layout
+};

package/dist/Layout/TwoColsLayout.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),c=require("prop-types"),r=require("../Box/Box.cjs"),i=require("../Grid/Grid.cjs"),o=require("../Grid/GridItem.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=d(l),a=d(c),u=({startCol:e,endCol:s})=>t.default.createElement(i.Grid,{gap:4},t.default.createElement(o.GridItem,{col:9,s:12},t.default.createElement(r.Box,{hasRadius:!0,background:"neutral0",shadow:"tableShadow"},e)),t.default.createElement(o.GridItem,{col:3,s:12},t.default.createElement(r.Box,{hasRadius:!0,background:"neutral0",shadow:"tableShadow"},s)));u.propTypes={endCol:a.default.node.isRequired,startCol:a.default.node.isRequired};exports.TwoColsLayout=u;

package/dist/Layout/TwoColsLayout.js

@@ -0,0 +1,29 @@
+import e from "react";
+import r from "prop-types";
+import { Box as o } from "../Box/Box.js";
+import { Grid as m } from "../Grid/Grid.js";
+import { GridItem as t } from "../Grid/GridItem.js";
+const l = ({ startCol: a, endCol: d }) => /* @__PURE__ */ e.createElement(m, {
+  gap: 4
+}, /* @__PURE__ */ e.createElement(t, {
+  col: 9,
+  s: 12
+}, /* @__PURE__ */ e.createElement(o, {
+  hasRadius: !0,
+  background: "neutral0",
+  shadow: "tableShadow"
+}, a)), /* @__PURE__ */ e.createElement(t, {
+  col: 3,
+  s: 12
+}, /* @__PURE__ */ e.createElement(o, {
+  hasRadius: !0,
+  background: "neutral0",
+  shadow: "tableShadow"
+}, d)));
+l.propTypes = {
+  endCol: r.node.isRequired,
+  startCol: r.node.isRequired
+};
+export {
+  l as TwoColsLayout
+};

package/dist/Layout/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./Layout.cjs"),e=require("./ActionLayout.cjs"),u=require("./ContentLayout.cjs"),o=require("./HeaderLayout.cjs"),a=require("./TwoColsLayout.cjs"),r=require("./GridLayout.cjs");exports.Layout=t.Layout;exports.ActionLayout=e.ActionLayout;exports.ContentLayout=u.ContentLayout;exports.BaseHeaderLayout=o.BaseHeaderLayout;exports.HeaderLayout=o.HeaderLayout;exports.TwoColsLayout=a.TwoColsLayout;exports.GridLayout=r.GridLayout;

package/dist/Layout/index.js

@@ -0,0 +1,15 @@
+import { Layout as r } from "./Layout.js";
+import { ActionLayout as a } from "./ActionLayout.js";
+import { ContentLayout as y } from "./ContentLayout.js";
+import { BaseHeaderLayout as f, HeaderLayout as m } from "./HeaderLayout.js";
+import { TwoColsLayout as x } from "./TwoColsLayout.js";
+import { GridLayout as n } from "./GridLayout.js";
+export {
+  a as ActionLayout,
+  f as BaseHeaderLayout,
+  y as ContentLayout,
+  n as GridLayout,
+  m as HeaderLayout,
+  r as Layout,
+  x as TwoColsLayout
+};