@strapi/design-system 0.0.0-599b75fb-test

package/dist/themes/utils.js

@@ -0,0 +1,46 @@
+const i = (t) => ({ theme: o, size: r }) => o.sizes[t][r], n = (t = "&") => ({ theme: o, hasError: r }) => `
+      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;
+      }
+    `, s = ({ theme: t }) => `
+  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 {
+  s as buttonFocusStyle,
+  i as getThemeSize,
+  n as inputFocusStyle
+};

package/dist/v2/Breadcrumbs/Breadcrumbs.cjs

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),h=require("prop-types"),p=require("styled-components"),m=require("./Divider.cjs"),y=require("../../Box/Box.cjs"),s=require("../../Flex/Flex.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=i(l),t=i(h),b=i(p),g=b.default(s.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]})`};
+  }
+`,n=({label:e,children:o,...d})=>{const a=l.Children.toArray(o);return r.default.createElement(y.Box,{"aria-label":e,...d},r.default.createElement(g,{as:"ol",horizontal:!0},l.Children.map(a,(c,u)=>{const f=a.length>1&&u+1<a.length;return r.default.createElement(s.Flex,{inline:!0,as:"li"},c,f&&r.default.createElement(m.Divider,null))})))};n.displayName="Breadcrumbs";n.propTypes={children:t.default.oneOfType([t.default.arrayOf(t.default.node),t.default.node]).isRequired,label:t.default.string.isRequired};exports.Breadcrumbs=n;

package/dist/v2/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,29 @@
+import r, { Children as a } from "react";
+import e from "prop-types";
+import h from "styled-components";
+import { Divider as p } from "./Divider.js";
+import { Box as f } from "../../Box/Box.js";
+import { Flex as n } from "../../Flex/Flex.js";
+const u = h(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: t }) => `calc(-1*${t.spaces[2]})`};
+  }
+`, o = ({ label: t, children: l, ...s }) => {
+  const i = a.toArray(l);
+  return /* @__PURE__ */ r.createElement(f, { "aria-label": t, ...s }, /* @__PURE__ */ r.createElement(u, { as: "ol", horizontal: !0 }, a.map(i, (m, d) => {
+    const c = i.length > 1 && d + 1 < i.length;
+    return /* @__PURE__ */ r.createElement(n, { inline: !0, as: "li" }, m, c && /* @__PURE__ */ r.createElement(p, null));
+  })));
+};
+o.displayName = "Breadcrumbs";
+o.propTypes = {
+  children: e.oneOfType([e.arrayOf(e.node), e.node]).isRequired,
+  label: e.string.isRequired
+};
+export {
+  o as Breadcrumbs
+};

package/dist/v2/Breadcrumbs/Crumb.cjs

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

package/dist/v2/Breadcrumbs/Crumb.js

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

package/dist/v2/Breadcrumbs/CrumbLink.cjs

@@ -0,0 +1,14 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),a=require("prop-types"),i=require("styled-components"),l=require("../../BaseLink/BaseLink.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=o(n),r=o(a),u=o(i),d=u.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};
+  }
+`,t=({children:e,...s})=>c.default.createElement(d,{...s},e);t.displayName="CrumbLink";t.defaultProps={to:void 0};t.propTypes={children:r.default.node.isRequired,to:r.default.string};exports.CrumbLink=t;

package/dist/v2/Breadcrumbs/CrumbLink.js

@@ -0,0 +1,29 @@
+import i from "react";
+import e from "prop-types";
+import s from "styled-components";
+import { BaseLink as n } from "../../BaseLink/BaseLink.js";
+const l = s(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, ...t }) => /* @__PURE__ */ i.createElement(l, { ...t }, 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.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),s=require("@strapi/icons"),a=require("prop-types"),c=require("styled-components"),i=require("../../Button/Button.cjs"),d=require("../SimpleMenu/SimpleMenu.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=u(l),t=u(a),p=u(c),f=p.default(i.Button)`
+  padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[3]}`};
+
+  :hover,
+  :focus {
+    background-color: ${({theme:e})=>e.colors.neutral200};
+  }
+`,o=({children:e,...r})=>n.default.createElement(d.SimpleMenu,{noBorder:!0,icon:n.default.createElement(s.CarretDown,null),as:f,size:"S",...r},e);o.displayName="CrumbSimpleMenu";o.propTypes={"aria-label":t.default.string.isRequired,children:t.default.oneOfType([t.default.arrayOf(t.default.node),t.default.node]).isRequired};exports.CrumbSimpleMenu=o;

package/dist/v2/Breadcrumbs/CrumbSimpleMenu.js

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

package/dist/v2/Breadcrumbs/Divider.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),o=require("../../Box/Box.cjs"),i=require("../../Typography/Typography.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=d(a),r=()=>t.default.createElement(o.Box,{"aria-hidden":!0,paddingLeft:1,paddingRight:1},t.default.createElement(i.Typography,{variant:"pi",textColor:"neutral500"},"/"));r.displayName="Divider";exports.Divider=r;

package/dist/v2/Breadcrumbs/Divider.js

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

package/dist/v2/Breadcrumbs/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[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,23 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),y=require("@strapi/icons"),m=require("prop-types"),g=require("styled-components"),h=require("../../BaseLink/BaseLink.cjs"),v=require("../../Box/Box.cjs"),L=require("../../themes/utils.cjs"),k=require("../../Typography/Typography.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(f),a=l(m),u=l(g),q=u.default(h.BaseLink)`
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  pointer-events: ${({disabled:e})=>e?"none":void 0};
+
+  svg path {
+    fill: ${({disabled:e,theme:r})=>e?r.colors.neutral600:r.colors.primary600};
+  }
+
+  svg {
+    font-size: ${10/16}rem;
+  }
+
+  &:hover,
+  &:active {
+    color: ${({theme:e})=>e.colors.primary800};
+  }
+
+  ${L.buttonFocusStyle};
+`,s=u.default(v.Box)`
+  display: flex;
+`,n=t.default.forwardRef(({children:e,href:r,disabled:i,startIcon:d,endIcon:o,...c},p)=>t.default.createElement(q,{ref:p,href:r,disabled:i,...c},d&&t.default.createElement(s,{as:"span","aria-hidden":!0,paddingRight:2},d),t.default.createElement(k.Typography,{textColor:i?"neutral600":"primary600"},e),o&&t.default.createElement(s,{as:"span","aria-hidden":!0,paddingLeft:2},o),r&&!o&&t.default.createElement(s,{as:"span","aria-hidden":!0,paddingLeft:2},t.default.createElement(y.ExternalLink,null))));n.displayName="Link";n.defaultProps={as:void 0,href:void 0,disabled:!1,startIcon:void 0,endIcon:void 0};n.propTypes={as:a.default.elementType,children:a.default.node.isRequired,disabled:a.default.bool,endIcon:a.default.element,href:a.default.string,startIcon:a.default.element};exports.Link=n;

package/dist/v2/Link/Link.js

@@ -0,0 +1,50 @@
+import r from "react";
+import { ExternalLink as c } from "@strapi/icons";
+import t from "prop-types";
+import s from "styled-components";
+import { BaseLink as f } from "../../BaseLink/BaseLink.js";
+import { Box as y } from "../../Box/Box.js";
+import { buttonFocusStyle as u } from "../../themes/utils.js";
+import { Typography as v } from "../../Typography/Typography.js";
+const g = s(f)`
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  pointer-events: ${({ disabled: e }) => e ? "none" : void 0};
+
+  svg path {
+    fill: ${({ disabled: e, theme: o }) => e ? o.colors.neutral600 : o.colors.primary600};
+  }
+
+  svg {
+    font-size: ${10 / 16}rem;
+  }
+
+  &:hover,
+  &:active {
+    color: ${({ theme: e }) => e.colors.primary800};
+  }
+
+  ${u};
+`, a = s(y)`
+  display: flex;
+`, i = r.forwardRef(({ children: e, href: o, disabled: l, startIcon: p, endIcon: n, ...d }, m) => /* @__PURE__ */ r.createElement(g, { ref: m, href: o, disabled: l, ...d }, p && /* @__PURE__ */ r.createElement(a, { as: "span", "aria-hidden": !0, paddingRight: 2 }, p), /* @__PURE__ */ r.createElement(v, { textColor: l ? "neutral600" : "primary600" }, e), n && /* @__PURE__ */ r.createElement(a, { as: "span", "aria-hidden": !0, paddingLeft: 2 }, n), o && !n && /* @__PURE__ */ r.createElement(a, { as: "span", "aria-hidden": !0, paddingLeft: 2 }, /* @__PURE__ */ r.createElement(c, null))));
+i.displayName = "Link";
+i.defaultProps = {
+  as: void 0,
+  href: void 0,
+  disabled: !1,
+  startIcon: void 0,
+  endIcon: void 0
+};
+i.propTypes = {
+  as: t.elementType,
+  children: t.node.isRequired,
+  disabled: t.bool,
+  endIcon: t.element,
+  href: t.string,
+  startIcon: t.element
+};
+export {
+  i as Link
+};

package/dist/v2/Link/index.cjs

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

package/dist/v2/LinkButton/LinkButton.js

@@ -0,0 +1,73 @@
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import h from "react";
+import y from "styled-components";
+import { BaseButtonWrapper as b } from "../../BaseButton/BaseButton.js";
+import { BaseLink as d } from "../../BaseLink/BaseLink.js";
+import { getDisabledStyle as p, getHoverStyle as v, getActiveStyle as x, getVariantStyle as S } from "../../Button/utils.js";
+import { Flex as l } from "../../Flex/Flex.js";
+import { Typography as B } from "../../Typography/Typography.js";
+const k = y(b)`
+  text-decoration: none;
+
+  &[aria-disabled='true'] {
+    ${p}
+    &:active {
+      ${p}
+    }
+  }
+
+  &:hover {
+    ${v}
+  }
+
+  &:active {
+    ${x}
+  }
+
+  ${S}
+`, L = h.forwardRef(({
+  variant: m = "default",
+  startIcon: e,
+  endIcon: i,
+  disabled: o = !1,
+  children: u,
+  size: t = "S",
+  as: f = d,
+  ...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 || d,
+    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.defineProperties(exports,{__esModule:{value:!0},[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.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),l=require("prop-types"),s=require("styled-components"),c=require("./MainNavContext.cjs"),i=require("../../Flex/Flex.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=t(r),u=t(l),d=t(s),p=d.default(i.Flex)`
+  width: ${({condensed:e})=>e?"max-content":`${224/16}rem`};
+  border-right: 1px solid ${({theme:e})=>e.colors.neutral150};
+`,o=({condensed:e,...n})=>a.default.createElement(c.MainNavContext.Provider,{value:e},a.default.createElement(p,{alignItems:"normal",as:"nav",background:"neutral0",condensed:e,direction:"column",height:"100vh",position:"sticky",top:0,zIndex:2,...n}));o.defaultProps={condensed:!1};o.propTypes={condensed:u.default.bool};exports.MainNav=o;

package/dist/v2/MainNav/MainNav.js

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

package/dist/v2/MainNav/MainNavContext.cjs

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

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.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react"),m=require("prop-types"),B=require("styled-components"),x=require("./MainNavContext.cjs"),f=require("../../BaseLink/BaseLink.cjs"),d=require("../../Box/Box.cjs"),h=require("../../Flex/Flex.cjs"),u=require("../../Typography/Typography.cjs"),c=require("../../VisuallyHidden/VisuallyHidden.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(y),a=r(m),g=r(B),p=g.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`};
+  }
+`,E=g.default(f.BaseLink)`
+  text-decoration: unset;
+  color: inherit;
+`,n=t.default.forwardRef(({workplace:e,title:l,icon:i,...o},s)=>x.useMainNav()?t.default.createElement(f.BaseLink,{ref:s,...o},t.default.createElement(d.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4},t.default.createElement(p,{condensed:!0},i,t.default.createElement(c.VisuallyHidden,null,t.default.createElement("span",null,l),t.default.createElement("span",null,e))))):t.default.createElement(E,{ref:s,...o},t.default.createElement(d.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4},t.default.createElement(h.Flex,null,t.default.createElement(p,{"aria-hidden":!0,tabIndex:-1},i),t.default.createElement(d.Box,{paddingLeft:2},t.default.createElement(u.Typography,{fontWeight:"bold",textColor:"neutral800",as:"span"},l,t.default.createElement(c.VisuallyHidden,{as:"span"},e)),t.default.createElement(u.Typography,{variant:"pi",as:"p",textColor:"neutral600","aria-hidden":!0},e))))));n.displayName="NavBrand";n.defaultProps={to:"/"};n.propTypes={icon:a.default.node.isRequired,title:a.default.string.isRequired,to:a.default.string,workplace:a.default.string.isRequired};exports.NavBrand=n;

package/dist/v2/MainNav/NavBrand.js

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

package/dist/v2/MainNav/NavCondense.cjs

@@ -0,0 +1,20 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react"),s=require("@strapi/icons"),d=require("prop-types"),l=require("styled-components"),c=require("./MainNavContext.cjs"),u=require("../../Icon/Icon.cjs"),p=require("../../VisuallyHidden/VisuallyHidden.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=o(i),f=o(d),h=o(l),y=h.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;
+  }
+`,a=({children:e,...t})=>{const r=c.useMainNav();return n.default.createElement(y,{as:"button",condensed:r,...t},n.default.createElement(u.Icon,{as:r?s.ChevronRight:s.ChevronLeft,"aria-hidden":!0,color:"neutral600"}),n.default.createElement(p.VisuallyHidden,null,e))};a.propTypes={children:f.default.string.isRequired};exports.NavCondense=a;

package/dist/v2/MainNav/NavCondense.js

@@ -0,0 +1,36 @@
+import t from "react";
+import { ChevronRight as n, ChevronLeft as i } from "@strapi/icons";
+import s from "prop-types";
+import a from "styled-components";
+import { useMainNav as d } from "./MainNavContext.js";
+import { Icon as m } from "../../Icon/Icon.js";
+import { VisuallyHidden as l } from "../../VisuallyHidden/VisuallyHidden.js";
+const p = a.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: r }) => r ? 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;
+  }
+`, c = ({ children: e, ...r }) => {
+  const o = d();
+  return /* @__PURE__ */ t.createElement(p, { as: "button", condensed: o, ...r }, /* @__PURE__ */ t.createElement(m, { as: o ? n : i, "aria-hidden": !0, color: "neutral600" }), /* @__PURE__ */ t.createElement(l, null, e));
+};
+c.propTypes = {
+  children: s.string.isRequired
+};
+export {
+  c as NavCondense
+};

package/dist/v2/MainNav/NavFooter.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),a=require("prop-types"),s=require("../../Box/Box.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},u=o(r),c=o(a),t=({children:e})=>u.default.createElement(s.Box,{position:"relative"},e);t.displayName="NavFooter";t.propTypes={children:c.default.node.isRequired};exports.NavFooter=t;

package/dist/v2/MainNav/NavFooter.js

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