@strapi/design-system 1.7.7 → 1.7.9

package/dist/Box/Box.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),o=require("../helpers/handleResponsiveValues.cjs"),r=require("../helpers/theme.cjs"),a=e=>e&&e.__esModule?e:{default:e},d=a(n),m={color:!0,cursor:!0,height:!0,width:!0},l=d.default.div.withConfig({shouldForwardProp:(e,t)=>!m[e]&&t(e)})`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),o=require("../helpers/handleResponsiveValues.cjs"),r=require("../helpers/theme.cjs"),a=e=>e&&e.__esModule?e:{default:e},m=a(n),d={color:!0,cursor:!0,height:!0,width:!0},l=m.default.div.withConfig({shouldForwardProp:(e,t)=>!d[e]&&t(e)})`
   // Font
   font-size: ${({fontSize:e,theme:t})=>r.extractStyleFromTheme(t.fontSizes,e,e)};
 
@@ -72,7 +72,7 @@
   // Text
   text-align: ${({textAlign:e})=>e};
   text-transform: ${({textTransform:e})=>e};
-  line-height: ${({lineHeight:e})=>e};
+  line-height: ${({theme:e,lineHeight:t})=>r.extractStyleFromTheme(e.lineHeights,t,t)};
 
   // Cursor
   cursor: ${({cursor:e})=>e};

package/dist/Box/Box.js

@@ -85,7 +85,7 @@ const t = {
   // Text
   text-align: ${({ textAlign: e }) => e};
   text-transform: ${({ textTransform: e }) => e};
-  line-height: ${({ lineHeight: e }) => e};
+  line-height: ${({ theme: e, lineHeight: o }) => s(e.lineHeights, o, o)};
 
   // Cursor
   cursor: ${({ cursor: e }) => e};

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;

package/dist/Layout/TwoColsLayout.js

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

package/dist/Table/Cell.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const u=require("prop-types"),d=require("styled-components"),o=require("../RawTable/RawCell.cjs"),p=require("../Flex/Flex.cjs"),s=e=>e&&e.__esModule?e:{default:e},l=s(u),n=s(d),i=n.default(o.RawTd)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("styled-components"),r=require("../RawTable/RawCell.cjs"),i=require("../Flex/Flex.cjs"),a=e=>e&&e.__esModule?e:{default:e},n=a(c),s=n.default(r.RawTd)`
   vertical-align: middle;
   text-align: left;
   color: ${({theme:e})=>e.colors.neutral600};
@@ -10,8 +10,8 @@
   input {
     vertical-align: sub;
   }
-`,f=n.default.span`
+`,u=n.default.span`
   svg {
     height: ${4/16}rem;
   }
-`,r=({children:e,action:a,...c})=>t.jsx(i,{as:o.RawTh,...c,children:t.jsxs(p.Flex,{children:[e,t.jsx(f,{children:a})]})});r.defaultProps={action:void 0};r.propTypes={action:l.default.node,children:l.default.node.isRequired};const h=e=>t.jsx(i,{...e});exports.Td=h;exports.Th=r;
+`,d=({children:e,action:l,...o})=>t.jsx(s,{as:r.RawTh,...o,children:t.jsxs(i.Flex,{children:[e,t.jsx(u,{children:l})]})}),h=({children:e,...l})=>t.jsx(s,{...l,children:e});exports.Td=h;exports.Th=d;

package/dist/Table/Cell.js

@@ -1,13 +1,11 @@
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import "react";
-import e from "prop-types";
-import t from "styled-components";
-import { RawTd as a, RawTh as c } from "../RawTable/RawCell.js";
-import { Flex as d } from "../Flex/Flex.js";
-const i = t(a)`
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import o from "styled-components";
+import { RawTd as c, RawTh as s } from "../RawTable/RawCell.js";
+import { Flex as a } from "../Flex/Flex.js";
+const l = o(c)`
   vertical-align: middle;
   text-align: left;
-  color: ${({ theme: o }) => o.colors.neutral600};
+  color: ${({ theme: r }) => r.colors.neutral600};
   outline-offset: -4px;
 
   /**
@@ -16,23 +14,12 @@ const i = t(a)`
   input {
     vertical-align: sub;
   }
-`, m = t.span`
+`, p = o.span`
   svg {
     height: ${4 / 16}rem;
   }
-`, n = ({ children: o, action: l, ...p }) => /* @__PURE__ */ r(i, { as: c, ...p, children: /* @__PURE__ */ s(d, { children: [
-  o,
-  /* @__PURE__ */ r(m, { children: l })
-] }) });
-n.defaultProps = {
-  action: void 0
-};
-n.propTypes = {
-  action: e.node,
-  children: e.node.isRequired
-};
-const k = (o) => /* @__PURE__ */ r(i, { ...o });
+`, u = ({ children: r, action: e, ...i }) => t(l, { as: s, ...i, children: n(a, { children: [r, t(p, { children: e })] }) }), x = ({ children: r, ...e }) => t(l, { ...e, children: r });
 export {
-  k as Td,
-  n as Th
+  x as Td,
+  u as Th
 };

package/dist/Table/TFooter.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const a=require("prop-types"),l=require("styled-components"),t=require("../Box/Box.cjs"),c=require("../Divider/Divider.cjs"),p=require("../Flex/Flex.cjs"),h=require("../Typography/Typography.cjs"),o=e=>e&&e.__esModule?e:{default:e},i=o(a),d=o(l),x=d.default(t.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("styled-components"),t=require("../Box/Box.cjs"),s=require("../Divider/Divider.cjs"),a=require("../Flex/Flex.cjs"),l=require("../Typography/Typography.cjs"),c=e=>e&&e.__esModule?e:{default:e},i=c(n),u=i.default(t.Box)`
   height: ${24/16}rem;
   width: ${24/16}rem;
   border-radius: 50%;
@@ -14,9 +14,9 @@
   svg path {
     fill: ${({theme:e})=>e.colors.primary600};
   }
-`,y=d.default(t.Box)`
+`,h=i.default(t.Box)`
   border-radius: 0 0 ${({theme:e})=>e.borderRadius} ${({theme:e})=>e.borderRadius};
   display: block;
   width: 100%;
   border: none;
-`,s=({children:e,icon:n,...u})=>r.jsxs("div",{children:[r.jsx(c.Divider,{}),r.jsx(y,{as:"button",background:"primary100",padding:5,...u,children:r.jsxs(p.Flex,{children:[r.jsx(x,{"aria-hidden":!0,background:"primary200",children:n}),r.jsx(t.Box,{paddingLeft:3,children:r.jsx(h.Typography,{variant:"pi",fontWeight:"bold",textColor:"primary600",children:e})})]})})]});s.propTypes={children:i.default.string.isRequired,icon:i.default.node.isRequired};exports.TFooter=s;
+`,x=({children:e,icon:o,...d})=>r.jsxs("div",{children:[r.jsx(s.Divider,{}),r.jsx(h,{as:"button",background:"primary100",padding:5,...d,children:r.jsxs(a.Flex,{children:[r.jsx(u,{"aria-hidden":!0,background:"primary200",children:o}),r.jsx(t.Box,{paddingLeft:3,children:r.jsx(l.Typography,{variant:"pi",fontWeight:"bold",textColor:"primary600",children:e})})]})})]});exports.TFooter=x;