@strapi/design-system 0.0.0-vite-bundler.0

package/dist/Grid/Grid.js

@@ -0,0 +1,28 @@
+import t from "react";
+import a from "styled-components";
+import e from "prop-types";
+import { GridContext as i } from "./GridContext.js";
+import { Box as n } from "../Box/Box.js";
+import d from "../helpers/handleResponsiveValues.js";
+const l = a(n)`
+  display: grid;
+  grid-template-columns: repeat(${({ gridCols: r }) => r}, 1fr);
+  ${({ theme: r, gap: o }) => d("gap", o, r)}
+`, p = ({ gap: r, gridCols: o, ...m }) => /* @__PURE__ */ t.createElement(i.Provider, {
+  value: { gap: r, gridCols: o }
+}, /* @__PURE__ */ t.createElement(l, {
+  gap: r,
+  gridCols: o,
+  ...m
+}));
+p.defaultProps = {
+  gap: 0,
+  gridCols: 12
+};
+p.propTypes = {
+  gap: e.oneOfType([e.number, e.arrayOf(e.number)]),
+  gridCols: e.number
+};
+export {
+  p as Grid
+};

package/dist/Grid/GridContext.cjs

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

package/dist/Grid/GridContext.js

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

package/dist/Grid/GridItem.cjs

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),c=require("styled-components"),p=require("prop-types"),m=require("../Box/Box.cjs"),f=require("./GridContext.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=o(l),y=o(c),t=o(p),x=y.default.div`
+  grid-column: span ${({col:e})=>e};
+  max-width: 100%;
+
+  ${({theme:e})=>e.mediaQueries.tablet} {
+    grid-column: span ${({s:e})=>e};
+  }
+
+  ${({theme:e})=>e.mediaQueries.mobile} {
+    grid-column: span ${({xs:e})=>e};
+  }
+`,r=({col:e,xs:d,s:u,...n})=>{const{gap:a,gridCols:i}=f.useGrid();return s.default.createElement(x,{gap:a,gridCols:i,col:e,xs:d,s:u},s.default.createElement(m.Box,{...n}))};r.defaultProps={col:void 0,s:void 0,xs:void 0};r.propTypes={col:t.default.number,s:t.default.number,xs:t.default.number};exports.GridItem=r;

package/dist/Grid/GridItem.js

@@ -0,0 +1,41 @@
+import o from "react";
+import n from "styled-components";
+import e from "prop-types";
+import { Box as a } from "../Box/Box.js";
+import { useGrid as l } from "./GridContext.js";
+const u = n.div`
+  grid-column: span ${({ col: r }) => r};
+  max-width: 100%;
+
+  ${({ theme: r }) => r.mediaQueries.tablet} {
+    grid-column: span ${({ s: r }) => r};
+  }
+
+  ${({ theme: r }) => r.mediaQueries.mobile} {
+    grid-column: span ${({ xs: r }) => r};
+  }
+`, m = ({ col: r, xs: t, s: i, ...p }) => {
+  const { gap: s, gridCols: d } = l();
+  return /* @__PURE__ */ o.createElement(u, {
+    gap: s,
+    gridCols: d,
+    col: r,
+    xs: t,
+    s: i
+  }, /* @__PURE__ */ o.createElement(a, {
+    ...p
+  }));
+};
+m.defaultProps = {
+  col: void 0,
+  s: void 0,
+  xs: void 0
+};
+m.propTypes = {
+  col: e.number,
+  s: e.number,
+  xs: e.number
+};
+export {
+  m as GridItem
+};

package/dist/Grid/index.cjs

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

package/dist/Grid/index.js

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

package/dist/Icon/Icon.cjs

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),a=require("prop-types"),n=require("../Box/Box.cjs"),u=require("styled-components"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=r(s),l=r(a),d=r(u),p=d.default(n.Box)`
+  path {
+    fill: ${({color:e,theme:t})=>t.colors[e]};
+  }
+  ${({theme:e,colors:t})=>t(e)}
+`,o=c.default.forwardRef((e,t)=>c.default.createElement(p,{ref:t,...e}));o.displayName="Icon";o.defaultProps={color:"neutral600",colors:()=>{}};o.propTypes={color:l.default.string,colors:l.default.func};exports.Icon=o;

package/dist/Icon/Icon.js

@@ -0,0 +1,26 @@
+import e from "react";
+import p from "prop-types";
+import { Box as c } from "../Box/Box.js";
+import l from "styled-components";
+const s = l(c)`
+  path {
+    fill: ${({ color: o, theme: r }) => r.colors[o]};
+  }
+  ${({ theme: o, colors: r }) => r(o)}
+`, t = e.forwardRef((o, r) => /* @__PURE__ */ e.createElement(s, {
+  ref: r,
+  ...o
+}));
+t.displayName = "Icon";
+t.defaultProps = {
+  color: "neutral600",
+  colors: () => {
+  }
+};
+t.propTypes = {
+  color: p.string,
+  colors: p.func
+};
+export {
+  t as Icon
+};

package/dist/Icon/index.cjs

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

package/dist/Icon/index.js

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

package/dist/IconButton/IconButton.cjs

@@ -0,0 +1,86 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const $=require("react"),g=require("prop-types"),v=require("styled-components"),B=require("../Tooltip/Tooltip.cjs"),h=require("../BaseButton/BaseButton.cjs"),y=require("../Flex/Flex.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=n($),t=n(g),p=n(v),a=p.default(h.BaseButton)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: ${32/16}rem;
+  width: ${32/16}rem;
+
+  svg {
+    > g,
+    path {
+      fill: ${({theme:e})=>e.colors.neutral500};
+    }
+  }
+  &:hover {
+    svg {
+      > g,
+      path {
+        fill: ${({theme:e})=>e.colors.neutral600};
+      }
+    }
+  }
+  &:active {
+    svg {
+      > g,
+      path {
+        fill: ${({theme:e})=>e.colors.neutral400};
+      }
+    }
+  }
+  &[aria-disabled='true'] {
+    background-color: ${({theme:e})=>e.colors.neutral150};
+    svg {
+      path {
+        fill: ${({theme:e})=>e.colors.neutral600};
+      }
+    }
+  }
+  ${({noBorder:e})=>e?"border: none;":void 0}
+`,_=p.default(y.Flex)`
+  & span:first-child button {
+    border-left: 1px solid ${({theme:e})=>e.colors.neutral200};
+    border-radius: ${({theme:e})=>`${e.borderRadius} 0 0 ${e.borderRadius}`};
+  }
+
+  & span:last-child button {
+    border-radius: ${({theme:e})=>`0 ${e.borderRadius} ${e.borderRadius} 0`};
+  }
+
+  & ${a} {
+    border-radius: 0;
+    border-left: none;
+
+    svg {
+      path {
+        fill: ${({theme:e})=>e.colors.neutral700};
+      }
+    }
+
+    &:hover {
+      background-color: ${({theme:e})=>e.colors.neutral100};
+
+      svg {
+        path {
+          fill: ${({theme:e})=>e.colors.neutral800};
+        }
+      }
+    }
+
+    &:active {
+      background-color: ${({theme:e})=>e.colors.neutral150};
+      svg {
+        path {
+          fill: ${({theme:e})=>e.colors.neutral900};
+        }
+      }
+    }
+
+    &[aria-disabled='true'] {
+      svg {
+        path {
+          fill: ${({theme:e})=>e.colors.neutral600};
+        }
+      }
+    }
+  }
+`,l=o.default.forwardRef(({label:e,noBorder:s,icon:u,disabled:r,onClick:c,...d},i)=>{const f=b=>{!r&&c&&c(b)};return e?o.default.createElement(B.Tooltip,{label:e},o.default.createElement(a,{...d,ref:i,noBorder:s,onClick:f,"aria-disabled":r},u)):o.default.createElement(a,{...d,ref:i,noBorder:s,onClick:f,"aria-disabled":r},u)});l.displayName="IconButton";l.defaultProps={label:void 0,noBorder:!1,disabled:!1,onClick:void 0};l.propTypes={disabled:t.default.bool,icon:t.default.element.isRequired,label:t.default.string,noBorder:t.default.bool,onClick:t.default.func};exports.IconButton=l;exports.IconButtonGroup=_;

package/dist/IconButton/IconButton.js

@@ -0,0 +1,129 @@
+import e from "react";
+import o from "prop-types";
+import p from "styled-components";
+import { Tooltip as b } from "../Tooltip/Tooltip.js";
+import { BaseButton as $ } from "../BaseButton/BaseButton.js";
+import { Flex as m } from "../Flex/Flex.js";
+const t = p($)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: ${32 / 16}rem;
+  width: ${32 / 16}rem;
+
+  svg {
+    > g,
+    path {
+      fill: ${({ theme: r }) => r.colors.neutral500};
+    }
+  }
+  &:hover {
+    svg {
+      > g,
+      path {
+        fill: ${({ theme: r }) => r.colors.neutral600};
+      }
+    }
+  }
+  &:active {
+    svg {
+      > g,
+      path {
+        fill: ${({ theme: r }) => r.colors.neutral400};
+      }
+    }
+  }
+  &[aria-disabled='true'] {
+    background-color: ${({ theme: r }) => r.colors.neutral150};
+    svg {
+      path {
+        fill: ${({ theme: r }) => r.colors.neutral600};
+      }
+    }
+  }
+  ${({ noBorder: r }) => r ? "border: none;" : void 0}
+`, y = p(m)`
+  & span:first-child button {
+    border-left: 1px solid ${({ theme: r }) => r.colors.neutral200};
+    border-radius: ${({ theme: r }) => `${r.borderRadius} 0 0 ${r.borderRadius}`};
+  }
+
+  & span:last-child button {
+    border-radius: ${({ theme: r }) => `0 ${r.borderRadius} ${r.borderRadius} 0`};
+  }
+
+  & ${t} {
+    border-radius: 0;
+    border-left: none;
+
+    svg {
+      path {
+        fill: ${({ theme: r }) => r.colors.neutral700};
+      }
+    }
+
+    &:hover {
+      background-color: ${({ theme: r }) => r.colors.neutral100};
+
+      svg {
+        path {
+          fill: ${({ theme: r }) => r.colors.neutral800};
+        }
+      }
+    }
+
+    &:active {
+      background-color: ${({ theme: r }) => r.colors.neutral150};
+      svg {
+        path {
+          fill: ${({ theme: r }) => r.colors.neutral900};
+        }
+      }
+    }
+
+    &[aria-disabled='true'] {
+      svg {
+        path {
+          fill: ${({ theme: r }) => r.colors.neutral600};
+        }
+      }
+    }
+  }
+`, a = e.forwardRef(({ label: r, noBorder: i, icon: n, disabled: l, onClick: s, ...d }, c) => {
+  const u = (f) => {
+    !l && s && s(f);
+  };
+  return r ? /* @__PURE__ */ e.createElement(b, {
+    label: r
+  }, /* @__PURE__ */ e.createElement(t, {
+    ...d,
+    ref: c,
+    noBorder: i,
+    onClick: u,
+    "aria-disabled": l
+  }, n)) : /* @__PURE__ */ e.createElement(t, {
+    ...d,
+    ref: c,
+    noBorder: i,
+    onClick: u,
+    "aria-disabled": l
+  }, n);
+});
+a.displayName = "IconButton";
+a.defaultProps = {
+  label: void 0,
+  noBorder: !1,
+  disabled: !1,
+  onClick: void 0
+};
+a.propTypes = {
+  disabled: o.bool,
+  icon: o.element.isRequired,
+  label: o.string,
+  noBorder: o.bool,
+  onClick: o.func
+};
+export {
+  a as IconButton,
+  y as IconButtonGroup
+};

package/dist/IconButton/index.cjs

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

package/dist/IconButton/index.js

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

package/dist/KeyboardNavigable/KeyboardNavigable.cjs

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

package/dist/KeyboardNavigable/KeyboardNavigable.js

@@ -0,0 +1,58 @@
+import E from "react";
+import i from "prop-types";
+import { Box as y } from "../Box/Box.js";
+import { KeyboardKeys as r } from "../helpers/keyboardKeys.js";
+const d = ({ tagName: c, attributeName: f, ...m }) => {
+  const s = () => {
+    const e = document.activeElement;
+    return c ? e.tagName.toLowerCase() === c : e.hasAttribute(f);
+  }, a = (e) => c ? e.querySelectorAll(c) : e.querySelectorAll(`[${f}]`), p = (e) => {
+    switch (e.key) {
+      case r.RIGHT:
+      case r.DOWN: {
+        if (s()) {
+          e.preventDefault();
+          const t = document.activeElement, n = [...a(e.currentTarget)], o = n.findIndex((u) => u === t), l = o + 1 < n.length ? o + 1 : 0;
+          n[l].focus();
+        }
+        break;
+      }
+      case r.LEFT:
+      case r.UP: {
+        if (s()) {
+          e.preventDefault();
+          const t = document.activeElement, n = [...a(e.currentTarget)], o = n.findIndex((u) => u === t), l = o - 1 > -1 ? o - 1 : n.length - 1;
+          n[l].focus();
+        }
+        break;
+      }
+      case r.HOME: {
+        s() && (e.preventDefault(), a(e.currentTarget).item(0).focus());
+        break;
+      }
+      case r.END: {
+        if (s()) {
+          e.preventDefault();
+          const t = a(e.currentTarget);
+          t.item(t.length - 1).focus();
+        }
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ E.createElement(y, {
+    onKeyDown: p,
+    ...m
+  });
+};
+d.defaultProps = {
+  attributeName: void 0,
+  tagName: void 0
+};
+d.propTypes = {
+  attributeName: i.string,
+  tagName: i.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";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;