@strapi/design-system 1.7.6 → 1.7.8

package/dist/Dialog/Dialog.js

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

package/dist/Dialog/DialogBody.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const r=require("prop-types"),l=require("styled-components"),n=require("../Box/Box.cjs"),a=require("../Flex/Flex.cjs"),s=e=>e&&e.__esModule?e:{default:e},i=s(r),c=s(l),u=c.default(n.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("styled-components"),n=require("../Box/Box.cjs"),s=require("../Flex/Flex.cjs"),i=e=>e&&e.__esModule?e:{default:e},r=i(d),l=r.default(n.Box)`
   svg {
     width: ${({theme:e})=>e.spaces[6]};
     height: ${({theme:e})=>e.spaces[6]};
@@ -7,4 +7,4 @@
       fill: ${({theme:e})=>e.colors.danger600};
     }
   }
-`,o=({children:e,icon:d})=>t.jsxs(n.Box,{paddingTop:8,paddingBottom:8,paddingLeft:6,paddingRight:6,children:[d&&t.jsx(u,{paddingBottom:2,children:t.jsx(a.Flex,{justifyContent:"center",children:d})}),e]});o.displayName="DialogBody";o.defaultProps={icon:void 0};o.propTypes={children:i.default.node.isRequired,icon:i.default.node};exports.DialogBody=o;
+`,a=({children:e,icon:o})=>t.jsxs(n.Box,{paddingTop:8,paddingBottom:8,paddingLeft:6,paddingRight:6,children:[o&&t.jsx(l,{paddingBottom:2,children:t.jsx(s.Flex,{justifyContent:"center",children:o})}),e]});exports.DialogBody=a;

package/dist/Dialog/DialogBody.js

@@ -1,10 +1,8 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import "react";
-import d from "prop-types";
+import { jsxs as d, jsx as i } from "react/jsx-runtime";
 import n from "styled-components";
-import { Box as e } from "../Box/Box.js";
-import { Flex as s } from "../Flex/Flex.js";
-const a = n(e)`
+import { Box as r } from "../Box/Box.js";
+import { Flex as e } from "../Flex/Flex.js";
+const p = n(r)`
   svg {
     width: ${({ theme: o }) => o.spaces[6]};
     height: ${({ theme: o }) => o.spaces[6]};
@@ -13,18 +11,7 @@ const a = n(e)`
       fill: ${({ theme: o }) => o.colors.danger600};
     }
   }
-`, i = ({ children: o, icon: r }) => /* @__PURE__ */ p(e, { paddingTop: 8, paddingBottom: 8, paddingLeft: 6, paddingRight: 6, children: [
-  r && /* @__PURE__ */ t(a, { paddingBottom: 2, children: /* @__PURE__ */ t(s, { justifyContent: "center", children: r }) }),
-  o
-] });
-i.displayName = "DialogBody";
-i.defaultProps = {
-  icon: void 0
-};
-i.propTypes = {
-  children: d.node.isRequired,
-  icon: d.node
-};
+`, c = ({ children: o, icon: t }) => d(r, { paddingTop: 8, paddingBottom: 8, paddingLeft: 6, paddingRight: 6, children: [t && i(p, { paddingBottom: 2, children: i(e, { justifyContent: "center", children: t }) }), o] });
 export {
-  i as DialogBody
+  c as DialogBody
 };

package/dist/Dialog/DialogFooter.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime");require("react");const s=require("prop-types"),l=require("styled-components"),d=require("../Box/Box.cjs"),u=require("../Flex/Flex.cjs"),n=e=>e&&e.__esModule?e:{default:e},r=n(s),a=n(l),c=a.default(d.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("styled-components"),n=require("../Box/Box.cjs"),l=require("../Flex/Flex.cjs"),s=e=>e&&e.__esModule?e:{default:e},i=s(r),u=i.default(n.Box)`
   border-top: 1px solid ${({theme:e})=>e.colors.neutral150};
 
   button {
@@ -6,4 +6,4 @@
     display: inline-flex;
     justify-content: center;
   }
-`,t=({startAction:e,endAction:i})=>o.jsx(c,{padding:4,children:o.jsxs(u.Flex,{gap:2,children:[e,i]})});t.displayName="DialogFooter";t.defaultProps={endAction:void 0,startAction:void 0};t.propTypes={endAction:r.default.node,startAction:r.default.node};exports.DialogFooter=t;
+`,d=({startAction:e,endAction:o})=>t.jsx(u,{padding:4,children:t.jsxs(l.Flex,{gap:2,children:[e,o]})});exports.DialogFooter=d;

package/dist/Dialog/DialogFooter.js

@@ -1,10 +1,8 @@
-import { jsx as i, jsxs as n } from "react/jsx-runtime";
-import "react";
-import r from "prop-types";
-import p from "styled-components";
-import { Box as d } from "../Box/Box.js";
-import { Flex as s } from "../Flex/Flex.js";
-const l = p(d)`
+import { jsx as t, jsxs as e } from "react/jsx-runtime";
+import i from "styled-components";
+import { Box as n } from "../Box/Box.js";
+import { Flex as p } from "../Flex/Flex.js";
+const l = i(n)`
   border-top: 1px solid ${({ theme: o }) => o.colors.neutral150};
 
   button {
@@ -12,19 +10,7 @@ const l = p(d)`
     display: inline-flex;
     justify-content: center;
   }
-`, t = ({ startAction: o, endAction: e }) => /* @__PURE__ */ i(l, { padding: 4, children: /* @__PURE__ */ n(s, { gap: 2, children: [
-  o,
-  e
-] }) });
-t.displayName = "DialogFooter";
-t.defaultProps = {
-  endAction: void 0,
-  startAction: void 0
-};
-t.propTypes = {
-  endAction: r.node,
-  startAction: r.node
-};
+`, x = ({ startAction: o, endAction: r }) => t(l, { padding: 4, children: e(p, { gap: 2, children: [o, r] }) });
 export {
-  t as DialogFooter
+  x as DialogFooter
 };

package/dist/Grid/Grid.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("react"),l=require("prop-types"),d=require("styled-components"),i=require("./GridContext.cjs"),f=require("../helpers/handleResponsiveValues.cjs"),p=require("../Box/Box.cjs"),a=e=>e&&e.__esModule?e:{default:e};function y(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const m=y(c),o=a(l),_=a(d),b=_.default(p.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),o=require("styled-components"),i=require("../helpers/handleResponsiveValues.cjs"),d=require("../Box/Box.cjs"),l=e=>e&&e.__esModule?e:{default:e},n=l(o),u=n.default(d.Box)`
   display: grid;
   grid-template-columns: repeat(${({gridCols:e})=>e}, 1fr);
-  ${({theme:e,gap:t})=>f("gap",t,e)}
-`,u=({gap:e,gridCols:t,...r})=>{const n=m.useMemo(()=>({gap:e,gridCols:t}),[e,t]);return s.jsx(i.GridContext.Provider,{value:n,children:s.jsx(b,{gap:e,gridCols:t,...r})})};u.defaultProps={gap:0,gridCols:12};u.propTypes={gap:o.default.oneOfType([o.default.number,o.default.arrayOf(o.default.number)]),gridCols:o.default.number};exports.Grid=u;
+  ${({theme:e,gap:t})=>i("gap",t,e)}
+`,a=({gap:e="0",gridCols:t=12,...r})=>s.jsx(u,{gap:e,gridCols:t,...r});exports.Grid=a;

package/dist/Grid/Grid.js

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

package/dist/Grid/GridItem.cjs

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

package/dist/Grid/GridItem.js

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

package/dist/Layout/ActionLayout.cjs

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

package/dist/Layout/ActionLayout.js

@@ -1,29 +1,6 @@
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import "react";
-import e from "prop-types";
-import n from "styled-components";
-import { Flex as p } from "../Flex/Flex.js";
-import { Box as i } from "../Box/Box.js";
-const d = n(p)`
-  & > * + * {
-    margin-left: ${({ theme: t }) => t.spaces[2]};
-  }
-
-  margin-left: ${({ pullRight: t }) => t ? "auto" : void 0};
-`, a = n(d)`
-  flex-shrink: 0;
-`, l = ({ startActions: t, endActions: r }) => t || r ? /* @__PURE__ */ o(i, { paddingLeft: 10, paddingRight: 10, children: /* @__PURE__ */ o(i, { paddingBottom: 4, children: /* @__PURE__ */ s(p, { justifyContent: "space-between", alignItems: "flex-start", children: [
-  t && /* @__PURE__ */ o(d, { wrap: "wrap", children: t }),
-  r && /* @__PURE__ */ o(a, { pullRight: !0, children: r })
-] }) }) }) : null;
-l.defaultProps = {
-  endActions: void 0,
-  startActions: void 0
-};
-l.propTypes = {
-  endActions: e.node,
-  startActions: e.node
-};
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import { Flex as r } from "../Flex/Flex.js";
+const o = ({ startActions: t, endActions: e }) => !t || !e ? null : p(r, { justifyContent: "space-between", alignItems: "flex-start", paddingBottom: 4, paddingLeft: 10, paddingRight: 10, children: [n(r, { gap: 2, wrap: "wrap", children: t }), n(r, { gap: 2, shrink: 0, wrap: "wrap", children: e })] });
 export {
-  l as ActionLayout
+  o as ActionLayout
 };

package/dist/Layout/ContentLayout.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime");require("react");const r=require("prop-types"),n=require("../Box/Box.cjs"),u=e=>e&&e.__esModule?e:{default:e},i=u(r),t=({children:e})=>o.jsx(n.Box,{paddingLeft:10,paddingRight:10,children:e});t.propTypes={children:i.default.node.isRequired};exports.ContentLayout=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../Box/Box.cjs"),o=({children:t})=>e.jsx(n.Box,{paddingLeft:10,paddingRight:10,children:t});exports.ContentLayout=o;

package/dist/Layout/ContentLayout.js

@@ -1,11 +1,6 @@
-import { jsx as r } from "react/jsx-runtime";
-import "react";
-import p from "prop-types";
-import { Box as t } from "../Box/Box.js";
-const e = ({ children: o }) => /* @__PURE__ */ r(t, { paddingLeft: 10, paddingRight: 10, children: o });
-e.propTypes = {
-  children: p.node.isRequired
-};
+import { jsx as o } from "react/jsx-runtime";
+import { Box as r } from "../Box/Box.js";
+const d = ({ children: t }) => o(r, { paddingLeft: 10, paddingRight: 10, children: t });
 export {
-  e as ContentLayout
+  d as ContentLayout
 };

package/dist/Layout/GridLayout.cjs

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

package/dist/Layout/GridLayout.js

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

package/dist/Layout/HeaderLayout.cjs

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

package/dist/Layout/HeaderLayout.js

@@ -1,127 +1,32 @@
-import { jsx as i, jsxs as s, Fragment as v } from "react/jsx-runtime";
-import R, { useRef as b, useState as x, useEffect as w } from "react";
-import t from "prop-types";
-import L from "styled-components";
-import { useElementOnScreen as S } from "../hooks/useElementOnScreen.js";
-import { useResizeObserver as B } from "../hooks/useResizeObserver.js";
-import { Box as d } from "../Box/Box.js";
-import { Flex as l } from "../Flex/Flex.js";
-import { Typography as p } from "../Typography/Typography.js";
-const H = () => {
-  const e = b(null), [o, n] = x(null), [r, a] = S({
+import { jsx as e, jsxs as l, Fragment as m } from "react/jsx-runtime";
+import x, { useRef as R, useState as y, useEffect as L } from "react";
+import w from "styled-components";
+import { useElementOnScreen as B } from "../hooks/useElementOnScreen.js";
+import { useResizeObserver as S } from "../hooks/useResizeObserver.js";
+import { Box as n } from "../Box/Box.js";
+import { Flex as o } from "../Flex/Flex.js";
+import { Typography as u } from "../Typography/Typography.js";
+const b = (r) => {
+  const t = R(null), [i, d] = y(null), [a, h] = B({
     root: null,
     rootMargin: "0px",
     threshold: 0
   });
-  return B(r, () => {
-    r.current && n(r.current.getBoundingClientRect());
-  }), w(() => {
-    e.current && n(e.current.getBoundingClientRect());
-  }, [e]), {
-    containerRef: r,
-    isVisible: a,
-    baseHeaderLayoutRef: e,
-    headerSize: o
-  };
-}, h = (e) => {
-  const { containerRef: o, isVisible: n, baseHeaderLayoutRef: r, headerSize: a } = H();
-  return /* @__PURE__ */ s(v, { children: [
-    /* @__PURE__ */ i("div", { style: { height: a?.height }, ref: o, children: n && /* @__PURE__ */ i(c, { ref: r, ...e }) }),
-    !n && /* @__PURE__ */ i(c, { ...e, sticky: !0, width: a?.width })
-  ] });
-};
-h.displayName = "HeaderLayout";
-const T = L(d)`
-  width: ${(e) => e.width}px;
-  z-index: ${({ theme: e }) => e.zIndices[1]};
-`, c = R.forwardRef(
-  ({ navigationAction: e, primaryAction: o, secondaryAction: n, subtitle: r, title: a, sticky: g, width: m, ...u }, y) => {
-    const f = typeof r == "string";
-    return g ? /* @__PURE__ */ i(
-      T,
-      {
-        paddingLeft: 6,
-        paddingRight: 6,
-        paddingTop: 3,
-        paddingBottom: 3,
-        position: "fixed",
-        top: 0,
-        right: 0,
-        background: "neutral0",
-        shadow: "tableShadow",
-        width: m,
-        "data-strapi-header-sticky": !0,
-        children: /* @__PURE__ */ s(l, { justifyContent: "space-between", children: [
-          /* @__PURE__ */ s(l, { children: [
-            e && /* @__PURE__ */ i(d, { paddingRight: 3, children: e }),
-            /* @__PURE__ */ s(d, { children: [
-              /* @__PURE__ */ i(p, { variant: "beta", as: "h1", ...u, children: a }),
-              f ? /* @__PURE__ */ i(p, { variant: "pi", textColor: "neutral600", children: r }) : r
-            ] }),
-            n ? /* @__PURE__ */ i(d, { paddingLeft: 4, children: n }) : null
-          ] }),
-          /* @__PURE__ */ i(l, { children: o ? /* @__PURE__ */ i(d, { paddingLeft: 2, children: o }) : void 0 })
-        ] })
-      }
-    ) : /* @__PURE__ */ s(
-      d,
-      {
-        ref: y,
-        paddingLeft: 10,
-        paddingRight: 10,
-        paddingBottom: 8,
-        paddingTop: e ? 6 : 8,
-        background: "neutral100",
-        "data-strapi-header": !0,
-        children: [
-          e ? /* @__PURE__ */ i(d, { paddingBottom: 2, children: e }) : null,
-          /* @__PURE__ */ s(l, { justifyContent: "space-between", children: [
-            /* @__PURE__ */ s(l, { minWidth: 0, children: [
-              /* @__PURE__ */ i(p, { as: "h1", variant: "alpha", ...u, children: a }),
-              n ? /* @__PURE__ */ i(d, { paddingLeft: 4, children: n }) : null
-            ] }),
-            o
-          ] }),
-          f ? /* @__PURE__ */ i(p, { variant: "epsilon", textColor: "neutral600", as: "p", children: r }) : r
-        ]
-      }
-    );
-  }
-);
-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: t.node,
-  primaryAction: t.node,
-  secondaryAction: t.node,
-  sticky: t.bool,
-  // TODO V2: Remove the string fallback
-  subtitle: t.oneOfType([t.string, t.node]),
-  title: t.string.isRequired,
-  width: t.number
-};
-h.defaultProps = {
-  navigationAction: void 0,
-  primaryAction: void 0,
-  secondaryAction: void 0,
-  subtitle: void 0
-};
-h.propTypes = {
-  navigationAction: t.node,
-  primaryAction: t.node,
-  secondaryAction: t.node,
-  // TODO V2: Remove the string fallback
-  subtitle: t.oneOfType([t.string, t.node]),
-  title: t.string.isRequired
+  return S(a, () => {
+    a.current && d(a.current.getBoundingClientRect());
+  }), L(() => {
+    t.current && d(t.current.getBoundingClientRect());
+  }, [t]), l(m, { children: [e("div", { style: { height: i?.height }, ref: a, children: h && e(p, { ref: t, ...r }) }), !h && e(p, { ...r, sticky: !0, width: i?.width })] });
 };
+b.displayName = "HeaderLayout";
+const C = w(n)`
+  width: ${({ width: r }) => r ? `${r / 16}rem` : void 0};
+  z-index: ${({ theme: r }) => r.zIndices[1]};
+`, p = x.forwardRef(({ navigationAction: r, primaryAction: t, secondaryAction: i, subtitle: d, title: a, sticky: h, width: c, ...s }, g) => {
+  const f = typeof d == "string";
+  return h ? e(C, { paddingLeft: 6, paddingRight: 6, paddingTop: 3, paddingBottom: 3, position: "fixed", top: 0, right: 0, background: "neutral0", shadow: "tableShadow", width: c, "data-strapi-header-sticky": !0, children: l(o, { justifyContent: "space-between", children: [l(o, { children: [r && e(n, { paddingRight: 3, children: r }), l(n, { children: [e(u, { variant: "beta", as: "h1", ...s, children: a }), f ? e(u, { variant: "pi", textColor: "neutral600", children: d }) : d] }), i ? e(n, { paddingLeft: 4, children: i }) : null] }), e(o, { children: t ? e(n, { paddingLeft: 2, children: t }) : void 0 })] }) }) : l(n, { ref: g, paddingLeft: 10, paddingRight: 10, paddingBottom: 8, paddingTop: r ? 6 : 8, background: "neutral100", "data-strapi-header": !0, children: [r ? e(n, { paddingBottom: 2, children: r }) : null, l(o, { justifyContent: "space-between", children: [l(o, { minWidth: 0, children: [e(u, { as: "h1", variant: "alpha", ...s, children: a }), i ? e(n, { paddingLeft: 4, children: i }) : null] }), t] }), f ? e(u, { variant: "epsilon", textColor: "neutral600", as: "p", children: d }) : d] });
+});
 export {
-  c as BaseHeaderLayout,
-  h as HeaderLayout
+  p as BaseHeaderLayout,
+  b as HeaderLayout
 };

package/dist/Layout/Layout.cjs

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

package/dist/Layout/Layout.js

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

package/dist/Layout/TwoColsLayout.cjs

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