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

package/dist/v2/MainNav/MainNav.cjs

@@ -1,4 +1,4 @@
-"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)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),l=require("styled-components"),s=require("prop-types"),c=require("../../Flex/Flex.cjs"),i=require("./MainNavContext.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=t(r),u=t(l),d=t(s),p=u.default(c.Flex)`
   width: ${({condensed:e})=>e?"max-content":`${224/16}rem`};
   background: ${({theme:e})=>e.colors.neutral0};
   position: sticky;
@@ -6,4 +6,4 @@
   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;
+`,o=({condensed:e,...n})=>a.default.createElement(i.MainNavContext.Provider,{value:e},a.default.createElement(p,{as:"nav",alignItems:"normal",direction:"column",condensed:e,...n}));o.defaultProps={condensed:!1};o.propTypes={condensed:d.default.bool};exports.MainNav=o;

package/dist/v2/MainNav/MainNav.js

@@ -1,30 +1,9 @@
-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)`
+import e from "react";
+import n from "styled-components";
+import a from "prop-types";
+import { Flex as i } from "../../Flex/Flex.js";
+import { MainNavContext as l } from "./MainNavContext.js";
+const m = n(i)`
   width: ${({ condensed: o }) => o ? "max-content" : `${224 / 16}rem`};
   background: ${({ theme: o }) => o.colors.neutral0};
   position: sticky;
@@ -32,21 +11,21 @@ const x = f(v)`
   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 = {
+`, r = ({ condensed: o, ...t }) => /* @__PURE__ */ e.createElement(l.Provider, {
+  value: o
+}, /* @__PURE__ */ e.createElement(m, {
+  as: "nav",
+  alignItems: "normal",
+  direction: "column",
+  condensed: o,
+  ...t
+}));
+r.defaultProps = {
   condensed: !1
 };
-d.propTypes = {
-  condensed: u.bool
+r.propTypes = {
+  condensed: a.bool
 };
 export {
-  d as MainNav
+  r as MainNav
 };

package/dist/v2/MainNav/NavBrand.cjs

@@ -1,4 +1,4 @@
-"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`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react"),m=require("prop-types"),B=require("styled-components"),d=require("../../Box/Box.cjs"),u=require("../../Typography/Typography.cjs"),x=require("../../Flex/Flex.cjs"),h=require("./MainNavContext.cjs"),c=require("../../VisuallyHidden/VisuallyHidden.cjs"),f=require("../../BaseLink/BaseLink.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,
@@ -6,7 +6,7 @@
     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)`
+`,E=g.default(f.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;
+`,n=t.default.forwardRef(({workplace:e,title:l,icon:i,...o},s)=>h.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(x.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

@@ -1,89 +1,68 @@
-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};
+import e from "react";
+import r from "prop-types";
+import c from "styled-components";
+import { Box as n } from "../../Box/Box.js";
+import { Typography as p } from "../../Typography/Typography.js";
+import { Flex as g } from "../../Flex/Flex.js";
+import { useMainNav as f } from "./MainNavContext.js";
+import { VisuallyHidden as l } from "../../VisuallyHidden/VisuallyHidden.js";
+import { BaseLink as u } from "../../BaseLink/BaseLink.js";
+const s = c.div`
+  border-radius: ${({ theme: t }) => t.borderRadius};
 
   svg,
   img {
-    height: ${({ condensed: e }) => e ? `${40 / 16}rem` : `${32 / 16}rem`};
-    width: ${({ condensed: e }) => e ? `${40 / 16}rem` : `${32 / 16}rem`};
+    height: ${({ condensed: t }) => t ? `${40 / 16}rem` : `${32 / 16}rem`};
+    width: ${({ condensed: t }) => t ? `${40 / 16}rem` : `${32 / 16}rem`};
   }
-`, L = v(x)`
+`, E = c(u)`
   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 = {
+`, a = e.forwardRef(({ workplace: t, title: i, icon: o, ...d }, m) => f() ? /* @__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(g, 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: "/"
 };
-p.propTypes = {
-  icon: o.node.isRequired,
-  title: o.string.isRequired,
-  to: o.string,
-  workplace: o.string.isRequired
+a.propTypes = {
+  icon: r.node.isRequired,
+  title: r.string.isRequired,
+  to: r.string,
+  workplace: r.string.isRequired
 };
 export {
-  p as NavBrand
+  a as NavBrand
 };

package/dist/v2/MainNav/NavCondense.cjs

@@ -1,4 +1,4 @@
-"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`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),i=require("prop-types"),d=require("styled-components"),l=require("@strapi/icons/ChevronRight"),u=require("@strapi/icons/ChevronLeft"),c=require("../../Icon/Icon.cjs"),f=require("../../VisuallyHidden/VisuallyHidden.cjs"),h=require("./MainNavContext.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=t(a),p=t(i),v=t(d),g=t(l),y=t(u),m=v.default.button`
   background: ${({theme:e})=>e.colors.neutral0};
   border: 1px solid ${({theme:e})=>e.colors.neutral150};
   border-radius: ${({theme:e})=>e.borderRadius};
@@ -7,7 +7,7 @@
   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]};
+  right: ${({theme:e,condensed:n})=>n?0:e.spaces[5]};
   transform: ${({condensed:e})=>e?"translateX(50%)":void 0};
   z-index: 2;
   width: ${18/16}rem;
@@ -17,4 +17,4 @@
     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;
+`,s=({children:e,...n})=>{const r=h.useMainNav();return o.default.createElement(m,{as:"button",condensed:r,...n},o.default.createElement(c.Icon,{as:r?g.default:y.default,"aria-hidden":!0,color:"neutral600"}),o.default.createElement(f.VisuallyHidden,null,e))};s.propTypes={children:p.default.string.isRequired};exports.NavCondense=s;

package/dist/v2/MainNav/NavCondense.js

@@ -1,32 +1,12 @@
-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`
+import t from "react";
+import n from "prop-types";
+import i from "styled-components";
+import s from "@strapi/icons/ChevronRight";
+import a from "@strapi/icons/ChevronLeft";
+import { Icon as d } from "../../Icon/Icon.js";
+import { VisuallyHidden as m } from "../../VisuallyHidden/VisuallyHidden.js";
+import { useMainNav as l } from "./MainNavContext.js";
+const p = i.button`
   background: ${({ theme: e }) => e.colors.neutral0};
   border: 1px solid ${({ theme: e }) => e.colors.neutral150};
   border-radius: ${({ theme: e }) => e.borderRadius};
@@ -45,21 +25,21 @@ const y = u.button`
     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({
+`, c = ({ children: e, ...r }) => {
+  const o = l();
+  return /* @__PURE__ */ t.createElement(p, {
     as: "button",
-    condensed: s
-  }, r), /* @__PURE__ */ i.createElement($, {
-    as: s ? f : g,
+    condensed: o,
+    ...r
+  }, /* @__PURE__ */ t.createElement(d, {
+    as: o ? s : a,
     "aria-hidden": !0,
     color: "neutral600"
-  }), /* @__PURE__ */ i.createElement(b, null, e));
+  }), /* @__PURE__ */ t.createElement(m, null, e));
 };
-x.propTypes = {
-  children: h.string.isRequired
+c.propTypes = {
+  children: n.string.isRequired
 };
 export {
-  x as NavCondense
+  c as NavCondense
 };

package/dist/v2/MainNav/NavFooter.cjs

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

package/dist/v2/MainNav/NavFooter.js

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

package/dist/v2/MainNav/NavLink.cjs

@@ -1,16 +1,16 @@
-"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)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react"),m=require("styled-components"),v=require("prop-types"),b=require("../../Box/Box.cjs"),$=require("../../Flex/Flex.cjs"),o=require("../../Typography/Typography.cjs"),T=require("./MainNavContext.cjs"),x=require("../../Tooltip/Tooltip.cjs"),B=require("../../Badge/Badge.cjs"),j=require("../../BaseLink/BaseLink.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=i(h),s=i(m),a=i(v),p=s.default(b.Box)`
   svg {
     width: 1rem;
     height: 1rem;
   }
-`,b=i.default(M.BaseLink)`
+`,f=s.default(j.BaseLink)`
   position: relative;
   text-decoration: none;
   display: block;
   border-radius: ${({theme:e})=>e.borderRadius};
   background: ${({theme:e})=>e.colors.neutral0};
 
-  ${l.Typography} {
+  ${o.Typography} {
     color: ${({theme:e})=>e.colors.neutral600};
   }
 
@@ -21,7 +21,7 @@
   &:hover {
     background: ${({theme:e})=>e.colors.neutral100};
 
-    ${l.Typography} {
+    ${o.Typography} {
       color: ${({theme:e})=>e.colors.neutral700};
     }
 
@@ -37,22 +37,22 @@
       fill: ${({theme:e})=>e.colors.primary600};
     }
 
-    ${l.Typography} {
+    ${o.Typography} {
       color: ${({theme:e})=>e.colors.primary600};
       font-weight: 500;
     }
   }
-`,T=i.default(B.Flex)`
+`,g=s.default($.Flex)`
   padding: ${({theme:e})=>`${e.spaces[2]} ${e.spaces[3]}`};
-`,x=i.default(_.Badge)`
-  ${({condensed:e})=>e&&`
+`,y=s.default(B.Badge)`
+  ${({theme:e,condensed:r})=>r&&`
 	  position: absolute;
-    transform: translate(35%, -50%);
-    top: 0;
-    right: 0;
+    // Values based on visual aspect 
+    top: -${e.spaces[3]};
+    right:  -${e.spaces[1]};
   `}
 
-  ${l.Typography} {
+  ${o.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};
-`,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;
+`,l=t.default.forwardRef(({children:e,icon:r,badgeContent:n,badgeAriaLabel:c,...d},u)=>T.useMainNav()?t.default.createElement(f,{ref:u,...d},t.default.createElement(x.Tooltip,{position:"right",label:e},t.default.createElement(g,{as:"span",justifyContent:"center"},t.default.createElement(p,{"aria-hidden":!0,paddingRight:0,as:"span"},r),n&&t.default.createElement(y,{condensed:!0,"aria-label":c},n)))):t.default.createElement(f,{ref:u,...d},t.default.createElement(g,{as:"span",justifyContent:"space-between"},t.default.createElement($.Flex,null,t.default.createElement(p,{"aria-hidden":!0,paddingRight:3,as:"span"},r),t.default.createElement(o.Typography,null,e)),n&&t.default.createElement(y,{justifyContent:"center","aria-label":c},n))));l.displayName="NavLink";l.defaultProps={badgeContent:void 0,badgeAriaLabel:void 0};l.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=l;