@strapi/design-system 1.7.7 → 1.7.8

package/dist/Table/TFooter.js

@@ -1,12 +1,10 @@
 import { jsxs as e, jsx as i } from "react/jsx-runtime";
-import "react";
-import t from "prop-types";
-import d from "styled-components";
+import t from "styled-components";
 import { Box as o } from "../Box/Box.js";
-import { Divider as m } from "../Divider/Divider.js";
-import { Flex as s } from "../Flex/Flex.js";
-import { Typography as a } from "../Typography/Typography.js";
-const c = d(o)`
+import { Divider as a } from "../Divider/Divider.js";
+import { Flex as m } from "../Flex/Flex.js";
+import { Typography as p } from "../Typography/Typography.js";
+const s = t(o)`
   height: ${24 / 16}rem;
   width: ${24 / 16}rem;
   border-radius: 50%;
@@ -22,22 +20,12 @@ const c = d(o)`
   svg path {
     fill: ${({ theme: r }) => r.colors.primary600};
   }
-`, l = d(o)`
+`, l = t(o)`
   border-radius: 0 0 ${({ theme: r }) => r.borderRadius} ${({ theme: r }) => r.borderRadius};
   display: block;
   width: 100%;
   border: none;
-`, h = ({ children: r, icon: n, ...p }) => /* @__PURE__ */ e("div", { children: [
-  /* @__PURE__ */ i(m, {}),
-  /* @__PURE__ */ i(l, { as: "button", background: "primary100", padding: 5, ...p, children: /* @__PURE__ */ e(s, { children: [
-    /* @__PURE__ */ i(c, { "aria-hidden": !0, background: "primary200", children: n }),
-    /* @__PURE__ */ i(o, { paddingLeft: 3, children: /* @__PURE__ */ i(a, { variant: "pi", fontWeight: "bold", textColor: "primary600", children: r }) })
-  ] }) })
-] });
-h.propTypes = {
-  children: t.string.isRequired,
-  icon: t.node.isRequired
-};
+`, y = ({ children: r, icon: d, ...n }) => e("div", { children: [i(a, {}), i(l, { as: "button", background: "primary100", padding: 5, ...n, children: e(m, { children: [i(s, { "aria-hidden": !0, background: "primary200", children: d }), i(o, { paddingLeft: 3, children: i(p, { variant: "pi", fontWeight: "bold", textColor: "primary600", children: r }) })] }) })] });
 export {
-  h as TFooter
+  y as TFooter
 };

package/dist/Table/Table.cjs

@@ -1,19 +1,19 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),l=require("react"),w=require("prop-types"),x=require("styled-components"),T=require("../RawTable/RawTable.cjs"),n=require("../Box/Box.cjs"),c=e=>e&&e.__esModule?e:{default:e},i=c(w),a=c(x),R=a.default(n.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),f=require("styled-components"),h=require("../RawTable/RawTable.cjs"),s=require("../Box/Box.cjs"),b=t=>t&&t.__esModule?t:{default:t},a=b(f),g=a.default(s.Box)`
   overflow: hidden;
-  border: 1px solid ${({theme:e})=>e.colors.neutral150};
-`,S=a.default(T.RawTable)`
+  border: 1px solid ${({theme:t})=>t.colors.neutral150};
+`,w=a.default(h.RawTable)`
   width: 100%;
   white-space: nowrap;
-`,y=a.default(n.Box)`
+`,p=a.default(s.Box)`
   &:before {
     // TODO: make sure to add a token for this weird stuff
     background: linear-gradient(90deg, #c0c0cf 0%, rgba(0, 0, 0, 0) 100%);
     opacity: 0.2;
     position: absolute;
     height: 100%;
-    content: ${({overflowing:e})=>e==="both"||e==="left"?"''":void 0};
-    box-shadow: ${({theme:e})=>e.shadows.tableShadow};
-    width: ${({theme:e})=>e.spaces[2]};
+    content: ${({overflowing:t})=>t==="both"||t==="left"?"''":void 0};
+    box-shadow: ${({theme:t})=>t.shadows.tableShadow};
+    width: ${({theme:t})=>t.spaces[2]};
     left: 0;
   }
 
@@ -23,12 +23,12 @@
     opacity: 0.2;
     position: absolute;
     height: 100%;
-    content: ${({overflowing:e})=>e==="both"||e==="right"?"''":void 0};
-    box-shadow: ${({theme:e})=>e.shadows.tableShadow};
-    width: ${({theme:e})=>e.spaces[2]};
+    content: ${({overflowing:t})=>t==="both"||t==="right"?"''":void 0};
+    box-shadow: ${({theme:t})=>t.shadows.tableShadow};
+    width: ${({theme:t})=>t.spaces[2]};
     right: 0;
     top: 0;
   }
-`,q=a.default(n.Box)`
+`,x=a.default(s.Box)`
   overflow-x: auto;
-`,d=({colCount:e,rowCount:u,footer:f,...h})=>{const s=l.useRef(null),[b,o]=l.useState(),g=t=>{const p=t.target.scrollWidth-t.target.clientWidth;if(t.target.scrollLeft===0){o("right");return}if(t.target.scrollLeft===p){o("left");return}t.target.scrollLeft>0&&o("both")};return l.useEffect(()=>{s.current.scrollWidth>s.current.clientWidth&&o("right")},[]),r.jsxs(R,{shadow:"tableShadow",hasRadius:!0,background:"neutral0",children:[r.jsx(y,{overflowing:b,position:"relative",children:r.jsx(q,{ref:s,onScroll:g,paddingLeft:6,paddingRight:6,children:r.jsx(S,{colCount:e,rowCount:u,...h})})}),f]})};d.defaultProps={footer:void 0};d.propTypes={colCount:i.default.number.isRequired,footer:i.default.node,rowCount:i.default.number.isRequired};exports.Table=d;
+`,S=({footer:t,...i})=>{const l=n.useRef(null),[d,o]=n.useState(),c=e=>{const u=e.target.scrollWidth-e.target.clientWidth;if(e.target.scrollLeft===0){o("right");return}if(e.target.scrollLeft===u){o("left");return}e.target.scrollLeft>0&&o("both")};return n.useEffect(()=>{l.current.scrollWidth>l.current.clientWidth&&o("right")},[]),r.jsxs(g,{shadow:"tableShadow",hasRadius:!0,background:"neutral0",children:[r.jsx(p,{overflowing:d,position:"relative",children:r.jsx(x,{ref:l,onScroll:c,paddingLeft:6,paddingRight:6,children:r.jsx(w,{...i})})}),t]})};exports.Table=S;

package/dist/Table/Table.js

@@ -1,16 +1,15 @@
-import { jsxs as b, jsx as i } from "react/jsx-runtime";
-import { useRef as g, useState as w, useEffect as m } from "react";
-import s from "prop-types";
+import { jsxs as f, jsx as i } from "react/jsx-runtime";
+import { useRef as h, useState as u, useEffect as g } from "react";
 import r from "styled-components";
-import { RawTable as x } from "../RawTable/RawTable.js";
+import { RawTable as b } from "../RawTable/RawTable.js";
 import { Box as n } from "../Box/Box.js";
-const T = r(n)`
+const p = r(n)`
   overflow: hidden;
   border: 1px solid ${({ theme: t }) => t.colors.neutral150};
-`, S = r(x)`
+`, w = r(b)`
   width: 100%;
   white-space: nowrap;
-`, k = r(n)`
+`, m = r(n)`
   &:before {
     // TODO: make sure to add a token for this weird stuff
     background: linear-gradient(90deg, #c0c0cf 0%, rgba(0, 0, 0, 0) 100%);
@@ -35,36 +34,25 @@ const T = r(n)`
     right: 0;
     top: 0;
   }
-`, R = r(n)`
+`, x = r(n)`
   overflow-x: auto;
-`, l = ({ colCount: t, rowCount: d, footer: c, ...f }) => {
-  const a = g(null), [h, e] = w(), u = (o) => {
-    const p = o.target.scrollWidth - o.target.clientWidth;
-    if (o.target.scrollLeft === 0) {
-      e("right");
+`, O = ({ footer: t, ...l }) => {
+  const a = h(null), [s, o] = u(), d = (e) => {
+    const c = e.target.scrollWidth - e.target.clientWidth;
+    if (e.target.scrollLeft === 0) {
+      o("right");
       return;
     }
-    if (o.target.scrollLeft === p) {
-      e("left");
+    if (e.target.scrollLeft === c) {
+      o("left");
       return;
     }
-    o.target.scrollLeft > 0 && e("both");
+    e.target.scrollLeft > 0 && o("both");
   };
-  return m(() => {
-    a.current.scrollWidth > a.current.clientWidth && e("right");
-  }, []), /* @__PURE__ */ b(T, { shadow: "tableShadow", hasRadius: !0, background: "neutral0", children: [
-    /* @__PURE__ */ i(k, { overflowing: h, position: "relative", children: /* @__PURE__ */ i(R, { ref: a, onScroll: u, paddingLeft: 6, paddingRight: 6, children: /* @__PURE__ */ i(S, { colCount: t, rowCount: d, ...f }) }) }),
-    c
-  ] });
-};
-l.defaultProps = {
-  footer: void 0
-};
-l.propTypes = {
-  colCount: s.number.isRequired,
-  footer: s.node,
-  rowCount: s.number.isRequired
+  return g(() => {
+    a.current.scrollWidth > a.current.clientWidth && o("right");
+  }, []), f(p, { shadow: "tableShadow", hasRadius: !0, background: "neutral0", children: [i(m, { overflowing: s, position: "relative", children: i(x, { ref: a, onScroll: d, paddingLeft: 6, paddingRight: 6, children: i(w, { ...l }) }) }), t] });
 };
 export {
-  l as Table
+  O as Table
 };

package/dist/Table/Tbody.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const o=require("styled-components"),r=require("../RawTable/RawTbody.cjs"),s=e=>e&&e.__esModule?e:{default:e},d=s(o),n=d.default(r.RawTbody)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("styled-components"),d=require("../RawTable/RawTbody.cjs"),n=t=>t&&t.__esModule?t:{default:t},s=n(r),u=s.default(d.RawTbody)`
   & tr:last-of-type {
     border-bottom: none;
   }
-`,u=e=>t.jsx(n,{...e});exports.Tbody=u;
+`,l=({children:t,...e})=>o.jsx(u,{...e,children:t});exports.Tbody=l;

package/dist/Table/Tbody.js

@@ -1,12 +1,11 @@
-import { jsx as r } from "react/jsx-runtime";
-import "react";
-import t from "styled-components";
+import { jsx as t } from "react/jsx-runtime";
+import e from "styled-components";
 import { RawTbody as m } from "../RawTable/RawTbody.js";
-const p = t(m)`
+const p = e(m)`
   & tr:last-of-type {
     border-bottom: none;
   }
-`, s = (o) => /* @__PURE__ */ r(p, { ...o });
+`, s = ({ children: o, ...r }) => t(p, { ...r, children: o });
 export {
   s as Tbody
 };

package/dist/Table/Thead.cjs

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const r=require("styled-components"),o=require("../RawTable/RawThead.cjs"),s=e=>e&&e.__esModule?e:{default:e},a=s(r),d=a.default(o.RawThead)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("styled-components"),d=require("../RawTable/RawThead.cjs"),s=e=>e&&e.__esModule?e:{default:e},a=s(o),l=a.default(d.RawThead)`
   border-bottom: 1px solid ${({theme:e})=>e.colors.neutral150};
-`,u=e=>t.jsx(d,{...e});exports.Thead=u;
+`,n=({children:e,...t})=>r.jsx(l,{...t,children:e});exports.Thead=n;

package/dist/Table/Thead.js

@@ -1,10 +1,9 @@
-import { jsx as r } from "react/jsx-runtime";
-import "react";
-import t from "styled-components";
-import { RawThead as e } from "../RawTable/RawThead.js";
-const m = t(e)`
-  border-bottom: 1px solid ${({ theme: o }) => o.colors.neutral150};
-`, i = (o) => /* @__PURE__ */ r(m, { ...o });
+import { jsx as t } from "react/jsx-runtime";
+import e from "styled-components";
+import { RawThead as d } from "../RawTable/RawThead.js";
+const m = e(d)`
+  border-bottom: 1px solid ${({ theme: r }) => r.colors.neutral150};
+`, i = ({ children: r, ...o }) => t(m, { ...o, children: r });
 export {
   i as Thead
 };

package/dist/Table/Tr.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("react");const r=require("styled-components"),o=require("../RawTable/RawTr.cjs"),s=t=>t&&t.__esModule?t:{default:t},d=s(r),i=d.default(o.RawTr)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("styled-components"),o=require("../RawTable/RawTr.cjs"),s=t=>t&&t.__esModule?t:{default:t},d=s(r),i=d.default(o.RawTr)`
   border-bottom: 1px solid ${({theme:t})=>t.colors.neutral150};
 
   & td,

package/dist/Table/Tr.js

@@ -1,8 +1,7 @@
 import { jsx as r } from "react/jsx-runtime";
-import "react";
 import o from "styled-components";
 import { RawTr as p } from "../RawTable/RawTr.js";
-const i = o(p)`
+const d = o(p)`
   border-bottom: 1px solid ${({ theme: t }) => t.colors.neutral150};
 
   & td,
@@ -21,7 +20,7 @@ const i = o(p)`
     padding-bottom: 0;
     height: ${56 / 16}rem;
   }
-`, n = (t) => /* @__PURE__ */ r(i, { ...t });
+`, a = (t) => r(d, { ...t });
 export {
-  n as Tr
+  a as Tr
 };

package/dist/v2/MainNav/MainNav.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"),s=require("styled-components"),i=require("./MainNavContext.cjs"),l=require("../../Flex/Flex.cjs"),r=e=>e&&e.__esModule?e:{default:e},u=r(a),d=r(s),c=d.default(l.Flex)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("styled-components"),o=require("./MainNavContext.cjs"),a=require("../../Flex/Flex.cjs"),i=e=>e&&e.__esModule?e:{default:e},s=i(r),l=s.default(a.Flex)`
   width: ${({condensed:e})=>e?"max-content":`${224/16}rem`};
   border-right: 1px solid ${({theme:e})=>e.colors.neutral150};
-`,t=({condensed:e,...n})=>o.jsx(i.MainNavContext.Provider,{value:e,children:o.jsx(c,{alignItems:"normal",as:"nav",background:"neutral0",condensed:e,direction:"column",height:"100vh",position:"sticky",top:0,zIndex:2,...n})});t.defaultProps={condensed:!1};t.propTypes={condensed:u.default.bool};exports.MainNav=t;
+`,u=({condensed:e=!1,...n})=>t.jsx(o.MainNavContext.Provider,{value:e,children:t.jsx(l,{alignItems:"normal",as:"nav",background:"neutral0",condensed:e,direction:"column",height:"100vh",position:"sticky",top:0,zIndex:2,...n})});exports.MainNav=u;

package/dist/v2/MainNav/MainNav.js

@@ -1,33 +1,11 @@
-import { jsx as r } from "react/jsx-runtime";
-import "react";
-import n from "prop-types";
-import i from "styled-components";
-import { MainNavContext as a } from "./MainNavContext.js";
-import { Flex as p } from "../../Flex/Flex.js";
-const m = i(p)`
-  width: ${({ condensed: o }) => o ? "max-content" : `${224 / 16}rem`};
-  border-right: 1px solid ${({ theme: o }) => o.colors.neutral150};
-`, t = ({ condensed: o, ...e }) => /* @__PURE__ */ r(a.Provider, { value: o, children: /* @__PURE__ */ r(
-  m,
-  {
-    alignItems: "normal",
-    as: "nav",
-    background: "neutral0",
-    condensed: o,
-    direction: "column",
-    height: "100vh",
-    position: "sticky",
-    top: 0,
-    zIndex: 2,
-    ...e
-  }
-) });
-t.defaultProps = {
-  condensed: !1
-};
-t.propTypes = {
-  condensed: n.bool
-};
+import { jsx as o } from "react/jsx-runtime";
+import n from "styled-components";
+import { MainNavContext as e } from "./MainNavContext.js";
+import { Flex as i } from "../../Flex/Flex.js";
+const a = n(i)`
+  width: ${({ condensed: r }) => r ? "max-content" : `${224 / 16}rem`};
+  border-right: 1px solid ${({ theme: r }) => r.colors.neutral150};
+`, c = ({ condensed: r = !1, ...t }) => o(e.Provider, { value: r, children: o(a, { alignItems: "normal", as: "nav", background: "neutral0", condensed: r, direction: "column", height: "100vh", position: "sticky", top: 0, zIndex: 2, ...t }) });
 export {
-  t as MainNav
+  c as MainNav
 };

package/dist/v2/MainNav/MainNavContext.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext(),n=()=>e.useContext(t);exports.MainNavContext=t;exports.useMainNav=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext(!1),a=()=>e.useContext(t);exports.MainNavContext=t;exports.useMainNav=a;

package/dist/v2/MainNav/MainNavContext.js

@@ -1,5 +1,5 @@
 import { createContext as t, useContext as e } from "react";
-const o = t(), a = () => e(o);
+const o = t(!1), a = () => e(o);
 export {
   o as MainNavContext,
   a as useMainNav

package/dist/v2/MainNav/NavBrand.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),g=require("react"),f=require("prop-types"),y=require("styled-components"),j=require("./MainNavContext.cjs"),h=require("../../BaseLink/BaseLink.cjs"),t=require("../../Box/Box.cjs"),u=require("../../VisuallyHidden/VisuallyHidden.cjs"),q=require("../../Flex/Flex.cjs"),c=require("../../Typography/Typography.cjs"),i=e=>e&&e.__esModule?e:{default:e},B=i(g),r=i(f),x=i(y),p=x.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),p=require("react"),g=require("styled-components"),f=require("./MainNavContext.cjs"),c=require("../../BaseLink/BaseLink.cjs"),d=require("../../Box/Box.cjs"),s=require("../../VisuallyHidden/VisuallyHidden.cjs"),j=require("../../Flex/Flex.cjs"),o=require("../../Typography/Typography.cjs"),u=e=>e&&e.__esModule?e:{default:e},y=u(p),h=u(g),l=h.default.div`
   border-radius: ${({theme:e})=>e.borderRadius};
 
   svg,
@@ -6,7 +6,7 @@
     height: ${({condensed:e})=>e?`${40/16}rem`:`${32/16}rem`};
     width: ${({condensed:e})=>e?`${40/16}rem`:`${32/16}rem`};
   }
-`,m=x.default(h.BaseLink)`
+`,B=h.default(c.BaseLink)`
   text-decoration: unset;
   color: inherit;
-`,d=B.default.forwardRef(({workplace:e,title:s,icon:a,...o},l)=>j.useMainNav()?n.jsx(h.BaseLink,{ref:l,...o,children:n.jsx(t.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4,children:n.jsxs(p,{condensed:!0,children:[a,n.jsxs(u.VisuallyHidden,{children:[n.jsx("span",{children:s}),n.jsx("span",{children:e})]})]})})}):n.jsx(m,{ref:l,...o,children:n.jsx(t.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4,children:n.jsxs(q.Flex,{children:[n.jsx(p,{"aria-hidden":!0,tabIndex:-1,children:a}),n.jsxs(t.Box,{paddingLeft:2,children:[n.jsxs(c.Typography,{fontWeight:"bold",textColor:"neutral800",as:"span",children:[s,n.jsx(u.VisuallyHidden,{as:"span",children:e})]}),n.jsx(c.Typography,{variant:"pi",as:"p",textColor:"neutral600","aria-hidden":!0,children:e})]})]})})}));d.displayName="NavBrand";d.defaultProps={to:"/"};d.propTypes={icon:r.default.node.isRequired,title:r.default.string.isRequired,to:r.default.string,workplace:r.default.string.isRequired};exports.NavBrand=d;
+`,m=y.default.forwardRef(({workplace:e,title:t,icon:i,...r},a)=>{const x=f.useMainNav();return r.to=r?.to??"/",x?n.jsx(c.BaseLink,{ref:a,...r,children:n.jsx(d.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4,children:n.jsxs(l,{condensed:!0,children:[i,n.jsxs(s.VisuallyHidden,{children:[n.jsx("span",{children:t}),n.jsx("span",{children:e})]})]})})}):n.jsx(B,{ref:a,...r,children:n.jsx(d.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4,children:n.jsxs(j.Flex,{children:[n.jsx(l,{"aria-hidden":!0,tabIndex:-1,children:i}),n.jsxs(d.Box,{paddingLeft:2,children:[n.jsxs(o.Typography,{fontWeight:"bold",textColor:"neutral800",as:"span",children:[t,n.jsx(s.VisuallyHidden,{as:"span",children:e})]}),n.jsx(o.Typography,{variant:"pi",as:"p",textColor:"neutral600","aria-hidden":!0,children:e})]})]})})})});exports.NavBrand=m;

package/dist/v2/MainNav/NavBrand.js

@@ -1,14 +1,13 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { jsx as d, jsxs as e } from "react/jsx-runtime";
 import f from "react";
-import d from "prop-types";
-import h from "styled-components";
-import { useMainNav as u } from "./MainNavContext.js";
-import { BaseLink as g } from "../../BaseLink/BaseLink.js";
+import l from "styled-components";
+import { useMainNav as g } from "./MainNavContext.js";
+import { BaseLink as c } from "../../BaseLink/BaseLink.js";
 import { Box as n } from "../../Box/Box.js";
 import { VisuallyHidden as m } from "../../VisuallyHidden/VisuallyHidden.js";
-import { Flex as x } from "../../Flex/Flex.js";
-import { Typography as l } from "../../Typography/Typography.js";
-const c = h.div`
+import { Flex as u } from "../../Flex/Flex.js";
+import { Typography as p } from "../../Typography/Typography.js";
+const h = l.div`
   border-radius: ${({ theme: r }) => r.borderRadius};
 
   svg,
@@ -16,35 +15,13 @@ const c = h.div`
     height: ${({ condensed: r }) => r ? `${40 / 16}rem` : `${32 / 16}rem`};
     width: ${({ condensed: r }) => r ? `${40 / 16}rem` : `${32 / 16}rem`};
   }
-`, R = h(g)`
+`, x = l(c)`
   text-decoration: unset;
   color: inherit;
-`, t = f.forwardRef(({ workplace: r, title: o, icon: a, ...p }, s) => u() ? /* @__PURE__ */ e(g, { ref: s, ...p, children: /* @__PURE__ */ e(n, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: /* @__PURE__ */ i(c, { condensed: !0, children: [
-  a,
-  /* @__PURE__ */ i(m, { children: [
-    /* @__PURE__ */ e("span", { children: o }),
-    /* @__PURE__ */ e("span", { children: r })
-  ] })
-] }) }) }) : /* @__PURE__ */ e(R, { ref: s, ...p, children: /* @__PURE__ */ e(n, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: /* @__PURE__ */ i(x, { children: [
-  /* @__PURE__ */ e(c, { "aria-hidden": !0, tabIndex: -1, children: a }),
-  /* @__PURE__ */ i(n, { paddingLeft: 2, children: [
-    /* @__PURE__ */ i(l, { fontWeight: "bold", textColor: "neutral800", as: "span", children: [
-      o,
-      /* @__PURE__ */ e(m, { as: "span", children: r })
-    ] }),
-    /* @__PURE__ */ e(l, { variant: "pi", as: "p", textColor: "neutral600", "aria-hidden": !0, children: r })
-  ] })
-] }) }) }));
-t.displayName = "NavBrand";
-t.defaultProps = {
-  to: "/"
-};
-t.propTypes = {
-  icon: d.node.isRequired,
-  title: d.string.isRequired,
-  to: d.string,
-  workplace: d.string.isRequired
-};
+`, W = f.forwardRef(({ workplace: r, title: t, icon: o, ...i }, a) => {
+  const s = g();
+  return i.to = i?.to ?? "/", s ? d(c, { ref: a, ...i, children: d(n, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: e(h, { condensed: !0, children: [o, e(m, { children: [d("span", { children: t }), d("span", { children: r })] })] }) }) }) : d(x, { ref: a, ...i, children: d(n, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: e(u, { children: [d(h, { "aria-hidden": !0, tabIndex: -1, children: o }), e(n, { paddingLeft: 2, children: [e(p, { fontWeight: "bold", textColor: "neutral800", as: "span", children: [t, d(m, { as: "span", children: r })] }), d(p, { variant: "pi", as: "p", textColor: "neutral600", "aria-hidden": !0, children: r })] })] }) }) });
+});
 export {
-  t as NavBrand
+  W as NavBrand
 };

package/dist/v2/MainNav/NavCondense.cjs

@@ -1,10 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const s=require("@strapi/icons"),d=require("prop-types"),a=require("styled-components"),u=require("./MainNavContext.cjs"),l=require("../../Icon/Icon.cjs"),c=require("../../VisuallyHidden/VisuallyHidden.cjs"),o=e=>e&&e.__esModule?e:{default:e},h=o(d),p=o(a),g=p.default.button`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("@strapi/icons"),s=require("styled-components"),i=require("./MainNavContext.cjs"),d=require("../../Flex/Flex.cjs"),a=require("../../Icon/Icon.cjs"),u=require("../../VisuallyHidden/VisuallyHidden.cjs"),l=e=>e&&e.__esModule?e:{default:e},c=l(s),h=c.default(d.Flex).attrs(e=>({justifyContent:"center",...e}))`
   background: ${({theme:e})=>e.colors.neutral0};
   border: 1px solid ${({theme:e})=>e.colors.neutral150};
   border-radius: ${({theme:e})=>e.borderRadius};
-  display: flex;
-  align-items: center;
-  justify-content: center;
   position: absolute;
   bottom: ${(9+4)/16}rem; // 9 is the height of the svg and 4 is the padding below
   right: ${({theme:e,condensed:t})=>t?0:e.spaces[5]};
@@ -17,4 +14,4 @@
     width: ${6/16}rem;
     height: ${9/16}rem;
   }
-`,i=({children:e,...t})=>{const n=u.useMainNav();return r.jsxs(g,{as:"button",condensed:n,...t,children:[r.jsx(l.Icon,{as:n?s.ChevronRight:s.ChevronLeft,"aria-hidden":!0,color:"neutral600"}),r.jsx(c.VisuallyHidden,{children:e})]})};i.propTypes={children:h.default.string.isRequired};exports.NavCondense=i;
+`,g=({children:e,...t})=>{const r=i.useMainNav();return n.jsxs(h,{as:"button",condensed:r,...t,children:[n.jsx(a.Icon,{as:r?o.ChevronRight:o.ChevronLeft,"aria-hidden":!0,color:"neutral600"}),n.jsx(u.VisuallyHidden,{children:e})]})};exports.NavCondense=g;

package/dist/v2/MainNav/NavCondense.js

@@ -1,18 +1,17 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import "react";
-import { ChevronRight as n, ChevronLeft as s } from "@strapi/icons";
-import d from "prop-types";
-import a from "styled-components";
-import { useMainNav as m } from "./MainNavContext.js";
-import { Icon as p } from "../../Icon/Icon.js";
-import { VisuallyHidden as h } from "../../VisuallyHidden/VisuallyHidden.js";
-const l = a.button`
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { ChevronRight as i, ChevronLeft as s } from "@strapi/icons";
+import d from "styled-components";
+import { useMainNav as a } from "./MainNavContext.js";
+import { Flex as m } from "../../Flex/Flex.js";
+import { Icon as h } from "../../Icon/Icon.js";
+import { VisuallyHidden as l } from "../../VisuallyHidden/VisuallyHidden.js";
+const c = d(m).attrs((r) => ({
+  justifyContent: "center",
+  ...r
+}))`
   background: ${({ theme: r }) => r.colors.neutral0};
   border: 1px solid ${({ theme: r }) => r.colors.neutral150};
   border-radius: ${({ theme: r }) => r.borderRadius};
-  display: flex;
-  align-items: center;
-  justify-content: center;
   position: absolute;
   bottom: ${(9 + 4) / 16}rem; // 9 is the height of the svg and 4 is the padding below
   right: ${({ theme: r, condensed: e }) => e ? 0 : r.spaces[5]};
@@ -25,16 +24,10 @@ const l = a.button`
     width: ${6 / 16}rem;
     height: ${9 / 16}rem;
   }
-`, c = ({ children: r, ...e }) => {
-  const o = m();
-  return /* @__PURE__ */ i(l, { as: "button", condensed: o, ...e, children: [
-    /* @__PURE__ */ t(p, { as: o ? n : s, "aria-hidden": !0, color: "neutral600" }),
-    /* @__PURE__ */ t(h, { children: r })
-  ] });
-};
-c.propTypes = {
-  children: d.string.isRequired
+`, x = ({ children: r, ...e }) => {
+  const o = a();
+  return n(c, { as: "button", condensed: o, ...e, children: [t(h, { as: o ? i : s, "aria-hidden": !0, color: "neutral600" }), t(l, { children: r })] });
 };
 export {
-  c as NavCondense
+  x as NavCondense
 };

package/dist/v2/MainNav/NavFooter.cjs

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

package/dist/v2/MainNav/NavFooter.js

@@ -1,12 +1,6 @@
-import { jsx as e } from "react/jsx-runtime";
-import "react";
-import p from "prop-types";
-import { Box as i } from "../../Box/Box.js";
-const o = ({ children: r }) => /* @__PURE__ */ e(i, { position: "relative", children: r });
-o.displayName = "NavFooter";
-o.propTypes = {
-  children: p.node.isRequired
-};
+import { jsx as r } from "react/jsx-runtime";
+import { Box as t } from "../../Box/Box.js";
+const m = ({ children: o }) => r(t, { position: "relative", children: o });
 export {
-  o as NavFooter
+  m as NavFooter
 };

package/dist/v2/MainNav/NavLink.cjs

@@ -1,16 +1,16 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),$=require("react"),x=require("prop-types"),v=require("styled-components"),b=require("./MainNavContext.cjs"),j=require("../../Box/Box.cjs"),m=require("../../BaseLink/BaseLink.cjs"),o=require("../../Typography/Typography.cjs"),y=require("../../Flex/Flex.cjs"),q=require("../../Badge/Badge.cjs"),T=require("../../Tooltip/Tooltip.cjs"),l=e=>e&&e.__esModule?e:{default:e},k=l($),a=l(x),n=l(v),p=n.default(j.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),$=require("react"),y=require("styled-components"),f=require("./MainNavContext.cjs"),x=require("../../Box/Box.cjs"),j=require("../../BaseLink/BaseLink.cjs"),s=require("../../Typography/Typography.cjs"),h=require("../../Flex/Flex.cjs"),v=require("../../Badge/Badge.cjs"),m=require("../../Tooltip/Tooltip.cjs"),g=e=>e&&e.__esModule?e:{default:e},b=g($),a=g(y),c=a.default(x.Box)`
   svg {
     width: 1rem;
     height: 1rem;
   }
-`,g=n.default(m.BaseLink)`
+`,d=a.default(j.BaseLink)`
   position: relative;
   text-decoration: none;
   display: block;
   border-radius: ${({theme:e})=>e.borderRadius};
   background: ${({theme:e})=>e.colors.neutral0};
 
-  ${o.Typography} {
+  ${s.Typography} {
     color: ${({theme:e})=>e.colors.neutral600};
   }
 
@@ -21,7 +21,7 @@
   &:hover {
     background: ${({theme:e})=>e.colors.neutral100};
 
-    ${o.Typography} {
+    ${s.Typography} {
       color: ${({theme:e})=>e.colors.neutral700};
     }
 
@@ -37,22 +37,22 @@
       fill: ${({theme:e})=>e.colors.primary600};
     }
 
-    ${o.Typography} {
+    ${s.Typography} {
       color: ${({theme:e})=>e.colors.primary600};
       font-weight: 500;
     }
   }
-`,h=n.default(y.Flex)`
+`,u=a.default(h.Flex)`
   padding: ${({theme:e})=>`${e.spaces[2]} ${e.spaces[3]}`};
-`,f=n.default(q.Badge)`
-  ${({theme:e,condensed:s})=>s&&`
+`,p=a.default(v.Badge)`
+  ${({theme:e,condensed:o})=>o&&`
 	  position: absolute;
     // Values based on visual aspect 
     top: -${e.spaces[3]};
     right:  -${e.spaces[1]};
   `}
 
-  ${o.Typography} {
+  ${s.Typography} {
     //find a solution to remove !important
     color: ${({theme:e})=>e.colors.neutral0} !important;
     line-height: 0;
@@ -66,4 +66,4 @@
   padding: ${({theme:e})=>`0 ${e.spaces[2]}`};
   border-radius: ${({theme:e})=>e.spaces[10]};
   background: ${({theme:e})=>e.colors.primary600};
-`,i=k.default.forwardRef(({children:e,icon:s,badgeContent:t,badgeAriaLabel:c,...d},u)=>b.useMainNav()?r.jsx(g,{ref:u,...d,children:r.jsx(T.Tooltip,{position:"right",label:e,children:r.jsxs(h,{as:"span",justifyContent:"center",children:[r.jsx(p,{"aria-hidden":!0,paddingRight:0,as:"span",children:s}),t&&r.jsx(f,{condensed:!0,"aria-label":c,children:t})]})})}):r.jsx(g,{ref:u,...d,children:r.jsxs(h,{as:"span",justifyContent:"space-between",children:[r.jsxs(y.Flex,{children:[r.jsx(p,{"aria-hidden":!0,paddingRight:3,as:"span",children:s}),r.jsx(o.Typography,{children:e})]}),t&&r.jsx(f,{justifyContent:"center","aria-label":c,children:t})]})}));i.displayName="NavLink";i.defaultProps={badgeContent:void 0,badgeAriaLabel:void 0};i.propTypes={badgeAriaLabel:a.default.string,badgeContent:a.default.oneOfType([a.default.string,a.default.number]),children:a.default.string.isRequired,icon:a.default.node.isRequired};exports.NavLink=i;
+`,k=b.default.forwardRef(({children:e,icon:o,badgeContent:t,badgeAriaLabel:n,...i},l)=>f.useMainNav()?r.jsx(d,{ref:l,...i,children:r.jsx(m.Tooltip,{position:"right",label:e,children:r.jsxs(u,{as:"span",justifyContent:"center",children:[r.jsx(c,{"aria-hidden":!0,paddingRight:0,as:"span",children:o}),t&&r.jsx(p,{condensed:!0,"aria-label":n,children:t})]})})}):r.jsx(d,{ref:l,...i,children:r.jsxs(u,{as:"span",justifyContent:"space-between",children:[r.jsxs(h.Flex,{children:[r.jsx(c,{"aria-hidden":!0,paddingRight:3,as:"span",children:o}),r.jsx(s.Typography,{children:e})]}),t&&r.jsx(p,{justifyContent:"center","aria-label":n,children:t})]})}));exports.NavLink=k;