@strapi/design-system 1.4.0-beta.0 → 1.4.0-beta.1

package/dist/IconButton/IconButton.js

@@ -1,11 +1,32 @@
-import l, { cloneElement as b } from "react";
-import t from "prop-types";
-import m from "styled-components";
-import { Tooltip as v } from "../Tooltip/Tooltip.js";
-import { BaseButton as y } from "../BaseButton/BaseButton.js";
-import { Flex as k } from "../Flex/Flex.js";
-import { VisuallyHidden as $ } from "../VisuallyHidden/VisuallyHidden.js";
-const s = m(y)`
+var x = Object.defineProperty, C = Object.defineProperties;
+var T = Object.getOwnPropertyDescriptors;
+var i = Object.getOwnPropertySymbols;
+var v = Object.prototype.hasOwnProperty, y = Object.prototype.propertyIsEnumerable;
+var g = (r, e, o) => e in r ? x(r, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[e] = o, d = (r, e) => {
+  for (var o in e || (e = {}))
+    v.call(e, o) && g(r, o, e[o]);
+  if (i)
+    for (var o of i(e))
+      y.call(e, o) && g(r, o, e[o]);
+  return r;
+}, c = (r, e) => C(r, T(e));
+var k = (r, e) => {
+  var o = {};
+  for (var l in r)
+    v.call(r, l) && e.indexOf(l) < 0 && (o[l] = r[l]);
+  if (r != null && i)
+    for (var l of i(r))
+      e.indexOf(l) < 0 && y.call(r, l) && (o[l] = r[l]);
+  return o;
+};
+import a, { cloneElement as B } from "react";
+import n from "prop-types";
+import I from "styled-components";
+import { Tooltip as j } from "../Tooltip/Tooltip.js";
+import { BaseButton as P } from "../BaseButton/BaseButton.js";
+import { Flex as _ } from "../Flex/Flex.js";
+import { VisuallyHidden as E } from "../VisuallyHidden/VisuallyHidden.js";
+const u = I(P)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -43,7 +64,7 @@ const s = m(y)`
     }
   }
   ${({ noBorder: r }) => r ? "border: none;" : void 0}
-`, T = m(k)`
+`, z = I(_)`
   & span:first-child button {
     border-left: 1px solid ${({ theme: r }) => r.colors.neutral200};
     border-radius: ${({ theme: r }) => `${r.borderRadius} 0 0 ${r.borderRadius}`};
@@ -53,7 +74,7 @@ const s = m(y)`
     border-radius: ${({ theme: r }) => `0 ${r.borderRadius} ${r.borderRadius} 0`};
   }
 
-  & ${s} {
+  & ${u} {
     border-radius: 0;
     border-left: none;
 
@@ -90,60 +111,58 @@ const s = m(y)`
       }
     }
   }
-`, d = l.forwardRef(
-  ({ label: r, noBorder: n, children: e, icon: o, disabled: a, onClick: c, ["aria-label"]: g, ...u }, f) => {
-    const p = (h) => {
-      !a && c && c(h);
+`, f = a.forwardRef(
+  (q, $) => {
+    var h = q, { label: r, noBorder: e, children: o, icon: l, disabled: t, onClick: p, "aria-label": R } = h, b = k(h, ["label", "noBorder", "children", "icon", "disabled", "onClick", "aria-label"]);
+    const m = (w) => {
+      !t && p && p(w);
     };
-    return r ? /* @__PURE__ */ l.createElement(v, {
+    return r ? /* @__PURE__ */ a.createElement(j, {
       label: r
-    }, /* @__PURE__ */ l.createElement(s, {
-      ...u,
-      ref: f,
-      noBorder: n,
-      onClick: p,
-      "aria-disabled": a
-    }, /* @__PURE__ */ l.createElement($, {
+    }, /* @__PURE__ */ a.createElement(u, c(d({}, b), {
+      ref: $,
+      noBorder: e,
+      onClick: m,
+      "aria-disabled": t
+    }), /* @__PURE__ */ a.createElement(E, {
       as: "span"
-    }, r), b(o || e, {
+    }, r), B(l || o, {
       "aria-hidden": !0,
       focusable: !1
-    }))) : /* @__PURE__ */ l.createElement(s, {
-      ...u,
-      ref: f,
-      noBorder: n,
-      onClick: p,
-      "aria-disabled": a
-    }, /* @__PURE__ */ l.createElement($, {
+    }))) : /* @__PURE__ */ a.createElement(u, c(d({}, b), {
+      ref: $,
+      noBorder: e,
+      onClick: m,
+      "aria-disabled": t
+    }), /* @__PURE__ */ a.createElement(E, {
       as: "span"
-    }, g), b(o || e, {
+    }, R), B(l || o, {
       "aria-hidden": !0,
       focusable: !1
     }));
   }
 );
-d.displayName = "IconButton";
-d.defaultProps = {
+f.displayName = "IconButton";
+f.defaultProps = {
+  "aria-label": void 0,
+  children: void 0,
+  disabled: !1,
+  icon: void 0,
   label: void 0,
   noBorder: !1,
-  disabled: !1,
   onClick: void 0
 };
-const i = (r, n) => (e, o) => {
-  if (!e[o] && r.every((a) => !e[a]))
-    return new Error(`One of the following props is required: ${o}, ${r.join(", ")}`);
-  t.checkPropTypes({ [o]: t[n] }, e, "prop", "IconButton");
-};
-d.propTypes = {
-  ["aria-label"]: i(["label"], "string"),
-  children: i(["icon"], "node"),
-  disabled: t.bool,
-  icon: i(["children"], "node"),
-  label: i(["aria-label"], "string"),
-  noBorder: t.bool,
-  onClick: t.func
+const s = (r, e) => (o, l) => !o[l] && r.every((t) => !o[t]) ? new Error(`One of the following props is required: ${l}, ${r.join(", ")}`) : n.checkPropTypes({ [l]: n[e] }, o, "prop", "IconButton");
+f.propTypes = {
+  "aria-label": s(["label"], "string"),
+  children: s(["icon"], "node"),
+  disabled: n.bool,
+  icon: s(["children"], "node"),
+  label: s(["aria-label"], "string"),
+  noBorder: n.bool,
+  onClick: n.func
 };
 export {
-  d as IconButton,
-  T as IconButtonGroup
+  f as IconButton,
+  z as IconButtonGroup
 };

package/dist/KeyboardNavigable/KeyboardNavigable.cjs

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

@@ -1,58 +1,78 @@
-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();
+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 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();
+      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 r.HOME: {
-        s() && (e.preventDefault(), a(e.currentTarget).item(0).focus());
+      case a.HOME: {
+        u() && (r.preventDefault(), f(r.currentTarget).item(0).focus());
         break;
       }
-      case r.END: {
-        if (s()) {
-          e.preventDefault();
-          const t = a(e.currentTarget);
-          t.item(t.length - 1).focus();
+      case a.END: {
+        if (u()) {
+          r.preventDefault();
+          const c = f(r.currentTarget);
+          c.item(c.length - 1).focus();
         }
         break;
       }
     }
   };
-  return /* @__PURE__ */ E.createElement(y, {
-    onKeyDown: p,
-    ...m
-  });
+  return /* @__PURE__ */ h.createElement(k, v({
+    onKeyDown: T
+  }, n));
 };
-d.defaultProps = {
+D.defaultProps = {
   attributeName: void 0,
   tagName: void 0
 };
-d.propTypes = {
-  attributeName: i.string,
-  tagName: i.string
+D.propTypes = {
+  attributeName: b.string,
+  tagName: b.string
 };
 export {
-  d as KeyboardNavigable
+  D as KeyboardNavigable
 };

package/dist/Layout/HeaderLayout.cjs

@@ -1,8 +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)`
+"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=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;
+`,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

@@ -1,102 +1,120 @@
-import e, { useRef as h, useState as E, useEffect as v } from "react";
-import b from "styled-components";
-import n from "prop-types";
-import { Typography as c } from "../Typography/Typography.js";
-import { Box as i } from "../Box/Box.js";
-import { Flex as l } from "../Flex/Flex.js";
-import { useElementOnScreen as R } from "../helpers/useElementOnScreen.js";
-import { useResizeObserver as w } from "../helpers/useResizeObserver.js";
-const x = () => {
-  const t = h(null), [o, a] = E(null), [r, d] = R({
+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 w(r, () => {
-    r.current && a(r.current.getBoundingClientRect());
-  }), v(() => {
-    t.current && a(t.current.getBoundingClientRect());
-  }, [t]), {
-    containerRef: r,
-    isVisible: d,
-    baseHeaderLayoutRef: t,
-    headerSize: o
+  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
   };
-}, p = (t) => {
-  const { containerRef: o, isVisible: a, baseHeaderLayoutRef: r, headerSize: d } = x();
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
-    style: { height: d?.height },
-    ref: o
-  }, a && /* @__PURE__ */ e.createElement(s, {
-    ref: r,
-    ...t
-  })), !a && /* @__PURE__ */ e.createElement(s, {
-    ...t,
+}, 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: d?.width
-  }));
+    width: o == null ? void 0 : o.width
+  })));
 };
-p.displayName = "HeaderLayout";
-const L = b(i)`
+m.displayName = "HeaderLayout";
+const q = O(d)`
   position: fixed;
   top: 0;
   right: 0;
-  width: ${(t) => t.width}px;
+  width: ${(e) => e.width}px;
   z-index: 4;
-  box-shadow: ${({ theme: t }) => t.shadows.tableShadow};
-`, s = e.forwardRef(
-  ({ navigationAction: t, primaryAction: o, secondaryAction: a, subtitle: r, title: d, sticky: f, width: g, ...u }, y) => {
-    const m = typeof r == "string";
-    return f ? /* @__PURE__ */ e.createElement(L, {
+  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: g,
+      width: x,
       "data-strapi-header-sticky": !0
-    }, /* @__PURE__ */ e.createElement(l, {
+    }, /* @__PURE__ */ r.createElement(s, {
       justifyContent: "space-between"
-    }, /* @__PURE__ */ e.createElement(l, null, t && /* @__PURE__ */ e.createElement(i, {
+    }, /* @__PURE__ */ r.createElement(s, null, e && /* @__PURE__ */ r.createElement(d, {
       paddingRight: 3
-    }, t), /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(c, {
+    }, e), /* @__PURE__ */ r.createElement(d, null, /* @__PURE__ */ r.createElement(u, l({
       variant: "beta",
-      as: "h1",
-      ...u
-    }, d), m ? /* @__PURE__ */ e.createElement(c, {
+      as: "h1"
+    }, f), o), y ? /* @__PURE__ */ r.createElement(u, {
       variant: "pi",
       textColor: "neutral600"
-    }, r) : r), a ? /* @__PURE__ */ e.createElement(i, {
+    }, a) : a), t ? /* @__PURE__ */ r.createElement(d, {
       paddingLeft: 4
-    }, a) : null), /* @__PURE__ */ e.createElement(l, null, o ? /* @__PURE__ */ e.createElement(i, {
+    }, t) : null), /* @__PURE__ */ r.createElement(s, null, n ? /* @__PURE__ */ r.createElement(d, {
       paddingLeft: 2
-    }, o) : void 0))) : /* @__PURE__ */ e.createElement(i, {
-      ref: y,
+    }, n) : void 0))) : /* @__PURE__ */ r.createElement(d, {
+      ref: L,
       paddingLeft: 10,
       paddingRight: 10,
       paddingBottom: 8,
-      paddingTop: t ? 6 : 8,
+      paddingTop: e ? 6 : 8,
       background: "neutral100",
       "data-strapi-header": !0
-    }, t ? /* @__PURE__ */ e.createElement(i, {
+    }, e ? /* @__PURE__ */ r.createElement(d, {
       paddingBottom: 2
-    }, t) : null, /* @__PURE__ */ e.createElement(l, {
+    }, e) : null, /* @__PURE__ */ r.createElement(s, {
       justifyContent: "space-between"
-    }, /* @__PURE__ */ e.createElement(l, null, /* @__PURE__ */ e.createElement(c, {
+    }, /* @__PURE__ */ r.createElement(s, null, /* @__PURE__ */ r.createElement(u, l({
       as: "h1",
-      variant: "alpha",
-      ...u
-    }, d), a ? /* @__PURE__ */ e.createElement(i, {
+      variant: "alpha"
+    }, f), o), t ? /* @__PURE__ */ r.createElement(d, {
       paddingLeft: 4
-    }, a) : null), o), m ? /* @__PURE__ */ e.createElement(c, {
+    }, t) : null), n), y ? /* @__PURE__ */ r.createElement(u, {
       variant: "epsilon",
       textColor: "neutral600",
       as: "p"
-    }, r) : r);
+    }, a) : a);
   }
 );
-s.displayName = "BaseHeaderLayout";
-s.defaultProps = {
+c.displayName = "BaseHeaderLayout";
+c.defaultProps = {
   navigationAction: void 0,
   primaryAction: void 0,
   secondaryAction: void 0,
@@ -104,29 +122,29 @@ s.defaultProps = {
   sticky: !1,
   width: void 0
 };
-s.propTypes = {
-  navigationAction: n.node,
-  primaryAction: n.node,
-  secondaryAction: n.node,
-  sticky: n.bool,
-  subtitle: n.oneOfType([n.string, n.node]),
-  title: n.string.isRequired,
-  width: n.number
+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
 };
-p.defaultProps = {
+m.defaultProps = {
   navigationAction: void 0,
   primaryAction: void 0,
   secondaryAction: void 0,
   subtitle: void 0
 };
-p.propTypes = {
-  navigationAction: n.node,
-  primaryAction: n.node,
-  secondaryAction: n.node,
-  subtitle: n.oneOfType([n.string, n.node]),
-  title: n.string.isRequired
+m.propTypes = {
+  navigationAction: i.node,
+  primaryAction: i.node,
+  secondaryAction: i.node,
+  subtitle: i.oneOfType([i.string, i.node]),
+  title: i.string.isRequired
 };
 export {
-  s as BaseHeaderLayout,
-  p as HeaderLayout
+  c as BaseHeaderLayout,
+  m as HeaderLayout
 };

package/dist/Link/Link.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react"),h=require("prop-types"),v=require("styled-components"),_=require("@strapi/icons/ExternalLink"),E=require("react-router-dom"),u=require("../Typography/Typography.cjs"),L=require("../Box/Box.cjs"),x=require("../themes/utils.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(g),n=a(h),c=a(v),b=a(_),k=c.default.a`
+"use strict";var b=Object.defineProperty;var a=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable;var p=(e,t,r)=>t in e?b(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,v=(e,t)=>{for(var r in t||(t={}))y.call(t,r)&&p(e,r,t[r]);if(a)for(var r of a(t))m.call(t,r)&&p(e,r,t[r]);return e};var g=(e,t)=>{var r={};for(var o in e)y.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&a)for(var o of a(e))t.indexOf(o)<0&&m.call(e,o)&&(r[o]=e[o]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("react"),q=require("prop-types"),T=require("styled-components"),$=require("@strapi/icons/ExternalLink"),j=require("react-router-dom"),h=require("../Typography/Typography.cjs"),R=require("../Box/Box.cjs"),B=require("../themes/utils.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=i(k),l=i(q),_=i(T),P=i($),I=_.default.a`
   display: inline-flex;
   align-items: center;
   text-decoration: none;
   pointer-events: ${({disabled:e})=>e?"none":void 0};
-  color: ${({disabled:e,theme:r})=>e?r.colors.neutral600:r.colors.primary600};
+  color: ${({disabled:e,theme:t})=>e?t.colors.neutral600:t.colors.primary600};
 
   svg path {
     transition: fill 150ms ease-out;
@@ -14,7 +14,7 @@
     font-size: ${10/16}rem;
   }
 
-  ${u.Typography} {
+  ${h.Typography} {
     transition: color 150ms ease-out;
     color: currentColor;
   }
@@ -27,7 +27,7 @@
     color: ${({theme:e})=>e.colors.primary700};
   }
 
-  ${x.buttonFocusStyle};
-`,i=c.default(L.Box)`
+  ${B.buttonFocusStyle};
+`,d=_.default(R.Box)`
   display: flex;
-`,l=({href:e,to:r,children:f,disabled:o,startIcon:s,endIcon:d,...p})=>{const y=e?"_blank":void 0,m=e?"noreferrer noopener":void 0;return t.default.createElement(k,{as:r&&!o?E.NavLink:"a",target:y,rel:m,to:o?void 0:r,href:o?"#":e,disabled:o,...p},s&&t.default.createElement(i,{as:"span","aria-hidden":!0,paddingRight:2},s),t.default.createElement(u.Typography,null,f),d&&!e&&t.default.createElement(i,{as:"span","aria-hidden":!0,paddingLeft:2},d),e&&t.default.createElement(i,{as:"span","aria-hidden":!0,paddingLeft:2},t.default.createElement(b.default,null)))};l.displayName="Link";l.defaultProps={href:void 0,to:void 0,disabled:!1};l.propTypes={children:n.default.node.isRequired,disabled:n.default.bool,endIcon:n.default.element,href:e=>{if(!e.disabled&&!e.to&&!e.href)return new Error("href must be defined")},startIcon:n.default.element,to:e=>{if(!e.disabled&&!e.href&&!e.to)return new Error("to must be defined")}};exports.Link=l;
+`,s=S=>{var f=S,{href:e,to:t,children:r,disabled:o,startIcon:u,endIcon:c}=f,E=g(f,["href","to","children","disabled","startIcon","endIcon"]);const L=e?"_blank":void 0,x=e?"noreferrer noopener":void 0;return n.default.createElement(I,v({as:t&&!o?j.NavLink:"a",target:L,rel:x,to:o?void 0:t,href:o?"#":e,disabled:o},E),u&&n.default.createElement(d,{as:"span","aria-hidden":!0,paddingRight:2},u),n.default.createElement(h.Typography,null,r),c&&!e&&n.default.createElement(d,{as:"span","aria-hidden":!0,paddingLeft:2},c),e&&n.default.createElement(d,{as:"span","aria-hidden":!0,paddingLeft:2},n.default.createElement(P.default,null)))};s.displayName="Link";s.defaultProps={endIcon:void 0,href:void 0,to:void 0,disabled:!1,startIcon:void 0};s.propTypes={children:l.default.node.isRequired,disabled:l.default.bool,endIcon:l.default.element,href(e){if(!e.disabled&&!e.to&&!e.href)return new Error("href must be defined")},startIcon:l.default.element,to(e){if(!e.disabled&&!e.href&&!e.to)return new Error("to must be defined")}};exports.Link=s;