@strapi/design-system 0.0.0-jsoninput.0

package/dist/v2/Link/Link.cjs

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

package/dist/v2/Link/Link.js

@@ -0,0 +1,91 @@
+var x = Object.defineProperty;
+var i = Object.getOwnPropertySymbols;
+var c = Object.prototype.hasOwnProperty, f = Object.prototype.propertyIsEnumerable;
+var m = (e, r, t) => r in e ? x(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, y = (e, r) => {
+  for (var t in r || (r = {}))
+    c.call(r, t) && m(e, t, r[t]);
+  if (i)
+    for (var t of i(r))
+      f.call(r, t) && m(e, t, r[t]);
+  return e;
+};
+var u = (e, r) => {
+  var t = {};
+  for (var o in e)
+    c.call(e, o) && r.indexOf(o) < 0 && (t[o] = e[o]);
+  if (e != null && i)
+    for (var o of i(e))
+      r.indexOf(o) < 0 && f.call(e, o) && (t[o] = e[o]);
+  return t;
+};
+import n from "react";
+import a from "prop-types";
+import v from "styled-components";
+import E from "@strapi/icons/ExternalLink";
+import { Typography as L } from "../../Typography/Typography.js";
+import { Box as k } from "../../Box/Box.js";
+import { buttonFocusStyle as $ } from "../../themes/utils.js";
+import { BaseLink as R } from "../../BaseLink/BaseLink.js";
+const T = v(R)`
+  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};
+  }
+
+  ${$};
+`, p = v(k)`
+  display: flex;
+`, s = n.forwardRef((b, h) => {
+  var d = b, { children: e, href: r, disabled: t, startIcon: o, endIcon: l } = d, g = u(d, ["children", "href", "disabled", "startIcon", "endIcon"]);
+  return /* @__PURE__ */ n.createElement(T, y({
+    ref: h,
+    href: r,
+    disabled: t
+  }, g), o && /* @__PURE__ */ n.createElement(p, {
+    as: "span",
+    "aria-hidden": !0,
+    paddingRight: 2
+  }, o), /* @__PURE__ */ n.createElement(L, {
+    textColor: t ? "neutral600" : "primary600"
+  }, e), l && /* @__PURE__ */ n.createElement(p, {
+    as: "span",
+    "aria-hidden": !0,
+    paddingLeft: 2
+  }, l), r && !l && /* @__PURE__ */ n.createElement(p, {
+    as: "span",
+    "aria-hidden": !0,
+    paddingLeft: 2
+  }, /* @__PURE__ */ n.createElement(E, null)));
+});
+s.displayName = "Link";
+s.defaultProps = {
+  as: void 0,
+  href: void 0,
+  disabled: !1,
+  startIcon: void 0,
+  endIcon: void 0
+};
+s.propTypes = {
+  as: a.elementType,
+  children: a.node.isRequired,
+  disabled: a.bool,
+  endIcon: a.element,
+  href: a.string,
+  startIcon: a.element
+};
+export {
+  s 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,33 @@
+"use strict";var x=Object.defineProperty,q=Object.defineProperties;var _=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable;var B=(e,t,a)=>t in e?x(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,v=(e,t)=>{for(var a in t||(t={}))b.call(t,a)&&B(e,a,t[a]);if(d)for(var a of d(t))g.call(t,a)&&B(e,a,t[a]);return e},h=(e,t)=>q(e,_(t));var m=(e,t)=>{var a={};for(var o in e)b.call(e,o)&&t.indexOf(o)<0&&(a[o]=e[o]);if(e!=null&&d)for(var o of d(e))t.indexOf(o)<0&&g.call(e,o)&&(a[o]=e[o]);return a};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const j=require("react"),E=require("styled-components"),R=require("prop-types"),l=require("../../Typography/Typography.cjs"),u=require("../../Box/Box.cjs"),i=require("../../Button/utils.cjs"),$=require("../../Button/constants.cjs"),P=require("../../BaseButton/BaseButton.cjs"),T=require("../../BaseLink/BaseLink.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=c(j),I=c(E),r=c(R),N=I.default(P.BaseButtonWrapper)`
+  padding: ${({theme:e,size:t})=>`${t==="S"?e.spaces[2]:"10px"} ${e.spaces[4]}`};
+  background: ${({theme:e})=>e.colors.buttonPrimary600};
+  border: 1px solid ${({theme:e})=>e.colors.buttonPrimary600};
+  border-radius: ${({theme:e})=>e.borderRadius};
+  ${u.Box} {
+    display: flex;
+    align-items: center;
+  }
+  ${l.Typography} {
+    color: ${({theme:e})=>e.colors.buttonNeutral0};
+  }
+  &[aria-disabled='true'] {
+    ${i.getDisabledStyle}
+    &:active {
+      ${i.getDisabledStyle}
+    }
+  }
+  &:hover {
+    ${i.getHoverStyle}
+  }
+  &:active {
+    ${i.getActiveStyle}
+  }
+  ${i.getVariantStyle}
+
+  /**
+    Link specific properties
+  */
+  display: inline-flex;
+  text-decoration: none;
+  pointer-events: ${({disabled:e})=>e?"none":void 0};
+`,s=n.default.forwardRef((O,L)=>{var y=O,{variant:e,startIcon:t,endIcon:a,disabled:o,children:f,size:p,as:k}=y,S=m(y,["variant","startIcon","endIcon","disabled","children","size","as"]);return n.default.createElement(N,h(v({ref:L,"aria-disabled":o,size:p,variant:e},S),{as:k||T.BaseLink}),t&&n.default.createElement(u.Box,{"aria-hidden":!0,paddingRight:2},t),p==="S"?n.default.createElement(l.Typography,{variant:"pi",fontWeight:"bold"},f):n.default.createElement(l.Typography,{fontWeight:"bold"},f),a&&n.default.createElement(u.Box,{"aria-hidden":!0,paddingLeft:2},a))});s.displayName="LinkButton";s.defaultProps={as:T.BaseLink,disabled:!1,startIcon:void 0,endIcon:void 0,size:"S",variant:"default",onClick:void 0,href:void 0,to:void 0};s.propTypes={as:r.default.elementType,children:r.default.node.isRequired,disabled:r.default.bool,endIcon:r.default.element,href(e){if(!e.disabled&&!e.to&&!e.href)return new Error("href must be defined")},onClick:r.default.func,size:r.default.oneOf($.BUTTON_SIZES),startIcon:r.default.element,to(e){if(!e.disabled&&!e.href&&!e.to)return new Error("to must be defined")},variant:r.default.oneOf($.VARIANTS)};exports.LinkButton=s;

package/dist/v2/LinkButton/LinkButton.js

@@ -0,0 +1,119 @@
+var x = Object.defineProperty, B = Object.defineProperties;
+var T = Object.getOwnPropertyDescriptors;
+var n = Object.getOwnPropertySymbols;
+var u = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var c = (e, r, t) => r in e ? x(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, v = (e, r) => {
+  for (var t in r || (r = {}))
+    u.call(r, t) && c(e, t, r[t]);
+  if (n)
+    for (var t of n(r))
+      b.call(r, t) && c(e, t, r[t]);
+  return e;
+}, y = (e, r) => B(e, T(r));
+var $ = (e, r) => {
+  var t = {};
+  for (var o in e)
+    u.call(e, o) && r.indexOf(o) < 0 && (t[o] = e[o]);
+  if (e != null && n)
+    for (var o of n(e))
+      r.indexOf(o) < 0 && b.call(e, o) && (t[o] = e[o]);
+  return t;
+};
+import a from "react";
+import L from "styled-components";
+import i from "prop-types";
+import { Typography as d } from "../../Typography/Typography.js";
+import { Box as l } from "../../Box/Box.js";
+import { getDisabledStyle as g, getHoverStyle as R, getActiveStyle as I, getVariantStyle as N } from "../../Button/utils.js";
+import { BUTTON_SIZES as P, VARIANTS as W } from "../../Button/constants.js";
+import { BaseButtonWrapper as w } from "../../BaseButton/BaseButton.js";
+import { BaseLink as h } from "../../BaseLink/BaseLink.js";
+const A = L(w)`
+  padding: ${({ theme: e, size: r }) => `${r === "S" ? e.spaces[2] : "10px"} ${e.spaces[4]}`};
+  background: ${({ theme: e }) => e.colors.buttonPrimary600};
+  border: 1px solid ${({ theme: e }) => e.colors.buttonPrimary600};
+  border-radius: ${({ theme: e }) => e.borderRadius};
+  ${l} {
+    display: flex;
+    align-items: center;
+  }
+  ${d} {
+    color: ${({ theme: e }) => e.colors.buttonNeutral0};
+  }
+  &[aria-disabled='true'] {
+    ${g}
+    &:active {
+      ${g}
+    }
+  }
+  &:hover {
+    ${R}
+  }
+  &:active {
+    ${I}
+  }
+  ${N}
+
+  /**
+    Link specific properties
+  */
+  display: inline-flex;
+  text-decoration: none;
+  pointer-events: ${({ disabled: e }) => e ? "none" : void 0};
+`, s = a.forwardRef(
+  (O, E) => {
+    var p = O, { variant: e, startIcon: r, endIcon: t, disabled: o, children: f, size: m, as: S } = p, k = $(p, ["variant", "startIcon", "endIcon", "disabled", "children", "size", "as"]);
+    return /* @__PURE__ */ a.createElement(A, y(v({
+      ref: E,
+      "aria-disabled": o,
+      size: m,
+      variant: e
+    }, k), {
+      as: S || h
+    }), r && /* @__PURE__ */ a.createElement(l, {
+      "aria-hidden": !0,
+      paddingRight: 2
+    }, r), m === "S" ? /* @__PURE__ */ a.createElement(d, {
+      variant: "pi",
+      fontWeight: "bold"
+    }, f) : /* @__PURE__ */ a.createElement(d, {
+      fontWeight: "bold"
+    }, f), t && /* @__PURE__ */ a.createElement(l, {
+      "aria-hidden": !0,
+      paddingLeft: 2
+    }, t));
+  }
+);
+s.displayName = "LinkButton";
+s.defaultProps = {
+  as: h,
+  disabled: !1,
+  startIcon: void 0,
+  endIcon: void 0,
+  size: "S",
+  variant: "default",
+  onClick: void 0,
+  href: void 0,
+  to: void 0
+};
+s.propTypes = {
+  as: i.elementType,
+  children: i.node.isRequired,
+  disabled: i.bool,
+  endIcon: i.element,
+  href(e) {
+    if (!e.disabled && !e.to && !e.href)
+      return new Error("href must be defined");
+  },
+  onClick: i.func,
+  size: i.oneOf(P),
+  startIcon: i.element,
+  to(e) {
+    if (!e.disabled && !e.href && !e.to)
+      return new Error("to must be defined");
+  },
+  variant: i.oneOf(W)
+};
+export {
+  s 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,9 @@
+"use strict";var f=Object.defineProperty;var a=Object.getOwnPropertySymbols;var c=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable;var i=(e,t,r)=>t in e?f(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,l=(e,t)=>{for(var r in t||(t={}))c.call(t,r)&&i(e,r,t[r]);if(a)for(var r of a(t))d.call(t,r)&&i(e,r,t[r]);return e};var u=(e,t)=>{var r={};for(var o in e)c.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&a)for(var o of a(e))t.indexOf(o)<0&&d.call(e,o)&&(r[o]=e[o]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("react"),y=require("styled-components"),_=require("prop-types"),M=require("../../Grid/Grid.cjs");require("../../Grid/GridItem.cjs");const m=require("./MainNavContext.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},p=n(v),b=n(y),g=n(_),q=b.default(M.Grid)`
+  width: ${({condensed:e})=>e?"max-content":`${224/16}rem`};
+  background: ${({theme:e})=>e.colors.neutral0};
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  z-index: 2;
+  border-right: 1px solid ${({theme:e})=>e.colors.neutral150};
+`,s=r=>{var o=r,{condensed:e}=o,t=u(o,["condensed"]);return p.default.createElement(m.MainNavContext.Provider,{value:e},p.default.createElement(q,l({as:"nav",condensed:e},t)))};s.defaultProps={condensed:!1};s.propTypes={condensed:g.default.bool};exports.MainNav=s;

package/dist/v2/MainNav/MainNav.js

@@ -0,0 +1,52 @@
+var c = Object.defineProperty;
+var a = Object.getOwnPropertySymbols;
+var n = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var i = (o, r, e) => r in o ? c(o, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[r] = e, m = (o, r) => {
+  for (var e in r || (r = {}))
+    n.call(r, e) && i(o, e, r[e]);
+  if (a)
+    for (var e of a(r))
+      p.call(r, e) && i(o, e, r[e]);
+  return o;
+};
+var s = (o, r) => {
+  var e = {};
+  for (var t in o)
+    n.call(o, t) && r.indexOf(t) < 0 && (e[t] = o[t]);
+  if (o != null && a)
+    for (var t of a(o))
+      r.indexOf(t) < 0 && p.call(o, t) && (e[t] = o[t]);
+  return e;
+};
+import l from "react";
+import f from "styled-components";
+import u from "prop-types";
+import { Grid as v } from "../../Grid/Grid.js";
+import "../../Grid/GridItem.js";
+import { MainNavContext as h } from "./MainNavContext.js";
+const x = f(v)`
+  width: ${({ condensed: o }) => o ? "max-content" : `${224 / 16}rem`};
+  background: ${({ theme: o }) => o.colors.neutral0};
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  z-index: 2;
+  border-right: 1px solid ${({ theme: o }) => o.colors.neutral150};
+`, d = (e) => {
+  var t = e, { condensed: o } = t, r = s(t, ["condensed"]);
+  return /* @__PURE__ */ l.createElement(h.Provider, {
+    value: o
+  }, /* @__PURE__ */ l.createElement(x, m({
+    as: "nav",
+    condensed: o
+  }, r)));
+};
+d.defaultProps = {
+  condensed: !1
+};
+d.propTypes = {
+  condensed: u.bool
+};
+export {
+  d 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";var v=Object.defineProperty;var r=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var f=(e,a,t)=>a in e?v(e,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[a]=t,o=(e,a)=>{for(var t in a||(a={}))g.call(a,t)&&f(e,t,a[t]);if(r)for(var t of r(a))y.call(a,t)&&f(e,t,a[t]);return e};var m=(e,a)=>{var t={};for(var d in e)g.call(e,d)&&a.indexOf(d)<0&&(t[d]=e[d]);if(e!=null&&r)for(var d of r(e))a.indexOf(d)<0&&y.call(e,d)&&(t[d]=e[d]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("react"),L=require("prop-types"),R=require("styled-components"),s=require("../../Box/Box.cjs"),B=require("../../Typography/Typography.cjs"),_=require("../../Flex/Flex.cjs"),j=require("./MainNavContext.cjs"),x=require("../../VisuallyHidden/VisuallyHidden.cjs"),E=require("../../BaseLink/BaseLink.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=u(T),l=u(L),q=u(R),h=q.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`};
+  }
+`,N=q.default(E.BaseLink)`
+  text-decoration: unset;
+  color: inherit;
+`,i=n.default.forwardRef((b,c)=>{var p=b,{workplace:e,title:a,icon:t}=p,d=m(p,["workplace","title","icon"]);return j.useMainNav()?n.default.createElement(E.BaseLink,o({ref:c},d),n.default.createElement(s.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4},n.default.createElement(h,{condensed:!0},t,n.default.createElement(x.VisuallyHidden,null,n.default.createElement("span",null,a),n.default.createElement("span",null,e))))):n.default.createElement(N,o({ref:c},d),n.default.createElement(s.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4},n.default.createElement(_.Flex,null,n.default.createElement(h,{"aria-hidden":!0,tabIndex:-1},t),n.default.createElement(s.Box,{paddingLeft:2},n.default.createElement(B.Typography,{fontWeight:"bold",textColor:"neutral800",as:"span"},a,n.default.createElement(x.VisuallyHidden,{as:"span"},e)),n.default.createElement(B.Typography,{variant:"pi",as:"p",textColor:"neutral600","aria-hidden":!0},e)))))});i.displayName="NavBrand";i.defaultProps={to:"/"};i.propTypes={icon:l.default.node.isRequired,title:l.default.string.isRequired,to:l.default.string,workplace:l.default.string.isRequired};exports.NavBrand=i;

package/dist/v2/MainNav/NavBrand.js

@@ -0,0 +1,89 @@
+var y = Object.defineProperty;
+var i = Object.getOwnPropertySymbols;
+var u = Object.prototype.hasOwnProperty, g = Object.prototype.propertyIsEnumerable;
+var c = (e, r, t) => r in e ? y(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, d = (e, r) => {
+  for (var t in r || (r = {}))
+    u.call(r, t) && c(e, t, r[t]);
+  if (i)
+    for (var t of i(r))
+      g.call(r, t) && c(e, t, r[t]);
+  return e;
+};
+var f = (e, r) => {
+  var t = {};
+  for (var a in e)
+    u.call(e, a) && r.indexOf(a) < 0 && (t[a] = e[a]);
+  if (e != null && i)
+    for (var a of i(e))
+      r.indexOf(a) < 0 && g.call(e, a) && (t[a] = e[a]);
+  return t;
+};
+import n from "react";
+import o from "prop-types";
+import v from "styled-components";
+import { Box as m } from "../../Box/Box.js";
+import { Typography as E } from "../../Typography/Typography.js";
+import { Flex as B } from "../../Flex/Flex.js";
+import { useMainNav as $ } from "./MainNavContext.js";
+import { VisuallyHidden as h } from "../../VisuallyHidden/VisuallyHidden.js";
+import { BaseLink as x } from "../../BaseLink/BaseLink.js";
+const R = v.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`};
+  }
+`, L = v(x)`
+  text-decoration: unset;
+  color: inherit;
+`, p = n.forwardRef((N, l) => {
+  var s = N, { workplace: e, title: r, icon: t } = s, a = f(s, ["workplace", "title", "icon"]);
+  return $() ? /* @__PURE__ */ n.createElement(x, d({
+    ref: l
+  }, a), /* @__PURE__ */ n.createElement(m, {
+    paddingLeft: 3,
+    paddingRight: 3,
+    paddingTop: 4,
+    paddingBottom: 4
+  }, /* @__PURE__ */ n.createElement(R, {
+    condensed: !0
+  }, t, /* @__PURE__ */ n.createElement(h, null, /* @__PURE__ */ n.createElement("span", null, r), /* @__PURE__ */ n.createElement("span", null, e))))) : /* @__PURE__ */ n.createElement(L, d({
+    ref: l
+  }, a), /* @__PURE__ */ n.createElement(m, {
+    paddingLeft: 3,
+    paddingRight: 3,
+    paddingTop: 4,
+    paddingBottom: 4
+  }, /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(R, {
+    "aria-hidden": !0,
+    tabIndex: -1
+  }, t), /* @__PURE__ */ n.createElement(m, {
+    paddingLeft: 2
+  }, /* @__PURE__ */ n.createElement(E, {
+    fontWeight: "bold",
+    textColor: "neutral800",
+    as: "span"
+  }, r, /* @__PURE__ */ n.createElement(h, {
+    as: "span"
+  }, e)), /* @__PURE__ */ n.createElement(E, {
+    variant: "pi",
+    as: "p",
+    textColor: "neutral600",
+    "aria-hidden": !0
+  }, e)))));
+});
+p.displayName = "NavBrand";
+p.defaultProps = {
+  to: "/"
+};
+p.propTypes = {
+  icon: o.node.isRequired,
+  title: o.string.isRequired,
+  to: o.string,
+  workplace: o.string.isRequired
+};
+export {
+  p as NavBrand
+};

package/dist/v2/MainNav/NavCondense.cjs

@@ -0,0 +1,20 @@
+"use strict";var p=Object.defineProperty;var s=Object.getOwnPropertySymbols;var l=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable;var d=(e,t,n)=>t in e?p(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,c=(e,t)=>{for(var n in t||(t={}))l.call(t,n)&&d(e,n,t[n]);if(s)for(var n of s(t))u.call(t,n)&&d(e,n,t[n]);return e};var f=(e,t)=>{var n={};for(var o in e)l.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(e!=null&&s)for(var o of s(e))t.indexOf(o)<0&&u.call(e,o)&&(n[o]=e[o]);return n};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("react"),g=require("prop-types"),y=require("styled-components"),m=require("@strapi/icons/ChevronRight"),_=require("@strapi/icons/ChevronLeft"),b=require("../../Icon/Icon.cjs"),C=require("../../VisuallyHidden/VisuallyHidden.cjs"),$=require("./MainNavContext.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=r(v),q=r(g),R=r(y),j=r(m),N=r(_),x=R.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;
+  }
+`,h=n=>{var o=n,{children:e}=o,t=f(o,["children"]);const i=$.useMainNav();return a.default.createElement(x,c({as:"button",condensed:i},t),a.default.createElement(b.Icon,{as:i?j.default:N.default,"aria-hidden":!0,color:"neutral600"}),a.default.createElement(C.VisuallyHidden,null,e))};h.propTypes={children:q.default.string.isRequired};exports.NavCondense=h;

package/dist/v2/MainNav/NavCondense.js

@@ -0,0 +1,65 @@
+var c = Object.defineProperty;
+var n = Object.getOwnPropertySymbols;
+var d = Object.prototype.hasOwnProperty, m = Object.prototype.propertyIsEnumerable;
+var a = (e, r, t) => r in e ? c(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, l = (e, r) => {
+  for (var t in r || (r = {}))
+    d.call(r, t) && a(e, t, r[t]);
+  if (n)
+    for (var t of n(r))
+      m.call(r, t) && a(e, t, r[t]);
+  return e;
+};
+var p = (e, r) => {
+  var t = {};
+  for (var o in e)
+    d.call(e, o) && r.indexOf(o) < 0 && (t[o] = e[o]);
+  if (e != null && n)
+    for (var o of n(e))
+      r.indexOf(o) < 0 && m.call(e, o) && (t[o] = e[o]);
+  return t;
+};
+import i from "react";
+import h from "prop-types";
+import u from "styled-components";
+import f from "@strapi/icons/ChevronRight";
+import g from "@strapi/icons/ChevronLeft";
+import { Icon as $ } from "../../Icon/Icon.js";
+import { VisuallyHidden as b } from "../../VisuallyHidden/VisuallyHidden.js";
+import { useMainNav as v } from "./MainNavContext.js";
+const y = u.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;
+  }
+`, x = (t) => {
+  var o = t, { children: e } = o, r = p(o, ["children"]);
+  const s = v();
+  return /* @__PURE__ */ i.createElement(y, l({
+    as: "button",
+    condensed: s
+  }, r), /* @__PURE__ */ i.createElement($, {
+    as: s ? f : g,
+    "aria-hidden": !0,
+    color: "neutral600"
+  }), /* @__PURE__ */ i.createElement(b, null, e));
+};
+x.propTypes = {
+  children: h.string.isRequired
+};
+export {
+  x as NavCondense
+};

package/dist/v2/MainNav/NavLink.cjs

@@ -0,0 +1,69 @@
+"use strict";var j=Object.defineProperty;var s=Object.getOwnPropertySymbols;var m=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var y=(e,a,t)=>a in e?j(e,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[a]=t,d=(e,a)=>{for(var t in a||(a={}))m.call(a,t)&&y(e,t,a[t]);if(s)for(var t of s(a))h.call(a,t)&&y(e,t,a[t]);return e};var $=(e,a)=>{var t={};for(var r in e)m.call(e,r)&&a.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&s)for(var r of s(e))a.indexOf(r)<0&&h.call(e,r)&&(t[r]=e[r]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("react"),q=require("styled-components"),E=require("prop-types"),L=require("../../Box/Box.cjs"),B=require("../../Flex/Flex.cjs"),l=require("../../Typography/Typography.cjs"),N=require("./MainNavContext.cjs"),R=require("../../Tooltip/Tooltip.cjs"),_=require("../../Badge/Badge.cjs"),M=require("../../BaseLink/BaseLink.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=u(k),i=u(q),n=u(E),v=i.default(L.Box)`
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+`,b=i.default(M.BaseLink)`
+  position: relative;
+  text-decoration: none;
+  display: block;
+  border-radius: ${({theme:e})=>e.borderRadius};
+  background: ${({theme:e})=>e.colors.neutral0};
+
+  ${l.Typography} {
+    color: ${({theme:e})=>e.colors.neutral600};
+  }
+
+  svg path {
+    fill: ${({theme:e})=>e.colors.neutral500};
+  }
+
+  &:hover {
+    background: ${({theme:e})=>e.colors.neutral100};
+
+    ${l.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};
+    }
+
+    ${l.Typography} {
+      color: ${({theme:e})=>e.colors.primary600};
+      font-weight: 500;
+    }
+  }
+`,T=i.default(B.Flex)`
+  padding: ${({theme:e})=>`${e.spaces[2]} ${e.spaces[3]}`};
+`,x=i.default(_.Badge)`
+  ${({condensed:e})=>e&&`
+	  position: absolute;
+    transform: translate(35%, -50%);
+    top: 0;
+    right: 0;
+  `}
+
+  ${l.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};
+`,c=o.default.forwardRef((w,f)=>{var g=w,{children:e,icon:a,badgeContent:t,badgeAriaLabel:r}=g,p=$(g,["children","icon","badgeContent","badgeAriaLabel"]);return N.useMainNav()?o.default.createElement(b,d({ref:f},p),o.default.createElement(R.Tooltip,{position:"right",label:e},o.default.createElement(T,{as:"span",justifyContent:"center"},o.default.createElement(v,{"aria-hidden":!0,paddingRight:0,as:"span"},a),t&&o.default.createElement(x,{condensed:!0,"aria-label":r},t)))):o.default.createElement(b,d({ref:f},p),o.default.createElement(T,{as:"span",justifyContent:"space-between"},o.default.createElement(B.Flex,null,o.default.createElement(v,{"aria-hidden":!0,paddingRight:3,as:"span"},a),o.default.createElement(l.Typography,null,e)),t&&o.default.createElement(x,{justifyContent:"center","aria-label":r},t)))});c.displayName="NavLink";c.defaultProps={badgeContent:void 0,badgeAriaLabel:void 0};c.propTypes={badgeAriaLabel:n.default.string,badgeContent:n.default.oneOfType([n.default.string,n.default.number]),children:n.default.string.isRequired,icon:n.default.node.isRequired};exports.NavLink=c;