@strapi/design-system 1.4.2 → 1.5.0-alpha.0

package/dist/Grid/GridItem.cjs

@@ -1,4 +1,4 @@
-"use strict";var _=Object.defineProperty;var s=Object.getOwnPropertySymbols;var l=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable;var i=(e,o,t)=>o in e?_(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,p=(e,o)=>{for(var t in o||(o={}))l.call(o,t)&&i(e,t,o[t]);if(s)for(var t of s(o))c.call(o,t)&&i(e,t,o[t]);return e};var m=(e,o)=>{var t={};for(var r in e)l.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&s)for(var r of s(e))o.indexOf(r)<0&&c.call(e,r)&&(t[r]=e[r]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),g=require("styled-components"),v=require("prop-types"),G=require("../Box/Box.cjs"),q=require("./GridContext.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},f=u(b),$=u(g),d=u(v),j=$.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),c=require("styled-components"),p=require("prop-types"),m=require("../Box/Box.cjs"),f=require("./GridContext.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=o(l),y=o(c),t=o(p),x=y.default.div`
   grid-column: span ${({col:e})=>e};
   max-width: 100%;
 
@@ -9,4 +9,4 @@
   ${({theme:e})=>e.mediaQueries.mobile} {
     grid-column: span ${({xs:e})=>e};
   }
-`,n=B=>{var a=B,{col:e,xs:o,s:t}=a,r=m(a,["col","xs","s"]);const{gap:y,gridCols:x}=q.useGrid();return f.default.createElement(j,{gap:y,gridCols:x,col:e,xs:o,s:t},f.default.createElement(G.Box,p({},r)))};n.defaultProps={col:void 0,s:void 0,xs:void 0};n.propTypes={col:d.default.number,s:d.default.number,xs:d.default.number};exports.GridItem=n;
+`,r=({col:e,xs:d,s:u,...n})=>{const{gap:a,gridCols:i}=f.useGrid();return s.default.createElement(x,{gap:a,gridCols:i,col:e,xs:d,s:u},s.default.createElement(m.Box,{...n}))};r.defaultProps={col:void 0,s:void 0,xs:void 0};r.propTypes={col:t.default.number,s:t.default.number,xs:t.default.number};exports.GridItem=r;

package/dist/Grid/GridItem.js

@@ -1,29 +1,9 @@
-var g = Object.defineProperty;
-var t = Object.getOwnPropertySymbols;
-var d = Object.prototype.hasOwnProperty, n = Object.prototype.propertyIsEnumerable;
-var s = (r, o, e) => o in r ? g(r, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[o] = e, a = (r, o) => {
-  for (var e in o || (o = {}))
-    d.call(o, e) && s(r, e, o[e]);
-  if (t)
-    for (var e of t(o))
-      n.call(o, e) && s(r, e, o[e]);
-  return r;
-};
-var l = (r, o) => {
-  var e = {};
-  for (var m in r)
-    d.call(r, m) && o.indexOf(m) < 0 && (e[m] = r[m]);
-  if (r != null && t)
-    for (var m of t(r))
-      o.indexOf(m) < 0 && n.call(r, m) && (e[m] = r[m]);
-  return e;
-};
-import u from "react";
-import x from "styled-components";
-import i from "prop-types";
-import { Box as $ } from "../Box/Box.js";
-import { useGrid as v } from "./GridContext.js";
-const y = x.div`
+import o from "react";
+import n from "styled-components";
+import e from "prop-types";
+import { Box as a } from "../Box/Box.js";
+import { useGrid as l } from "./GridContext.js";
+const u = n.div`
   grid-column: span ${({ col: r }) => r};
   max-width: 100%;
 
@@ -34,27 +14,28 @@ const y = x.div`
   ${({ theme: r }) => r.mediaQueries.mobile} {
     grid-column: span ${({ xs: r }) => r};
   }
-`, c = (G) => {
-  var p = G, { col: r, xs: o, s: e } = p, m = l(p, ["col", "xs", "s"]);
-  const { gap: f, gridCols: b } = v();
-  return /* @__PURE__ */ u.createElement(y, {
-    gap: f,
-    gridCols: b,
+`, m = ({ col: r, xs: t, s: i, ...p }) => {
+  const { gap: s, gridCols: d } = l();
+  return /* @__PURE__ */ o.createElement(u, {
+    gap: s,
+    gridCols: d,
     col: r,
-    xs: o,
-    s: e
-  }, /* @__PURE__ */ u.createElement($, a({}, m)));
+    xs: t,
+    s: i
+  }, /* @__PURE__ */ o.createElement(a, {
+    ...p
+  }));
 };
-c.defaultProps = {
+m.defaultProps = {
   col: void 0,
   s: void 0,
   xs: void 0
 };
-c.propTypes = {
-  col: i.number,
-  s: i.number,
-  xs: i.number
+m.propTypes = {
+  col: e.number,
+  s: e.number,
+  xs: e.number
 };
 export {
-  c as GridItem
+  m as GridItem
 };

package/dist/Icon/Icon.cjs

@@ -1,6 +1,6 @@
-"use strict";var d=Object.defineProperty;var l=Object.getOwnPropertySymbols;var p=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable;var s=(e,t,o)=>t in e?d(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,a=(e,t)=>{for(var o in t||(t={}))p.call(t,o)&&s(e,o,t[o]);if(l)for(var o of l(t))f.call(t,o)&&s(e,o,t[o]);return e};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react"),y=require("prop-types"),_=require("styled-components"),g=require("../Box/Box.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=c(i),u=c(y),m=c(_),q=m.default(g.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),a=require("prop-types"),n=require("styled-components"),u=require("../Box/Box.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=r(s),l=r(a),d=r(n),p=d.default(u.Box)`
   path {
     fill: ${({color:e,theme:t})=>t.colors[e]};
   }
   ${({theme:e,colors:t})=>t(e)}
-`,r=n.default.forwardRef((e,t)=>n.default.createElement(q,a({ref:t},e)));r.displayName="Icon";r.defaultProps={color:"neutral600",colors:()=>{}};r.propTypes={color:u.default.string,colors:u.default.func};exports.Icon=r;
+`,o=c.default.forwardRef((e,t)=>c.default.createElement(p,{ref:t,...e}));o.displayName="Icon";o.defaultProps={color:"neutral600",colors:()=>{}};o.propTypes={color:l.default.string,colors:l.default.func};exports.Icon=o;

package/dist/Icon/Icon.js

@@ -1,36 +1,26 @@
-var f = Object.defineProperty;
-var p = Object.getOwnPropertySymbols;
-var m = Object.prototype.hasOwnProperty, n = Object.prototype.propertyIsEnumerable;
-var c = (r, o, t) => o in r ? f(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t, l = (r, o) => {
-  for (var t in o || (o = {}))
-    m.call(o, t) && c(r, t, o[t]);
-  if (p)
-    for (var t of p(o))
-      n.call(o, t) && c(r, t, o[t]);
-  return r;
-};
-import s from "react";
-import a from "prop-types";
-import i from "styled-components";
-import { Box as d } from "../Box/Box.js";
-const u = i(d)`
+import e from "react";
+import p from "prop-types";
+import c from "styled-components";
+import { Box as l } from "../Box/Box.js";
+const s = c(l)`
   path {
-    fill: ${({ color: r, theme: o }) => o.colors[r]};
+    fill: ${({ color: o, theme: r }) => r.colors[o]};
   }
-  ${({ theme: r, colors: o }) => o(r)}
-`, e = s.forwardRef((r, o) => /* @__PURE__ */ s.createElement(u, l({
-  ref: o
-}, r)));
-e.displayName = "Icon";
-e.defaultProps = {
+  ${({ theme: o, colors: r }) => r(o)}
+`, t = e.forwardRef((o, r) => /* @__PURE__ */ e.createElement(s, {
+  ref: r,
+  ...o
+}));
+t.displayName = "Icon";
+t.defaultProps = {
   color: "neutral600",
   colors: () => {
   }
 };
-e.propTypes = {
-  color: a.string,
-  colors: a.func
+t.propTypes = {
+  color: p.string,
+  colors: p.func
 };
 export {
-  e as Icon
+  t as Icon
 };

package/dist/IconButton/IconButton.cjs

@@ -1,4 +1,4 @@
-"use strict";var I=Object.defineProperty,R=Object.defineProperties;var x=Object.getOwnPropertyDescriptors;var i=Object.getOwnPropertySymbols;var m=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable;var B=(e,o,l)=>o in e?I(e,o,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[o]=l,u=(e,o)=>{for(var l in o||(o={}))m.call(o,l)&&B(e,l,o[l]);if(i)for(var l of i(o))E.call(o,l)&&B(e,l,o[l]);return e},c=(e,o)=>R(e,x(o));var T=(e,o)=>{var l={};for(var t in e)m.call(e,t)&&o.indexOf(t)<0&&(l[t]=e[t]);if(e!=null&&i)for(var t of i(e))o.indexOf(t)<0&&E.call(e,t)&&(l[t]=e[t]);return l};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),w=require("prop-types"),H=require("styled-components"),V=require("../Tooltip/Tooltip.cjs"),C=require("../BaseButton/BaseButton.cjs"),F=require("../Flex/Flex.cjs"),_=require("../VisuallyHidden/VisuallyHidden.cjs"),b=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=b(f),n=b(w),j=b(H),p=j.default(C.BaseButton)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),B=require("prop-types"),m=require("styled-components"),E=require("../Tooltip/Tooltip.cjs"),T=require("../BaseButton/BaseButton.cjs"),_=require("../Flex/Flex.cjs"),g=require("../VisuallyHidden/VisuallyHidden.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=c(d),a=c(B),v=c(m),u=v.default(T.BaseButton)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -36,7 +36,7 @@
     }
   }
   ${({noBorder:e})=>e?"border: none;":void 0}
-`,P=j.default(F.Flex)`
+`,j=v.default(_.Flex)`
   & span:first-child button {
     border-left: 1px solid ${({theme:e})=>e.colors.neutral200};
     border-radius: ${({theme:e})=>`${e.borderRadius} 0 0 ${e.borderRadius}`};
@@ -46,7 +46,7 @@
     border-radius: ${({theme:e})=>`0 ${e.borderRadius} ${e.borderRadius} 0`};
   }
 
-  & ${p} {
+  & ${u} {
     border-radius: 0;
     border-left: none;
 
@@ -83,4 +83,4 @@
       }
     }
   }
-`,d=r.default.forwardRef((D,v)=>{var h=D,{label:e,noBorder:o,children:l,icon:t,disabled:a,onClick:$,"aria-label":k}=h,g=T(h,["label","noBorder","children","icon","disabled","onClick","aria-label"]);const y=q=>{!a&&$&&$(q)};return e?r.default.createElement(V.Tooltip,{label:e},r.default.createElement(p,c(u({},g),{ref:v,noBorder:o,onClick:y,"aria-disabled":a}),r.default.createElement(_.VisuallyHidden,{as:"span"},e),f.cloneElement(t||l,{"aria-hidden":!0,focusable:!1}))):r.default.createElement(p,c(u({},g),{ref:v,noBorder:o,onClick:y,"aria-disabled":a}),r.default.createElement(_.VisuallyHidden,{as:"span"},k),f.cloneElement(t||l,{"aria-hidden":!0,focusable:!1}))});d.displayName="IconButton";d.defaultProps={"aria-label":void 0,children:void 0,disabled:!1,icon:void 0,label:void 0,noBorder:!1,onClick:void 0};const s=(e,o)=>(l,t)=>!l[t]&&e.every(a=>!l[a])?new Error(`One of the following props is required: ${t}, ${e.join(", ")}`):n.default.checkPropTypes({[t]:n.default[o]},l,"prop","IconButton");d.propTypes={"aria-label":s(["label"],"string"),children:s(["icon"],"node"),disabled:n.default.bool,icon:s(["children"],"node"),label:s(["aria-label"],"string"),noBorder:n.default.bool,onClick:n.default.func};exports.IconButton=d;exports.IconButtonGroup=P;
+`,s=t.default.forwardRef(({label:e,noBorder:n,children:l,icon:o,disabled:r,onClick:f,"aria-label":h,...p},b)=>{const $=y=>{!r&&f&&f(y)};return e?t.default.createElement(E.Tooltip,{label:e},t.default.createElement(u,{...p,ref:b,noBorder:n,onClick:$,"aria-disabled":r},t.default.createElement(g.VisuallyHidden,{as:"span"},e),d.cloneElement(o||l,{"aria-hidden":!0,focusable:!1}))):t.default.createElement(u,{...p,ref:b,noBorder:n,onClick:$,"aria-disabled":r},t.default.createElement(g.VisuallyHidden,{as:"span"},h),d.cloneElement(o||l,{"aria-hidden":!0,focusable:!1}))});s.displayName="IconButton";s.defaultProps={"aria-label":void 0,children:void 0,disabled:!1,icon:void 0,label:void 0,noBorder:!1,onClick:void 0};const i=(e,n)=>(l,o)=>!l[o]&&e.every(r=>!l[r])?new Error(`One of the following props is required: ${o}, ${e.join(", ")}`):a.default.checkPropTypes({[o]:a.default[n]},l,"prop","IconButton");s.propTypes={"aria-label":i(["label"],"string"),children:i(["icon"],"node"),disabled:a.default.bool,icon:i(["children"],"node"),label:i(["aria-label"],"string"),noBorder:a.default.bool,onClick:a.default.func};exports.IconButton=s;exports.IconButtonGroup=j;

package/dist/IconButton/IconButton.js

@@ -1,32 +1,11 @@
-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)`
+import l, { cloneElement as b } from "react";
+import t from "prop-types";
+import h 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 = h(y)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -64,7 +43,7 @@ const u = I(P)`
     }
   }
   ${({ noBorder: r }) => r ? "border: none;" : void 0}
-`, z = I(_)`
+`, T = h(k)`
   & span:first-child button {
     border-left: 1px solid ${({ theme: r }) => r.colors.neutral200};
     border-radius: ${({ theme: r }) => `${r.borderRadius} 0 0 ${r.borderRadius}`};
@@ -74,7 +53,7 @@ const u = I(P)`
     border-radius: ${({ theme: r }) => `0 ${r.borderRadius} ${r.borderRadius} 0`};
   }
 
-  & ${u} {
+  & ${s} {
     border-radius: 0;
     border-left: none;
 
@@ -111,39 +90,40 @@ const u = I(P)`
       }
     }
   }
-`, 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);
+`, d = l.forwardRef(
+  ({ label: r, noBorder: n, children: o, icon: e, disabled: a, onClick: c, "aria-label": m, ...u }, f) => {
+    const p = (g) => {
+      !a && c && c(g);
     };
-    return r ? /* @__PURE__ */ a.createElement(j, {
+    return r ? /* @__PURE__ */ l.createElement(v, {
       label: r
-    }, /* @__PURE__ */ a.createElement(u, c(d({}, b), {
-      ref: $,
-      noBorder: e,
-      onClick: m,
-      "aria-disabled": t
-    }), /* @__PURE__ */ a.createElement(E, {
+    }, /* @__PURE__ */ l.createElement(s, {
+      ...u,
+      ref: f,
+      noBorder: n,
+      onClick: p,
+      "aria-disabled": a
+    }, /* @__PURE__ */ l.createElement($, {
       as: "span"
-    }, r), B(l || o, {
+    }, r), b(e || o, {
       "aria-hidden": !0,
       focusable: !1
-    }))) : /* @__PURE__ */ a.createElement(u, c(d({}, b), {
-      ref: $,
-      noBorder: e,
-      onClick: m,
-      "aria-disabled": t
-    }), /* @__PURE__ */ a.createElement(E, {
+    }))) : /* @__PURE__ */ l.createElement(s, {
+      ...u,
+      ref: f,
+      noBorder: n,
+      onClick: p,
+      "aria-disabled": a
+    }, /* @__PURE__ */ l.createElement($, {
       as: "span"
-    }, R), B(l || o, {
+    }, m), b(e || o, {
       "aria-hidden": !0,
       focusable: !1
     }));
   }
 );
-f.displayName = "IconButton";
-f.defaultProps = {
+d.displayName = "IconButton";
+d.defaultProps = {
   "aria-label": void 0,
   children: void 0,
   disabled: !1,
@@ -152,17 +132,17 @@ f.defaultProps = {
   noBorder: !1,
   onClick: void 0
 };
-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
+const i = (r, n) => (o, e) => !o[e] && r.every((a) => !o[a]) ? new Error(`One of the following props is required: ${e}, ${r.join(", ")}`) : t.checkPropTypes({ [e]: t[n] }, o, "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
 };
 export {
-  f as IconButton,
-  z as IconButtonGroup
+  d as IconButton,
+  T as IconButtonGroup
 };

package/dist/KeyboardNavigable/KeyboardNavigable.cjs

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

package/dist/KeyboardNavigable/KeyboardNavigable.js

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

package/dist/Layout/HeaderLayout.cjs

@@ -1,8 +1,8 @@
-"use strict";var q=Object.defineProperty,H=Object.defineProperties;var S=Object.getOwnPropertyDescriptors;var c=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable;var E=(e,a,t)=>a in e?q(e,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[a]=t,i=(e,a)=>{for(var t in a||(a={}))b.call(a,t)&&E(e,t,a[t]);if(c)for(var t of c(a))v.call(a,t)&&E(e,t,a[t]);return e},B=(e,a)=>H(e,S(a));var R=(e,a)=>{var t={};for(var r in e)b.call(e,r)&&a.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&c)for(var r of c(e))a.indexOf(r)<0&&v.call(e,r)&&(t[r]=e[r]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react"),j=require("styled-components"),F=require("prop-types"),f=require("../Typography/Typography.cjs"),o=require("../Box/Box.cjs"),s=require("../Flex/Flex.cjs"),O=require("../helpers/useElementOnScreen.cjs"),_=require("../helpers/useResizeObserver.cjs"),g=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=g(p),k=g(j),l=g(F),C=()=>{const e=p.useRef(null),[a,t]=p.useState(null),[r,d]=O.useElementOnScreen({root:null,rootMargin:"0px",threshold:0});return _.useResizeObserver(r,()=>{r.current&&t(r.current.getBoundingClientRect())}),p.useEffect(()=>{e.current&&t(e.current.getBoundingClientRect())},[e]),{containerRef:r,isVisible:d,baseHeaderLayoutRef:e,headerSize:a}},y=e=>{const{containerRef:a,isVisible:t,baseHeaderLayoutRef:r,headerSize:d}=C();return n.default.createElement(n.default.Fragment,null,n.default.createElement("div",{style:{height:d==null?void 0:d.height},ref:a},t&&n.default.createElement(u,i({ref:r},e))),!t&&n.default.createElement(u,B(i({},e),{sticky:!0,width:d==null?void 0:d.width})))};y.displayName="HeaderLayout";const P=k.default(o.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),E=require("styled-components"),b=require("prop-types"),s=require("../Typography/Typography.cjs"),d=require("../Box/Box.cjs"),i=require("../Flex/Flex.cjs"),v=require("../helpers/useElementOnScreen.cjs"),B=require("../helpers/useResizeObserver.cjs"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=p(c),R=p(E),a=p(b),T=()=>{const e=c.useRef(null),[l,r]=c.useState(null),[n,o]=v.useElementOnScreen({root:null,rootMargin:"0px",threshold:0});return B.useResizeObserver(n,()=>{n.current&&r(n.current.getBoundingClientRect())}),c.useEffect(()=>{e.current&&r(e.current.getBoundingClientRect())},[e]),{containerRef:n,isVisible:o,baseHeaderLayoutRef:e,headerSize:l}},f=e=>{const{containerRef:l,isVisible:r,baseHeaderLayoutRef:n,headerSize:o}=T();return t.default.createElement(t.default.Fragment,null,t.default.createElement("div",{style:{height:o?.height},ref:l},r&&t.default.createElement(u,{ref:n,...e})),!r&&t.default.createElement(u,{...e,sticky:!0,width:o?.width}))};f.displayName="HeaderLayout";const L=R.default(d.Box)`
   position: fixed;
   top: 0;
   right: 0;
   width: ${e=>e.width}px;
   z-index: 4;
   box-shadow: ${({theme:e})=>e.shadows.tableShadow};
-`,u=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;
+`,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;