@strapi/design-system 0.0.0-3cf3ff39

package/dist/themes/utils.js

@@ -0,0 +1,47 @@
+import { css as i } from "styled-components";
+const s = (t) => ({ theme: o, size: r }) => o.sizes[t][r], p = (t = "&") => ({ theme: o, hasError: r = !1 }) => i`
+      outline: none;
+      box-shadow: 0;
+      transition-property: border-color, box-shadow, fill;
+      transition-duration: 0.2s;
+
+      ${t}:focus-within {
+        border: 1px solid ${r ? o.colors.danger600 : o.colors.primary600};
+        box-shadow: ${r ? o.colors.danger600 : o.colors.primary600} 0px 0px 0px 2px;
+      }
+    `, e = ({ theme: t }) => i`
+  position: relative;
+  outline: none;
+
+  &:after {
+    transition-property: all;
+    transition-duration: 0.2s;
+    border-radius: 8px;
+    content: '';
+    position: absolute;
+    top: -4px;
+    bottom: -4px;
+    left: -4px;
+    right: -4px;
+    border: 2px solid transparent;
+  }
+
+  &:focus-visible {
+    outline: none;
+    &:after {
+      border-radius: 8px;
+      content: '';
+      position: absolute;
+      top: -5px;
+      bottom: -5px;
+      left: -5px;
+      right: -5px;
+      border: 2px solid ${t.colors.primary600};
+    }
+  }
+`;
+export {
+  e as buttonFocusStyle,
+  s as getThemeSize,
+  p as inputFocusStyle
+};

package/dist/v2/Breadcrumbs/Breadcrumbs.cjs

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("react"),f=require("prop-types"),m=require("styled-components"),p=require("./Divider.cjs"),a=require("../../Flex/Flex.cjs"),y=require("../../Box/Box.cjs"),l=e=>e&&e.__esModule?e:{default:e},r=l(f),b=l(m),g=b.default(a.Flex)`
+  // CrumbLinks do have padding-x, because they need to have a
+  // interaction effect, which mis-aligns the breadcrumbs on the left.
+  // This normalizes the behavior by moving the first item to left by
+  // the same amount it has inner padding
+  :first-child {
+    margin-left: ${({theme:e})=>`calc(-1*${e.spaces[2]})`};
+  }
+`,s=({label:e,children:d,...o})=>{const i=n.Children.toArray(d);return t.jsx(y.Box,{"aria-label":e,...o,children:t.jsx(g,{as:"ol",horizontal:!0,children:n.Children.map(i,(u,c)=>{const h=i.length>1&&c+1<i.length;return t.jsxs(a.Flex,{inline:!0,as:"li",children:[u,h&&t.jsx(p.Divider,{})]})})})})};s.displayName="Breadcrumbs";s.propTypes={children:r.default.oneOfType([r.default.arrayOf(r.default.node),r.default.node]).isRequired,label:r.default.string.isRequired};exports.Breadcrumbs=s;

package/dist/v2/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,33 @@
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { Children as o } from "react";
+import e from "prop-types";
+import p from "styled-components";
+import { Divider as f } from "./Divider.js";
+import { Flex as n } from "../../Flex/Flex.js";
+import { Box as u } from "../../Box/Box.js";
+const y = p(n)`
+  // CrumbLinks do have padding-x, because they need to have a
+  // interaction effect, which mis-aligns the breadcrumbs on the left.
+  // This normalizes the behavior by moving the first item to left by
+  // the same amount it has inner padding
+  :first-child {
+    margin-left: ${({ theme: r }) => `calc(-1*${r.spaces[2]})`};
+  }
+`, a = ({ label: r, children: s, ...l }) => {
+  const i = o.toArray(s);
+  return /* @__PURE__ */ t(u, { "aria-label": r, ...l, children: /* @__PURE__ */ t(y, { as: "ol", horizontal: !0, children: o.map(i, (m, d) => {
+    const h = i.length > 1 && d + 1 < i.length;
+    return /* @__PURE__ */ c(n, { inline: !0, as: "li", children: [
+      m,
+      h && /* @__PURE__ */ t(f, {})
+    ] });
+  }) }) });
+};
+a.displayName = "Breadcrumbs";
+a.propTypes = {
+  children: e.oneOfType([e.arrayOf(e.node), e.node]).isRequired,
+  label: e.string.isRequired
+};
+export {
+  a as Breadcrumbs
+};

package/dist/v2/Breadcrumbs/Crumb.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime");require("react");const a=require("prop-types"),u=require("../../Box/Box.cjs"),d=require("../../Typography/Typography.cjs"),p=e=>e&&e.__esModule?e:{default:e},i=p(a),r=({children:e,isCurrent:t,...n})=>o.jsx(u.Box,{paddingLeft:2,paddingRight:2,paddingTop:1,paddingBottom:1,children:o.jsx(d.Typography,{variant:"pi",textColor:"neutral800",fontWeight:t?"bold":"normal","aria-current":t,...n,children:e})});r.displayName="Crumb";r.defaultProps={isCurrent:!1};r.propTypes={children:i.default.node.isRequired,isCurrent:i.default.bool};exports.Crumb=r;

package/dist/v2/Breadcrumbs/Crumb.js

@@ -0,0 +1,27 @@
+import { jsx as p } from "react/jsx-runtime";
+import "react";
+import i from "prop-types";
+import { Box as a } from "../../Box/Box.js";
+import { Typography as d } from "../../Typography/Typography.js";
+const r = ({ children: t, isCurrent: o, ...e }) => /* @__PURE__ */ p(a, { paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, children: /* @__PURE__ */ p(
+  d,
+  {
+    variant: "pi",
+    textColor: "neutral800",
+    fontWeight: o ? "bold" : "normal",
+    "aria-current": o,
+    ...e,
+    children: t
+  }
+) });
+r.displayName = "Crumb";
+r.defaultProps = {
+  isCurrent: !1
+};
+r.propTypes = {
+  children: i.node.isRequired,
+  isCurrent: i.bool
+};
+export {
+  r as Crumb
+};

package/dist/v2/Breadcrumbs/CrumbLink.cjs

@@ -0,0 +1,14 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime");require("react");const i=require("prop-types"),u=require("styled-components"),l=require("../../BaseLink/BaseLink.cjs"),t=e=>e&&e.__esModule?e:{default:e},r=t(i),d=t(u),a=d.default(l.BaseLink)`
+  border-radius: ${({theme:e})=>e.borderRadius};
+  color: ${({theme:e})=>e.colors.neutral600};
+  font-size: ${({theme:e})=>e.fontSizes[1]};
+  line-height: ${({theme:e})=>e.lineHeights[4]};
+  padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[2]}`};
+  text-decoration: none;
+
+  :hover,
+  :focus {
+    background-color: ${({theme:e})=>e.colors.neutral200};
+    color: ${({theme:e})=>e.colors.neutral700};
+  }
+`,o=({children:e,...s})=>n.jsx(a,{...s,children:e});o.displayName="CrumbLink";o.defaultProps={to:void 0};o.propTypes={children:r.default.node.isRequired,to:r.default.string};exports.CrumbLink=o;

package/dist/v2/Breadcrumbs/CrumbLink.js

@@ -0,0 +1,30 @@
+import { jsx as s } from "react/jsx-runtime";
+import "react";
+import e from "prop-types";
+import t from "styled-components";
+import { BaseLink as n } from "../../BaseLink/BaseLink.js";
+const d = t(n)`
+  border-radius: ${({ theme: o }) => o.borderRadius};
+  color: ${({ theme: o }) => o.colors.neutral600};
+  font-size: ${({ theme: o }) => o.fontSizes[1]};
+  line-height: ${({ theme: o }) => o.lineHeights[4]};
+  padding: ${({ theme: o }) => `${o.spaces[1]} ${o.spaces[2]}`};
+  text-decoration: none;
+
+  :hover,
+  :focus {
+    background-color: ${({ theme: o }) => o.colors.neutral200};
+    color: ${({ theme: o }) => o.colors.neutral700};
+  }
+`, r = ({ children: o, ...i }) => /* @__PURE__ */ s(d, { ...i, children: o });
+r.displayName = "CrumbLink";
+r.defaultProps = {
+  to: void 0
+};
+r.propTypes = {
+  children: e.node.isRequired,
+  to: e.string
+};
+export {
+  r as CrumbLink
+};

package/dist/v2/Breadcrumbs/CrumbSimpleMenu.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime");require("react");const s=require("@strapi/icons"),i=require("prop-types"),l=require("styled-components"),a=require("../SimpleMenu/SimpleMenu.cjs"),d=require("../../Button/Button.cjs"),o=e=>e&&e.__esModule?e:{default:e},r=o(i),c=o(l),p=c.default(d.Button)`
+  padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[3]}`};
+
+  :hover,
+  :focus {
+    background-color: ${({theme:e})=>e.colors.neutral200};
+  }
+`,t=({children:e,...n})=>u.jsx(a.SimpleMenu,{noBorder:!0,icon:u.jsx(s.CarretDown,{}),as:p,size:"S",...n,children:e});t.displayName="CrumbSimpleMenu";t.propTypes={"aria-label":r.default.string.isRequired,children:r.default.oneOfType([r.default.arrayOf(r.default.node),r.default.node]).isRequired};exports.CrumbSimpleMenu=t;

package/dist/v2/Breadcrumbs/CrumbSimpleMenu.js

@@ -0,0 +1,23 @@
+import { jsx as e } from "react/jsx-runtime";
+import "react";
+import { CarretDown as t } from "@strapi/icons";
+import o from "prop-types";
+import m from "styled-components";
+import { SimpleMenu as n } from "../SimpleMenu/SimpleMenu.js";
+import { Button as s } from "../../Button/Button.js";
+const a = m(s)`
+  padding: ${({ theme: r }) => `${r.spaces[1]} ${r.spaces[3]}`};
+
+  :hover,
+  :focus {
+    background-color: ${({ theme: r }) => r.colors.neutral200};
+  }
+`, i = ({ children: r, ...p }) => /* @__PURE__ */ e(n, { noBorder: !0, icon: /* @__PURE__ */ e(t, {}), as: a, size: "S", ...p, children: r });
+i.displayName = "CrumbSimpleMenu";
+i.propTypes = {
+  "aria-label": o.string.isRequired,
+  children: o.oneOfType([o.arrayOf(o.node), o.node]).isRequired
+};
+export {
+  i as CrumbSimpleMenu
+};

package/dist/v2/Breadcrumbs/Divider.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("react");const i=require("../../Box/Box.cjs"),t=require("../../Typography/Typography.cjs"),r=()=>e.jsx(i.Box,{"aria-hidden":!0,paddingLeft:1,paddingRight:1,children:e.jsx(t.Typography,{variant:"pi",textColor:"neutral500",children:"/"})});r.displayName="Divider";exports.Divider=r;

package/dist/v2/Breadcrumbs/Divider.js

@@ -0,0 +1,9 @@
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import { Box as i } from "../../Box/Box.js";
+import { Typography as t } from "../../Typography/Typography.js";
+const o = () => /* @__PURE__ */ r(i, { "aria-hidden": !0, paddingLeft: 1, paddingRight: 1, children: /* @__PURE__ */ r(t, { variant: "pi", textColor: "neutral500", children: "/" }) });
+o.displayName = "Divider";
+export {
+  o as Divider
+};

package/dist/v2/Breadcrumbs/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./Breadcrumbs.cjs"),e=require("./Crumb.cjs"),u=require("./CrumbLink.cjs"),m=require("./CrumbSimpleMenu.cjs");exports.Breadcrumbs=r.Breadcrumbs;exports.Crumb=e.Crumb;exports.CrumbLink=u.CrumbLink;exports.CrumbSimpleMenu=m.CrumbSimpleMenu;

package/dist/v2/Breadcrumbs/index.js

@@ -0,0 +1,10 @@
+import { Breadcrumbs as o } from "./Breadcrumbs.js";
+import { Crumb as p } from "./Crumb.js";
+import { CrumbLink as b } from "./CrumbLink.js";
+import { CrumbSimpleMenu as t } from "./CrumbSimpleMenu.js";
+export {
+  o as Breadcrumbs,
+  p as Crumb,
+  b as CrumbLink,
+  t as CrumbSimpleMenu
+};

package/dist/v2/Link/Link.cjs

@@ -0,0 +1,25 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),p=require("react"),d=require("@strapi/icons"),f=require("styled-components"),y=require("../../themes/utils.cjs"),m=require("../../BaseLink/BaseLink.cjs"),x=require("../../Typography/Typography.cjs"),i=e=>e&&e.__esModule?e:{default:e},g=i(p),k=i(f),q=k.default(m.BaseLink)`
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  gap: ${({theme:e})=>e.spaces[2]};
+  pointer-events: ${({disabled:e})=>e?"none":void 0};
+
+  svg {
+    font-size: ${10/16}rem;
+
+    path {
+      fill: ${({disabled:e,theme:r})=>e?r.colors.neutral600:r.colors.primary600};
+    }
+  }
+
+  &:hover {
+    color: ${({theme:e})=>e.colors.primary500};
+  }
+
+  &:active {
+    color: ${({theme:e})=>e.colors.primary700};
+  }
+
+  ${y.buttonFocusStyle};
+`,l=g.default.forwardRef(({children:e,href:r,disabled:o=!1,startIcon:a,endIcon:n,isExternal:s=!0,...c},u)=>t.jsxs(q,{ref:u,href:r,disabled:o,isExternal:s,...c,children:[a,t.jsx(x.Typography,{textColor:o?"neutral600":"primary600",children:e}),n,r&&!n&&s&&t.jsx(d.ExternalLink,{})]}));l.displayName="Link";exports.Link=l;

package/dist/v2/Link/Link.js

@@ -0,0 +1,36 @@
+import { jsxs as s, jsx as n } from "react/jsx-runtime";
+import m from "react";
+import { ExternalLink as f } from "@strapi/icons";
+import c from "styled-components";
+import { buttonFocusStyle as y } from "../../themes/utils.js";
+import { BaseLink as d } from "../../BaseLink/BaseLink.js";
+import { Typography as u } from "../../Typography/Typography.js";
+const x = c(d)`
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  gap: ${({ theme: r }) => r.spaces[2]};
+  pointer-events: ${({ disabled: r }) => r ? "none" : void 0};
+
+  svg {
+    font-size: ${10 / 16}rem;
+
+    path {
+      fill: ${({ disabled: r, theme: o }) => r ? o.colors.neutral600 : o.colors.primary600};
+    }
+  }
+
+  &:hover {
+    color: ${({ theme: r }) => r.colors.primary500};
+  }
+
+  &:active {
+    color: ${({ theme: r }) => r.colors.primary700};
+  }
+
+  ${y};
+`, $ = m.forwardRef(({ children: r, href: o, disabled: e = !1, startIcon: a, endIcon: t, isExternal: i = !0, ...l }, p) => s(x, { ref: p, href: o, disabled: e, isExternal: i, ...l, children: [a, n(u, { textColor: e ? "neutral600" : "primary600", children: r }), t, o && !t && i && n(f, {})] }));
+$.displayName = "Link";
+export {
+  $ as Link
+};

package/dist/v2/Link/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Link.cjs");exports.Link=e.Link;

package/dist/v2/Link/index.js

@@ -0,0 +1,4 @@
+import { Link as e } from "./Link.js";
+export {
+  e as Link
+};

package/dist/v2/LinkButton/LinkButton.cjs

@@ -0,0 +1,20 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),b=require("react"),x=require("styled-components"),t=require("../../Button/utils.cjs"),B=require("../../BaseButton/BaseButton.cjs"),s=require("../../BaseLink/BaseLink.cjs"),l=require("../../Flex/Flex.cjs"),S=require("../../Typography/Typography.cjs"),c=e=>e&&e.__esModule?e:{default:e},v=c(b),k=c(x),q=k.default(B.BaseButtonWrapper)`
+  text-decoration: none;
+
+  &[aria-disabled='true'] {
+    ${t.getDisabledStyle}
+    &:active {
+      ${t.getDisabledStyle}
+    }
+  }
+
+  &:hover {
+    ${t.getHoverStyle}
+  }
+
+  &:active {
+    ${t.getActiveStyle}
+  }
+
+  ${t.getVariantStyle}
+`,p=v.default.forwardRef(({variant:e="default",startIcon:i,endIcon:a,disabled:o=!1,children:g,size:r="S",as:f=s.BaseLink,...y},h)=>{const d=r==="S"?2:"10px",u=4;return n.jsxs(q,{ref:h,"aria-disabled":o,size:r,variant:e,background:"buttonPrimary600",borderColor:"buttonPrimary600",hasRadius:!0,gap:2,inline:!0,paddingBottom:d,paddingLeft:u,paddingRight:u,paddingTop:d,pointerEvents:o?"none":void 0,...y,as:f||s.BaseLink,children:[i&&n.jsx(l.Flex,{"aria-hidden":!0,children:i}),n.jsx(S.Typography,{variant:r==="S"?"pi":void 0,fontWeight:"bold",textColor:"buttonNeutral0",children:g}),a&&n.jsx(l.Flex,{"aria-hidden":!0,children:a})]})});p.displayName="LinkButton";exports.LinkButton=p;

package/dist/v2/LinkButton/LinkButton.js

@@ -0,0 +1,35 @@
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import h from "react";
+import y from "styled-components";
+import { getDisabledStyle as d, getHoverStyle as b, getActiveStyle as v, getVariantStyle as x } from "../../Button/utils.js";
+import { BaseButtonWrapper as S } from "../../BaseButton/BaseButton.js";
+import { BaseLink as p } from "../../BaseLink/BaseLink.js";
+import { Flex as l } from "../../Flex/Flex.js";
+import { Typography as B } from "../../Typography/Typography.js";
+const k = y(S)`
+  text-decoration: none;
+
+  &[aria-disabled='true'] {
+    ${d}
+    &:active {
+      ${d}
+    }
+  }
+
+  &:hover {
+    ${b}
+  }
+
+  &:active {
+    ${v}
+  }
+
+  ${x}
+`, L = h.forwardRef(({ variant: m = "default", startIcon: e, endIcon: i, disabled: o = !1, children: u, size: t = "S", as: f = p, ...s }, g) => {
+  const a = t === "S" ? 2 : "10px", n = 4;
+  return c(k, { ref: g, "aria-disabled": o, size: t, variant: m, background: "buttonPrimary600", borderColor: "buttonPrimary600", hasRadius: !0, gap: 2, inline: !0, paddingBottom: a, paddingLeft: n, paddingRight: n, paddingTop: a, pointerEvents: o ? "none" : void 0, ...s, as: f || p, children: [e && r(l, { "aria-hidden": !0, children: e }), r(B, { variant: t === "S" ? "pi" : void 0, fontWeight: "bold", textColor: "buttonNeutral0", children: u }), i && r(l, { "aria-hidden": !0, children: i })] });
+});
+L.displayName = "LinkButton";
+export {
+  L as LinkButton
+};

package/dist/v2/LinkButton/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./LinkButton.cjs");exports.LinkButton=t.LinkButton;

package/dist/v2/LinkButton/index.js

@@ -0,0 +1,4 @@
+import { LinkButton as n } from "./LinkButton.js";
+export {
+  n as LinkButton
+};

package/dist/v2/MainNav/MainNav.cjs

@@ -0,0 +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)`
+  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;

package/dist/v2/MainNav/MainNav.js

@@ -0,0 +1,33 @@
+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
+};
+export {
+  t as MainNav
+};

package/dist/v2/MainNav/MainNavContext.cjs

@@ -0,0 +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;

package/dist/v2/MainNav/MainNavContext.js

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

package/dist/v2/MainNav/NavBrand.cjs

@@ -0,0 +1,12 @@
+"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`
+  border-radius: ${({theme:e})=>e.borderRadius};
+
+  svg,
+  img {
+    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)`
+  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;

package/dist/v2/MainNav/NavBrand.js

@@ -0,0 +1,50 @@
+import { jsx as e, jsxs as i } 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 { 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`
+  border-radius: ${({ theme: r }) => r.borderRadius};
+
+  svg,
+  img {
+    height: ${({ condensed: r }) => r ? `${40 / 16}rem` : `${32 / 16}rem`};
+    width: ${({ condensed: r }) => r ? `${40 / 16}rem` : `${32 / 16}rem`};
+  }
+`, R = h(g)`
+  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
+};
+export {
+  t as NavBrand
+};

package/dist/v2/MainNav/NavCondense.cjs

@@ -0,0 +1,20 @@
+"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`
+  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]};
+  transform: ${({condensed:e})=>e?"translateX(50%)":void 0};
+  z-index: 2;
+  width: ${18/16}rem;
+  height: ${25/16}rem;
+
+  svg {
+    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;

package/dist/v2/MainNav/NavCondense.js

@@ -0,0 +1,40 @@
+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`
+  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]};
+  transform: ${({ condensed: r }) => r ? "translateX(50%)" : void 0};
+  z-index: 2;
+  width: ${18 / 16}rem;
+  height: ${25 / 16}rem;
+
+  svg {
+    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
+};
+export {
+  c as NavCondense
+};

package/dist/v2/MainNav/NavFooter.cjs

@@ -0,0 +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;

package/dist/v2/MainNav/NavFooter.js

@@ -0,0 +1,12 @@
+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
+};
+export {
+  o as NavFooter
+};

package/dist/v2/MainNav/NavLink.cjs

@@ -0,0 +1,69 @@
+"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)`
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+`,g=n.default(m.BaseLink)`
+  position: relative;
+  text-decoration: none;
+  display: block;
+  border-radius: ${({theme:e})=>e.borderRadius};
+  background: ${({theme:e})=>e.colors.neutral0};
+
+  ${o.Typography} {
+    color: ${({theme:e})=>e.colors.neutral600};
+  }
+
+  svg path {
+    fill: ${({theme:e})=>e.colors.neutral500};
+  }
+
+  &:hover {
+    background: ${({theme:e})=>e.colors.neutral100};
+
+    ${o.Typography} {
+      color: ${({theme:e})=>e.colors.neutral700};
+    }
+
+    svg path {
+      fill: ${({theme:e})=>e.colors.neutral600};
+    }
+  }
+
+  &.active {
+    background: ${({theme:e})=>e.colors.primary100};
+
+    svg path {
+      fill: ${({theme:e})=>e.colors.primary600};
+    }
+
+    ${o.Typography} {
+      color: ${({theme:e})=>e.colors.primary600};
+      font-weight: 500;
+    }
+  }
+`,h=n.default(y.Flex)`
+  padding: ${({theme:e})=>`${e.spaces[2]} ${e.spaces[3]}`};
+`,f=n.default(q.Badge)`
+  ${({theme:e,condensed:s})=>s&&`
+	  position: absolute;
+    // Values based on visual aspect 
+    top: -${e.spaces[3]};
+    right:  -${e.spaces[1]};
+  `}
+
+  ${o.Typography} {
+    //find a solution to remove !important
+    color: ${({theme:e})=>e.colors.neutral0} !important;
+    line-height: 0;
+  }
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: ${({theme:e})=>e.spaces[6]};
+  height: ${({theme:e})=>e.spaces[5]};
+  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;